379 lines
15 KiB
JavaScript
379 lines
15 KiB
JavaScript
|
/**
|
||
|
|
* 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)
|
||
|
|
}
|
||
|
|
})
|