366 lines
13 KiB
JavaScript
366 lines
13 KiB
JavaScript
"use strict";
|
|
import Tablesort from 'tablesort';
|
|
import CarouselAd from '@burguillosinfo/carousel-ad'
|
|
window.Tablesort = require('tablesort');
|
|
require('tablesort/src/sorts/tablesort.number');
|
|
|
|
let fakeSearchInput
|
|
let searchMobile
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const menu_expand = document.querySelector('a.menu-expand');
|
|
const mobile_foldable = document.querySelector('nav.mobile-foldable');
|
|
const transparentFullscreenHide = document.querySelector('div.transparent-fullscreen-hide');
|
|
const contentsWithoutMenu = document.querySelector('div.contents-without-menu')
|
|
const tables = document.querySelectorAll('table')
|
|
|
|
fillFarmaciaGuardia();
|
|
new CarouselAd().run()
|
|
addEasterEggAnimation()
|
|
|
|
if (menu_expand !== null && mobile_foldable !== null && transparentFullscreenHide !== null && contentsWithoutMenu !== null) {
|
|
mobile_foldable.toggleAttribute('aria-hidden')
|
|
if (mobile_foldable.getAttribute('aria-hidden') !== null) {
|
|
mobile_foldable.setAttribute('aria-hidden', true);
|
|
}
|
|
transparentFullscreenHide.addEventListener('click', () => {
|
|
mobile_foldable.classList.remove('show');
|
|
transparentFullscreenHide.classList.remove('show');
|
|
menu_expand.classList.remove('active');
|
|
contentsWithoutMenu.removeAttribute('aria-hidden')
|
|
mobile_foldable.setAttribute('aria-hidden', true)
|
|
});
|
|
menu_expand.addEventListener('click', () => {
|
|
menu_expand.classList.toggle('active');
|
|
mobile_foldable.classList.toggle('show');
|
|
transparentFullscreenHide.classList.toggle('show');
|
|
contentsWithoutMenu.toggleAttribute('aria-hidden')
|
|
if (contentsWithoutMenu.getAttribute('aria-hidden') !== null) {
|
|
contentsWithoutMenu.setAttribute('aria-hidden', true);
|
|
}
|
|
mobile_foldable.toggleAttribute('aria-hidden')
|
|
if (mobile_foldable.getAttribute('aria-hidden') !== null) {
|
|
mobile_foldable.setAttribute('aria-hidden', true);
|
|
}
|
|
});
|
|
}
|
|
|
|
for (const table of tables) {
|
|
const header = table.querySelector('tr');
|
|
if (header !== null) {
|
|
header.setAttribute('data-sort-method', 'none')
|
|
for (const th of header.querySelectorAll('th')) {
|
|
if (th.getAttribute('data-sort-method') == null) {
|
|
th.setAttribute('data-sort-method', 'thead')
|
|
}
|
|
}
|
|
}
|
|
new Tablesort(table)
|
|
}
|
|
if (window !== undefined && window.Android !== undefined) {
|
|
executeAndroidExclusiveCode(Android)
|
|
}
|
|
searchMobile = document.querySelector('nav.mobile-shortcuts div.search')
|
|
if (searchMobile !== null) {
|
|
fakeSearchInput = searchMobile.querySelector('input')
|
|
addListenersSearch()
|
|
}
|
|
}, false);
|
|
|
|
function fillFarmaciaGuardia() {
|
|
const farmaciaName = document.querySelector('#farmacia-name');
|
|
const farmaciaAddress = document.querySelector('#farmacia-address');
|
|
if (farmaciaName !== null || farmaciaAddress !== null) {
|
|
const port = _port()
|
|
const url = new URL(window.location.protocol
|
|
+ "//"
|
|
+ window.location.hostname
|
|
+ port
|
|
+ '/farmacia-guardia.json');
|
|
fetch(url).then(async (res) => {
|
|
const farmacia = await res.json()
|
|
if (farmaciaName !== null) {
|
|
farmaciaName.innerText = farmacia.name;
|
|
farmaciaAddress.innerText = farmacia.address;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
function addListenersSearch() {
|
|
const searchInPage = document.querySelector('div.search-in-page')
|
|
if (searchMobile !== null) {
|
|
const searchIcon = searchMobile.querySelector('a.search-icon')
|
|
searchIcon.addEventListener('click', (e) => {
|
|
const searchOverlay = document.querySelector('div.search-overlay');
|
|
const searchInput = searchOverlay.querySelector('div.search input');
|
|
searchInput.value = fakeSearchInput.value;
|
|
onSearchChange(e)
|
|
onFakeSearchClick(e)
|
|
return true;
|
|
|
|
})
|
|
fakeSearchInput.addEventListener('keyup', (e) => {
|
|
if (searchInPage === null) {
|
|
return;
|
|
}
|
|
if (fakeSearchInput.value === "") {
|
|
searchInPage.classList.remove('active')
|
|
} else {
|
|
searchInPage.classList.add('active')
|
|
}
|
|
if (e.keyCode !== 13) {
|
|
return false;
|
|
}
|
|
const searchOverlay = document.querySelector('div.search-overlay');
|
|
const searchInput = searchOverlay.querySelector('div.search input');
|
|
searchInput.value = fakeSearchInput.value;
|
|
onSearchChange(e)
|
|
onFakeSearchClick(e)
|
|
return true;
|
|
});
|
|
}
|
|
const nextResult = searchInPage.querySelector('a.down');
|
|
const prevResult = searchInPage.querySelector('a.up');
|
|
if (nextResult !== null && prevResult !== null) {
|
|
nextResult.addEventListener('click', () => {
|
|
searchInWebsite(fakeSearchInput.value, true);
|
|
});
|
|
prevResult.addEventListener('click', () => {
|
|
searchInWebsite(fakeSearchInput.value, false);
|
|
});
|
|
}
|
|
const exitSearch = document.querySelector('a.exit-search')
|
|
const searchOverlay = document.querySelector('div.search-overlay');
|
|
const searchInput = searchOverlay.querySelector('div.search input');
|
|
fakeSearchInput.value = searchInput.value;
|
|
exitSearch.addEventListener('click', onExitSearch)
|
|
const search = document.querySelector('div.search-overlay div.search input');
|
|
if (search !== null) {
|
|
search.addEventListener('change', onSearchChange);
|
|
}
|
|
const searchIconDesktop = document.querySelector('nav.desktop a.search-icon');
|
|
if (searchIconDesktop !== null) {
|
|
searchIconDesktop.addEventListener('click', (e) => {
|
|
onFakeSearchClick(e)
|
|
})
|
|
}
|
|
}
|
|
|
|
function searchInWebsite(value, isToBottom) {
|
|
window.find(value, false, !isToBottom, true)
|
|
const selection = window.getSelection()
|
|
if (selection.anchorNode === null) {
|
|
const pageContents = document.querySelector('div.page-contents');
|
|
pageContents.focus()
|
|
searchInWebsite(value, isToBottom)
|
|
}
|
|
const anchorNode = selection.anchorNode.parentNode
|
|
if (anchorNode.tagName !== null
|
|
&& anchorNode.tagName === "INPUT") {
|
|
const pageContents = document.querySelector('div.page-contents');
|
|
pageContents.focus()
|
|
searchInWebsite(value, isToBottom)
|
|
}
|
|
if (anchorNode !== null) {
|
|
const pageContents = document.querySelector('div.page-contents');
|
|
const offsetTop = _getOffsetTopWithNParent(anchorNode, pageContents);
|
|
pageContents.scroll(0, offsetTop - 150)
|
|
}
|
|
}
|
|
|
|
function _getOffsetTopWithNParent(element, nParent, _carry = 0) {
|
|
if (element === null) {
|
|
return null;
|
|
}
|
|
if (element === nParent) {
|
|
return _carry;
|
|
}
|
|
_carry += element.offsetTop
|
|
return _getOffsetTopWithNParent(element.offsetParent, nParent, _carry)
|
|
}
|
|
|
|
function _port() {
|
|
let port = window.location.port;
|
|
if (port !== '') {
|
|
port = ':' + port
|
|
}
|
|
return port;
|
|
}
|
|
|
|
function onSearchChange() {
|
|
const search = document.querySelector('div.search-overlay div.search input');
|
|
const searchResults = document.querySelector('div.search-overlay div.search-results');
|
|
if (search === null || searchResults === null) {
|
|
return;
|
|
}
|
|
const query = search.value;
|
|
fakeSearchInput.value = search.value
|
|
const port = _port()
|
|
const url = new URL(window.location.protocol
|
|
+ "//"
|
|
+ window.location.hostname
|
|
+ port
|
|
+ '/search.json');
|
|
url.searchParams.set('q', query);
|
|
fetch(url).then(async (res) => {
|
|
const json = await res.json()
|
|
if (!json.ok) {
|
|
noResults(searchResults);
|
|
return
|
|
}
|
|
console.log(json.searchObjects.length)
|
|
if (json.searchObjects.length < 1) {
|
|
noResults(searchResults);
|
|
return;
|
|
}
|
|
showResults(searchResults, json.searchObjects);
|
|
})
|
|
search.focus()
|
|
}
|
|
|
|
function showResults(searchResults, searchObjects) {
|
|
searchResults.innerHTML = "";
|
|
for (let searchObject of searchObjects) {
|
|
const searchResultContainer = document.createElement('div')
|
|
searchResultContainer.classList.add('search-result')
|
|
const rowTitleUrlImageDiv = document.createElement('div');
|
|
rowTitleUrlImageDiv.classList.add('row-title-url-image');
|
|
const columnTitleUrl = document.createElement('div');
|
|
columnTitleUrl.classList.add('column-title-url');
|
|
const img = document.createElement('img')
|
|
const title = document.createElement('b')
|
|
const url = document.createElement('a')
|
|
const content = document.createElement('p')
|
|
|
|
title.innerText = searchObject.title
|
|
let port = window.location.port;
|
|
if (port !== '') {
|
|
port = ':' + port
|
|
}
|
|
if (searchObject.url.match(/^\//)) {
|
|
searchObject.url = window.location.protocol
|
|
+ "//" + window.location.hostname
|
|
+ port
|
|
+ searchObject.url
|
|
}
|
|
let urlImage = searchObject.urlImage;
|
|
if (urlImage !== null && urlImage.match(/^\//)) {
|
|
urlImage = window.location.protocol
|
|
+ "//" + window.location.hostname
|
|
+ port
|
|
+ urlImage
|
|
}
|
|
if (urlImage !== null) {
|
|
img.alt = ""
|
|
img.src = urlImage
|
|
}
|
|
|
|
url.href = searchObject.url
|
|
url.innerText = searchObject.url
|
|
content.innerText = searchObject.content
|
|
|
|
if (urlImage !== null) {
|
|
rowTitleUrlImageDiv.appendChild(img)
|
|
}
|
|
|
|
columnTitleUrl.appendChild(title);
|
|
columnTitleUrl.appendChild(document.createElement('br'))
|
|
columnTitleUrl.appendChild(url)
|
|
|
|
rowTitleUrlImageDiv.appendChild(columnTitleUrl)
|
|
|
|
searchResultContainer.appendChild(rowTitleUrlImageDiv)
|
|
searchResultContainer.appendChild(content)
|
|
searchResults.appendChild(searchResultContainer)
|
|
}
|
|
}
|
|
|
|
function noResults(searchResults) {
|
|
searchResults.innerHTML = ""
|
|
const p = document.createElement('p')
|
|
p.innerText = 'No se han encontrado resultados.'
|
|
searchResults.appendChild(p)
|
|
}
|
|
|
|
function onExitSearch() {
|
|
const searchOverlay = document.querySelector('div.search-overlay');
|
|
if (searchOverlay !== null) {
|
|
searchOverlay.classList.toggle('active');
|
|
}
|
|
}
|
|
|
|
function onFakeSearchClick(e) {
|
|
e.preventDefault();
|
|
const searchOverlay = document.querySelector('div.search-overlay');
|
|
if (searchOverlay === null) {
|
|
return
|
|
}
|
|
searchOverlay.classList.toggle('active');
|
|
const search = searchOverlay.querySelector('div.search input');
|
|
if (search !== null) {
|
|
search.focus()
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function absoluteToHost(imageUrl) {
|
|
if (imageUrl.match(/^\//)) {
|
|
imageUrl = window.location.protocol + "//" + window.location.host + imageUrl
|
|
}
|
|
return imageUrl.replace(/\?.*$/, '');
|
|
}
|
|
|
|
function addListenerOpenInBrowserButton(android) {
|
|
const openInBrowserLink = document.querySelector('a.open-in-browser')
|
|
if (openInBrowserLink === null) {
|
|
return
|
|
}
|
|
openInBrowserLink.addEventListener('click', () => {
|
|
android.openInBrowser(window.location.href)
|
|
})
|
|
}
|
|
function executeAndroidExclusiveCode(android) {
|
|
document.querySelectorAll('*.android').forEach((element) => {
|
|
element.classList.remove('android')
|
|
})
|
|
document.querySelectorAll('*.no-android-app').forEach((element) => {
|
|
element.style.display = 'none';
|
|
})
|
|
addListenerOpenInBrowserButton(android)
|
|
const pinToHomeUrl = document.querySelector('a.pin-to-home')
|
|
if (pinToHomeUrl === null) {
|
|
return;
|
|
}
|
|
pinToHomeUrl.addEventListener('click', () => {
|
|
const url = new URL(window.location.href)
|
|
const pathandQuery = url.pathname + url.search;
|
|
const label = (url.pathname.replace(/^.*\//g, '')
|
|
.replace(/(?:^|-)\w/g, function(character) {
|
|
return character.toUpperCase()
|
|
})
|
|
.replace(/-/g, ' ')) + ' - Burguillos.info';
|
|
const firstImg = document.querySelector('div.description img');
|
|
let iconUrl;
|
|
if (firstImg !== null) {
|
|
if (!firstImg.src.match(/\.svg(?:\?|$)/)) {
|
|
iconUrl = absoluteToHost(firstImg.src);
|
|
}
|
|
}
|
|
if (iconUrl === undefined) {
|
|
const imagePreview = document.querySelector('meta[name="image"]');
|
|
iconUrl = absoluteToHost(imagePreview.content);
|
|
}
|
|
android.pinPage(pathandQuery, label, iconUrl)
|
|
})
|
|
}
|
|
|
|
function addEasterEggAnimation() {
|
|
const logoContainer = document.querySelector('div.burguillos-logo-container')
|
|
if (logoContainer === null) {
|
|
return;
|
|
}
|
|
logoContainer.addEventListener('click', () => {
|
|
logoContainer.classList.toggle('active')
|
|
})
|
|
}
|