burguillos.info/js-src/index.js

381 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');
window.addEventListener("keydown", (e) => {
if (e.key.toLowerCase() === "f" && e.ctrlKey) {
openAllDetails()
}
});
window.addEventListener("blur", (e) => {
openAllDetails()
})
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()
openAllDetails()
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 openAllDetails() {
for (const detail of document.querySelectorAll('details')) {
detail.open = true
}
}
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')
})
}