From c7bf18b4f9d0a3dc0162b82d037ff350235ab5d5 Mon Sep 17 00:00:00 2001 From: Sergiotarxz Date: Wed, 29 Nov 2023 16:48:53 +0100 Subject: [PATCH] Adding initial transition to left of ads. --- js-src/carousel-ad.ts | 55 +++++++++++++++++++++++++++--------------- public/css/styles.css | 15 +++++++++--- public/css/styles.scss | 15 ++++++++++-- public/js/bundle.js | 2 +- 4 files changed, 62 insertions(+), 25 deletions(-) diff --git a/js-src/carousel-ad.ts b/js-src/carousel-ad.ts index c0d6bdc..a635ae1 100644 --- a/js-src/carousel-ad.ts +++ b/js-src/carousel-ad.ts @@ -8,6 +8,7 @@ export default class CarouselAd { private currentAdNumber: number | null = null private ad: Ad | null = null private timeoutNumber: number | null = null + private firstAd = true private getCarousel(): HTMLElement { const carousel = document.querySelector('.carousel'); if (carousel === null || !(carousel instanceof HTMLElement)) { @@ -39,7 +40,9 @@ export default class CarouselAd { this.loadOneAd() } else { 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'); } - private retrieveLinkCarousel(): HTMLAnchorElement { + private retrieveLinkCarousel(): HTMLAnchorElement | null{ const carousel = this.getCarousel() - const maybeA = carousel.querySelector('a') - if (maybeA !== null) { - return maybeA + const a = carousel.querySelector('a') + if (a === null) { + 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 } @@ -111,8 +102,18 @@ export default class CarouselAd { this.noMoreAds(); return; } - const a = this.retrieveLinkCarousel() - a.innerHTML = "" + const aPrev = this.retrieveLinkCarousel() + 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 text_container = document.createElement('div') const text = document.createElement('h4') @@ -129,10 +130,26 @@ export default class CarouselAd { text_container.append(promoted) text_container.append(text) 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.loadOneAd() }, this.ad.seconds * 1000) } catch (e) { + console.error(e) this.timeoutNumber = window.setTimeout(() => { this.loadOneAd() }, 1000) diff --git a/public/css/styles.css b/public/css/styles.css index 8d5ae2c..af73c61 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -117,9 +117,15 @@ body { position: fixed; top: 80%; height: calc(20% - 6px); - width: calc(100% - 6px); - border: solid 3px black; } + width: calc(100% - 6px); } 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; background: #f2eb8c; color: blueviolet; @@ -127,8 +133,11 @@ body { text-align: center; justify-content: space-between; align-items: center; - height: 100%; 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 { background: blueviolet; color: #f2eb8c; } diff --git a/public/css/styles.scss b/public/css/styles.scss index 1556fa8..523a0d9 100644 --- a/public/css/styles.scss +++ b/public/css/styles.scss @@ -176,9 +176,21 @@ body { top: 80%; height: calc(20% - 6px); width: calc(100% - 6px); - border: solid 3px black; 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; background: $color_div; color: $background_div; @@ -186,7 +198,6 @@ body { text-align: center; justify-content: space-between; align-items: center; - height: 100%; text-decoration: none; &:hover, &:focus { diff --git a/public/js/bundle.js b/public/js/bundle.js index 60511fc..30cdd7b 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -47,7 +47,7 @@ eval(";(function() {\n function Tablesort(el, options) {\n if (!(this instan /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ CarouselAd)\n/* harmony export */ });\nclass CarouselAd {\n constructor() {\n this.currentAdNumber = null;\n this.ad = null;\n this.timeoutNumber = null;\n }\n getCarousel() {\n const carousel = document.querySelector('.carousel');\n if (carousel === null || !(carousel instanceof HTMLElement)) {\n this.noMoreAds();\n CarouselAd.fail('No carousel.');\n }\n return carousel;\n }\n static fail(error) {\n throw new Error(error);\n }\n async run() {\n this.loadOneAd();\n try {\n let start = 0;\n let end = 0;\n this.getCarousel().addEventListener('pointerdown', (event) => {\n start = event.pageX;\n console.log(start);\n });\n this.getCarousel().addEventListener('pointerup', (event) => {\n end = event.pageX;\n console.log(end);\n if (start - end > 100) {\n if (this.timeoutNumber !== null) {\n window.clearTimeout(this.timeoutNumber);\n }\n this.loadOneAd();\n }\n else {\n const a = this.retrieveLinkCarousel();\n window.location.href = a.href;\n }\n });\n }\n catch (e) {\n console.log(e);\n return;\n }\n }\n noMoreAds() {\n const carousel = this.getCarousel();\n if (carousel !== null) {\n carousel.remove();\n }\n this.expandPageContents();\n if (this.timeoutNumber === null) {\n return;\n }\n window.clearTimeout(this.timeoutNumber);\n }\n expandPageContents() {\n const pageContents = document.querySelector('div.page-contents');\n if (pageContents === null) {\n return;\n }\n pageContents.classList.add('no-carousel');\n }\n retrieveLinkCarousel() {\n const carousel = this.getCarousel();\n const maybeA = carousel.querySelector('a');\n if (maybeA !== null) {\n return maybeA;\n }\n const a = document.createElement('a');\n a.addEventListener('click', (event) => {\n event.preventDefault();\n });\n a.addEventListener('pointerdown', (event) => {\n event.preventDefault();\n });\n a.addEventListener('pointerup', (event) => {\n event.preventDefault();\n });\n carousel.innerHTML = \"\";\n carousel.append(a);\n return a;\n }\n async loadOneAd() {\n try {\n const params = new URLSearchParams();\n if (this.currentAdNumber !== null) {\n params.append('n', \"\" + this.currentAdNumber);\n }\n const response = await fetch('/next-ad.json?' + params);\n const responseJson = await response.json();\n this.currentAdNumber = responseJson.current_ad_number;\n this.ad = responseJson.ad;\n if (this.ad === null) {\n this.noMoreAds();\n return;\n }\n const must_continue = responseJson.continue;\n const carousel = this.getCarousel();\n if (must_continue === 0\n || carousel.offsetWidth === 0) {\n this.noMoreAds();\n return;\n }\n const a = this.retrieveLinkCarousel();\n a.innerHTML = \"\";\n const image = document.createElement('img');\n const text_container = document.createElement('div');\n const text = document.createElement('h4');\n const promoted = document.createElement('p');\n promoted.classList.add('promoted-tag');\n promoted.innerText = \"Promocionado\";\n image.src = this.ad.img;\n image.alt = \"\";\n text.innerText = this.ad.text;\n a.href = this.ad.href;\n a.append(image);\n text_container.append(promoted);\n text_container.append(text);\n a.append(text_container);\n this.timeoutNumber = window.setTimeout(() => {\n this.loadOneAd();\n }, this.ad.seconds * 1000);\n }\n catch (e) {\n this.timeoutNumber = window.setTimeout(() => {\n this.loadOneAd();\n }, 1000);\n }\n }\n}\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/carousel-ad.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ CarouselAd)\n/* harmony export */ });\nclass CarouselAd {\n constructor() {\n this.currentAdNumber = null;\n this.ad = null;\n this.timeoutNumber = null;\n this.firstAd = true;\n }\n getCarousel() {\n const carousel = document.querySelector('.carousel');\n if (carousel === null || !(carousel instanceof HTMLElement)) {\n this.noMoreAds();\n CarouselAd.fail('No carousel.');\n }\n return carousel;\n }\n static fail(error) {\n throw new Error(error);\n }\n async run() {\n this.loadOneAd();\n try {\n let start = 0;\n let end = 0;\n this.getCarousel().addEventListener('pointerdown', (event) => {\n start = event.pageX;\n console.log(start);\n });\n this.getCarousel().addEventListener('pointerup', (event) => {\n end = event.pageX;\n console.log(end);\n if (start - end > 100) {\n if (this.timeoutNumber !== null) {\n window.clearTimeout(this.timeoutNumber);\n }\n this.loadOneAd();\n }\n else {\n const a = this.retrieveLinkCarousel();\n if (a !== null) {\n window.location.href = a.href;\n }\n }\n });\n }\n catch (e) {\n console.log(e);\n return;\n }\n }\n noMoreAds() {\n const carousel = this.getCarousel();\n if (carousel !== null) {\n carousel.remove();\n }\n this.expandPageContents();\n if (this.timeoutNumber === null) {\n return;\n }\n window.clearTimeout(this.timeoutNumber);\n }\n expandPageContents() {\n const pageContents = document.querySelector('div.page-contents');\n if (pageContents === null) {\n return;\n }\n pageContents.classList.add('no-carousel');\n }\n retrieveLinkCarousel() {\n const carousel = this.getCarousel();\n const a = carousel.querySelector('a');\n if (a === null) {\n return null;\n }\n return a;\n }\n async loadOneAd() {\n try {\n const params = new URLSearchParams();\n if (this.currentAdNumber !== null) {\n params.append('n', \"\" + this.currentAdNumber);\n }\n const response = await fetch('/next-ad.json?' + params);\n const responseJson = await response.json();\n this.currentAdNumber = responseJson.current_ad_number;\n this.ad = responseJson.ad;\n if (this.ad === null) {\n this.noMoreAds();\n return;\n }\n const must_continue = responseJson.continue;\n const carousel = this.getCarousel();\n if (must_continue === 0\n || carousel.offsetWidth === 0) {\n this.noMoreAds();\n return;\n }\n const aPrev = this.retrieveLinkCarousel();\n const a = document.createElement('a');\n a.addEventListener('click', (event) => {\n event.preventDefault();\n });\n a.addEventListener('pointerdown', (event) => {\n event.preventDefault();\n });\n a.addEventListener('pointerup', (event) => {\n event.preventDefault();\n });\n const image = document.createElement('img');\n const text_container = document.createElement('div');\n const text = document.createElement('h4');\n const promoted = document.createElement('p');\n promoted.classList.add('promoted-tag');\n promoted.innerText = \"Promocionado\";\n image.src = this.ad.img;\n image.alt = \"\";\n text.innerText = this.ad.text;\n a.href = this.ad.href;\n a.append(image);\n text_container.append(promoted);\n text_container.append(text);\n a.append(text_container);\n if (this.firstAd) {\n carousel.innerHTML = '';\n this.firstAd = false;\n }\n carousel.append(a);\n window.setTimeout(() => {\n a.classList.add('show');\n if (aPrev !== null) {\n aPrev.classList.remove('show');\n aPrev.classList.add('remove');\n window.setTimeout(() => {\n aPrev.remove();\n }, 1000);\n }\n }, 10);\n this.timeoutNumber = window.setTimeout(() => {\n this.loadOneAd();\n }, this.ad.seconds * 1000);\n }\n catch (e) {\n console.error(e);\n this.timeoutNumber = window.setTimeout(() => {\n this.loadOneAd();\n }, 1000);\n }\n }\n}\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/carousel-ad.ts?"); /***/ })