Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

fix #41 #34 #23

  • Loading branch information...
commit caf5833185f0f327f35e93c1f2a06ab02d60c13b 1 parent 22115c2
Matteo Spinelli authored
6 README.md
View
@@ -3,7 +3,7 @@ Add to Home Screen Floating Layer
The script places a floating balloon to your mobile website inviting the user to add your app to the home screen. This is compatible with iPhone/4/iPod-touch and iPad, iOS >= 3.1.1.
-Version: 2.0.4 - [Official homepage](http://cubiq.org/add-to-home-screen) - [Video](http://vimeo.com/19090537)
+Version: 2.0.5 - [Official homepage](http://cubiq.org/add-to-home-screen) - [Video](http://vimeo.com/19090537)
## Usage
Include the script and the stylesheet in your page HEAD. That's all. Look at the examples for advanced features. Documentation on [cubiq.org](http://cubiq.org/add-to-home-screen).
@@ -34,7 +34,7 @@ The script auto-detects the user's locale and shows the message in the appropria
- Russian [ru_ru]: Установите это веб-приложение на ваш %device: нажмите '%icon', затем 'Добавить в «Домой»'. (thanks to [@myfreeweb](http://twitter.com/#!/myfreeweb))
- Swedish [sv_se]: Lägg till denna webbapplikation på din %device: tryck på '%icon' och därefter 'Lägg till på hemskärmen'. (thanks to [@fransrosen](http://twitter.com/#!/fransrosen))
- Thai [th_th]: ติดตั้งเว็บแอพฯ นี้บน %device ของคุณ: แตะ %icon และ เพิ่มที่หน้าจอโฮม (thanks to [@maxart](http://twitter.com/#!/maxart))
-- Tukish [tr_tr]: %device için bu uygulamayı kurduktan sonra %icon simgesine dokunarak Ev Ekranına Ekleyin. (thanks to [@fatihacet](http://twitter.com/#!/fatihacet))
+- Tukish [tr_tr]: Bu uygulamayı %device'a eklemek için %icon simgesine sonrasında Ana Ekrana Ekle düğmesine basın. (thanks to [Umur Alpay](https://github.com/finansaldenklem) and [@fatihacet](http://twitter.com/#!/fatihacet))
- Chinese simplified [zh_cn]: 您可以将此应用程式安装到您的 %device 上。请按 %icon 然后点选<strong>添加至主屏幕</strong>。 (thanks to Macro Yau)
- Chinese traditional [zh_tw]: 您可以將此應用程式安裝到您的 %device 上。請按 %icon 然後點選<strong>加入主畫面螢幕</strong>。 (thanks to Macro Yau)
@@ -44,7 +44,7 @@ The script auto-detects the user's locale and shows the message in the appropria
This software is released under the MIT License.
-Copyright (c) 2011 Matteo Spinelli, http://cubiq.org/
+Copyright (c) 2013 Matteo Spinelli, http://cubiq.org/
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
2  examples/custom-message/index.html
View
@@ -6,10 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
- <!-- Of course it is advisable to have touch icons ready for each device -->
<link rel="apple-touch-icon" href="../images/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="72x72" href="../images/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="114x114" href="../images/touch-icon-iphone4.png">
+ <link rel="apple-touch-icon" sizes="144x144" href="../images/touch-icon-ipad2.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
BIN  examples/images/touch-icon-ipad2.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 examples/manual-startup/index.html
View
@@ -6,11 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
- <!-- Of course it is advisable to have touch icons ready for each device -->
<link rel="apple-touch-icon" href="../images/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="72x72" href="../images/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="114x114" href="../images/touch-icon-iphone4.png">
-
+ <link rel="apple-touch-icon" sizes="144x144" href="../images/touch-icon-ipad2.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
@@ -30,7 +29,7 @@
<body>
<p>scroll</p>
- <p><a href="#" onclick="addToHome.show(); return false">Show the message</a></p>
+ <p><a href="#" onclick="addToHome.show(true); return false">Show the message</a></p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
6 examples/simple/index.html
View
@@ -2,17 +2,19 @@
<html>
<head>
<meta charset="utf-8">
- <title>Add to home</title>
+ <title>Add to Homescreen</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
+ <meta name="apple-mobile-web-app-title" content="AddToHome">
+
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
- <!-- Of course it is advisable to have touch icons ready for each device -->
<link rel="apple-touch-icon" href="../images/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="72x72" href="../images/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="114x114" href="../images/touch-icon-iphone4.png">
+ <link rel="apple-touch-icon" sizes="144x144" href="../images/touch-icon-ipad2.png">
<link rel="stylesheet" href="../../style/add2home.css">
<script type="text/javascript" src="../../src/add2home.js" charset="utf-8"></script>
2  examples/touch-icon/index.html
View
@@ -6,10 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
- <!-- Of course it is advisable to have touch icons ready for each device -->
<link rel="apple-touch-icon" href="../images/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="72x72" href="../images/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="114x114" href="../images/touch-icon-iphone4.png">
+ <link rel="apple-touch-icon" sizes="144x144" href="../images/touch-icon-ipad2.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
44 src/add2home.js
View
@@ -1,5 +1,5 @@
/*!
- * Add to Homescreen v2.0.4 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org
+ * Add to Homescreen v2.0.5 ~ Copyright (c) 2013 Matteo Spinelli, http://cubiq.org
* Released under MIT license, http://cubiq.org/license
*/
var addToHome = (function (w) {
@@ -35,6 +35,7 @@ var addToHome = (function (w) {
touchIcon: false, // Display the touch icon
arrow: true, // Display the balloon arrow
hookOnLoad: true, // Should we hook to onload event? (really advanced usage)
+ closeButton: true, // Let the user close the balloon
iterations: 100 // Internal/debug use
},
@@ -63,7 +64,7 @@ var addToHome = (function (w) {
ru_ru: 'Установите это веб-приложение на ваш %device: нажмите %icon, затем <strong>Добавить в «Домой»</strong>.',
sv_se: 'Lägg till denna webbapplikation på din %device: tryck på %icon och därefter <strong>Lägg till på hemskärmen</strong>.',
th_th: 'ติดตั้งเว็บแอพฯ นี้บน %device ของคุณ: แตะ %icon และ <strong>เพิ่มที่หน้าจอโฮม</strong>',
- tr_tr: '%device için bu uygulamayı kurduktan sonra %icon simgesine dokunarak <strong>Ana Ekrana Ekle</strong>yin.',
+ tr_tr: 'Bu uygulamayı %device\'a eklemek için %icon simgesine sonrasında <strong>Ana Ekrana Ekle</strong> düğmesine basın.',
zh_cn: '您可以将此应用程式安装到您的 %device 上。请按 %icon 然后点选<strong>添加至主屏幕</strong>。',
zh_tw: '您可以將此應用程式安裝到您的 %device 上。請按 %icon 然後點選<strong>加入主畫面螢幕</strong>。'
};
@@ -73,6 +74,7 @@ var addToHome = (function (w) {
if ( !isIDevice ) return;
var now = Date.now(),
+ title,
i;
// Merge local with global options
@@ -112,10 +114,7 @@ var addToHome = (function (w) {
if ( !overrideChecks && ( !isSafari || !isExpired || isSessionActive || isStandalone || !isReturningVisitor ) ) return;
- var icons = options.touchIcon ? document.querySelectorAll('head link[rel=apple-touch-icon],head link[rel=apple-touch-icon-precomposed]') : [],
- sizes,
- touchIcon = '',
- closeButton,
+ var touchIcon = '',
platform = nav.platform.split(' ')[0],
language = nav.language.replace('-', '_'),
i, l;
@@ -133,35 +132,27 @@ var addToHome = (function (w) {
options.message = language in intl ? intl[language] : intl['en_us'];
}
- // Search for the apple-touch-icon
- if ( icons.length ) {
- for ( i = 0, l = icons.length; i < l; i++ ) {
- sizes = icons[i].getAttribute('sizes');
+ if ( options.touchIcon ) {
+ touchIcon = isRetina ?
+ document.querySelector('head link[rel^=apple-touch-icon][sizes="114x114"],head link[rel^=apple-touch-icon][sizes="144x144"]') :
+ document.querySelector('head link[rel^=apple-touch-icon][sizes="57x57"],head link[rel^=apple-touch-icon],head link[rel^=apple-touch-icon][sizes="72x72"]');
- if ( sizes ) {
- if ( isRetina && sizes == '114x114' ) {
- touchIcon = icons[i].href;
- break;
- }
- } else {
- touchIcon = icons[i].href;
- }
+ if ( touchIcon ) {
+ alert(touchIcon.href)
+ touchIcon = '<span style="background-image:url(' + touchIcon.href + ')" class="addToHomeTouchIcon"></span>';
}
-
- touchIcon = '<span style="background-image:url(' + touchIcon + ')" class="addToHomeTouchIcon"></span>';
}
balloon.className = (isIPad ? 'addToHomeIpad' : 'addToHomeIphone') + (touchIcon ? ' addToHomeWide' : '');
balloon.innerHTML = touchIcon +
options.message.replace('%device', platform).replace('%icon', OSVersion >= 4.2 ? '<span class="addToHomeShare"></span>' : '<span class="addToHomePlus">+</span>') +
(options.arrow ? '<span class="addToHomeArrow"></span>' : '') +
- '<span class="addToHomeClose">\u00D7</span>';
+ (options.closeButton ? '<span class="addToHomeClose">\u00D7</span>' : '');
document.body.appendChild(balloon);
// Add the close action
- closeButton = balloon.querySelector('.addToHomeClose');
- if ( closeButton ) closeButton.addEventListener('click', clicked, false);
+ if ( options.closeButton ) balloon.addEventListener('click', clicked, false);
if ( !isIPad && OSVersion >= 6 ) window.addEventListener('orientationchange', orientationCheck, false);
@@ -250,10 +241,9 @@ var addToHome = (function (w) {
var posY = 0,
posX = 0,
opacity = '1',
- duration = '0',
- closeButton = balloon.querySelector('.addToHomeClose');
+ duration = '0';
- if ( closeButton ) closeButton.removeEventListener('click', close, false);
+ if ( options.closeButton ) balloon.removeEventListener('click', close, false);
if ( !isIPad && OSVersion >= 6 ) window.removeEventListener('orientationchange', orientationCheck, false);
if ( OSVersion < 5 ) {
@@ -348,4 +338,4 @@ var addToHome = (function (w) {
close: close,
reset: reset
};
-})(window);
+})(window);
9 style/add2home.css
View
@@ -6,7 +6,11 @@
#addToHomeScreen {
z-index:9999;
-webkit-user-select:none;
+ user-select:none;
-webkit-box-sizing:border-box;
+ box-sizing:border-box;
+ -webkit-touch-callout:none;
+ touch-callout:none;
width:240px;
font-size:15px;
padding:12px 14px;
@@ -135,14 +139,19 @@
display:block;
float:left;
-webkit-border-radius:6px;
+ border-radius:6px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5),
inset 0 0 2px rgba(255,255,255,0.9);
+ box-shadow:0 1px 3px rgba(0,0,0,0.5),
+ inset 0 0 2px rgba(255,255,255,0.9);
background-repeat:no-repeat;
width:57px; height:57px;
-webkit-background-size:57px 57px;
+ background-size:57px 57px;
margin:0 12px 0 0;
border:1px solid #333;
-webkit-background-clip:padding-box;
+ background-clip:padding-box;
}
Please sign in to comment.
Something went wrong with that request. Please try again.