ldc-bogt/resources/js/ldcweb-cn.js

/**
 * 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)
    }
})