Image as a tracker for WDC

imgTracker.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",
        "backdrop": true,
        "remove_condition": {"condition": "timer", "value": 1},
        "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);