lightbox/lightbox.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

class Lightbox {
    constructor(selector) {
        this.initalizeTags(selector);
        const css = "img.lightbox[data-light-box-id]{cursor:pointer}[data-light-box-wrapper-id]{background-color:#0b0704;position:fixed;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center}[data-light-box-wrapper-id] img{padding:1rem;max-height:calc(100% - 50px);max-width:calc(100% - 50px)}";
        const styleSheet = document.createElement("style");
        styleSheet.innerHTML = css;
        styleSheet.dataset.lightboxStyles = "true";
        document.head.appendChild(styleSheet);
    }

    openLightbox(id) {
        const source = document.querySelector("[data-light-box-id='" + id + "']");
        const wrapper = document.createElement("div");
        wrapper.dataset.lightBoxWrapperId = id;
        wrapper.onclick = () => this.closeLightbox(id);
        const img = document.createElement("img");
        img.src = source.src;
        wrapper.appendChild(img);
        document.body.style = "overflow: hidden !important;";
        document.body.appendChild(wrapper);
    }

    closeLightbox(id) {
        document.querySelector("[data-light-box-wrapper-id='" + id + "']").remove();
        document.body.style.overflow = "";
    }

    initalizeTags(selector) {
        document.querySelectorAll(selector).forEach(image => {
            image.dataset.lightBoxId = Math.random().toString(36).substring(2) + Date.now().toString(36);
            image.onclick = () => this.openLightbox(image.dataset.lightBoxId);
        });
    }
}