Witam serdecznie,
Musze wykonac tak zwany "smartbanner" ktory pojawia sie po wejsciu na jakas witryne internetowa i po kliknieciu na niego przenosi nas do google play na strone aplikacji , napewno kazdy wie o co chodzi i nie raz sie z takim czyms spotkal. Chcialem to wykonac pobierajac juz gotowy plik z javascriptem lecz niestety chyba mnie to przeroslo. Nie do konca wiem w ktorych miejscach pliku (glownie .css) musze wprowadzic zmiany by wprowadzic do banera moje dane i logo oraz strone na ktora baner ma przenosic. Nie prosze tu o gotowe rozwiaznie ale o nakierowanie jak to zrobic.
Wstawiam kody kilku plikow:
INDEX.HTML:
<html>
<head>
<title>MyPage</title>
<meta name="apple-itunes-app" content="app-id=502838820">
<meta name="google-play-app" content="app-id=com.incisivemedia.riskpugpig">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/smart-app-banner/smart-app-banner.css" type="text/css" media="screen">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="android-touch-icon-precomposed" href="risknet.png" />
</head>
<body>
...
<script src="/smart-app-banner/smart-app-banner.js"></script>
<script type="text/javascript">
new SmartBanner({
daysHidden: 15, // days to hide banner after close button is clicked (defaults to 15)
daysReminder: 90, // days to hide banner after "VIEW" button is clicked (defaults to 90)
appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
title: 'Risk.Net',
author: 'Incisive Media',
button: 'VIEW',
store: {
ios: 'On the App Store',
android: 'In Google Play',
windows: 'In Windows store'
},
price: {
ios: 'FREE',
android: 'FREE',
windows: 'FREE'
}
// , theme: '' // put platform type ('ios', 'android', etc.) here to force single theme on all device
// , icon: '' // full path to icon image if not using website icon image
// , force: 'ios' // Uncomment for platform emulation
});
</script>
</body>
</html>
INDEX.JS:
var extend = require('xtend/mutable');
var q = require('component-query');
var doc = require('get-doc');
var root = doc && doc.documentElement;
var cookie = require('cookie-cutter');
var ua = require('ua-parser-js');
// IE < 11 doesn't support navigator language property.
var userLangAttribute = navigator.language || navigator.userLanguage || navigator.browserLanguage;
var userLang = userLangAttribute.slice(-2) || 'us';
// platform dependent functionality
var mixins = {
ios: {
appMeta: 'apple-itunes-app',
iconRels: ['apple-touch-icon-precomposed', 'apple-touch-icon'],
getStoreLink: function() {
return 'https://itunes.apple.com/' + this.options.appStoreLanguage + '/app/id' + this.appId;
}
},
android: {
appMeta: 'google-play-app',
iconRels: ['android-touch-icon', 'apple-touch-icon-precomposed', 'apple-touch-icon'],
getStoreLink: function() {
return 'http://play.google.com/store/apps/details?id=' + this.appId;
}
},
windows: {
appMeta: 'msApplication-ID',
iconRels: ['windows-touch-icon', 'apple-touch-icon-precomposed', 'apple-touch-icon'],
getStoreLink: function() {
return 'http://www.windowsphone.com/s?appid=' + this.appId;
}
}
};
var SmartBanner = function(options) {
var agent = ua(navigator.userAgent);
this.options = extend({}, {
daysHidden: 15,
daysReminder: 90,
appStoreLanguage: userLang, // Language code for App Store
button: 'OPEN', // Text for the install button
store: {
ios: 'On the App Store',
android: 'In Google Play',
windows: 'In the Windows Store'
},
price: {
ios: 'FREE',
android: 'FREE',
windows: 'FREE'
},
theme: '', // put platform type ('ios', 'android', etc.) here to force single theme on all device
icon: '', // full path to icon image if not using website icon image
force: '' // put platform type ('ios', 'android', etc.) here for emulation
}, options || {});
if (this.options.force) {
this.type = this.options.force;
} else if (agent.os.name === 'Windows Phone' || agent.os.name === 'Windows Mobile') {
this.type = 'windows';
} else if (agent.os.name === 'iOS') {
this.type = 'ios';
} else if (agent.os.name === 'Android') {
this.type = 'android';
}
// Don't show banner on ANY of the following conditions:
// - device os is not supported,
// - user is on mobile safari for ios 6 or greater (iOS >= 6 has native support for SmartAppBanner)
// - running on standalone mode
// - user dismissed banner
if (!this.type
|| ( this.type === 'ios' && agent.browser.name === 'Mobile Safari' && parseInt(agent.os.version) >= 6 )
|| navigator.standalone
|| cookie.get('smartbanner-closed')
|| cookie.get('smartbanner-installed')) {
return;
}
extend(this, mixins[this.type]);
// - If we dont have app id in meta, dont display the banner
if (!this.parseAppId()) {
return;
}
this.create();
this.show();
};
SmartBanner.prototype = {
constructor: SmartBanner,
create: function() {
var link = this.getStoreLink();
var inStore = this.options.price[this.type] + ' - ' + this.options.store[this.type];
var icon;
if (this.options.icon) {
icon = this.options.icon;
} else {
for (var i = 0; i < this.iconRels.length; i++) {
var rel = q('link[rel="' + this.iconRels[i] + '"]');
if (rel) {
icon = rel.getAttribute('href');
break;
}
}
}
var sb = doc.createElement('div');
var theme = this.options.theme || this.type;
sb.className = 'smartbanner' + ' smartbanner-' + theme;
sb.innerHTML = '<div class="smartbanner-container">' +
'<a href="javascript:void(0);" class="smartbanner-close">×</a>' +
'<span class="smartbanner-icon" style="background-image: url('+icon+')"></span>' +
'<div class="smartbanner-info">' +
'<div class="smartbanner-title">'+this.options.title+'</div>' +
'<div>'+this.options.author+'</div>' +
'<span>'+inStore+'</span>' +
'</div>' +
'<a href="'+link+'" class="smartbanner-button">' +
'<span class="smartbanner-button-text">'+this.options.button+'</span>' +
'</a>' +
'</div>';
//there isn’t neccessary a body
if (doc.body) {
doc.body.appendChild(sb);
}
else if (doc) {
doc.addEventListener('DOMContentLoaded', function(){
doc.body.appendChild(sb);
});
}
q('.smartbanner-button', sb).addEventListener('click', this.install.bind(this), false);
q('.smartbanner-close', sb).addEventListener('click', this.close.bind(this), false);
},
hide: function() {
root.classList.remove('smartbanner-show');
},
show: function() {
root.classList.add('smartbanner-show');
},
close: function() {
this.hide();
cookie.set('smartbanner-closed', 'true', {
path: '/',
expires: new Date(+new Date() + this.options.daysHidden * 1000 * 60 * 60 * 24)
});
},
install: function() {
this.hide();
cookie.set('smartbanner-installed', 'true', {
path: '/',
expires: new Date(+new Date() + this.options.daysReminder * 1000 * 60 * 60 * 24)
});
},
parseAppId: function() {
var meta = q('meta[name="' + this.appMeta + '"]');
if (!meta) {
return;
}
if (this.type === 'windows') {
this.appId = meta.getAttribute('content');
} else {
this.appId = /app-id=([^\s,]+)/.exec(meta.getAttribute('content'))[1];
}
return this.appId;
}
};
module.exports = SmartBanner;
SMART-APP-BANNER.CSS:
.smartbanner-show {
margin-top: 80px;
}
.smartbanner-show .smartbanner {
display: block;
}
/** Default **/
.smartbanner {
position: absolute;
left: 0;
top: 0;
display: none;
width: 100%;
height: 80px;
line-height: 80px;
font-family: 'Helvetica Neue', sans-serif;
background: #f4f4f4;
z-index: 9998;
-webkit-font-smoothing: antialiased;
overflow: hidden;
-webkit-text-size-adjust: none;
}
.smartbanner-container {
margin: 0 auto;
white-space: nowrap;
}
.smartbanner-close {
display: inline-block;
vertical-align: middle;
margin: 0 5px 0 5px;
font-family: 'ArialRoundedMTBold', Arial;
font-size: 20px;
text-align: center;
color: #888;
text-decoration: none;
border: 0;
border-radius: 14px;
-webkit-font-smoothing: subpixel-antialiased;
}
.smartbanner-close:active,
.smartbanner-close:hover {
color: #aaa;
}
.smartbanner-icon {
display: inline-block;
vertical-align: middle;
width: 57px;
height: 57px;
margin-right: 12px;
background-size: cover;
border-radius: 10px;
}
.smartbanner-info {
display: inline-block;
vertical-align: middle;
width: 44%;
font-size: 11px;
line-height: 1.2em;
font-weight: bold;
}
.smartbanner-title {
font-size:13px;
line-height: 18px;
}
.smartbanner-button {
position: absolute;
right: 20px;
top: 0;
bottom: 0;
margin: auto 0;
height: 24px;
font-size: 14px;
line-height: 24px;
text-align: center;
font-weight: bold;
color: #6a6a6a;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.smartbanner-button:active, .smartbanner-button:hover {
color: #aaa;
}
.smartbanner-button-text {
}
.smartbanner-button-text:active,
.smartbanner-button-text:hover {
}
/** iOS **/
.smartbanner-ios {
background: #f4f4f4;
background: linear-gradient(to bottom, #f4f4f4, #cdcdcd);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
line-height: 80px;
}
.smartbanner-ios .smartbanner-close {
border: 0;
width: 18px;
height: 18px;
line-height: 18px;
color: #888;
text-shadow: 0 1px 0 white;
}
.smartbanner-ios .smartbanner-close:active,
.smartbanner-ios .smartbanner-close:hover {
color: #aaa;
}
.smartbanner-ios .smartbanner-icon {
background: rgba(0,0,0,0.6);
background-size: cover;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.smartbanner-ios .smartbanner-info {
color: #6a6a6a;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.smartbanner-ios .smartbanner-title {
color:#4d4d4d;
font-weight: bold;
}
.smartbanner-ios .smartbanner-button {
padding: 0 10px;
min-width: 10%;
color: #6a6a6a;
background: #efefef;
background: linear-gradient(to bottom, #efefef, #dcdcdc);
border-radius: 3px;
box-shadow: inset 0 0 0 1px #bfbfbf, 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 rgba(255, 255, 255, 0.7) inset;
}
.smartbanner-ios .smartbanner-button:active,
.smartbanner-ios .smartbanner-button:hover {
background: #dcdcdc;
background: linear-gradient(to bottom, #dcdcdc, #efefef);
}
.smartbanner-ios .smartbanner-button-text {
}
.smartbanner-ios .smartbanner-button-text:active,
.smartbanner-ios .smartbanner-button-text:hover {
}
/** Android **/
.smartbanner-android {
background: #3d3d3d url(data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7);
box-shadow: inset 0 4px 0 #88B131;
line-height: 82px;
}
.smartbanner-android .smartbanner-close {
border: 0;
width: 17px;
height: 17px;
line-height: 17px;
margin-right: 7px;
color: #b1b1b3;
background: #1c1e21;
text-shadow: 0 1px 1px #000;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) inset, 0 1px 1px rgba(255, 255, 255, 0.3);
}
.smartbanner-android .smartbanner-close:active,
.smartbanner-android .smartbanner-close:hover {
color: #eee;
}
.smartbanner-android .smartbanner-icon {
background-color: transparent;
box-shadow: none;
}
.smartbanner-android .smartbanner-info {
color:#ccc;
text-shadow:0 1px 2px #000;
}
.smartbanner-android .smartbanner-title {
color:#fff;
font-weight: bold;
}
.smartbanner-android .smartbanner-button {
min-width: 12%;
color: #d1d1d1;
padding: 0;
background: none;
border-radius: 0;
box-shadow: 0 0 0 1px #333, 0 0 0 2px #DDDCDC;
}
.smartbanner-android .smartbanner-button:active,
.smartbanner-android .smartbanner-button:hover {
background: none;
}
.smartbanner-android .smartbanner-button-text {
text-align: center;
display: block;
padding: 0 10px;
background: #42B6C9;
background: linear-gradient(to bottom, #42B6C9, #39A9BB);
text-transform: none;
text-shadow: none;
box-shadow: none;
}
.smartbanner-android .smartbanner-button-text:active,
.smartbanner-android .smartbanner-button-text:hover {
background: #2AC7E1;
}
/** Windows **/
.smartbanner-windows {
background: #f4f4f4;
background: linear-gradient(to bottom, #f4f4f4, #cdcdcd);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
line-height: 80px;
}
.smartbanner-windows .smartbanner-close {
border: 0;
width: 18px;
height: 18px;
line-height: 18px;
color: #888;
text-shadow: 0 1px 0 white;
}
.smartbanner-windows .smartbanner-close:active,
.smartbanner-windows .smartbanner-close:hover {
color: #aaa;
}
.smartbanner-windows .smartbanner-icon {
background: rgba(0,0,0,0.6);
background-size: cover;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.smartbanner-windows .smartbanner-info {
color: #6a6a6a;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.smartbanner-windows .smartbanner-title {
color:#4d4d4d;
font-weight: bold;
}
.smartbanner-windows .smartbanner-button {
padding: 0 10px;
min-width: 10%;
color: #6a6a6a;
background: #efefef;
background: linear-gradient(to bottom, #efefef, #dcdcdc);
border-radius: 3px;
box-shadow: inset 0 0 0 1px #bfbfbf, 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 rgba(255, 255, 255, 0.7) inset;
}
.smartbanner-windows .smartbanner-button:active,
.smartbanner-windows .smartbanner-button:hover {
background: #dcdcdc;
background: linear-gradient(to bottom, #dcdcdc, #efefef);
}
.smartbanner-windows .smartbanner-button-text {
}
.smartbanner-windows .smartbanner-button-text:active,
.smartbanner-windows .smartbanner-button-text:hover {
}
W index.html wprowadzilem id do aplikacji na ktora ma przenosic baner oraz hrefa do ikony ale rowniez nie wiem czy jest to dobrze zrobione.
Wielkie dzieki za pomoc
