WDC_box library

WDC_box.js

const WDC_box = {
    expDateTime(lifeHour) {
        return new Date().getTime() + (lifeHour * 3600000)
    },
    vw() {
        return Math.min(document.documentElement.clientWidth, window.innerWidth)
    },
    vh() {
        return Math.min(document.documentElement.clientHeight, window.innerHeight)
    },
    createBox(boxData) {
        const backDrop = document.createElement('div');
        const boxCloseButton = document.createElement('span');
        const box = document.createElement('div');

        if (boxData.backdrop === true || boxData.backdrop === "true") {
            backDrop.style.cssText = `width:100%; height:100%; overflow:hidden; position: fixed; z-index:${boxData.z_index};left:0;top:0; background-color: ${boxData.backdrop_specs.rgba | ''};`;
            backDrop.id = 'backdrop_' + boxData.content_id;
            document.body.append(backDrop);
            backDrop.addEventListener('click', () => {
                this.actionTrigger(boxData, ["turner"], this.removeBox);
            })
        }
        if (boxData.close_button === true || boxData.close_button === "true") {
            boxCloseButton.style.cssText = `position: absolute; z-index:101; cursor:pointer; top:${boxData.close_button_specs.top}; right:${boxData.close_button_specs.right}; cursor:pointer; background-color:${boxData.close_button_specs.bgColor}; border:${boxData.close_button_specs.border}; height:${boxData.close_button_specs.height}; width:${boxData.close_button_specs.width}; padding:${boxData.close_button_specs.padding}; margin:${boxData.close_button_specs.margin}`;
            boxCloseButton.title = boxData.close_button_specs.title;
            boxCloseButton.id = 'box_close_button_' + boxData.content_id;
            boxCloseButton.innerHTML = boxData.close_button_content;
            boxCloseButton.addEventListener('click', () => {
                this.actionTrigger(boxData, ["turner"], this.removeBox);
            })
        }
        if (boxData.show === true || boxData.show === "true") {
            let widthOfBox = boxData.width.includes('%') ? boxData.width : boxData.width;
            let leftOfBox = boxData.left;
            let topOfBox = boxData.top;
            switch (boxData.side) {
                case "right":
                    leftOfBox = WDC_box.vw() - parseInt(boxData.width);
                    break;
                case "left":
                    leftOfBox = 0;
                    break;
                case "bottom":
                    topOfBox = WDC_box.vh() - parseInt(boxData.height);
                    leftOfBox = (WDC_box.vw() - parseInt(boxData.width)) / 2;
                    break;
            }


            box.style.cssText = `width:${widthOfBox}; height: ${boxData.height}; left:${leftOfBox}px; top:${topOfBox}px; position:${boxData.position}; margin:${boxData.margin}; background-color:${boxData.bgColor}; z-index: ${boxData.z_index} border-radius:${boxData.border_radius}; border: ${boxData.border}; box-shadow:${boxData.box_shadow} ; box-sizing: border-box;`;
            box.id = 'box_' + boxData.content_id;
            box.innerHTML = boxData.content;
            box.addEventListener('click', (e) => {
                e.stopPropagation();
            })
            box.append(boxCloseButton);

            if (boxData.backdrop === true || boxData.backdrop === "true") {
                document.querySelector('#backdrop_' + boxData.content_id).append(box);
            } else {
                document.body.insertAdjacentElement('afterbegin', box);
            }

        }
    },
    actionTrigger(boxData, animationList = [], callback) {
        animationList.forEach(animationName => {
            this.createAnimation(boxData, animationName, callback)
        })
    },
    createAnimation(boxData, animationName, callback) {
        const targetCSS = document.createElement('style');
        let animationSpecsText = ""
        Object.entries(boxData.animations[animationName].animation_specs).forEach(([k, v]) => {
            if (v) {
                animationSpecsText += `${k}:${v}; `;
            }
        })
        targetCSS.innerHTML = `
        .${animationName}_${boxData.content_id}{
            animation-name: ${animationName};
            ${animationSpecsText}
            }
            @keyframes ${animationName} {
                               ${boxData.animations[animationName].keyframes}
                                }
            `;
        document.head.append(targetCSS);
        document.querySelector("#box_" + boxData.content_id).classList.add(animationName + "_" + boxData.content_id);
        document.querySelector("#box_" + boxData.content_id).addEventListener('animationend', () => {
            if (callback) {
                callback(boxData)
            }
        });
    },
    removeBox(boxData) {
        if (boxData.backdrop === true || boxData.backdrop === "true") {
            document.querySelector('#backdrop_' + boxData.content_id).remove();
        } else {
            document.querySelector('#box_' + boxData.content_id).remove();
        }
        window.localStorage.setItem('box_' + boxData.content_id, WDC_box.expDateTime(boxData.life_hour));
    },
    init(json_src) {
        let result = fetch(json_src).then(response => response.json()).then(data => {
            data.forEach((jsonData) => {
                let registeredDateTime = window.localStorage.getItem("box_" + jsonData.content_id);
                let expired = true;
                window.localStorage.removeItem("box_" + data.content_id)
                if (registeredDateTime) {
                    expired = new Date().getTime() - parseInt(registeredDateTime) > 0
                }
                if (jsonData.show && expired) {
                    WDC_box.createBox(jsonData);
                    this.actionTrigger(jsonData, ['turn-in'])
                } else {
                    return false;
                }
            })

        })
    }
}
window.addEventListener('load', () => {
    WDC_box.init('https://s69.wdc.center/?cc=2312&b_code=y5698u48ur3');
})

• show: true/false =>goster/gizle
• life_hour: sayi => kapatilirsa kac saat yeniden gosterilmeyecek,
• content_id: benzersiz kutu idsi
• side: right/left/bottom => yanasma yonu
• position: relative/absolute/fixed => kutunun sayfaya gore css pozisyonlari
• width: sayi %/px => kutunun genisligi ve birimi
• height: sayi %/px => kutunun yuksekligi ve birimi
• top: sayi px => kutunun sayfanin en ustune uzakligi
• left: sayi veya hazir deger => kutunun sayfanin sol tarafina uzakligi
• margin: string => 4 margin degeri
• bgColor: string => fon rengi
• border: string => kutunun border degerleri
• border_radius: sayi px=> kutunun koselerinin yuvarlama segeri
• box_shadow: string => kutunun golge degerleri
• backdrop: true/false => kutunun arkasina dusurulen sayfayi kaplayan fon var/yok
  • backdrop_specs":{
    "rgba": "rgba(0,0,0,0.5)"
    },
• remove_condition":{"condition":"timer", "value":1}, // aktif degil henuz
• content: string => HTML olarak kutunun icine gelecek olan veri
• create_animation: baslangic animasyonu // aktif degil
• close_animation: kapatilma animasyonu => js kodundaki animation bolumundeki fonksiyonlar
• close_button: true/false => kapatma butonu var/yok
• close_button_content: string => kapatma dugmesi span olacak, icine gelen hersey
  • "close_button_specs":{
    "top":"-33px",
    "right":"-2px",
    "height":"20px",
    "width":"20px",
    "padding":"5px",
    "margin":"1px",
    "bgColor":"white",
    "border":"0 solid black",
    "title":"Kapat"
    }

Json talebi yapilan url den donecek json bir dizi icindeki objeler seklinde donmeli. Her obje ustteki yorumda yazilan degerleri icermeli.
Donecek ana yapi:
[
{ },
{ },
...
]
formatinda olmali.

Ornegin:
[
{
"show":true,
"life_hour": 1,
"content_id":"9999-45t8yr34",
"side":"",
"position":"relative",
"z_index":"900",
"width":"100%",
"height":"100px",
"top": "0",
"left":"0",
"margin":"0",
"bgColor":"black",
"border":"",
"border_radius":"0",
"box_shadow":"",
"backdrop": false,
"backdrop_specs":{},
"remove_condition":{"condition":"timer", "value":1},
"content":"

TEST TEST</div>",
"create_animation":"",
"close_animation":"wipe_out",
"close_button":"false",
"close_button_content":"<img src="https://www.ecanta.com.tr/sources/img/close.svg">",
"close_button_specs":{
"top":"0",
"right":"0",
"height":"20px",
"width":"20px",
"padding":"5px",
"margin":"1px",
"bgColor":"white",
"border":"0 solid black",
"title":"Kapat"
}
}
]

Animastion samples:
[
{
"show": true,
"life_hour": 0.01,
"content_id": "9999-45t8yr34",
"side": "bottom",
"position": "fixed",
"z_index": "900",
"width": "500px",
"height": "300px",
"top": "0",
"left": "0",
"margin": "",
"bgColor": "pink",
"border": "",
"border_radius": "0",
"box_shadow": "",
"backdrop": false,
"backdrop_specs": {},
"remove_condition": {"condition": "timer", "value": 1},
"content": "

Deneme icerigi buraya gelecek

</div>",
"animations": {
"turner": {
"animation_specs": {
"animation-delay": "",
"animation-duration": "0.7s",
"animation-direction": "",
"animation-play-state": ""
},
"keyframes": "0% {transform: rotate(0); opacity:1}" +
"100% {transform: rotate(360deg); opacity:0}"
},
"slide-in": {
"animation_specs": {
"animation-delay": "",
"animation-duration": "3s",
"animation-direction": "",
"animation-play-state": ""
},
"keyframes": "0% {left:-310px;}" +
"100% {border-radius:0;}"

        },
        "turn-in": {
            "animation_specs": {
                "animation-duration": "1s",
            },
            "keyframes": "0% {transform: rotate(360deg); opacity:0}" +
                "100% {transform: rotate(0); opacity:1}"

        }
    },
    "close_button": "true",
    "close_button_content": "<img src=\"https:\/\/www.ecanta.com.tr\/sources\/img\/close.svg\">",
    "close_button_specs": {
        "top": "0",
        "right": "0",
        "height": "20px",
        "width": "20px",
        "padding": "5px",
        "margin": "1px",
        "bgColor": "white",
        "border": "0 solid black",
        "title": "Kapat"
    }
}

]