If app is displayed on mobile safari, show message prompting the user to add it to the home screen
This commit is contained in:
Martin Kleinschrodt
parent
f38d89fe8d
commit
a8a90ab330
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="192px" height="64px" viewBox="0 0 192 64" enable-background="new 0 0 192 64" xml:space="preserve">
|
||||
<g>
|
||||
<polygon fill="#59C6FF" points="40.75,11.578 42.164,10.164 32,0 21.836,10.164 23.25,11.578 31,3.828 31,35.486 33,35.486
|
||||
33,3.828 "/>
|
||||
<polygon fill="#59C6FF" points="37,19 37,21 50,21 50,55 14,55 14,21 27,21 27,19 12,19 12,57 52,57 52,19 "/>
|
||||
</g>
|
||||
<polygon fill="#333333" points="102.165,42.75 103.579,44.164 113.743,34 103.579,23.836 102.165,25.25 109.915,33 78.257,33
|
||||
78.257,35 109.915,35 "/>
|
||||
<g>
|
||||
<path fill="#59C6FF" d="M160,9c-13.809,0-25,11.191-25,25s11.191,25,25,25s25-11.191,25-25S173.809,9,160,9z M160,57
|
||||
c-12.682,0-23-10.318-23-23s10.318-23,23-23s23,10.318,23,23S172.682,57,160,57z"/>
|
||||
<polygon fill="#59C6FF" points="161,19 159,19 159,33 145.066,33 145.066,35 159,35 159,48.934 161,48.934 161,35 175,35 175,33
|
||||
161,33 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
|
||||
<rect x="-225" y="-145" display="none" fill="#F5F5F5" width="1442" height="1342"/>
|
||||
<g>
|
||||
<rect x="103" y="632" fill="#59C6FF" width="794" height="625"/>
|
||||
<path fill="none" stroke="#59C6FF" stroke-width="110" stroke-miterlimit="10" d="M778,688V533.991
|
||||
C778,380.461,653.531,256,500,256c-153.53,0-278,124.461-278,277.991V728"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 826 B |
|
|
@ -8,6 +8,7 @@
|
|||
<link rel="import" href="../settings-view/settings-view.html">
|
||||
<link rel="import" href="../import-view/import-view.html">
|
||||
<link rel="import" href="../categories-view/categories-view.html">
|
||||
<link rel="import" href="../homescreen-view/homescreen-view.html">
|
||||
<link rel="import" href="../select/select.html">
|
||||
<link rel="import" href="../padlock-input.html">
|
||||
|
||||
|
|
@ -18,6 +19,8 @@
|
|||
<link href="app.css" rel="stylesheet" type="text/css">
|
||||
<!-- HEADER -->
|
||||
<padlock-header id="header" view="{{ currentView }}" filterString="{{ filterString }}"></padlock-header>
|
||||
<!-- ADD-TO-HOMESCREEN MESSAGE -->
|
||||
<padlock-homescreen-view class="view" id="homescreenView"></padlock-homescreen-view>
|
||||
<!-- PASSWORD VIEW -->
|
||||
<padlock-start-view id="passwordView" class="view" on-enter="{{ newPwdEnter }}"></padlock-start-view>
|
||||
<!-- LOCK VIEW -->
|
||||
|
|
|
|||
|
|
@ -1,30 +1,39 @@
|
|||
Polymer("padlock-app", {
|
||||
ready: function() {
|
||||
require(["padlock/model"], function(model) {
|
||||
require(["padlock/model", "padlock/platform"], function(model, platform) {
|
||||
this.categories = new model.Categories(null, 3);
|
||||
this.categories.fetch();
|
||||
this.$.categoriesView.updateCategories();
|
||||
this.collection = new model.Collection();
|
||||
|
||||
// If there already is data in the local storage ask for password
|
||||
// Otherwise start with choosing a new one
|
||||
this.openView(this.collection.exists() ? this.$.lockView : this.$.passwordView, {
|
||||
var initialView = this.collection.exists() ? this.$.lockView : this.$.passwordView;
|
||||
|
||||
// iOS gets a special treatment since it has the ability to run a website
|
||||
// as a 'standalone' web app and we want to use that!
|
||||
if (platform.isIOS()) {
|
||||
// Add a special class in case the app is lanchend from the home screen in iOS,
|
||||
// otherwise as the user to add the site to their home screen.
|
||||
if (platform.isIOSStandalone()) {
|
||||
this.classList.add("ios-standalone");
|
||||
// On most browsers the mousedown event is coupled to triggering focus on
|
||||
// the clicked elements. Since we're directly handling focussing inputs
|
||||
// with the padlock-input element we need to disable the native mechanism
|
||||
// to prevent conflicts.
|
||||
this.preventMousedownDefault = true;
|
||||
} else {
|
||||
initialView = this.$.homescreenView;
|
||||
}
|
||||
}
|
||||
|
||||
// open the first view
|
||||
this.openView(initialView, {
|
||||
inAnimation: "floatUp",
|
||||
inDuration: 1000
|
||||
});
|
||||
}.bind(this));
|
||||
|
||||
require(["padlock/platform"], function(platform) {
|
||||
// Add a special class in case the app is lanchend from the home screen in iOS
|
||||
if (platform.isIOSStandalone()) {
|
||||
this.classList.add("ios-standalone");
|
||||
// On most browsers the mousedown event is coupled to triggering focus on
|
||||
// the clicked elements. Since we're directly handling focussing inputs
|
||||
// with the padlock-input element we need to disable the native mechanism
|
||||
// to prevent conflicts.
|
||||
this.preventMousedownDefault = true;
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
// If we want to capture all keydown events, we have to add the listener
|
||||
// directly to the document
|
||||
document.addEventListener("keydown", this.keydown.bind(this), false);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../view/view.html">
|
||||
|
||||
<polymer-element name="padlock-homescreen-view" extends="padlock-view">
|
||||
<template>
|
||||
<!-- STYLES -->
|
||||
<link href="homescreen-view.css" rel="stylesheet" type="text/css">
|
||||
<!-- WRAPPER (for centering) -->
|
||||
<div class="wrapper">
|
||||
<div class="app-icon"></div>
|
||||
<div class="message">Add me to your <strong>home screen</strong>!</div>
|
||||
<div class="hint"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script src="homescreen-view.js"></script>
|
||||
</polymer>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Polymer("padlock-homescreen-view");
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
.wrapper {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
height: 200px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto auto;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #fff url(../../../assets/app-icon.svg) no-repeat center center;
|
||||
background-size: cover;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 16px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
background: url(../../../assets/add-homescreen.svg) no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
|
@ -55,6 +55,17 @@ define(function() {
|
|||
return animationEndEventNames[getVendorPrefix().lowercase];
|
||||
};
|
||||
|
||||
// All the devices running iOS
|
||||
var iDevices = ["iPad", "iPhone", "iPod"];
|
||||
|
||||
/**
|
||||
* Checks the _navigator.platform_ property to see if we are on a device
|
||||
* running iOS
|
||||
*/
|
||||
var isIOS = function() {
|
||||
return iDevices.indexOf(navigator.platform) != -1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if the app is running on an iOS device in 'standalone' mode,
|
||||
* i.e. when the user has added the app to the home screen
|
||||
|
|
@ -67,6 +78,7 @@ define(function() {
|
|||
getVendorPrefix: getVendorPrefix,
|
||||
getTransitionEndEventName: getTransitionEndEventName,
|
||||
getAnimationEndEventName: getAnimationEndEventName,
|
||||
isIOS: isIOS,
|
||||
isIOSStandalone: isIOSStandalone
|
||||
};
|
||||
});
|
||||
Loading…
Reference in New Issue