Skip to content
Extraits de code Groupes Projets
Valider 7b00eb1e rédigé par Thomas Steur's avatar Thomas Steur
Parcourir les fichiers

refs #6469 update smartbanner lib and make sure it works

parent 2dd6a293
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
libs/jquery/jquery.smartbanner.js
+ 144
− 32
Voir le fichier @ 7b00eb1e
...@@ -10,14 +10,16 @@ ...@@ -10,14 +10,16 @@
var standalone = navigator.standalone // Check if it's already a standalone web app or running within a webui view of an app (not mobile safari) var standalone = navigator.standalone // Check if it's already a standalone web app or running within a webui view of an app (not mobile safari)
, UA = navigator.userAgent , UA = navigator.userAgent
// Detect banner type (iOS or Android) // Detect banner type (iOS or Android)
if (this.options.force) { if (this.options.force) {
this.type = this.options.force this.type = this.options.force
} else if (UA.match(/iPad|iPhone|iPod/i) != null) { } else if (UA.match(/iPhone|iPod/i) != null || (UA.match(/iPad/) && this.options.iOSUniversalApp)) {
if (UA.match(/Safari/i) != null && if (UA.match(/Safari/i) != null &&
(UA.match(/CriOS/i) != null || (UA.match(/CriOS/i) != null ||
window.Number(navigator.userAgent.substr(navigator.userAgent.indexOf('OS ') + 3, 3).replace('_', '.')) < 6)) this.type = 'ios' // Check webview and native smart banner support (iOS 6+) window.Number(UA.substr(UA.indexOf('OS ') + 3, 3).replace('_', '.')) < 6)) this.type = 'ios' // Check webview and native smart banner support (iOS 6+)
} else if (UA.match(/\bSilk\/(.*\bMobile Safari\b)?/) || UA.match(/\bKF\w/) || UA.match('Kindle Fire')) {
this.type = 'kindle'
} else if (UA.match(/Android/i) != null) { } else if (UA.match(/Android/i) != null) {
this.type = 'android' this.type = 'android'
} else if (UA.match(/Windows NT 6.2/i) != null && UA.match(/Touch/i) !== null) { } else if (UA.match(/Windows NT 6.2/i) != null && UA.match(/Touch/i) !== null) {
...@@ -35,7 +37,8 @@ ...@@ -35,7 +37,8 @@
// Get info from meta data // Get info from meta data
var meta = $(this.type == 'android' ? 'meta[name="google-play-app"]' : var meta = $(this.type == 'android' ? 'meta[name="google-play-app"]' :
this.type == 'ios' ? 'meta[name="apple-itunes-app"]' : 'meta[name="msApplication-ID"]'); this.type == 'ios' ? 'meta[name="apple-itunes-app"]' :
this.type == 'kindle' ? 'meta[name="kindle-fire-app"]' : 'meta[name="msApplication-ID"]');
if (meta.length == 0) return if (meta.length == 0) return
// For Windows Store apps, get the PackageFamilyName for protocol launch // For Windows Store apps, get the PackageFamilyName for protocol launch
...@@ -46,8 +49,10 @@ ...@@ -46,8 +49,10 @@
this.appId = /app-id=([^\s,]+)/.exec(meta.attr('content'))[1] this.appId = /app-id=([^\s,]+)/.exec(meta.attr('content'))[1]
} }
this.title = this.options.title ? this.options.title : $('title').text().replace(/\s*[|\-·].*$/, '') this.title = this.options.title ? this.options.title : meta.data('title') || $('title').text().replace(/\s*[|\-·].*$/, '')
this.author = this.options.author ? this.options.author : ($('meta[name="author"]').length ? $('meta[name="author"]').attr('content') : window.location.hostname) this.author = this.options.author ? this.options.author : meta.data('author') || ($('meta[name="author"]').length ? $('meta[name="author"]').attr('content') : window.location.hostname)
this.iconUrl = meta.data('icon-url');
this.price = meta.data('price');
// Create banner // Create banner
this.create() this.create()
...@@ -58,17 +63,32 @@ ...@@ -58,17 +63,32 @@
SmartBanner.prototype = { SmartBanner.prototype = {
constructor: SmartBanner constructor: SmartBanner
, create: function() { , create: function() {
var iconURL var iconURL
, link=(this.options.url ? this.options.url : (this.type == 'windows' ? 'ms-windows-store:PDP?PFN=' + this.pfn : (this.type == 'android' ? 'market://details?id=' : 'https://itunes.apple.com/' + this.options.appStoreLanguage + '/app/id')) + this.appId) , link=(this.options.url ? this.options.url : (this.type == 'windows' ? 'ms-windows-store:PDP?PFN=' + this.pfn : (this.type == 'android' ? 'market://details?id=' : (this.type == 'kindle' ? 'amzn://apps/android?asin=' : 'https://itunes.apple.com/' + this.options.appStoreLanguage + '/app/id'))) + this.appId)
, inStore=this.options.price ? this.options.price + ' - ' + (this.type == 'android' ? this.options.inGooglePlay : this.type == 'ios' ? this.options.inAppStore : this.options.inWindowsStore) : '' , price = this.price || this.options.price
, inStore=price ? price + ' - ' + (this.type == 'android' ? this.options.inGooglePlay : this.type == 'kindle' ? this.options.inAmazonAppStore : this.type == 'ios' ? this.options.inAppStore : this.options.inWindowsStore) : ''
, gloss=this.options.iconGloss === null ? (this.type=='ios') : this.options.iconGloss , gloss=this.options.iconGloss === null ? (this.type=='ios') : this.options.iconGloss
if(this.options.url)
link = this.options.url
else {
if(this.type=='android') {
link = 'market://details?id=' + this.appId
if(this.options.GooglePlayParams)
link = link + '&referrer=' + this.options.GooglePlayParams
}
else
link = 'https://itunes.apple.com/' + this.options.appStoreLanguage + '/app/id' + this.appId
}
var banner = '<div id="smartbanner" class="'+this.type+'"><div class="sb-container"><a href="#" class="sb-close">&times;</a><span class="sb-icon"></span><div class="sb-info"><strong>'+this.title+'</strong><span>'+this.author+'</span><span>'+inStore+'</span></div><a href="'+link+'" class="sb-button"><span>'+this.options.button+'</span></a></div></div>';
(this.options.layer) ? $(this.options.appendToSelector).append(banner) : $(this.options.appendToSelector).prepend(banner);
$('body').append('<div id="smartbanner" class="'+this.type+'"><div class="sb-container"><a href="#" class="sb-close">&times;</a><span class="sb-icon"></span><div class="sb-info"><strong>'+this.title+'</strong><span>'+this.author+'</span><span>'+inStore+'</span></div><a href="'+link+'" class="sb-button"><span>'+this.options.button+'</span></a></div></div>')
if (this.options.icon) { if (this.options.icon) {
iconURL = this.options.icon iconURL = this.options.icon
} else if(this.iconUrl) {
iconURL = this.iconUrl;
} else if ($('link[rel="apple-touch-icon-precomposed"]').length > 0) { } else if ($('link[rel="apple-touch-icon-precomposed"]').length > 0) {
iconURL = $('link[rel="apple-touch-icon-precomposed"]').attr('href') iconURL = $('link[rel="apple-touch-icon-precomposed"]').attr('href')
if (this.options.iconGloss === null) gloss = false if (this.options.iconGloss === null) gloss = false
...@@ -79,7 +99,7 @@ ...@@ -79,7 +99,7 @@
} else if ($('meta[name="msapplication-TileImage"]').length > 0) { /* redundant because ms docs show two case usages */ } else if ($('meta[name="msapplication-TileImage"]').length > 0) { /* redundant because ms docs show two case usages */
iconURL = $('meta[name="msapplication-TileImage"]').attr('content') iconURL = $('meta[name="msapplication-TileImage"]').attr('content')
} }
if (iconURL) { if (iconURL) {
$('#smartbanner .sb-icon').css('background-image','url('+iconURL+')') $('#smartbanner .sb-icon').css('background-image','url('+iconURL+')')
if (gloss) $('#smartbanner .sb-icon').addClass('gloss') if (gloss) $('#smartbanner .sb-icon').addClass('gloss')
...@@ -93,47 +113,87 @@ ...@@ -93,47 +113,87 @@
$('#smartbanner') $('#smartbanner')
.css('top', parseFloat($('#smartbanner').css('top')) * this.scale) .css('top', parseFloat($('#smartbanner').css('top')) * this.scale)
.css('height', parseFloat($('#smartbanner').css('height')) * this.scale) .css('height', parseFloat($('#smartbanner').css('height')) * this.scale)
.hide()
$('#smartbanner .sb-container') $('#smartbanner .sb-container')
.css('-webkit-transform', 'scale('+this.scale+')') .css('-webkit-transform', 'scale('+this.scale+')')
.css('-msie-transform', 'scale('+this.scale+')') .css('-msie-transform', 'scale('+this.scale+')')
.css('-moz-transform', 'scale('+this.scale+')') .css('-moz-transform', 'scale('+this.scale+')')
.css('width', $(window).width() / this.scale) .css('width', $(window).width() / this.scale)
} }
$('#smartbanner').css('position', (this.options.layer) ? 'absolute' : 'static')
} }
, listen: function () { , listen: function () {
$('#smartbanner .sb-close').on('click',$.proxy(this.close, this)) $('#smartbanner .sb-close').on('click',$.proxy(this.close, this))
$('#smartbanner .sb-button').on('click',$.proxy(this.install, this)) $('#smartbanner .sb-button').on('click',$.proxy(this.install, this))
} }
, show: function(callback) { , show: function(callback) {
$('#smartbanner').stop().animate({top:0},this.options.speedIn).addClass('shown') var banner = $('#smartbanner');
$('html').animate({marginTop:this.origHtmlMargin+(this.bannerHeight*this.scale)},this.options.speedIn,'swing',callback) banner.stop();
if (this.options.layer) {
banner.animate({top: 0, display: 'block'}, this.options.speedIn).addClass('shown').show();
$('html').animate({marginTop: this.origHtmlMargin + (this.bannerHeight * this.scale)}, this.options.speedIn, 'swing', callback);
} else {
if ($.support.transition) {
banner.animate({top:0},this.options.speedIn).addClass('shown');
var transitionCallback = function() {
$('html').removeClass('sb-animation');
if (callback) {
callback();
}
};
$('html').addClass('sb-animation').one($.support.transition.end, transitionCallback).emulateTransitionEnd(this.options.speedIn).css('margin-top', this.origHtmlMargin+(this.bannerHeight*this.scale));
} else {
banner.slideDown(this.options.speedIn).addClass('shown');
}
}
} }
, hide: function(callback) { , hide: function(callback) {
$('#smartbanner').stop().animate({top:-1*this.bannerHeight*this.scale},this.options.speedOut).removeClass('shown') var banner = $('#smartbanner');
$('html').animate({marginTop:this.origHtmlMargin},this.options.speedOut,'swing',callback) banner.stop();
if (this.options.layer) {
banner.animate({top: -1 * this.bannerHeight * this.scale, display: 'block'}, this.options.speedIn).removeClass('shown');
$('html').animate({marginTop: this.origHtmlMargin}, this.options.speedIn, 'swing', callback);
} else {
if ($.support.transition) {
banner.css('top', -1*this.bannerHeight*this.scale).removeClass('shown');
var transitionCallback = function() {
$('html').removeClass('sb-animation');
if (callback) {
callback();
}
};
$('html').addClass('sb-animation').one($.support.transition.end, transitionCallback).emulateTransitionEnd(this.options.speedOut).css('margin-top', this.origHtmlMargin);
} else {
banner.slideUp(this.options.speedOut).removeClass('shown');
}
}
} }
, close: function(e) { , close: function(e) {
e.preventDefault() e.preventDefault()
this.hide() this.hide()
this.setCookie('sb-closed','true',this.options.daysHidden) this.setCookie('sb-closed','true',this.options.daysHidden);
} }
, install: function(e) { , install: function(e) {
this.hide() if (this.options.hideOnInstall) {
this.hide()
}
this.setCookie('sb-installed','true',this.options.daysReminder) this.setCookie('sb-installed','true',this.options.daysReminder)
} }
, setCookie: function(name, value, exdays) { , setCookie: function(name, value, exdays) {
var exdate = new Date() var exdate = new Date()
exdate.setDate(exdate.getDate()+exdays) exdate.setDate(exdate.getDate()+exdays)
value=escape(value)+((exdays==null)?'':'; expires='+exdate.toUTCString()) value=encodeURI(value)+((exdays==null)?'':'; expires='+exdate.toUTCString())
document.cookie=name+'='+value+'; path=/;' document.cookie=name+'='+value+'; path=/;'
} }
, getCookie: function(name) { , getCookie: function(name) {
var i,x,y,ARRcookies = document.cookie.split(";") var i,x,y,ARRcookies = document.cookie.split(";")
for(i=0;i<ARRcookies.length;i++) { for(i=0;i<ARRcookies.length;i++) {
...@@ -141,12 +201,12 @@ ...@@ -141,12 +201,12 @@
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1) y = ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1)
x = x.replace(/^\s+|\s+$/g,"") x = x.replace(/^\s+|\s+$/g,"")
if (x==name) { if (x==name) {
return unescape(y) return decodeURI(y)
} }
} }
return null return null
} }
// Demo only // Demo only
, switchType: function() { , switchType: function() {
var that = this var that = this
...@@ -165,9 +225,9 @@ ...@@ -165,9 +225,9 @@
$.smartbanner = function (option) { $.smartbanner = function (option) {
var $window = $(window) var $window = $(window)
, data = $window.data('typeahead') , data = $window.data('smartbanner')
, options = typeof option == 'object' && option , options = typeof option == 'object' && option
if (!data) $window.data('typeahead', (data = new SmartBanner(options))) if (!data) $window.data('smartbanner', (data = new SmartBanner(options)))
if (typeof option == 'string') data[option]() if (typeof option == 'string') data[option]()
} }
...@@ -179,7 +239,9 @@ ...@@ -179,7 +239,9 @@
appStoreLanguage: 'us', // Language code for App Store appStoreLanguage: 'us', // Language code for App Store
inAppStore: 'On the App Store', // Text of price for iOS inAppStore: 'On the App Store', // Text of price for iOS
inGooglePlay: 'In Google Play', // Text of price for Android inGooglePlay: 'In Google Play', // Text of price for Android
inAmazonAppStore: 'In the Amazon Appstore',
inWindowsStore: 'In the Windows Store', //Text of price for Windows inWindowsStore: 'In the Windows Store', //Text of price for Windows
GooglePlayParams: null, // Aditional parameters for the market
icon: null, // The URL of the icon (defaults to <meta name="apple-touch-icon">) icon: null, // The URL of the icon (defaults to <meta name="apple-touch-icon">)
iconGloss: null, // Force gloss effect for iOS even for precomposed iconGloss: null, // Force gloss effect for iOS even for precomposed
button: 'VIEW', // Text for the install button button: 'VIEW', // Text for the install button
...@@ -189,9 +251,59 @@ ...@@ -189,9 +251,59 @@
speedOut: 400, // Close animation speed of the banner speedOut: 400, // Close animation speed of the banner
daysHidden: 15, // Duration to hide the banner after being closed (0 = always show banner) daysHidden: 15, // Duration to hide the banner after being closed (0 = always show banner)
daysReminder: 90, // Duration to hide the banner after "VIEW" is clicked *separate from when the close button is clicked* (0 = always show banner) daysReminder: 90, // Duration to hide the banner after "VIEW" is clicked *separate from when the close button is clicked* (0 = always show banner)
force: null // Choose 'ios', 'android' or 'windows'. Don't do a browser check, just always show this banner force: null, // Choose 'ios', 'android' or 'windows'. Don't do a browser check, just always show this banner
hideOnInstall: true, // Hide the banner after "VIEW" is clicked.
layer: false, // Display as overlay layer or slide down the page
iOSUniversalApp: true, // If the iOS App is a universal app for both iPad and iPhone, display Smart Banner to iPad users, too.
appendToSelector: 'body' //Append the banner to a specific selector
}
$.smartbanner.Constructor = SmartBanner;
// ============================================================
// Bootstrap transition
// Copyright 2011-2014 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
function transitionEnd() {
var el = document.createElement('smartbanner')
var transEndEventNames = {
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'transitionend',
OTransition: 'oTransitionEnd otransitionend',
transition: 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return {end: transEndEventNames[name]}
}
}
return false // explicit for ie8 ( ._.)
}
if ($.support.transition !== undefined)
return // Prevent conflict with Twitter Bootstrap
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function(duration) {
var called = false, $el = this
$(this).one($.support.transition.end, function() {
called = true
})
var callback = function() {
if (!called) $($el).trigger($.support.transition.end)
}
setTimeout(callback, duration)
return this
} }
$.smartbanner.Constructor = SmartBanner $(function() {
$.support.transition = transitionEnd()
})
// ============================================================
}(window.jQuery); }(window.jQuery);
libs/jquery/stylesheets/jquery.smartbanner.css
+ 2
− 1
Voir le fichier @ 7b00eb1e
#smartbanner { position:absolute; left:0; top:-82px; border-bottom:1px solid #e8e8e8; width:100%; height:78px; font-family:'Helvetica Neue',sans-serif; background:-webkit-linear-gradient(top, #f4f4f4 0%,#cdcdcd 100%); background-image: -ms-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%); background-image: -moz-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%); box-shadow:0 1px 2px rgba(0,0,0,0.5); z-index:9998; -webkit-font-smoothing:antialiased; overflow:hidden; -webkit-text-size-adjust:none; } #smartbanner { position:absolute; left:0; top:-82px; border-bottom:1px solid #e8e8e8; width:100%; height:78px; font-family:'Helvetica Neue',sans-serif; background:-webkit-linear-gradient(top, #f4f4f4 0%,#cdcdcd 100%); background-image: -ms-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%); background-image: -moz-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%); box-shadow:0 1px 2px rgba(0,0,0,0.5); z-index:9998; -webkit-font-smoothing:antialiased; overflow:hidden; -webkit-text-size-adjust:none; }
#smartbanner, html.sb-animation {-webkit-transition: all .3s ease;}
#smartbanner .sb-container { margin: 0 auto; } #smartbanner .sb-container { margin: 0 auto; }
#smartbanner .sb-close { position:absolute; left:5px; top:5px; display:block; border:2px solid #fff; width:14px; height:14px; font-family:'ArialRoundedMTBold',Arial; font-size:15px; line-height:15px; text-align:center; color:#fff; background:#070707; text-decoration:none; text-shadow:none; border-radius:14px; box-shadow:0 2px 3px rgba(0,0,0,0.4); -webkit-font-smoothing:subpixel-antialiased; } #smartbanner .sb-close { position:absolute; left:5px; top:5px; display:block; border:2px solid #fff; width:14px; height:14px; font-family:'ArialRoundedMTBold',Arial; font-size:15px; line-height:15px; text-align:center; color:#fff; background:#070707; text-decoration:none; text-shadow:none; border-radius:14px; box-shadow:0 2px 3px rgba(0,0,0,0.4); -webkit-font-smoothing:subpixel-antialiased; }
#smartbanner .sb-close:active { font-size:13px; color:#aaa; } #smartbanner .sb-close:active { font-size:13px; color:#aaa; }
...@@ -14,7 +15,7 @@ ...@@ -14,7 +15,7 @@
#smartbanner .sb-icon.gloss:after { content:''; position:absolute; left:0; top:-1px; border-top:1px solid rgba(255,255,255,0.8); width:100%; height:50%; background:-webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); border-radius:10px 10px 12px 12px; } #smartbanner .sb-icon.gloss:after { content:''; position:absolute; left:0; top:-1px; border-top:1px solid rgba(255,255,255,0.8); width:100%; height:50%; background:-webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); border-radius:10px 10px 12px 12px; }
#smartbanner.android { border-color:#212228; background: #3d3d3d; border-top: 5px solid #88B131; box-shadow: none; } #smartbanner.android { border-color:#212228; background: #3d3d3d url('dark_background_stripes.gif'); border-top: 5px solid #88B131; box-shadow: none; }
#smartbanner.android .sb-close { border:0; width:17px; height:17px; line-height:17px; 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 .sb-close { border:0; width:17px; height:17px; line-height:17px; 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 .sb-close:active { color:#eee; } #smartbanner.android .sb-close:active { color:#eee; }
#smartbanner.android .sb-info { color:#ccc; text-shadow:0 1px 2px #000; } #smartbanner.android .sb-info { color:#ccc; text-shadow:0 1px 2px #000; }
......
plugins/Login/templates/login.twig
+ 1
− 1
Voir le fichier @ 7b00eb1e
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
$(function () { $(function () {
$('#form_login').focus(); $('#form_login').focus();
$('input').placeholder(); $('input').placeholder();
$.smartbanner({title: "Piwik Mobile 2", author: "Piwik team", icon: "plugins/CoreHome/images/googleplay.png"}); $.smartbanner({title: "Piwik Mobile 2", author: "Piwik team", hideOnInstall: false, layer: true, icon: "plugins/CoreHome/images/googleplay.png"});
}); });
</script> </script>
</head> </head>
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter