https://www.erquery.fr/wp-content/themes/visibilite/assets/js/inc/adico-base/AdicoModal.js

1/**
2 * Création de la balise <adico-modal> pour créer des modales
3 * avec un shadow DOM.
4 * Gère indépendamment les évènements d'ouverture et de fermeture.
5 *
6 * Exemple d'utilisation :
7 * <adico-modal open-id="open-modal"></adico-modal>
8 *
9 * @attribute {String} open-id - ID de l'élément qui ouvre la modale
10 */
11export default class AdicoModal extends HTMLElement {
12    constructor() {
13        super();
14        this.shadowDOM = this.attachShadow({ mode: "open" });
15        this.options = this.getOptions();
16        this.shadowDOM.innerHTML = this.getTemplate();
17    }
18
19    getTemplate(name = "main") {
20        const basePath = this.getPath() + "/js";
21
22        let path = basePath + `/inc/adico-base/modal/${name}.html`;
23
24        const template = this.attributes["template"];
25        if (template) {
26            name = template.value;
27            path = basePath + `/modal/${name}.html`;
28        }
29
30        fetch(path)
31            .then(response => response.text())
32            .then(html => {
33                this.getStyle();

34                this.getStyle(false);
35
36                this.shadowDOM.innerHTML += html
37
38                this.removeUndefined();
39
40                this.elements = {
41                    adicoModal: this.shadowDOM.querySelector(".adico-modal"),
42                    closeButton: this.shadowDOM.querySelector("#close-btn"),
43                };
44
45                this.handleOpen();
46                this.handleClose();
47
48
49            }).catch(error => console.error(error));
50    }
51
52    getStyle(base = true) {
53        const basePath = this.getPath();
54        let path = basePath;
55
56        if (base) {
57            path += "/js/inc/adico-base/modal/base.css";
58        } else {
59            const css = this.attributes["css"];
60            if (css) {
61                path += `/css/modal/${css.value}.css`;
62            } else {
63                path += `/css/modal/main.css`;
64            }
65        }
66
67        const linkElement = document.createElement('link');
68        linkElement.setAttribute('rel', 'stylesheet');
69        linkElement.setAttribute('href', path);
70        this.shadowDOM.appendChild(linkElement);
71    }
72
73    handleOpen() {
74        const openButton = document.querySelector(
75            `#${this.options["open-id"]}`
76        );
77
78        openButton.addEventListener("click", (e) => {
79            e.preventDefault();
80            this.open();
81        });
82    }
83
84    handleClose() {
85        this.elements.closeButton.addEventListener("click", () => {
86            this.close();
87        });
88
89        this.addEventListener("click", (e) => {
90            if (this == e.target) {
91                this.close();
92            }
93        });
94    }
95
96    getOptions() {
97        let attributes = {};
98        Array.from(this.attributes).forEach((attribute) => {
99            attributes[attribute.name] = attribute.value;
100        });
101        return attributes;
102    }
103
104    close() {
105        this.elements.adicoModal.setAttribute("aria-hidden", "true");
106        this.elements.adicoModal.style.display = "none";
107    }
108
109    open() {
110        this.elements.adicoModal.setAttribute("aria-hidden", "false");
111        this.elements.adicoModal.style.display = "flex";
112        this.elements.closeButton.focus();
113    }
114
115    getPath() {
116        let path = window.location.href;
117        if (path.includes("192.168.1.16")) {
118            const projectName = window.location.pathname.split("/")[1];
119            return window.location.origin + "/" + projectName + "/wp-content/themes/" + themeName + "/assets"
120        } else {
121            return window.location.href + "/wp-content/themes/" + themeName + "/assets";
122        }
123    }
124
125    removeUndefined() {
126        const filtered = this.shadowDOM.innerHTML.replace("undefined", "");
127        this.shadowDOM.innerHTML = filtered;
128    }
129}