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

Adding swipe to change ad.

Browse Source
This commit is contained in:
Sergiotarxz 2023-11-28 23:48:34 +01:00
parent e91c96b607
commit 6cfb6cc0bc
8 changed files with 184 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.js
View File

@ -10,7 +10,10 @@ module.exports = {
sourceType: 'module',
project: 'tsconfig.json'
},
plugins: [ ],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
root: true,
rules: {
indent: ['error', 4, { SwitchCase: 1 }],
},

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

@ -0,0 +1,142 @@
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 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.timeoutNumber !== null) {
window.clearTimeout(this.timeoutNumber)
}
this.loadOneAd()
} else {
const a = this.retrieveLinkCarousel()
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 {
const carousel = this.getCarousel()
const maybeA = carousel.querySelector('a')
if (maybeA !== null) {
return maybeA
}
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
}
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 a = this.retrieveLinkCarousel()
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 = 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)
this.timeoutNumber = window.setTimeout(() => {
this.loadOneAd()
}, this.ad.seconds * 1000)
} catch (e) {
this.timeoutNumber = window.setTimeout(() => {
this.loadOneAd()
}, 1000)
}
}
}

79
js-src/index.js
View File

@ -1,5 +1,6 @@
"use strict";
import Tablesort from 'tablesort';
import CarouselAd from '@burguillosinfo/carousel-ad'
window.Tablesort = require('tablesort');
require('tablesort/src/sorts/tablesort.number');
@ -13,7 +14,7 @@ document.addEventListener("DOMContentLoaded", function () {
const tables = document.querySelectorAll('table')
fillFarmaciaGuardia();
loadAd()
new CarouselAd().run()
addEasterEggAnimation()
if (menu_expand !== null && mobile_foldable !== null && transparentFullscreenHide !== null && contentsWithoutMenu !== null) {
@ -362,79 +363,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
}

15
package.json
View File

@ -10,17 +10,22 @@
"author": "",
"license": "AGPL-v3",
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"eslint": "^8.40.0",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"eslint": "^8.53.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-no-relative-import-paths": "^1.5.2",
"husky": "^8.0.3",
"lint-staged": "^14.0.1",
"prettier": "^3.0.3",
"typescript": "^5.0.4",
"prettier-eslint": "^16.1.2",
"typescript": "^5.2.2",
"webpack-cli": "^5.1.4"
},
"dependencies": {
"tablesort": "^5.3.0"
"babel-loader": "^9.1.3",
"ol": "^8.1.0",
"tablesort": "^5.3.0",
"ts-loader": "^9.5.0"
}
}

3
public/css/styles.css
View File

@ -1,5 +1,6 @@
html {
height: 100%; }
height: 100%;
touch-action: none; }
body {
margin: 0;

1
public/css/styles.scss
View File

@ -13,6 +13,7 @@ $color_sidebar: #dcdcf5;
html {
height: 100%;
touch-action: none;
}
body {

13
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

12
webpack.config.js
View File

@ -8,7 +8,7 @@ module.exports = {
path: path.resolve(__dirname, 'public/js/')
},
resolve: {
extensions: ['.js', '.ts'],
extensions: ['.js', '.jsx', '.ts', '.tsx'],
roots: [
path.resolve(__dirname, 'js-src/')
],
@ -18,10 +18,20 @@ module.exports = {
},
module: {
rules: [
{
test: /\.(?:tsx|ts)?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.jpe?g|png$/,
exclude: /node_modules/,
use: ['url-loader', 'file-loader']
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}