Adding swipe to change ad.
This commit is contained in:
parent
e91c96b607
commit
6cfb6cc0bc
|
@ -10,7 +10,10 @@ module.exports = {
|
||||||
sourceType: 'module',
|
sourceType: 'module',
|
||||||
project: 'tsconfig.json'
|
project: 'tsconfig.json'
|
||||||
},
|
},
|
||||||
plugins: [ ],
|
parser: '@typescript-eslint/parser',
|
||||||
|
plugins: ['@typescript-eslint'],
|
||||||
|
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
|
||||||
|
root: true,
|
||||||
rules: {
|
rules: {
|
||||||
indent: ['error', 4, { SwitchCase: 1 }],
|
indent: ['error', 4, { SwitchCase: 1 }],
|
||||||
},
|
},
|
||||||
|
|
|
@ -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)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
import Tablesort from 'tablesort';
|
import Tablesort from 'tablesort';
|
||||||
|
import CarouselAd from '@burguillosinfo/carousel-ad'
|
||||||
window.Tablesort = require('tablesort');
|
window.Tablesort = require('tablesort');
|
||||||
require('tablesort/src/sorts/tablesort.number');
|
require('tablesort/src/sorts/tablesort.number');
|
||||||
|
|
||||||
|
@ -13,7 +14,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||||
const tables = document.querySelectorAll('table')
|
const tables = document.querySelectorAll('table')
|
||||||
|
|
||||||
fillFarmaciaGuardia();
|
fillFarmaciaGuardia();
|
||||||
loadAd()
|
new CarouselAd().run()
|
||||||
addEasterEggAnimation()
|
addEasterEggAnimation()
|
||||||
|
|
||||||
if (menu_expand !== null && mobile_foldable !== null && transparentFullscreenHide !== null && contentsWithoutMenu !== null) {
|
if (menu_expand !== null && mobile_foldable !== null && transparentFullscreenHide !== null && contentsWithoutMenu !== null) {
|
||||||
|
@ -362,79 +363,3 @@ function addEasterEggAnimation() {
|
||||||
logoContainer.classList.toggle('active')
|
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
15
package.json
|
@ -10,17 +10,22 @@
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "AGPL-v3",
|
"license": "AGPL-v3",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@typescript-eslint/eslint-plugin": "^5.59.2",
|
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||||
"@typescript-eslint/parser": "^5.59.2",
|
"@typescript-eslint/parser": "^5.62.0",
|
||||||
"eslint": "^8.40.0",
|
"eslint": "^8.53.0",
|
||||||
|
"eslint-config-prettier": "^9.0.0",
|
||||||
"eslint-plugin-no-relative-import-paths": "^1.5.2",
|
"eslint-plugin-no-relative-import-paths": "^1.5.2",
|
||||||
"husky": "^8.0.3",
|
"husky": "^8.0.3",
|
||||||
"lint-staged": "^14.0.1",
|
"lint-staged": "^14.0.1",
|
||||||
"prettier": "^3.0.3",
|
"prettier": "^3.0.3",
|
||||||
"typescript": "^5.0.4",
|
"prettier-eslint": "^16.1.2",
|
||||||
|
"typescript": "^5.2.2",
|
||||||
"webpack-cli": "^5.1.4"
|
"webpack-cli": "^5.1.4"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tablesort": "^5.3.0"
|
"babel-loader": "^9.1.3",
|
||||||
|
"ol": "^8.1.0",
|
||||||
|
"tablesort": "^5.3.0",
|
||||||
|
"ts-loader": "^9.5.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
html {
|
html {
|
||||||
height: 100%; }
|
height: 100%;
|
||||||
|
touch-action: none; }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -13,6 +13,7 @@ $color_sidebar: #dcdcf5;
|
||||||
|
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
touch-action: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -8,7 +8,7 @@ module.exports = {
|
||||||
path: path.resolve(__dirname, 'public/js/')
|
path: path.resolve(__dirname, 'public/js/')
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.js', '.ts'],
|
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
||||||
roots: [
|
roots: [
|
||||||
path.resolve(__dirname, 'js-src/')
|
path.resolve(__dirname, 'js-src/')
|
||||||
],
|
],
|
||||||
|
@ -18,10 +18,20 @@ module.exports = {
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.(?:tsx|ts)?$/,
|
||||||
|
use: 'ts-loader',
|
||||||
|
exclude: /node_modules/
|
||||||
|
},
|
||||||
{
|
{
|
||||||
test: /\.jpe?g|png$/,
|
test: /\.jpe?g|png$/,
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
use: ['url-loader', 'file-loader']
|
use: ['url-loader', 'file-loader']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx)$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
loader: 'babel-loader'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue