tarteaucitron.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559
  1. /*jslint browser: true */
  2. // define correct path for files inclusion
  3. var scripts = document.getElementsByTagName('script'),
  4. path = scripts[scripts.length - 1].src.split('?')[0],
  5. cdn = path.split('/').slice(0, -1).join('/') + '/';
  6. var tarteaucitron = {
  7. "cdn": cdn,
  8. "user": {},
  9. "lang": {},
  10. "services": {},
  11. "state": [],
  12. "launch": [],
  13. "init": function (params) {
  14. "use strict";
  15. if (window.addEventListener) {
  16. window.addEventListener("load", tarteaucitron.load(params), false);
  17. } else {
  18. window.attachEvent('onload', tarteaucitron.load(params));
  19. }
  20. },
  21. "load": function (params) {
  22. "use strict";
  23. var cdn = tarteaucitron.cdn,
  24. language = tarteaucitron.getLanguage(),
  25. pathToLang = cdn + 'lang/tarteaucitron.' + language + '.js',
  26. timestamp = new Date().getTime(),
  27. pathToServices = cdn + 'tarteaucitron.services.js',
  28. parametersCom = '?uuid=' + tarteaucitron.uuid + '&c=' + encodeURIComponent(tarteaucitron.cookie.read()) + '&_' + timestamp,
  29. linkElement = document.createElement('link'),
  30. defaults = {
  31. "grayArea": false,
  32. "hashtag": '#tarteaucitron',
  33. "highPrivacy": false,
  34. "orientation": "top",
  35. "removeCredit": false,
  36. "showAlertSmall": true
  37. };
  38. // is the commercial version ?
  39. if (tarteaucitron.uuid !== '' && tarteaucitron.uuid !== undefined) {
  40. pathToServices = pathToServices + parametersCom;
  41. }
  42. // Step 0: get params
  43. if (params !== undefined) {
  44. tarteaucitron.extend(defaults, params);
  45. }
  46. // the hashtag need to be global
  47. tarteaucitron.hashtag = defaults.hashtag;
  48. // Step 1: load css
  49. linkElement.rel = 'stylesheet';
  50. linkElement.type = 'text/css';
  51. linkElement.href = cdn + 'css/tarteaucitron.css';
  52. document.getElementsByTagName('head')[0].appendChild(linkElement);
  53. // Step 2: load language and services
  54. tarteaucitron.addScript(pathToLang, '', function () {
  55. tarteaucitron.addScript(pathToServices, '', function () {
  56. var body = document.body,
  57. div = document.createElement('div'),
  58. hostname = document.location.hostname,
  59. hostRef = document.referrer.split('/')[2],
  60. isNavigating = (hostRef === hostname) ? true : false,
  61. isAutostart,
  62. isDenied,
  63. isAllowed,
  64. isResponded,
  65. cookie = tarteaucitron.cookie.read(),
  66. s = tarteaucitron.services,
  67. service,
  68. html = '',
  69. lastTitle,
  70. alert = false,
  71. index,
  72. orientation = 'Top';
  73. // dedup, clean and sort job[]
  74. function cleanArray(arr) {
  75. var i,
  76. len = arr.length,
  77. out = [],
  78. obj = {};
  79. for (i = 0; i < len; i += 1) {
  80. if (!obj[arr[i]]) {
  81. obj[arr[i]] = {};
  82. if (tarteaucitron.services[arr[i]] !== undefined) {
  83. out.push(arr[i]);
  84. }
  85. }
  86. }
  87. return out;
  88. }
  89. tarteaucitron.job = cleanArray(tarteaucitron.job);
  90. tarteaucitron.job = tarteaucitron.job.sort(function (a, b) {
  91. if (s[a].type + s[a].key > s[b].type + s[b].key) { return 1; }
  92. if (s[a].type + s[a].key < s[b].type + s[b].key) { return -1; }
  93. return 0;
  94. });
  95. // if bypass: load all services and exit
  96. // for example, set tarteaucitron.user.bypass = true;
  97. // if the user is not in europa
  98. if (tarteaucitron.user.bypass === true) {
  99. for (index = 0; index < tarteaucitron.job.length; index += 1) {
  100. service = s[tarteaucitron.job[index]];
  101. service.js();
  102. }
  103. return;
  104. }
  105. // Step 3: prepare the html
  106. html += '<div id="tarteaucitronBack" onclick="tarteaucitron.userInterface.closePanel();"></div>';
  107. html += '<div id="tarteaucitron">';
  108. html += ' <div id="tarteaucitronClosePanel" onclick="tarteaucitron.userInterface.closePanel();">';
  109. html += ' ' + tarteaucitron.lang.close;
  110. html += ' </div>';
  111. html += ' <div id="tarteaucitronInfo">';
  112. html += ' ' + tarteaucitron.lang.info;
  113. html += ' <div id="tarteaucitronDisclaimer">';
  114. html += ' ' + tarteaucitron.lang.disclaimer;
  115. html += ' </div>';
  116. html += ' </div>';
  117. html += ' <div id="tarteaucitronServices">';
  118. html += '<div class="tarteaucitronLine tarteaucitronMainLine">';
  119. html += ' <div class="tarteaucitronName">';
  120. html += ' <b>' + tarteaucitron.lang.all + '</b>';
  121. html += ' </div>';
  122. html += ' <div class="tarteaucitronAsk">';
  123. html += ' <div id="tarteaucitronAllAllowed" class="tarteaucitronAllow" onclick="tarteaucitron.userInterface.respondAll(true);">';
  124. html += ' ' + tarteaucitron.lang.allow;
  125. html += ' </div> ';
  126. html += ' <div id="tarteaucitronAllDenied" class="tarteaucitronDeny" onclick="tarteaucitron.userInterface.respondAll(false);">';
  127. html += ' ' + tarteaucitron.lang.deny;
  128. html += ' </div>';
  129. html += ' </div>';
  130. html += '</div>';
  131. html += '<div class="clear"></div>';
  132. for (index = 0; index < tarteaucitron.job.length; index += 1) {
  133. service = s[tarteaucitron.job[index]];
  134. if (lastTitle !== service.type) {
  135. html += '<div class="tarteaucitronTitle">';
  136. html += ' ' + tarteaucitron.lang[service.type].title;
  137. html += ' <div class="tarteaucitronDetails">';
  138. html += ' ' + tarteaucitron.lang[service.type].details;
  139. html += ' </div>';
  140. html += '</div>';
  141. lastTitle = service.type;
  142. }
  143. html += '<div id="' + service.key + 'Line" class="tarteaucitronLine">';
  144. html += ' <div class="tarteaucitronName">';
  145. html += ' <b>' + service.name + '</b><br/>';
  146. html += ' <a href="' + service.uri + '" target="_blank">';
  147. html += ' ' + tarteaucitron.lang.more + ' : ' + service.uri.split('/')[2];
  148. html += ' </a>';
  149. html += ' </div>';
  150. html += ' <div class="tarteaucitronAsk">';
  151. html += ' <div id="' + service.key + 'Allowed" class="tarteaucitronAllow" onclick="tarteaucitron.userInterface.respond(this, true);">';
  152. html += ' ' + tarteaucitron.lang.allow;
  153. html += ' </div> ';
  154. html += ' <div id="' + service.key + 'Denied" class="tarteaucitronDeny" onclick="tarteaucitron.userInterface.respond(this, false);">';
  155. html += ' ' + tarteaucitron.lang.deny;
  156. html += ' </div>';
  157. html += ' </div>';
  158. html += '</div>';
  159. html += '<div class="clear"></div>';
  160. }
  161. html += ' </div>';
  162. if (defaults.removeCredit === false) {
  163. html += ' <div id="tarteaucitronFooter">';
  164. html += ' <a href="https://opt-out.ferank.eu/" rel="nofollow" target="_blank">' + tarteaucitron.lang.credit + '</a>';
  165. html += ' </div>';
  166. }
  167. html += '</div>';
  168. // get the banner orientation
  169. if (defaults.orientation === 'bottom') {
  170. orientation = 'Bottom';
  171. }
  172. if (defaults.highPrivacy) {
  173. html += '<div id="tarteaucitronAlertBig" class="tarteaucitronAlertBig' + orientation + '">';
  174. html += ' <span id="tarteaucitronDisclaimerAlert">';
  175. html += ' ' + tarteaucitron.lang.alertBigPrivacy;
  176. html += ' </span>';
  177. html += ' <span id="tarteaucitronPersonalize" onclick="tarteaucitron.userInterface.openPanel();">';
  178. html += ' ' + tarteaucitron.lang.personalize;
  179. html += ' </span>';
  180. html += '</div>';
  181. } else {
  182. html += '<div id="tarteaucitronAlertBig" class="tarteaucitronAlertBig' + orientation + '">';
  183. html += ' <span id="tarteaucitronDisclaimerAlert">';
  184. html += ' ' + tarteaucitron.lang.alertBig;
  185. html += ' </span>';
  186. html += ' <span id="tarteaucitronPersonalize" onclick="tarteaucitron.userInterface.respondAll(true);">';
  187. html += ' ' + tarteaucitron.lang.acceptAll;
  188. html += ' </span>';
  189. html += ' <span id="tarteaucitronCloseAlert" onclick="tarteaucitron.userInterface.openPanel();">';
  190. html += ' ' + tarteaucitron.lang.personalize;
  191. html += ' </span>';
  192. html += '</div>';
  193. }
  194. if (defaults.showAlertSmall === true) {
  195. html += '<div id="tarteaucitronAlertSmall" onclick="tarteaucitron.userInterface.openPanel();">';
  196. html += ' ' + tarteaucitron.lang.alertSmall;
  197. html += ' <div id="tarteaucitronDot">';
  198. html += ' <span id="tarteaucitronDotGreen"></span>';
  199. html += ' <span id="tarteaucitronDotYellow"></span>';
  200. html += ' <span id="tarteaucitronDotRed"></span>';
  201. html += ' </div>';
  202. html += '</div>';
  203. }
  204. div.id = 'tarteaucitronRoot';
  205. body.appendChild(div, body);
  206. div.innerHTML = html;
  207. // Step 4: load services
  208. for (index = 0; index < tarteaucitron.job.length; index += 1) {
  209. service = s[tarteaucitron.job[index]];
  210. isAutostart = (!service.needConsent) ? true : false;
  211. isDenied = (cookie.indexOf(service.key + '=false') >= 0) ? true : false;
  212. isAllowed = (cookie.indexOf(service.key + '=true') >= 0) ? true : false;
  213. isResponded = (cookie.indexOf(service.key) >= 0) ? true : false;
  214. if ((!isResponded && (isAutostart || isNavigating) && !defaults.highPrivacy) || isAllowed) {
  215. if (!isAllowed) {
  216. tarteaucitron.cookie.create(service.key, true);
  217. }
  218. if (tarteaucitron.launch[service.key] !== true) {
  219. tarteaucitron.launch[service.key] = true;
  220. service.js();
  221. }
  222. tarteaucitron.state[service.key] = true;
  223. tarteaucitron.userInterface.color(service.key, true);
  224. } else if (isDenied) {
  225. if (typeof service.fallback === 'function') {
  226. service.fallback();
  227. }
  228. tarteaucitron.state[service.key] = false;
  229. tarteaucitron.userInterface.color(service.key, false);
  230. } else if (!isResponded) {
  231. if (typeof service.grayJs === 'function' && defaults.grayArea === true) {
  232. service.grayJs();
  233. } else if (typeof service.fallback === 'function') {
  234. service.fallback();
  235. }
  236. }
  237. if (tarteaucitron.state[service.key] === undefined && !alert) {
  238. alert = true;
  239. }
  240. }
  241. // Step 5: display the alert
  242. if (alert) {
  243. tarteaucitron.userInterface.openAlert();
  244. } else {
  245. tarteaucitron.userInterface.closeAlert();
  246. }
  247. if (document.location.hash === tarteaucitron.hashtag && tarteaucitron.hashtag !== '') {
  248. tarteaucitron.userInterface.openPanel();
  249. }
  250. });
  251. });
  252. },
  253. "userInterface": {
  254. "css": function (id, property, value) {
  255. "use strict";
  256. if (document.getElementById(id) !== null) {
  257. document.getElementById(id).style[property] = value;
  258. }
  259. },
  260. "respondAll": function (status) {
  261. "use strict";
  262. var s = tarteaucitron.services,
  263. service,
  264. key,
  265. index = 0;
  266. for (index = 0; index < tarteaucitron.job.length; index += 1) {
  267. service = s[tarteaucitron.job[index]];
  268. key = service.key;
  269. if (tarteaucitron.launch[key] !== true && status === true) {
  270. tarteaucitron.launch[key] = true;
  271. tarteaucitron.services[key].js();
  272. }
  273. tarteaucitron.state[key] = status;
  274. tarteaucitron.cookie.create(key, status);
  275. tarteaucitron.userInterface.color(key, status);
  276. }
  277. },
  278. "respond": function (el, status) {
  279. "use strict";
  280. var key = el.id.replace(new RegExp("(Eng[0-9]+|Allow|Deni)ed", "g"), '');
  281. // return if same state
  282. if (tarteaucitron.state[key] === status) {
  283. return;
  284. }
  285. // if not already launched... launch the service
  286. if (status === true) {
  287. if (tarteaucitron.launch[key] !== true) {
  288. tarteaucitron.launch[key] = true;
  289. tarteaucitron.services[key].js();
  290. }
  291. }
  292. tarteaucitron.state[key] = status;
  293. tarteaucitron.cookie.create(key, status);
  294. tarteaucitron.userInterface.color(key, status);
  295. },
  296. "color": function (key, status) {
  297. "use strict";
  298. var gray = '#808080',
  299. greenDark = '#1B870B',
  300. greenLight = '#E6FFE2',
  301. redDark = '#9C1A1A',
  302. redLight = '#FFE2E2',
  303. yellowDark = '#FBDA26',
  304. c = 'tarteaucitron',
  305. nbDenied = 0,
  306. nbPending = 0,
  307. nbAllowed = 0,
  308. sum = tarteaucitron.job.length,
  309. index;
  310. if (status === true) {
  311. tarteaucitron.userInterface.css(key + 'Line', 'borderLeft', '5px solid ' + greenDark);
  312. tarteaucitron.userInterface.css(key + 'Allowed', 'backgroundColor', greenDark);
  313. tarteaucitron.userInterface.css(key + 'Denied', 'backgroundColor', gray);
  314. } else if (status === false) {
  315. tarteaucitron.userInterface.css(key + 'Line', 'borderLeft', '5px solid ' + redDark);
  316. tarteaucitron.userInterface.css(key + 'Allowed', 'backgroundColor', gray);
  317. tarteaucitron.userInterface.css(key + 'Denied', 'backgroundColor', redDark);
  318. }
  319. // check if all services are allowed
  320. for (index = 0; index < sum; index += 1) {
  321. if (tarteaucitron.state[tarteaucitron.job[index]] === false) {
  322. nbDenied += 1;
  323. } else if (tarteaucitron.state[tarteaucitron.job[index]] === undefined) {
  324. nbPending += 1;
  325. } else if (tarteaucitron.state[tarteaucitron.job[index]] === true) {
  326. nbAllowed += 1;
  327. }
  328. }
  329. tarteaucitron.userInterface.css(c + 'DotGreen', 'width', ((100 / sum) * nbAllowed) + '%');
  330. tarteaucitron.userInterface.css(c + 'DotYellow', 'width', ((100 / sum) * nbPending) + '%');
  331. tarteaucitron.userInterface.css(c + 'DotRed', 'width', ((100 / sum) * nbDenied) + '%');
  332. if (nbDenied === 0 && nbPending === 0) {
  333. tarteaucitron.userInterface.css(c + 'AllAllowed', 'backgroundColor', greenDark);
  334. tarteaucitron.userInterface.css(c + 'AllDenied', 'backgroundColor', gray);
  335. } else if (nbAllowed === 0 && nbPending === 0) {
  336. tarteaucitron.userInterface.css(c + 'AllAllowed', 'backgroundColor', gray);
  337. tarteaucitron.userInterface.css(c + 'AllDenied', 'backgroundColor', redDark);
  338. } else {
  339. tarteaucitron.userInterface.css(c + 'AllAllowed', 'backgroundColor', gray);
  340. tarteaucitron.userInterface.css(c + 'AllDenied', 'backgroundColor', gray);
  341. }
  342. // close the alert if all service have been reviewed
  343. if (nbPending === 0) {
  344. tarteaucitron.userInterface.closeAlert();
  345. }
  346. },
  347. "openPanel": function () {
  348. "use strict";
  349. tarteaucitron.userInterface.css('tarteaucitron', 'display', 'block');
  350. tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'block');
  351. // setting hash tag
  352. if (tarteaucitron.hashtag !== '') {
  353. document.location.hash = tarteaucitron.hashtag;
  354. }
  355. },
  356. "closePanel": function () {
  357. "use strict";
  358. tarteaucitron.userInterface.css('tarteaucitron', 'display', 'none');
  359. tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'none');
  360. },
  361. "openAlert": function () {
  362. "use strict";
  363. var c = 'tarteaucitron';
  364. tarteaucitron.userInterface.css(c + 'AlertSmall', 'display', 'none');
  365. tarteaucitron.userInterface.css(c + 'AlertBig', 'display', 'block');
  366. },
  367. "closeAlert": function () {
  368. "use strict";
  369. var c = 'tarteaucitron';
  370. tarteaucitron.userInterface.css(c + 'AlertSmall', 'display', 'block');
  371. tarteaucitron.userInterface.css(c + 'AlertBig', 'display', 'none');
  372. }
  373. },
  374. "cookie": {
  375. "create": function (key, status) {
  376. "use strict";
  377. var d = new Date(),
  378. time = d.getTime(),
  379. expireTime = time + 31536000000, // 365 days
  380. regex = new RegExp("!" + key + "=(true|false)", "g"),
  381. cookie = tarteaucitron.cookie.read().replace(regex, ""),
  382. value = 'tarteaucitron=' + cookie + '!' + key + '=' + status;
  383. d.setTime(expireTime);
  384. document.cookie = value + '; expires=' + d.toGMTString() + '; path=/;';
  385. },
  386. "read": function () {
  387. "use strict";
  388. var nameEQ = "tarteaucitron=",
  389. ca = document.cookie.split(';'),
  390. i,
  391. c;
  392. for (i = 0; i < ca.length; i += 1) {
  393. c = ca[i];
  394. while (c.charAt(0) === ' ') {
  395. c = c.substring(1, c.length);
  396. }
  397. if (c.indexOf(nameEQ) === 0) {
  398. return c.substring(nameEQ.length, c.length);
  399. }
  400. }
  401. return '';
  402. },
  403. "purge": function (arr) {
  404. "use strict";
  405. var i;
  406. for (i = 0; i < arr.length; i += 1) {
  407. document.cookie = arr[i] + '=; expires=Thu, 01 Jan 2000 00:00:00 GMT; path=/;';
  408. document.cookie = arr[i] + '=; expires=Thu, 01 Jan 2000 00:00:00 GMT; path=/; domain=.' + location.hostname + ';';
  409. document.cookie = arr[i] + '=; expires=Thu, 01 Jan 2000 00:00:00 GMT; path=/; domain=.' + location.hostname.split('.').slice(-2).join('.') + ';';
  410. }
  411. }
  412. },
  413. "getLanguage": function () {
  414. "use strict";
  415. if (!navigator) { return 'en'; }
  416. var availableLanguages = 'en,fr',
  417. defaultLanguage = 'en',
  418. lang = navigator.language || navigator.browserLanguage ||
  419. navigator.systemLanguage || navigator.userLang || null,
  420. userLanguage = lang.substr(0, 2);
  421. if (availableLanguages.indexOf(userLanguage) === -1) {
  422. return defaultLanguage;
  423. }
  424. return userLanguage;
  425. },
  426. "getLocale": function () {
  427. "use strict";
  428. if (!navigator) { return 'en_US'; }
  429. var lang = navigator.language || navigator.browserLanguage ||
  430. navigator.systemLanguage || navigator.userLang || null,
  431. userLanguage = lang.substr(0, 2);
  432. if (userLanguage === 'fr') {
  433. return 'fr_FR';
  434. } else if (userLanguage === 'en') {
  435. return 'en_US';
  436. } else if (userLanguage === 'de') {
  437. return 'de_DE';
  438. } else if (userLanguage === 'es') {
  439. return 'es_ES';
  440. } else if (userLanguage === 'it') {
  441. return 'it_IT';
  442. } else if (userLanguage === 'pt') {
  443. return 'pt_PT';
  444. } else {
  445. return 'en_US';
  446. }
  447. },
  448. "addScript": function (url, id, callback) {
  449. "use strict";
  450. var script = document.createElement('script'),
  451. done = false;
  452. script.type = 'text/javascript';
  453. script.id = (id !== undefined) ? id : '';
  454. script.async = true;
  455. script.src = url;
  456. if (typeof callback === 'function') {
  457. script.onreadystatechange = script.onload = function () {
  458. var state = script.readyState;
  459. if (!done && (!state || /loaded|complete/.test(state))) {
  460. done = true;
  461. callback();
  462. }
  463. };
  464. }
  465. document.getElementsByTagName('head')[0].appendChild(script);
  466. },
  467. "fallback": function (matchClass, content) {
  468. "use strict";
  469. var elems = document.getElementsByTagName('*'),
  470. i,
  471. index = 0;
  472. for (i in elems) {
  473. if (elems[i] !== undefined) {
  474. for (index = 0; index < matchClass.length; index += 1) {
  475. if ((' ' + elems[i].className + ' ')
  476. .indexOf(' ' + matchClass[index] + ' ') > -1) {
  477. if (typeof content === 'function') {
  478. elems[i].innerHTML = content(elems[i]);
  479. } else {
  480. elems[i].innerHTML = content;
  481. }
  482. }
  483. }
  484. }
  485. }
  486. },
  487. "engage": function (id) {
  488. "use strict";
  489. var html = '',
  490. r = Math.floor(Math.random() * 100000);
  491. html += '<div class="tac_activate">';
  492. html += ' <div class="tac_float">';
  493. html += ' <b>' + id + '</b> ' + tarteaucitron.lang.fallback + '<br/>';
  494. html += ' <div class="tarteaucitronAllow" id="Eng' + r + 'ed' + id + '" onclick="tarteaucitron.userInterface.respond(this, true);">';
  495. html += ' ' + tarteaucitron.lang.allow;
  496. html += ' </div>';
  497. html += ' </div>';
  498. html += '</div>';
  499. return html;
  500. },
  501. "extend": function (a, b) {
  502. "use strict";
  503. var prop;
  504. for (prop in b) {
  505. if (b.hasOwnProperty(prop)) {
  506. a[prop] = b[prop];
  507. }
  508. }
  509. }
  510. };