Merge branch 'main' of git.owlcode.tech:sergiotarxz/burguillos.info into conquer

Conflicts:
      js-src/index.js
      public/js/bundle.js

content/posts/0000030-yo-te-lo-guiso.xml

@@ -34,9 +34,6 @@
         <p>Recuerda mirar las novedades en Instagram 
         <a href="https://www.instagram.com/yoteloguiso/">
                 @yoteloguiso</a>.</p>
-        <p>Los horarios del negocio son de 12:00 a 15:00 y de 20:30 a
-        23:00 de Miercoles a Sabado. El Domingo abre de 12:00 a
-            15:00.</p>
         <p>El negocio además de su oferta habitual de carne y pescado
         ofrece comida <b>vegana</b> y <b>vegetariana</b> siendo de los 
         pocos negocios en Burguillos

js-src/carousel-ad.ts

@@ -0,0 +1,171 @@
+export interface Ad {
+    img: string,
+    text: string
+    href: string
+    seconds: number
+}
+export default class CarouselAd {
+    private currentAdNumber: number | null = null 
+    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)) {
+            this.noMoreAds()
+            CarouselAd.fail('No carousel.')
+        }
+        return carousel
+    }
+    static fail(error: string): never {
+        throw new Error(error)
+    }
+
+    public async run(): Promise<void> {
+        this.loadOneAd()
+        try {
+            let start = 0
+            let end = 0
+            this.getCarousel().addEventListener('pointerdown', (event: MouseEvent) => {
+                start = event.pageX
+                console.log(start)
+            })
+            this.getCarousel().addEventListener('pointerup', (event: MouseEvent) => {
+                end = event.pageX
+                console.log(end)
+                if (start - end > 100) {
+                    if (this.isLockedSwipe) {
+                        return
+                    }
+                    if (this.timeoutNumber !== null) {
+                        window.clearTimeout(this.timeoutNumber)
+                    }
+                    this.loadOneAd()
+                } else {
+                    const a = this.retrieveLinkCarousel()
+                    if (a !== null) {
+                        window.location.href = a.href
+                    }
+                }
+            })
+
+        } catch (e) {
+            console.log(e)
+            return
+        }
+    }
+
+    private noMoreAds() {
+        const carousel = this.getCarousel()
+        if (carousel !== null) {
+            carousel.remove();
+        }
+        this.expandPageContents();
+        if (this.timeoutNumber === null) {
+            return
+        }
+        window.clearTimeout(this.timeoutNumber)
+    }
+
+    private expandPageContents() {
+        const pageContents = document.querySelector('div.page-contents'); 
+        if (pageContents === null) {
+            return;
+        }
+        pageContents.classList.add('no-carousel');
+    }
+
+    private retrieveLinkCarousel(): HTMLAnchorElement | null{
+        const carousel = this.getCarousel()
+        const a = carousel.querySelector('a')
+        if (a === null) {
+            return null 
+        }
+        return a
+    }
+
+    private async loadOneAd() {
+        try {        
+            const params = new URLSearchParams();
+            if (this.currentAdNumber !== null) {
+                params.append('n', ""+this.currentAdNumber);
+            }
+            const response = await fetch('/next-ad.json?' + params)
+            const responseJson = await response.json()
+            this.currentAdNumber = responseJson.current_ad_number
+            this.ad = responseJson.ad
+            if (this.ad === null) {
+                this.noMoreAds()
+                return
+            }
+            const must_continue = responseJson.continue
+            const carousel = this.getCarousel()
+            if (must_continue === 0
+                    || carousel.offsetWidth === 0) {
+                this.noMoreAds();
+                return;
+            }
+            const aPrev = this.retrieveLinkCarousel()
+            const allAnchors = carousel.querySelectorAll('a')
+            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')
+            const promoted = document.createElement('p')
+
+            promoted.classList.add('promoted-tag')
+            promoted.innerText = "Promocionado"
+            image.src = this.ad.img
+            image.alt = ""
+            text.innerText = this.ad.text
+            a.href = this.ad.href
+
+            a.append(image)
+            text_container.append(promoted)
+            text_container.append(text)
+            a.append(text_container)
+            if (this.firstAd) {
+                carousel.innerHTML = ''
+                this.firstAd = false
+            }
+            carousel.append(a)
+            this.isLockedSwipe = true
+            window.setTimeout(() => {
+                a.classList.add('show')
+                if (aPrev !== null) {
+                    aPrev.classList.remove('show')
+                    aPrev.classList.add('remove')
+                }
+                window.setTimeout(() => {
+                    if (aPrev !== null) {
+                        aPrev.remove()
+                    }
+                    for (const a of allAnchors) {
+                        a.remove()
+                    }
+                    this.isLockedSwipe = false
+                }, 1000)
+            }, 200)
+            this.timeoutNumber = window.setTimeout(() => {
+                this.loadOneAd()
+            }, this.ad.seconds * 1000)
+        } catch (e) {
+            console.error(e)
+            this.timeoutNumber = window.setTimeout(() => {
+                this.loadOneAd()
+            }, 1000)
+        }
+
+    }
+}

js-src/index.js

@@ -1,6 +1,7 @@
 "use strict";
 import Tablesort from 'tablesort';
 import Conquer from '@burguillosinfo/conquer/index';
+import CarouselAd from '@burguillosinfo/carousel-ad'
 window.Tablesort = require('tablesort');
 require('tablesort/src/sorts/tablesort.number');
 
@@ -24,7 +25,7 @@ function onDomContentLoaded() {
     const tables = document.querySelectorAll('table')
 
     fillFarmaciaGuardia();
-    loadAd()
+    new CarouselAd().run()
     addEasterEggAnimation()
 
     if (menu_expand !== null && mobile_foldable !== null && transparentFullscreenHide !== null && contentsWithoutMenu !== null) {
@@ -372,79 +373,3 @@ function addEasterEggAnimation() {
         logoContainer.classList.toggle('active')
     })
 }
-
-let current_ad_number = null
-
-function expand_page_contents() {
-    const pageContents = document.querySelector('div.page-contents'); 
-    if (pageContents === null) {
-        return;
-    }
-    pageContents.classList.add('no-carousel');
-}
-
-function no_more_ads() {
-    const carousel = document.querySelector('.carousel');
-    if (carousel !== null) {
-        carousel.remove();
-    }
-    expand_page_contents();
-}
-
-function loadAd() {
-    const params = new URLSearchParams();
-    if (current_ad_number !== null) {
-        params.append('n', ""+current_ad_number);
-    }
-    fetch('/next-ad.json?' + params).then((res) => {
-        return res.json()
-    }).then((res) => {
-        current_ad_number = res.current_ad_number
-        const ad = res.ad
-        const must_continue = res.continue
-        const carousel = document.querySelector('.carousel');
-        if (must_continue === 0
-                || carousel === null
-                || carousel.offsetWidth === 0) {
-            no_more_ads();
-            return;
-        }
-        const a = _retrieveLinkCarousel(carousel)
-        a.innerHTML = ""
-        const image = document.createElement('img')
-        const text_container = document.createElement('div')
-        const text = document.createElement('h4')
-        const promoted = document.createElement('p')
-
-        promoted.classList.add('promoted-tag')
-        promoted.innerText = "Promocionado"
-        image.src = ad.img
-        image.alt = ""
-        text.innerText = ad.text
-        a.href = ad.href
-
-        a.append(image)
-        text_container.append(promoted)
-        text_container.append(text)
-        a.append(text_container)
-
-        window.setTimeout(() => {
-            loadAd()
-        }, ad.seconds * 1000)
-    }).catch(() => {
-        window.setTimeout(() => {
-            loadAd()
-        }, 1000)
-    });
-}
-
-function _retrieveLinkCarousel(carousel) {
-    const maybeA = carousel.querySelector('a')
-    if (maybeA !== null) {
-        return maybeA
-    }
-    const a = document.createElement('a')
-    carousel.innerHTML = ""
-    carousel.append(a)
-    return a
-}

public/css/styles.css

@@ -1,5 +1,6 @@
 html {
-  height: 100%; }
+  height: 100%;
+  touch-action: none; }
 
 body {
   margin: 0;
@@ -216,9 +217,15 @@ body {
     position: fixed;
     top: 80%;
     height: calc(20% - 6px);
-    width: calc(100% - 6px);
+    width: calc(100% - 6px); }
-    border: solid 3px black; }
     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;
@@ -226,8 +233,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; }
@@ -459,7 +469,8 @@ body {
       body div.page-contents div.description div.articles {
         display: flex;
         flex-direction: row;
-        flex-wrap: wrap; }
+        flex-wrap: wrap;
+        font-size: 0.7rem; }
         body div.page-contents div.description div.articles a {
           width: 45%;
           margin-left: 5%; }
@@ -499,8 +510,6 @@ body {
             border: 3px solid black; }
             body div.page-contents div.description div.articles a article p, body div.page-contents div.description div.articles a article h4, body div.page-contents div.description div.articles a article h3, body div.page-contents div.description div.articles a article h2 {
               margin: 0px; }
-            body div.page-contents div.description div.articles a article p {
-              font-size: 0.9rem; }
             body div.page-contents div.description div.articles a article div.article-up-part {
               height: 12em; }
             body div.page-contents div.description div.articles a article div.article-down-part {

public/css/styles.scss

@@ -13,6 +13,7 @@ $color_sidebar: #dcdcf5;
 
 html {
   height: 100%;
+  touch-action: none;
 }
 
 body {
@@ -290,9 +291,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;
@@ -300,7 +313,6 @@ body {
       text-align: center;
       justify-content: space-between;
       align-items: center;
-      height: 100%;
       text-decoration: none;
 
       &:hover, &:focus {
@@ -647,6 +659,7 @@ body {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
+        font-size: 0.7rem;
         a {
             &:nth-child(2n+1) {
               margin-left: 0%;
@@ -698,10 +711,6 @@ body {
               margin: 0px;
             }
 
-            p {
-              font-size: 0.9rem;
-            }
-
             div.article-up-part {
               height: 12em;
             }