sergiotarxz
/
burguillos.info
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Conflicts:
      js-src/index.js
      public/js/bundle.js
This commit is contained in:
Sergiotarxz 2023-11-29 18:09:14 +01:00
parent acec248f4d 1b49157ca2
commit 598dda2aae
6 changed files with 216 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
content/posts/0000030-yo-te-lo-guiso.xml
View File

@ -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

171
js-src/carousel-ad.ts Normal file
View File

@ -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)
}
}
}

79
js-src/index.js
View File

@ -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
}

23
public/css/styles.css
View File

@ -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);
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;
@ -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 {

21
public/css/styles.scss
View File

@ -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;
}

13
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long