Skip to content

Instantly share code, notes, and snippets.

@nblenke
Last active August 29, 2015 14:19
Show Gist options
  • Save nblenke/33871970008561ec8049 to your computer and use it in GitHub Desktop.
Save nblenke/33871970008561ec8049 to your computer and use it in GitHub Desktop.
Android/iTunes App Download Notification
/* jshint strict: true */
/* globals $ */
/*
* Show a "Download App" notification on Android and iPhone.
* Notification will appear once per page every 30 days unless dismissed,
* once dismissed, it won't show again for 30 days
*/
(function () {
'use strict';
if (window.navigator.userAgent.search(/iphone/i) !== -1) {
window._isIphone = true;
}
if (window.navigator.userAgent.search(/android/i) !== -1) {
window._isAndroid = true;
}
if ((window._isIphone || window._isAndroid)) {
var obj = {
shown: {}
},
id = '_download-app',
link = '',
str = '',
now = new Date(),
pathname = window.location.pathname,
hasBeen30daysSince = function (time) {
var bool = false;
// 1000*60*60*24*30 = 2592000000
if ((now.getTime() - time) >= 2592000000) {
bool = true;
}
return bool;
},
localStorageSupported = function () {
var str = 'test';
try {
localStorage.setItem(str, str);
localStorage.removeItem(str);
return true;
} catch(e) {
return false;
}
};
if (!localStorageSupported) {
return;
}
if (localStorage.getItem(id)) {
obj = JSON.parse(localStorage.getItem(id));
if (obj.shown[pathname] && !hasBeen30daysSince(obj.shown[pathname].time)) {
return;
}
if (obj.dismissedTime && hasBeen30daysSince(obj.dismissedTime)) {
obj.dismissed = false;
}
if (obj.dismissed === true) {
return;
}
}
obj.shown[pathname] = {
time: now.getTime()
};
localStorage.setItem(id, JSON.stringify(obj));
link = 'https://play.google.com/store/apps/details?id=com.foo.iphone';
str = 'Get the Android app on Google Play';
if (window._isIphone) {
link = 'https://itunes.apple.com/us/app/foo/id123?mt=8&uo=6&at=&ct=';
str = 'Get the iPhone app from the iTunes Store';
}
$('body')
.prepend('<div id="' + id + '"><a href=""></a><a href="' + link + '">' + str + '</a>')
.on('click', '#' + id + ' a:first-child', function (ev) {
ev.preventDefault();
$(this).parent().remove();
obj.dismissed = true;
obj.dismissedTime = now.getTime();
localStorage.setItem(id, JSON.stringify(obj));
});
setTimeout(function () {
$('#' + id).addClass('_show');
}, 500);
}
}());
#_download-app {
@include linear-gradient(from top, #17478a, #002F73);
box-shadow:inset 0 -2px 14px rgba(0, 0, 0, 0.1);
height:0;
@include transition (height 300ms ease);
a {
display:table-cell;
vertical-align:top;
text-decoration:none;
opacity:0;
@include transition (opacity 1s);
}
a:first-child {
width:53px;
border-right:1px solid rgba(0, 0, 0, 0.4);
&:before {
font-family:FontAwesome;
font-size:27px;
content:'\00d7';
margin:25px 0 0 14px;
display:block;
color:rgba(255, 255, 255, 0.3);
}
}
a:last-child {
width:250px;
padding:13px 20px;
font-size:15px;
line-height:1.3;
color:#fff;
border-left:1px solid rgba(255, 255, 255, 0.1);
text-shadow:0 1px 2px rgba(0, 0, 0, 0.6);
&:before {
float:left;
margin:0 15px 0 0;
content:'';
background:no-repeat center image-url('apple-touch-icon-114x114.png');
background-size:57px;
border-radius:7px;
border:2px solid #fff;
box-shadow:0 1px 8px rgba(0, 0, 0, 0.5);
width:57px;
height:57px;
}
}
&._show {
height:84px;
a {
opacity:1;
&:last-child:before {
@include animation(tada 1s);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment