From 71b5ff1aa98afc924aff4a6ef4d52e7ff3eddccf Mon Sep 17 00:00:00 2001 From: Sergiotarxz Date: Wed, 29 Nov 2023 16:58:17 +0100 Subject: [PATCH] Lock swipe on transition. --- js-src/carousel-ad.ts | 6 ++++++ public/js/bundle.js | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/js-src/carousel-ad.ts b/js-src/carousel-ad.ts index a55370a..c98992a 100644 --- a/js-src/carousel-ad.ts +++ b/js-src/carousel-ad.ts @@ -9,6 +9,7 @@ export default class CarouselAd { private ad: Ad | null = null private timeoutNumber: number | null = null private firstAd = true + private isLockedSwipe: boolean = false private getCarousel(): HTMLElement { const carousel = document.querySelector('.carousel'); if (carousel === null || !(carousel instanceof HTMLElement)) { @@ -34,6 +35,9 @@ export default class CarouselAd { end = event.pageX console.log(end) if (start - end > 100) { + if (this.isLockedSwipe) { + return + } if (this.timeoutNumber !== null) { window.clearTimeout(this.timeoutNumber) } @@ -136,6 +140,7 @@ export default class CarouselAd { this.firstAd = false } carousel.append(a) + this.isLockedSwipe = true window.setTimeout(() => { a.classList.add('show') if (aPrev !== null) { @@ -146,6 +151,7 @@ export default class CarouselAd { for (const a of allAnchors) { a.remove() } + this.isLockedSwipe = false }, 1000) } }, 10) diff --git a/public/js/bundle.js b/public/js/bundle.js index 8edc807..71dd8a0 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 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 allAnchors = carousel.querySelectorAll('a');\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 for (const a of allAnchors) {\n a.remove();\n }\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?"); +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 this.isLockedSwipe = false;\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.isLockedSwipe) {\n return;\n }\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 allAnchors = carousel.querySelectorAll('a');\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 this.isLockedSwipe = true;\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 for (const a of allAnchors) {\n a.remove();\n }\n this.isLockedSwipe = false;\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?"); /***/ })