/** * LDC Service Web * Version 1.3 */ export class LdcwebCn { constructor(config) { this.config = config; this.cookieContainer = document.getElementById("ldcweb-cn"); this.bannerContainer = document.querySelector(".ldcweb-cn-banner"); this.bannerBtn = document.querySelector(".ldcweb-banner-btnDetails-p"); this.ldcwebBtn = document.querySelector(".ldcweb-btn"); this.ldcwebBannerParaP = document.querySelector(".ldcweb-banner-para-p"); this.ldcwebBannerContent = document.querySelector(".ldcweb-banner-content"); this.ldcwebBannerDetails = document.querySelector(".ldcweb-banner-details"); this.ldcwebBannerBtnDetails = document.querySelector(".ldcweb-banner-btnDetails"); this.modalContainer = document.getElementById("ldcweb-cn-modal"); this.acceptAllBtnBanner = document.getElementById("ldcweb-cn-accept-banner"); this.denyAllBtnBanner = document.getElementById("ldcweb-cn-deny-banner"); this.personalizeBtn = document.getElementsByClassName("ldcweb-cn-personalize"); this.personalizeBtnBanner = document.querySelector(".ldcweb-cn-personalize") this.changeBtn = document.getElementsByClassName("ldcweb-cn-change"); this.cookiesList = document.getElementById("ldcweb-cn-list"); this.cookieLink = document.querySelector(".ldcweb-cn-cookie-link"); this.modalDetails = document.querySelector('.modal-details'); this.template = document.getElementById("template").cloneNode(true); this.modalBtnBoolean = 0; this.bannerBtnTextBoolean = 0; document.getElementById("template").remove(); let cookies = this.getLDCWebCookie("ldcwebcn-init"); if (cookies === undefined) { let newCookie = []; for (const [key] of Object.entries(this.config)) { newCookie.push(key + "=wait"); } this.bannerContainer.classList.add("ldcweb-cn-banner-open"); this.saveLDCWebCookie(newCookie); } else { let test = cookies.split(","); test.forEach((elm) => { let test = elm.split("="); if (test[1] === "wait") { this.bannerContainer.classList.add("ldcweb-cn-banner-open"); } }); } let accept = function (e) { e.preventDefault(); for (const [key, value] of Object.entries(this.config)) { this.addCookie(key, value); } for (let acceptLabel of this.cookieContainer.querySelectorAll( ".accept > label" )) { acceptLabel.classList.add("active"); } for (let denyLabel of this.cookieContainer.querySelectorAll( ".deny > label" )) { denyLabel.classList.remove("active"); } this.updateAllCookiesButtonsActiveStatus(); this.bannerContainer.classList.remove("ldcweb-cn-banner-open"); }.bind(this); this.acceptAllBtnBanner.addEventListener("click", accept); let deny = function (e) { e.preventDefault(); for (const [key, value] of Object.entries(this.config)) { this.removeCookie(key, value); } for (let acceptLabel of this.cookieContainer.querySelectorAll( ".accept > label" )) { acceptLabel.classList.remove("active"); } for (let denyLabel of this.cookieContainer.querySelectorAll( ".deny > label" )) { denyLabel.classList.add("active"); } this.updateAllCookiesButtonsActiveStatus(); this.bannerContainer.classList.remove("ldcweb-cn-banner-open"); }.bind(this); this.denyAllBtnBanner.addEventListener("click", deny); let openLdcwebCookies = function (e) { e.preventDefault(); this.bannerContainer.classList.add("ldcweb-cn-banner-open"); this.ldcwebBannerContent.classList.add("visibility"); this.ldcwebBannerDetails.classList.add("visibility"); this.ldcwebBannerBtnDetails.classList.add("visibility"); this.modalContainer.classList.remove("visibility"); this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute("data-open-modal"); this.modalBtnBoolean = 1; this.modalDetails.scrollTop = 0; this.openModal() }.bind(this) this.cookieLink.addEventListener("click", openLdcwebCookies); let hideModal = function (e) { e.preventDefault(); this.ldcwebBannerContent.classList.toggle("visibility"); this.ldcwebBannerDetails.classList.toggle("visibility"); this.ldcwebBannerBtnDetails.classList.toggle("visibility"); this.modalContainer.classList.toggle("visibility"); this.setCookieList(); }.bind(this) this.personalizeBtnBanner.addEventListener("click", hideModal); let changeBtnPersonalize = function (e) { e.preventDefault(); this.modalDetails.scrollTop = 0; if (this.modalBtnBoolean === 0) { this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute("data-open-modal"); this.modalBtnBoolean = 1; } else { this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute("data-close-modal"); this.modalBtnBoolean = 0; } }.bind(this); this.personalizeBtnBanner.addEventListener("click", changeBtnPersonalize); this.setListenerOnChange(); let cookie = this.getLDCWebCookie("ldcwebcn-init"); let test = cookie.split(","); test.forEach((elm) => { let test = elm.split("="); if (test[1] === "true") { this.config[test[0]].script(); } }); this.updateAllCookiesButtonsActiveStatus(); let changePara = function (e) { e.preventDefault(); this.ldcwebBannerDetails.classList.toggle("ldcweb-banner-details-open"); this.bannerBtn.classList.toggle("ldcweb-banner-btnDetails-p-open"); if (this.bannerBtnTextBoolean === 0) { e.target.innerHTML = e.target.getAttribute("data-open"); this.ldcwebBannerParaP.innerHTML = this.ldcwebBannerParaP.getAttribute("data-open"); this.ldcwebBannerDetails.style.height = this.ldcwebBannerDetails.children[0].clientHeight + "px" this.bannerBtnTextBoolean = 1; } else { e.target.innerHTML = e.target.getAttribute("data-close"); this.ldcwebBannerParaP.innerHTML = this.ldcwebBannerParaP.getAttribute("data-close"); this.ldcwebBannerDetails.style.height = "0px" this.bannerBtnTextBoolean = 0; } }.bind(this); this.bannerBtn.addEventListener("click", changePara); let resetVue = function (e) { e.preventDefault(); this.bannerContainer.classList.toggle("ldcweb-cn-banner-open") if (this.bannerContainer.classList.contains("ldcweb-cn-banner-open")) { this.ldcwebBannerContent.classList.remove("visibility"), this.ldcwebBannerDetails.classList.remove("visibility"), this.ldcwebBannerBtnDetails.classList.remove("visibility"), this.modalContainer.classList.add("visibility"); this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute("data-close-modal"); this.modalBtnBoolean = 0; } }.bind(this); this.ldcwebBtn.addEventListener("click", resetVue); } setCookieList() { this.cookiesList.innerHTML = ""; let cookiesSite = this.getLDCWebCookie("ldcwebcn-init"); let acceptInputEvent = function (acceptLabel, denyLabel, key, value) { return function () { acceptLabel.classList.add("active"); denyLabel.classList.remove("active"); this.updateAllCookiesButtonsActiveStatus(); this.addCookie(key, value); }.bind(this, [acceptLabel, denyLabel, key, value]); }; let denyInputEvent = function (acceptLabel, denyLabel, key, value) { return function () { acceptLabel.classList.remove("active"); denyLabel.classList.add("active"); this.updateAllCookiesButtonsActiveStatus(); this.removeCookie(key, value); }.bind(this, [acceptLabel, denyLabel, key, value]); }; for (const [key, value] of Object.entries(this.config)) { let cookie = document.createElement("li"); cookie.append(this.template.children.item(0).cloneNode(true)); let name = cookie.querySelector("span.ldcweb-cn-name"); let description = cookie.querySelector("span.ldcweb-cn-description"); let link = cookie.querySelector("a.ldcweb-cn-link"); let acceptInput = cookie.querySelector(".accept > input"); let denyInput = cookie.querySelector(".deny > input"); let acceptLabel = cookie.querySelector(".accept > label"); let denyLabel = cookie.querySelector(".deny > label"); name.textContent = value.name; description.textContent = value.description; link.textContent = value.labelLink; link.setAttribute("href", value.link); acceptInput.id = key + "1"; acceptInput.name = key; acceptInput.dataset.name = key; acceptLabel.htmlFor = key + "1"; denyInput.id = key + "2"; denyInput.name = key; denyInput.dataset.name = key; denyLabel.htmlFor = key + "2"; acceptInput.addEventListener( "click", acceptInputEvent.apply(this, [acceptLabel, denyLabel, key, value]) ); denyInput.addEventListener( "click", denyInputEvent.apply(this, [acceptLabel, denyLabel, key, value]) ); this.cookiesList.append(cookie); let cookiesArray = cookiesSite.split(","); for (const cookieEl of cookiesArray) { let name = cookieEl.slice(0, cookieEl.indexOf("=")); let status = cookieEl.slice(cookieEl.indexOf("=") + 1); if (name === key) { acceptLabel.classList.remove("active"); denyLabel.classList.remove("active"); switch (status) { case "true": acceptLabel.classList.add("active"); break; case "false": denyLabel.classList.add("active"); break; } } } } this.setListenerOnChange(); } updateAllCookiesButtonsActiveStatus() { let acceptsButtons = this.cookieContainer.querySelectorAll("div.accept > label"); let deniesButtons = this.cookieContainer.querySelectorAll("div.deny > label"); let activeAcceptsButtons = this.cookieContainer.querySelectorAll("div.accept > label.active"); let activeDeniesButtons = this.cookieContainer.querySelectorAll("div.deny > label.active"); if (acceptsButtons.length && acceptsButtons.length === activeAcceptsButtons.length) { } if (deniesButtons.length && deniesButtons.length === activeDeniesButtons.length) { } } addCookie(key, value) { if (value.script) { value.script(); } this.changeStatus(key, "true"); } removeCookie(key, value) { for (let cookieName of value.cookies) { this.deleteBrowserCookie(cookieName, "/", "." + location.host); } if (document.getElementById(key)) { document.getElementById(key).remove(); } this.changeStatus(key, "false"); } setListenerOnChange() { this.changeBtn = document.getElementsByClassName("ldcweb-cn-change"); let itemClick = function (item) { return function () { this.changeStatus( item.getAttribute("data-name"), item.getAttribute("data-status") ); }.bind(this); }; for (let item of this.changeBtn) { this.addEvent(item, "click", itemClick.bind(this, [item])); } } changeStatus(name, status) { let newCookie = []; let cookie = this.getLDCWebCookie("ldcwebcn-init"); let test = cookie.split(","); test.forEach((elm) => { let test = elm.split("="); if (test[0] === name) { newCookie.push(name + "=" + status); if (status === "false") { this.config[test[0]].cookies.forEach((elm) => { let cookies = this.getLDCWebCookie(elm); if (cookies !== undefined) { document.cookie = elm + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=" + document.domain + "; path=/"; document.cookie = elm + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=." + document.domain + "; path=/"; } }); } } else { newCookie.push(elm); } }); this.saveLDCWebCookie(newCookie); } deleteBrowserCookie(name, path, domain) { if (this.getLDCWebCookie(name)) { document.cookie = name + "=" + (path ? ";path=" + path : "") + (domain ? ";domain=" + domain : "") + ";expires=Thu, 01 Jan 1970 00:00:01 GMT"; } } getLDCWebCookie(name) { let matches = document.cookie.match( new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)" ) ); return matches ? decodeURIComponent(matches[1]) : undefined; } addEvent(element, evnt, funct) { if (element.attachEvent) return element.attachEvent("on" + evnt, funct); else return element.addEventListener(evnt, funct, false); } saveLDCWebCookie(content) { let date = new Date(); let newDate = new Date(date.setMonth(date.getMonth() + 13)); document.cookie = "ldcwebcn-init=" + content + "; expires=" + newDate.toUTCString() + "; path=/;"; } openModal() { this.setCookieList(); this.updateAllCookiesButtonsActiveStatus(); } } document.addEventListener('DOMContentLoaded', () => { if (window._cookie_notice) { new LdcwebCn(window._cookie_notice) } })