|
/** |
|
* If a user does not allow cookies (Youtube : marketing, Calameo : marketing and statistics), |
|
* displays a message before all blocked iframes (iframes.cookieconsent-optin-marketing) |
|
* |
|
* Cookiebot user preferences are stored in : |
|
* bool Cookiebot.consent.preferences |
|
* bool Cookiebot.consent.statistics |
|
* bool Cookiebot.consent.marketing |
|
* |
|
* Can be changed with Cookiebot.submitCustomContent(preferences,statistics,marketing) |
|
* |
|
* See: https://www.cookiebot.com/fr/developer/ |
|
* |
|
* author: Matthieu Berry |
|
* link: https://github.com/matberry/ |
|
*/ |
|
const getElems = (selector, parent) => { |
|
return Array.prototype.slice.call((parent ? parent : document).querySelectorAll(selector)); |
|
}; |
|
|
|
const getVideoId = (url) => { |
|
let regExp = /^https?\:\/\/(?:www\.youtube(?:\-nocookie)?\.com\/|m\.youtube\.com\/|youtube\.com\/)?(?:ytscreeningroom\?vi?=|youtu\.be\/|vi?\/|user\/.+\/u\/\w{1,2}\/|embed\/|watch\?(?:.*\&)?vi?=|\&vi?=|\?(?:.*\&)?vi?=)([^#\&\?\n\/<>"']*)/i; |
|
let match = url.match(regExp); |
|
return (match && match[1].length === 11) ? match[1] : false; |
|
} |
|
|
|
const getCalameoId = (url) => { |
|
let regExp = /^\/\/(?:v.calameo.com\/|calameo\.com\/)(?:\?bkcode\=)(\w*)/i; |
|
let match = url.match(regExp); |
|
return (match) ? match[1] : false; |
|
} |
|
|
|
let blockedFrames = getElems('iframe.cookieconsent-optin-marketing'); //array d'iframes bloquées |
|
|
|
blockedFrames.forEach(frame => { |
|
if (frame.hasAttribute(('allowtransparency'))) { //calameo |
|
let calameoId = getCalameoId(frame.getAttribute(('data-cookieblock-src'))); |
|
|
|
if (calameoId) { |
|
frame.insertAdjacentHTML('beforebegin', `<div class="cookieconsent-optout-marketing" style="box-sizing: border-box; display: block; margin-bottom: 1em;"><span style="text-align: center;color: #000000;width: 100%;height: 100%;min-height: 200px; background: rgba(0,0,0,.5);z-index: 2;box-sizing: border-box;"><span style="width: 100%; display: flex; height: 100%; flex-direction: column; justify-content: center;">Merci d'accepter les cookies pour lire ce document.<span><a style="border: 1px solid #000; display: inline-block; text-decoration: none; background-color: #fff; padding: 1em; margin-top: 1em; color: #000;" href="javascript:Cookiebot.submitCustomConsent(Cookiebot.consent.preferences,true,true)">accepter</a> <a style="border: 1px solid #000; display: inline-block; text-decoration: none; background-color: #fff; padding: 1em; margin-top: 1em; color: #000;" href="https://www.calameo.com/read/${calameoId}" target="_blank">lire sur Calameo</a></span></span></span></div>`); |
|
} |
|
} else if (frame.hasAttribute('allowfullscreen')) { //youtube |
|
let videoId = getVideoId(frame.getAttribute('data-cookieblock-src')); |
|
let img = videoId == 'videoseries' ? '' : `<img src="https://i.ytimg.com/vi/${videoId}/hqdefault.jpg" style="width: 100%; margin: 0;">`; |
|
let linkYoutube = videoId == 'videoseries' ? '' : `<a style="display: inline-block; text-decoration: none; background-color: #fff; padding: 1em; margin-top: 1em; color: #000;" href="https://www.youtube.com/watch?v=${videoId}" target="_blank">voir cette vidéo sur Youtube</a>`; |
|
|
|
if (videoId) { |
|
frame.insertAdjacentHTML('beforebegin', `<div class="cookieconsent-optout-marketing" style="min-height: 200px; position: relative;box-sizing: border-box; display: block; margin-bottom: 1em;"><span style="position: absolute;top: 0;text-align: center;color: white;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 2;box-sizing: border-box;"><span style="width: 100%; display: flex; height: 100%; flex-direction: column; justify-content: center;">Merci d'accepter les cookies pour voir cette vidéo. <span><a style="display: inline-block; text-decoration: none; background-color: #fff; padding: 1em; margin-top: 1em; color: #000;" href="javascript:Cookiebot.submitCustomConsent(Cookiebot.consent.preferences,Cookiebot.consent.statistics,true)">accepter</a> ${linkYoutube}</span></span></span>${img}</div>`); |
|
} |
|
} |
|
}); |
