Adding initial transition to left of ads.
This commit is contained in:
parent
6cfb6cc0bc
commit
c7bf18b4f9
|
@ -8,6 +8,7 @@ export default class CarouselAd {
|
||||||
private currentAdNumber: number | null = null
|
private currentAdNumber: number | null = null
|
||||||
private ad: Ad | null = null
|
private ad: Ad | null = null
|
||||||
private timeoutNumber: number | null = null
|
private timeoutNumber: number | null = null
|
||||||
|
private firstAd = true
|
||||||
private getCarousel(): HTMLElement {
|
private getCarousel(): HTMLElement {
|
||||||
const carousel = document.querySelector('.carousel');
|
const carousel = document.querySelector('.carousel');
|
||||||
if (carousel === null || !(carousel instanceof HTMLElement)) {
|
if (carousel === null || !(carousel instanceof HTMLElement)) {
|
||||||
|
@ -39,7 +40,9 @@ export default class CarouselAd {
|
||||||
this.loadOneAd()
|
this.loadOneAd()
|
||||||
} else {
|
} else {
|
||||||
const a = this.retrieveLinkCarousel()
|
const a = this.retrieveLinkCarousel()
|
||||||
window.location.href = a.href
|
if (a !== null) {
|
||||||
|
window.location.href = a.href
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -69,24 +72,12 @@ export default class CarouselAd {
|
||||||
pageContents.classList.add('no-carousel');
|
pageContents.classList.add('no-carousel');
|
||||||
}
|
}
|
||||||
|
|
||||||
private retrieveLinkCarousel(): HTMLAnchorElement {
|
private retrieveLinkCarousel(): HTMLAnchorElement | null{
|
||||||
const carousel = this.getCarousel()
|
const carousel = this.getCarousel()
|
||||||
const maybeA = carousel.querySelector('a')
|
const a = carousel.querySelector('a')
|
||||||
if (maybeA !== null) {
|
if (a === null) {
|
||||||
return maybeA
|
return null
|
||||||
}
|
}
|
||||||
const a = document.createElement('a')
|
|
||||||
a.addEventListener('click', (event: MouseEvent) => {
|
|
||||||
event.preventDefault()
|
|
||||||
})
|
|
||||||
a.addEventListener('pointerdown', (event: MouseEvent) => {
|
|
||||||
event.preventDefault()
|
|
||||||
})
|
|
||||||
a.addEventListener('pointerup', (event: MouseEvent) => {
|
|
||||||
event.preventDefault()
|
|
||||||
})
|
|
||||||
carousel.innerHTML = ""
|
|
||||||
carousel.append(a)
|
|
||||||
return a
|
return a
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -111,8 +102,18 @@ export default class CarouselAd {
|
||||||
this.noMoreAds();
|
this.noMoreAds();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const a = this.retrieveLinkCarousel()
|
const aPrev = this.retrieveLinkCarousel()
|
||||||
a.innerHTML = ""
|
const a = document.createElement('a')
|
||||||
|
a.addEventListener('click', (event: MouseEvent) => {
|
||||||
|
event.preventDefault()
|
||||||
|
})
|
||||||
|
a.addEventListener('pointerdown', (event: MouseEvent) => {
|
||||||
|
event.preventDefault()
|
||||||
|
})
|
||||||
|
a.addEventListener('pointerup', (event: MouseEvent) => {
|
||||||
|
event.preventDefault()
|
||||||
|
})
|
||||||
|
|
||||||
const image = document.createElement('img')
|
const image = document.createElement('img')
|
||||||
const text_container = document.createElement('div')
|
const text_container = document.createElement('div')
|
||||||
const text = document.createElement('h4')
|
const text = document.createElement('h4')
|
||||||
|
@ -129,10 +130,26 @@ export default class CarouselAd {
|
||||||
text_container.append(promoted)
|
text_container.append(promoted)
|
||||||
text_container.append(text)
|
text_container.append(text)
|
||||||
a.append(text_container)
|
a.append(text_container)
|
||||||
|
if (this.firstAd) {
|
||||||
|
carousel.innerHTML = ''
|
||||||
|
this.firstAd = false
|
||||||
|
}
|
||||||
|
carousel.append(a)
|
||||||
|
window.setTimeout(() => {
|
||||||
|
a.classList.add('show')
|
||||||
|
if (aPrev !== null) {
|
||||||
|
aPrev.classList.remove('show')
|
||||||
|
aPrev.classList.add('remove')
|
||||||
|
window.setTimeout(() => {
|
||||||
|
aPrev.remove()
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
}, 10)
|
||||||
this.timeoutNumber = window.setTimeout(() => {
|
this.timeoutNumber = window.setTimeout(() => {
|
||||||
this.loadOneAd()
|
this.loadOneAd()
|
||||||
}, this.ad.seconds * 1000)
|
}, this.ad.seconds * 1000)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
this.timeoutNumber = window.setTimeout(() => {
|
this.timeoutNumber = window.setTimeout(() => {
|
||||||
this.loadOneAd()
|
this.loadOneAd()
|
||||||
}, 1000)
|
}, 1000)
|
||||||
|
|
|
@ -117,9 +117,15 @@ body {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 80%;
|
top: 80%;
|
||||||
height: calc(20% - 6px);
|
height: calc(20% - 6px);
|
||||||
width: calc(100% - 6px);
|
width: calc(100% - 6px); }
|
||||||
border: solid 3px black; }
|
|
||||||
body div.carousel a {
|
body div.carousel a {
|
||||||
|
position: fixed;
|
||||||
|
top: 80%;
|
||||||
|
border: solid 3px black;
|
||||||
|
width: calc(100%-6px);
|
||||||
|
height: calc(20% - 6px);
|
||||||
|
left: calc(100% + 3px);
|
||||||
|
transition: left 1s ease-in;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
background: #f2eb8c;
|
background: #f2eb8c;
|
||||||
color: blueviolet;
|
color: blueviolet;
|
||||||
|
@ -127,8 +133,11 @@ body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
|
||||||
text-decoration: none; }
|
text-decoration: none; }
|
||||||
|
body div.carousel a.show {
|
||||||
|
left: calc(0% + 3px); }
|
||||||
|
body div.carousel a.remove {
|
||||||
|
left: calc(-100% - 3px); }
|
||||||
body div.carousel a:hover, body div.carousel a:focus {
|
body div.carousel a:hover, body div.carousel a:focus {
|
||||||
background: blueviolet;
|
background: blueviolet;
|
||||||
color: #f2eb8c; }
|
color: #f2eb8c; }
|
||||||
|
|
|
@ -176,9 +176,21 @@ body {
|
||||||
top: 80%;
|
top: 80%;
|
||||||
height: calc(20% - 6px);
|
height: calc(20% - 6px);
|
||||||
width: calc(100% - 6px);
|
width: calc(100% - 6px);
|
||||||
border: solid 3px black;
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
position: fixed;
|
||||||
|
top: 80%;
|
||||||
|
border: solid 3px black;
|
||||||
|
width: calc(100%-6px);
|
||||||
|
height: calc(20% - 6px);
|
||||||
|
left: calc(100% + 3px);
|
||||||
|
transition: left 1s ease-in;
|
||||||
|
&.show {
|
||||||
|
left: calc(0% + 3px);
|
||||||
|
}
|
||||||
|
&.remove {
|
||||||
|
left: calc(-100% - 3px);
|
||||||
|
}
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
background: $color_div;
|
background: $color_div;
|
||||||
color: $background_div;
|
color: $background_div;
|
||||||
|
@ -186,7 +198,6 @@ body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue