From 42d55abf8a0fca61eb9cd919a5ebc2b185d045a2 Mon Sep 17 00:00:00 2001 From: Amauri CHAMPEAUX Date: Wed, 25 Feb 2015 16:35:05 +0100 Subject: [PATCH] Ajax compatible (!) --- css/tarteaucitron.css | 20 +- tarteaucitron.js | 414 ++++++++++++++++++++++++-------------- tarteaucitron.services.js | 42 +++- 3 files changed, 309 insertions(+), 167 deletions(-) diff --git a/css/tarteaucitron.css b/css/tarteaucitron.css index 394d84a..de6c78c 100644 --- a/css/tarteaucitron.css +++ b/css/tarteaucitron.css @@ -29,9 +29,9 @@ top: 0 !important; width: 100% !important; } - - #tarteaucitron #tarteaucitronClosePanel { - display: block !important; + + #tarteaucitron #tarteaucitronServices .tarteaucitronTitle { + text-align: left !important; } } @@ -121,17 +121,15 @@ } #tarteaucitron #tarteaucitronClosePanel { - background: #6f6f6f; - border: 4px solid #fff; - border-right: 0; + background: #333333; color: #fff; cursor: pointer; - display: none; - float: right; font-size: 12px; font-weight: 700; text-decoration: none; padding: 4px 0; + position: absolute; + right: 0; text-align: center; width: 70px; } @@ -159,6 +157,10 @@ min-height: 250px; } +#tarteaucitron #tarteaucitronServices .tarteaucitronHidden { + display: none; +} + #tarteaucitron #tarteaucitronServices .tarteaucitronTitle { background: rgba(51, 51, 51, 0.2); color: #333; @@ -179,9 +181,7 @@ #tarteaucitron #tarteaucitronServices .tarteaucitronLine { background: #fafafa; border-left: 5px solid #f5f5f5; - height: auto; margin: 1px 0; - min-height: 100%; overflow: hidden; padding: 15px 5px; } diff --git a/tarteaucitron.js b/tarteaucitron.js index 125ae3e..7cf5b65 100644 --- a/tarteaucitron.js +++ b/tarteaucitron.js @@ -5,24 +5,59 @@ var scripts = document.getElementsByTagName('script'), path = scripts[scripts.length - 1].src.split('?')[0], cdn = path.split('/').slice(0, -1).join('/') + '/', alreadyLaunch = (alreadyLaunch === undefined) ? 0 : alreadyLaunch, - tarteaucitronForceLanguage = (tarteaucitronForceLanguage === undefined) ? '' : tarteaucitronForceLanguage; + tarteaucitronForceLanguage = (tarteaucitronForceLanguage === undefined) ? '' : tarteaucitronForceLanguage, + tarteaucitronProLoadServices; var tarteaucitron = { "cdn": cdn, "user": {}, "lang": {}, "services": {}, + "added": [], + "idprocessed": [], "state": [], "launch": [], + "isAjax": false, "init": function (params) { "use strict"; + var origOpen = XMLHttpRequest.prototype.open; + if (alreadyLaunch === 0) { alreadyLaunch = 1; if (window.addEventListener) { window.addEventListener("load", tarteaucitron.load(params), false); + window.addEventListener("keydown", function (evt) { + if (evt.keyCode === 27) { + tarteaucitron.userInterface.closePanel(); + } + }, false); + window.addEventListener("hashchange", function () { + if (document.location.hash === tarteaucitron.hashtag && tarteaucitron.hashtag !== '') { + tarteaucitron.userInterface.openPanel(); + } + }, false); } else { - window.attachEvent('onload', tarteaucitron.load(params)); + window.attachEvent("onload", tarteaucitron.load(params)); + window.attachEvent("onkeydown", function (evt) { + if (evt.keyCode === 27) { + tarteaucitron.userInterface.closePanel(); + } + }); + window.attachEvent("onhashchange", function () { + if (document.location.hash === tarteaucitron.hashtag && tarteaucitron.hashtag !== '') { + tarteaucitron.userInterface.openPanel(); + } + }); } + + XMLHttpRequest.prototype.open = function () { + this.addEventListener('load', function () { + if (typeof tarteaucitronProLoadServices === 'function') { + tarteaucitronProLoadServices(); + } + }); + origOpen.apply(this, arguments); + }; } }, "load": function (params) { @@ -45,8 +80,9 @@ var tarteaucitron = { tarteaucitron.extend(defaults, params); } - // the hashtag need to be global + // global tarteaucitron.hashtag = defaults.hashtag; + tarteaucitron.highPrivacy = defaults.highPrivacy; // Step 1: load css linkElement.rel = 'stylesheet'; @@ -60,52 +96,12 @@ var tarteaucitron = { var body = document.body, div = document.createElement('div'), - hostname = document.location.hostname, - hostRef = document.referrer.split('/')[2], - isNavigating = (hostRef === hostname) ? true : false, - isAutostart, - isWaiting, - isDenied, - isAllowed, - isResponded, - cookie = tarteaucitron.cookie.read(), s = tarteaucitron.services, - service, html = '', - lastTitle, alert = false, index, orientation = 'Top'; - // dedup, clean and sort job[] - function cleanArray(arr) { - var i, - len = arr.length, - out = [], - obj = {}; - - for (i = 0; i < len; i += 1) { - if (!obj[arr[i]]) { - obj[arr[i]] = {}; - if (tarteaucitron.services[arr[i]] !== undefined) { - out.push(arr[i]); - } - } - } - return out; - } - - if (tarteaucitron.job === undefined) { - return; - } - - tarteaucitron.job = cleanArray(tarteaucitron.job); - tarteaucitron.job = tarteaucitron.job.sort(function (a, b) { - if (s[a].type + s[a].key > s[b].type + s[b].key) { return 1; } - if (s[a].type + s[a].key < s[b].type + s[b].key) { return -1; } - return 0; - }); - // Step 3: prepare the html html += '
'; html += '
'; @@ -120,71 +116,91 @@ var tarteaucitron = { html += ' '; html += ' '; html += '
'; - - html += '
'; - html += '
'; - html += ' ' + tarteaucitron.lang.all + ''; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.all + ''; + html += '
'; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.allow; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.deny; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.ads.title; + html += '
'; + html += ' ' + tarteaucitron.lang.ads.details; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.analytic.title; + html += '
'; + html += ' ' + tarteaucitron.lang.analytic.details; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.api.title; + html += '
'; + html += ' ' + tarteaucitron.lang.api.details; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.comment.title; + html += '
'; + html += ' ' + tarteaucitron.lang.comment.details; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.social.title; + html += '
'; + html += ' ' + tarteaucitron.lang.social.details; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.support.title; + html += '
'; + html += ' ' + tarteaucitron.lang.support.details; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.video.title; + html += '
'; + html += ' ' + tarteaucitron.lang.video.details; + html += '
'; + html += '
'; + html += '
'; + html += '
'; html += '
'; - html += '
'; - html += '
'; - html += ' ' + tarteaucitron.lang.allow; - html += '
'; - html += '
'; - html += ' ' + tarteaucitron.lang.deny; - html += '
'; - html += '
'; - html += '
'; - html += '
'; - - for (index = 0; index < tarteaucitron.job.length; index += 1) { - service = s[tarteaucitron.job[index]]; - - if (lastTitle !== service.type) { - html += '
'; - html += ' ' + tarteaucitron.lang[service.type].title; - html += '
'; - html += ' ' + tarteaucitron.lang[service.type].details; - html += '
'; - html += '
'; - - lastTitle = service.type; - } - - html += '
'; - html += '
'; - html += ' ' + service.name + '
'; - html += '
'; - html += ' '; - html += ' ' + tarteaucitron.lang.more; - html += ' '; - html += ' - '; - html += ' '; - html += ' ' + tarteaucitron.lang.source; - html += ' '; - html += '
'; - html += '
'; - html += '
'; - html += ' ' + tarteaucitron.lang.allow; - html += '
'; - html += '
'; - html += ' ' + tarteaucitron.lang.deny; - html += '
'; - html += '
'; - html += '
'; - html += '
'; - } - - html += '
'; - if (defaults.removeCredit === false) { html += '
'; html += ' ' + tarteaucitron.lang.credit + ''; html += '
'; } - html += ''; - // get the banner orientation if (defaults.orientation === 'bottom') { orientation = 'Bottom'; } @@ -226,64 +242,133 @@ var tarteaucitron = { div.id = 'tarteaucitronRoot'; body.appendChild(div, body); div.innerHTML = html; - - // Step 4: load services - for (index = 0; index < tarteaucitron.job.length; index += 1) { - service = s[tarteaucitron.job[index]]; - isAutostart = (!service.needConsent) ? true : false; - isWaiting = (cookie.indexOf(service.key + '=wait') >= 0) ? true : false; - isDenied = (cookie.indexOf(service.key + '=false') >= 0) ? true : false; - isAllowed = (cookie.indexOf(service.key + '=true') >= 0) ? true : false; - isResponded = (cookie.indexOf(service.key + '=false') >= 0 || cookie.indexOf(service.key + '=true') >= 0) ? true : false; - - // allow by default for non EU - if (isResponded === false && tarteaucitron.user.bypass === true) { - isAllowed = true; - tarteaucitron.cookie.create(service.key, true); + + if (tarteaucitron.job !== undefined) { + tarteaucitron.job = tarteaucitron.cleanArray(tarteaucitron.job); + for (index = 0; index < tarteaucitron.job.length; index += 1) { + tarteaucitron.addService(tarteaucitron.job[index]); } - - if ((!isResponded && (isAutostart || (isNavigating && isWaiting)) && !defaults.highPrivacy) || isAllowed) { - if (!isAllowed) { - tarteaucitron.cookie.create(service.key, true); - } - if (tarteaucitron.launch[service.key] !== true) { - tarteaucitron.launch[service.key] = true; - service.js(); - } - tarteaucitron.state[service.key] = true; - tarteaucitron.userInterface.color(service.key, true); - } else if (isDenied) { - if (typeof service.fallback === 'function') { - service.fallback(); - } - tarteaucitron.state[service.key] = false; - tarteaucitron.userInterface.color(service.key, false); - } else if (!isResponded) { - tarteaucitron.cookie.create(service.key, 'wait'); - if (typeof service.fallback === 'function') { - service.fallback(); - } - } - - if (tarteaucitron.state[service.key] === undefined && !alert) { - alert = true; - } - - tarteaucitron.cookie.checkCount(service.key); - } - - // Step 5: display the alert - if (alert) { - tarteaucitron.userInterface.openAlert(); - } else { - tarteaucitron.userInterface.closeAlert(); } + + tarteaucitron.isAjax = true; + tarteaucitron.job.push = function (id) { + if (tarteaucitron.job.indexOf(id) === -1) { + Array.prototype.push.call(this, id); + } + tarteaucitron.launch[id] = false; + tarteaucitron.addService(id); + }; + if (document.location.hash === tarteaucitron.hashtag && tarteaucitron.hashtag !== '') { tarteaucitron.userInterface.openPanel(); } }); }); }, + "addService": function (serviceId) { + "use strict"; + var html = '', + s = tarteaucitron.services, + service = s[serviceId], + cookie = tarteaucitron.cookie.read(), + hostname = document.location.hostname, + hostRef = document.referrer.split('/')[2], + isNavigating = (hostRef === hostname) ? true : false, + isAutostart = (!service.needConsent) ? true : false, + isWaiting = (cookie.indexOf(service.key + '=wait') >= 0) ? true : false, + isDenied = (cookie.indexOf(service.key + '=false') >= 0) ? true : false, + isAllowed = (cookie.indexOf(service.key + '=true') >= 0) ? true : false, + isResponded = (cookie.indexOf(service.key + '=false') >= 0 || cookie.indexOf(service.key + '=true') >= 0) ? true : false; + + if (tarteaucitron.added[service.key] !== true) { + tarteaucitron.added[service.key] = true; + + html += '
'; + html += '
'; + html += ' ' + service.name + '
'; + html += '
'; + html += ' '; + html += ' ' + tarteaucitron.lang.more; + html += ' '; + html += ' - '; + html += ' '; + html += ' ' + tarteaucitron.lang.source; + html += ' '; + html += '
'; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.allow; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.deny; + html += '
'; + html += '
'; + html += '
'; + + document.getElementById('tarteaucitronServicesTitle_' + service.type).style.display = 'block'; + document.getElementById('tarteaucitronServices_' + service.type).innerHTML += html; + + tarteaucitron.userInterface.order(service.type); + } + + // allow by default for non EU + if (isResponded === false && tarteaucitron.user.bypass === true) { + isAllowed = true; + tarteaucitron.cookie.create(service.key, true); + } + + if ((!isResponded && (isAutostart || (isNavigating && isWaiting)) && !tarteaucitron.highPrivacy) || isAllowed) { + if (!isAllowed) { + tarteaucitron.cookie.create(service.key, true); + } + if (tarteaucitron.launch[service.key] !== true) { + tarteaucitron.launch[service.key] = true; + service.js(); + } + tarteaucitron.state[service.key] = true; + tarteaucitron.userInterface.color(service.key, true); + } else if (isDenied) { + if (typeof service.fallback === 'function') { + service.fallback(); + } + tarteaucitron.state[service.key] = false; + tarteaucitron.userInterface.color(service.key, false); + } else if (!isResponded) { + tarteaucitron.cookie.create(service.key, 'wait'); + if (typeof service.fallback === 'function') { + service.fallback(); + } + tarteaucitron.userInterface.color(service.key, 'wait'); + tarteaucitron.userInterface.openAlert(); + } + + tarteaucitron.cookie.checkCount(service.key); + }, + "cleanArray": function cleanArray(arr) { + "use strict"; + var i, + len = arr.length, + out = [], + obj = {}, + s = tarteaucitron.services; + + for (i = 0; i < len; i += 1) { + if (!obj[arr[i]]) { + obj[arr[i]] = {}; + if (tarteaucitron.services[arr[i]] !== undefined) { + out.push(arr[i]); + } + } + } + + out = out.sort(function (a, b) { + if (s[a].type + s[a].key > s[b].type + s[b].key) { return 1; } + if (s[a].type + s[a].key < s[b].type + s[b].key) { return -1; } + return 0; + }); + + return out; + }, "userInterface": { "css": function (id, property, value) { "use strict"; @@ -301,13 +386,15 @@ var tarteaucitron = { for (index = 0; index < tarteaucitron.job.length; index += 1) { service = s[tarteaucitron.job[index]]; key = service.key; - if (tarteaucitron.launch[key] !== true && status === true) { - tarteaucitron.launch[key] = true; - tarteaucitron.services[key].js(); + if (tarteaucitron.state[key] !== status) { + if (tarteaucitron.launch[key] !== true && status === true) { + tarteaucitron.launch[key] = true; + tarteaucitron.services[key].js(); + } + tarteaucitron.state[key] = status; + tarteaucitron.cookie.create(key, status); + tarteaucitron.userInterface.color(key, status); } - tarteaucitron.state[key] = status; - tarteaucitron.cookie.create(key, status); - tarteaucitron.userInterface.color(key, status); } }, "respond": function (el, status) { @@ -428,6 +515,21 @@ var tarteaucitron = { var c = 'tarteaucitron'; tarteaucitron.userInterface.css(c + 'AlertSmall', 'display', 'block'); tarteaucitron.userInterface.css(c + 'AlertBig', 'display', 'none'); + }, + "order": function (id) { + "use strict"; + var main = document.getElementById('tarteaucitronServices_' + id), + allDivs = main.childNodes, + store = [], + i; + + Array.prototype.map.call(main.children, Object).sort(function (a, b) { + if (a.id > b.id) { return 1; } + if (a.id < b.id) { return -1; } + return 0; + }).forEach(function (element) { + main.appendChild(element); + }); } }, "cookie": { diff --git a/tarteaucitron.services.js b/tarteaucitron.services.js index 9f99388..20e0bbd 100644 --- a/tarteaucitron.services.js +++ b/tarteaucitron.services.js @@ -1,4 +1,4 @@ -/*global tarteaucitron, ga, Shareaholic, stLight, clicky, top, google, Typekit*/ +/*global tarteaucitron, ga, Shareaholic, stLight, clicky, top, google, Typekit, FB, ferankReady, IN, stButtons*/ /*jslint regexp: true, nomen: true*/ // addthis @@ -14,6 +14,15 @@ tarteaucitron.services.addthis = { if (tarteaucitron.user.addthisPubId === undefined) { return; } + if (tarteaucitron.isAjax === true) { + window.addthis = null; + window._adr = null; + window._atc = null; + window._atd = null; + window._ate = null; + window._atr = null; + window._atw = null; + } tarteaucitron.fallback(['addthis_sharing_toolbox'], ''); tarteaucitron.addScript('//s7.addthis.com/js/300/addthis_widget.js#pubid=' + tarteaucitron.user.addthisPubId); }, @@ -300,6 +309,11 @@ tarteaucitron.services.facebook = { "use strict"; tarteaucitron.fallback(['fb-post', 'fb-follow', 'fb-activity', 'fb-send', 'fb-share-button', 'fb-like'], ''); tarteaucitron.addScript('//connect.facebook.net/' + tarteaucitron.getLocale() + '/sdk.js#xfbml=1&version=v2.0', 'facebook-jssdk'); + if (tarteaucitron.isAjax === true) { + if (typeof FB !== "undefined") { + FB.XFBML.parse(); + } + } }, "fallback": function () { "use strict"; @@ -320,6 +334,11 @@ tarteaucitron.services.facebooklikebox = { "use strict"; tarteaucitron.fallback(['fb-like-box'], ''); tarteaucitron.addScript('//connect.facebook.net/' + tarteaucitron.getLocale() + '/sdk.js#xfbml=1&version=v2.0', 'facebook-jssdk'); + if (tarteaucitron.isAjax === true) { + if (typeof FB !== "undefined") { + FB.XFBML.parse(); + } + } }, "fallback": function () { "use strict"; @@ -340,6 +359,11 @@ tarteaucitron.services.facebookcomment = { "use strict"; tarteaucitron.fallback(['fb-comments'], ''); tarteaucitron.addScript('//connect.facebook.net/' + tarteaucitron.getLocale() + '/sdk.js#xfbml=1&version=v2.0', 'facebook-jssdk'); + if (tarteaucitron.isAjax === true) { + if (typeof FB !== "undefined") { + FB.XFBML.parse(); + } + } }, "fallback": function () { "use strict"; @@ -377,6 +401,11 @@ tarteaucitron.services.ferankpub = { "js": function () { "use strict"; tarteaucitron.addScript('//static.ferank.fr/publicite.async.js'); + if (tarteaucitron.isAjax === true) { + if (typeof ferankReady === 'function') { + ferankReady(); + } + } }, "fallback": function () { "use strict"; @@ -653,6 +682,11 @@ tarteaucitron.services.linkedin = { "use strict"; tarteaucitron.fallback(['tacLinkedin'], ''); tarteaucitron.addScript('//platform.linkedin.com/in.js'); + if (tarteaucitron.isAjax === true) { + if (typeof IN !== "undefined") { + IN.parse(); + } + } }, "fallback": function () { "use strict"; @@ -756,6 +790,12 @@ tarteaucitron.services.sharethis = { tarteaucitron.addScript(uri, '', function () { stLight.options({publisher: tarteaucitron.user.sharethisPublisher, doNotHash: false, doNotCopy: false, hashAddressBar: false}); }); + + if (tarteaucitron.isAjax === true) { + if (typeof stButtons !== "undefined") { + stButtons.locateElements(); + } + } }, "fallback": function () { "use strict";