Skip to content

Instantly share code, notes, and snippets.

@caglarorhan
Last active November 8, 2020 19:43
Show Gist options
  • Save caglarorhan/89fee0d13d85678f6c2e720418628641 to your computer and use it in GitHub Desktop.
Save caglarorhan/89fee0d13d85678f6c2e720418628641 to your computer and use it in GitHub Desktop.
Creating a top banner box
const WDC_banner ={
lifeHour: 1,
mSecondAnHour: 3600000,
mSecondToNow: new Date().getTime(),
expDateTime (){return this.mSecondToNow + (this.lifeHour * this.mSecondAnHour)},
placeTheBanner(bannerData){
const bannerClosingButton = document.createElement('span');
const topBanner = document.createElement('div');
topBanner.innerHTML= bannerData.content;
topBanner.id= "banner_"+ bannerData.content_id.toString();
topBanner.style.position='inline';
topBanner.style.overflow='hidden';
topBanner.style.height=bannerData.height;
topBanner.style.width=bannerData.width;
topBanner.style.height=bannerData.height+'px';
bannerClosingButton.innerHTML = bannerData.closing_button_content;
bannerClosingButton.style.position='absolute';
bannerClosingButton.style.zIndex=1;
bannerClosingButton.style.cursor='pointer';
bannerClosingButton.style.top='5px';
bannerClosingButton.style.right='5px';
bannerClosingButton.style.padding='8px';
topBanner.append(bannerClosingButton);
bannerClosingButton.addEventListener('click',()=>{
this.animateAndClose(topBanner.id)
})
document.body.insertAdjacentElement('afterbegin', topBanner);
},
animateAndClose(topBannerID){
let topBanner = document.querySelector('#'+topBannerID);
let animate = window.setInterval(
()=>{
if(parseInt(topBanner.style.height)<3){
console.log(this.expDateTime())
window.localStorage.setItem(topBannerID,this.expDateTime());
topBanner.style.display='none';
clearInterval(animate);
}
topBanner.style.height = (parseInt(topBanner.style.height)-3)+'px';
},
20)
},
firstLoad(){
let result = fetch('http://login.wdc.studio/gecici/banner_test_3.php').then(response=>response.json()).then(data=>{
let bannerRegisteredDateTime = window.localStorage.getItem("banner_"+data.content_id);
let expired=true;
if(bannerRegisteredDateTime){
expired = parseInt(WDC_banner.mSecondToNow)-parseInt(bannerRegisteredDateTime)>0
}
if(data.show && expired){
WDC_banner.placeTheBanner(data);
}else{
return false;
}
})
}
}
window.addEventListener('load', WDC_banner.firstLoad)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment