WDS_sidebanner box

WDS_sidebanner.js

const WDS_sidebanner = {
    lifeHour: 1,
    mSecondAnHour: 3600000,
    mSecondToNow: new Date().getTime(),
    expDateTime (){return this.mSecondToNow + (this.lifeHour * this.mSecondAnHour)},
    createSideBanner(sideBannerData) {
        const sideBanner = document.createElement('div');
        const bannerClosingButton = document.createElement('span');
        sideBanner.id = "sidebanner_"+sideBannerData.content_id;
        const vw = Math.min(document.documentElement.clientWidth, window.innerWidth);
        const left = sideBannerData.position==='left'?vw-parseInt(sideBannerData.width):0;
        sideBanner.style.cssText = `width:${sideBannerData.width}; height:${sideBannerData.height}; position:fixed; left:${left+'px'}; top:${sideBannerData.top}; background-color:white; border:1px solid grey;`;
        sideBanner.innerHTML = `${sideBannerData.content}`;
        document.body.append(sideBanner);
        sideBanner.append(bannerClosingButton);
        bannerClosingButton.innerHTML = sideBannerData.closing_button_content;
        bannerClosingButton.style.cssText="position: absolute; float:right; z-index:1002; cursor:pointer; top:-26px; right:0; cursor:pointer; background-color:white; border:1px solid black;";
        bannerClosingButton.addEventListener('click',()=>{
            console.log('close triggering')
            this.closeSideBanner(sideBanner);
        })
    },
    closeSideBanner(sideBanner){
        console.log('must close here');
        console.log(sideBanner.style.left);
        let animate = window.setInterval(
            ()=>{
                if(parseInt(sideBanner.style.left)<-parseInt(sideBanner.style.width)){
                    window.localStorage.setItem(sideBanner.id,WDS_sidebanner.expDateTime());

                    console.log('Tamamen kayboldu')
                    sideBanner.remove();
                    clearInterval(animate);
                }
                sideBanner.style.left = (parseInt(sideBanner.style.left)-20)+'px';
            },
            20)

    },
    firstLoad(){
        let result = fetch('http://login.wdc.studio/gecici/banner_test_3.php').then(response=>response.json()).then(data=>{
            let sideBannerRegisteredDateTime = window.localStorage.getItem("sidebanner_"+data.content_id);
            let expired=true;
            //window.localStorage.removeItem("sidebanner_"+data.content_id)
            if(sideBannerRegisteredDateTime){
                expired = parseInt(WDS_sidebanner.mSecondToNow)-parseInt(sideBannerRegisteredDateTime)>0
            }
            console.log(`
            Registered Exp Date: ${sideBannerRegisteredDateTime}
            Current Date       : ${WDS_sidebanner.mSecondToNow}
            Kalan sure: ${Math.abs((WDS_sidebanner.mSecondToNow-sideBannerRegisteredDateTime)/WDS_sidebanner.mSecondAnHour)} saat
            Data.show:${data.show}
            Expired: ${expired}
            Gosterilsin mi: ${(data.show && expired)}
            `);
            if(data.show && expired){
                WDS_sidebanner.createSideBanner(WDS_sidebanner.jsonSample)
            }else{
                return false;
            }
        })

    },
    jsonSample:{
        "show":true,
        "content_id":"2316-45t8yr34",
        "position":"left",
        "width":"300px",
        "height":"300px",
        "top": "400px",
        "content":"<div>TEST TEST<\/div>",
        "animation":"animasyon adi",
        "close_button":true,
        "closing_button_content":"<img src=\"https:\/\/www.ecanta.com.tr\/sources\/img\/close.svg\" alt=\"Kapat\" width=\"20\" height=\"20\">"
    }

}



window.addEventListener('load', WDS_sidebanner.firstLoad);