Ajax compatible (!)

This commit is contained in:
Amauri CHAMPEAUX 2015-02-25 16:35:05 +01:00
parent e5727618a9
commit 42d55abf8a
3 changed files with 309 additions and 167 deletions

View File

@ -30,8 +30,8 @@
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;
}

View File

@ -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);
} else {
window.attachEvent('onload', tarteaucitron.load(params));
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("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 += '<div id="tarteaucitronPremium"></div>';
html += '<div id="tarteaucitronBack" onclick="tarteaucitron.userInterface.closePanel();"></div>';
@ -120,8 +116,7 @@ var tarteaucitron = {
html += ' </div>';
html += ' </div>';
html += ' <div id="tarteaucitronServices">';
html += '<div class="tarteaucitronLine tarteaucitronMainLine">';
html += ' <div class="tarteaucitronLine tarteaucitronMainLine">';
html += ' <div class="tarteaucitronName">';
html += ' <b>' + tarteaucitron.lang.all + '</b>';
html += ' </div>';
@ -133,58 +128,79 @@ var tarteaucitron = {
html += ' ' + tarteaucitron.lang.deny;
html += ' </div>';
html += ' </div>';
html += '</div>';
html += '<div class="clear"></div>';
for (index = 0; index < tarteaucitron.job.length; index += 1) {
service = s[tarteaucitron.job[index]];
if (lastTitle !== service.type) {
html += '<div class="tarteaucitronTitle">';
html += ' ' + tarteaucitron.lang[service.type].title;
html += ' </div>';
html += ' <div class="clear"></div>';
html += ' <div id="tarteaucitronServicesTitle_ads" class="tarteaucitronHidden">';
html += ' <div class="tarteaucitronTitle">';
html += ' ' + tarteaucitron.lang.ads.title;
html += ' <div class="tarteaucitronDetails">';
html += ' ' + tarteaucitron.lang[service.type].details;
html += ' </div>';
html += '</div>';
lastTitle = service.type;
}
html += '<div id="' + service.key + 'Line" class="tarteaucitronLine">';
html += ' <div class="tarteaucitronName">';
html += ' <b>' + service.name + '</b><br/>';
html += ' <span id="tacCL' + service.key + '" class="tarteaucitronListCookies"></span><br/>';
html += ' <a href="https://opt-out.ferank.eu/service/' + service.key + '/" target="_blank">';
html += ' ' + tarteaucitron.lang.more;
html += ' </a>';
html += ' - ';
html += ' <a href="' + service.uri + '" target="_blank">';
html += ' ' + tarteaucitron.lang.source;
html += ' </a>';
html += ' </div>';
html += ' <div class="tarteaucitronAsk">';
html += ' <div id="' + service.key + 'Allowed" class="tarteaucitronAllow" onclick="tarteaucitron.userInterface.respond(this, true);">';
html += ' ' + tarteaucitron.lang.allow;
html += ' </div> ';
html += ' <div id="' + service.key + 'Denied" class="tarteaucitronDeny" onclick="tarteaucitron.userInterface.respond(this, false);">';
html += ' ' + tarteaucitron.lang.deny;
html += ' ' + tarteaucitron.lang.ads.details;
html += ' </div>';
html += ' </div>';
html += '</div>';
html += '<div class="clear"></div>';
}
html += ' </div>';
html += ' <div id="tarteaucitronServices_ads"></div>';
html += ' <div id="tarteaucitronServicesTitle_analytic" class="tarteaucitronHidden">';
html += ' <div class="tarteaucitronTitle">';
html += ' ' + tarteaucitron.lang.analytic.title;
html += ' <div class="tarteaucitronDetails">';
html += ' ' + tarteaucitron.lang.analytic.details;
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div id="tarteaucitronServices_analytic"></div>';
html += ' <div id="tarteaucitronServicesTitle_api" class="tarteaucitronHidden">';
html += ' <div class="tarteaucitronTitle">';
html += ' ' + tarteaucitron.lang.api.title;
html += ' <div class="tarteaucitronDetails">';
html += ' ' + tarteaucitron.lang.api.details;
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div id="tarteaucitronServices_api"></div>';
html += ' <div id="tarteaucitronServicesTitle_comment" class="tarteaucitronHidden">';
html += ' <div class="tarteaucitronTitle">';
html += ' ' + tarteaucitron.lang.comment.title;
html += ' <div class="tarteaucitronDetails">';
html += ' ' + tarteaucitron.lang.comment.details;
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div id="tarteaucitronServices_comment"></div>';
html += ' <div id="tarteaucitronServicesTitle_social" class="tarteaucitronHidden">';
html += ' <div class="tarteaucitronTitle">';
html += ' ' + tarteaucitron.lang.social.title;
html += ' <div class="tarteaucitronDetails">';
html += ' ' + tarteaucitron.lang.social.details;
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div id="tarteaucitronServices_social"></div>';
html += ' <div id="tarteaucitronServicesTitle_support" class="tarteaucitronHidden">';
html += ' <div class="tarteaucitronTitle">';
html += ' ' + tarteaucitron.lang.support.title;
html += ' <div class="tarteaucitronDetails">';
html += ' ' + tarteaucitron.lang.support.details;
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div id="tarteaucitronServices_support"></div>';
html += ' <div id="tarteaucitronServicesTitle_video" class="tarteaucitronHidden">';
html += ' <div class="tarteaucitronTitle">';
html += ' ' + tarteaucitron.lang.video.title;
html += ' <div class="tarteaucitronDetails">';
html += ' ' + tarteaucitron.lang.video.details;
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <div id="tarteaucitronServices_video"></div>';
html += ' </div>';
if (defaults.removeCredit === false) {
html += ' <div id="tarteaucitronFooter">';
html += ' <a href="https://opt-out.ferank.eu/" rel="nofollow" target="_blank">' + tarteaucitron.lang.credit + '</a>';
html += ' </div>';
}
html += '</div>';
// get the banner orientation
if (defaults.orientation === 'bottom') {
orientation = 'Bottom';
}
@ -227,22 +243,81 @@ var tarteaucitron = {
body.appendChild(div, body);
div.innerHTML = html;
// Step 4: load services
if (tarteaucitron.job !== undefined) {
tarteaucitron.job = tarteaucitron.cleanArray(tarteaucitron.job);
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;
tarteaucitron.addService(tarteaucitron.job[index]);
}
}
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 += '<div id="' + service.key + 'Line" class="tarteaucitronLine">';
html += ' <div class="tarteaucitronName">';
html += ' <b>' + service.name + '</b><br/>';
html += ' <span id="tacCL' + service.key + '" class="tarteaucitronListCookies"></span><br/>';
html += ' <a href="https://opt-out.ferank.eu/service/' + service.key + '/" target="_blank">';
html += ' ' + tarteaucitron.lang.more;
html += ' </a>';
html += ' - ';
html += ' <a href="' + service.uri + '" target="_blank">';
html += ' ' + tarteaucitron.lang.source;
html += ' </a>';
html += ' </div>';
html += ' <div class="tarteaucitronAsk">';
html += ' <div id="' + service.key + 'Allowed" class="tarteaucitronAllow" onclick="tarteaucitron.userInterface.respond(this, true);">';
html += ' ' + tarteaucitron.lang.allow;
html += ' </div> ';
html += ' <div id="' + service.key + 'Denied" class="tarteaucitronDeny" onclick="tarteaucitron.userInterface.respond(this, false);">';
html += ' ' + tarteaucitron.lang.deny;
html += ' </div>';
html += ' </div>';
html += '</div>';
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)) && !defaults.highPrivacy) || isAllowed) {
if ((!isResponded && (isAutostart || (isNavigating && isWaiting)) && !tarteaucitron.highPrivacy) || isAllowed) {
if (!isAllowed) {
tarteaucitron.cookie.create(service.key, true);
}
@ -263,26 +338,36 @@ var tarteaucitron = {
if (typeof service.fallback === 'function') {
service.fallback();
}
}
if (tarteaucitron.state[service.key] === undefined && !alert) {
alert = true;
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]);
}
}
}
// Step 5: display the alert
if (alert) {
tarteaucitron.userInterface.openAlert();
} else {
tarteaucitron.userInterface.closeAlert();
}
if (document.location.hash === tarteaucitron.hashtag && tarteaucitron.hashtag !== '') {
tarteaucitron.userInterface.openPanel();
}
});
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) {
@ -301,6 +386,7 @@ var tarteaucitron = {
for (index = 0; index < tarteaucitron.job.length; index += 1) {
service = s[tarteaucitron.job[index]];
key = service.key;
if (tarteaucitron.state[key] !== status) {
if (tarteaucitron.launch[key] !== true && status === true) {
tarteaucitron.launch[key] = true;
tarteaucitron.services[key].js();
@ -309,6 +395,7 @@ var tarteaucitron = {
tarteaucitron.cookie.create(key, status);
tarteaucitron.userInterface.color(key, status);
}
}
},
"respond": function (el, status) {
"use strict";
@ -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": {

View File

@ -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";