2023-04-06 13:15:40 +02:00
|
|
|
import { Sidebar } from './js/sidebar';
|
2023-04-05 19:33:31 +02:00
|
|
|
import './scss/app.scss'
|
2023-04-06 10:27:04 +02:00
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
initSearch();
|
2023-04-06 13:15:40 +02:00
|
|
|
initSidebar();
|
2023-04-07 12:37:33 +02:00
|
|
|
initToggle();
|
2023-04-06 10:27:04 +02:00
|
|
|
});
|
|
|
|
|
2023-04-07 12:37:33 +02:00
|
|
|
function initToggle() {
|
|
|
|
const toggle = <HTMLInputElement>document.querySelector('#filterdays-js');
|
|
|
|
|
|
|
|
if(toggle) {
|
|
|
|
toggle.addEventListener('click', () => {
|
|
|
|
toggle.ariaPressed = (toggle.ariaPressed === 'true') ? 'false' : 'true';
|
2023-04-10 15:04:13 +02:00
|
|
|
toggle.setAttribute('aria-pressed', toggle.ariaPressed);
|
2023-04-07 12:37:33 +02:00
|
|
|
|
|
|
|
const daysNoTrips = document.querySelectorAll('div[data-trips="0"]');
|
|
|
|
Array.prototype.forEach.call(daysNoTrips, (day: HTMLElement) => {
|
|
|
|
day.classList.toggle('hidden');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const coxToggle = <HTMLInputElement>document.querySelector('#filtertrips-js');
|
|
|
|
|
|
|
|
if(coxToggle) {
|
|
|
|
coxToggle.addEventListener('click', () => {
|
|
|
|
coxToggle.ariaPressed = (coxToggle.ariaPressed === 'true') ? 'false' : 'true';
|
2023-04-10 15:04:13 +02:00
|
|
|
coxToggle.setAttribute('aria-pressed', coxToggle.ariaPressed);
|
2023-04-07 12:37:33 +02:00
|
|
|
|
|
|
|
const noCoxNeeded = document.querySelectorAll('div[data-coxneeded="false"]');
|
|
|
|
Array.prototype.forEach.call(noCoxNeeded, (notNeeded: HTMLElement) => {
|
|
|
|
notNeeded.classList.toggle('hidden');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
2023-04-07 21:59:25 +02:00
|
|
|
|
|
|
|
const monthToggle = <HTMLInputElement>document.querySelector('#filtermonth-js');
|
|
|
|
const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
|
|
|
|
|
|
|
|
if(monthToggle) {
|
|
|
|
monthToggle.addEventListener('click', () => {
|
|
|
|
monthToggle.ariaPressed = (monthToggle.ariaPressed === 'true') ? 'false' : 'true';
|
2023-04-10 15:04:13 +02:00
|
|
|
monthToggle.setAttribute('aria-pressed', monthToggle.ariaPressed);
|
2023-04-07 21:59:25 +02:00
|
|
|
const currentMonth = monthToggle.dataset.month;
|
|
|
|
|
|
|
|
if(currentMonth) {
|
|
|
|
const index = months.indexOf(currentMonth);
|
|
|
|
if (index > -1) { // only splice array when item is found
|
|
|
|
months.splice(index, 1); // 2nd parameter means remove one item only
|
|
|
|
}
|
|
|
|
|
|
|
|
Array.prototype.forEach.call(months, (month: HTMLElement) => {
|
|
|
|
const notThisMonth = document.querySelectorAll('div[data-month="' + month + '"]');
|
|
|
|
Array.prototype.forEach.call(notThisMonth, (notThisMonth: HTMLElement) => {
|
|
|
|
notThisMonth.classList.toggle('hidden');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2023-04-07 12:37:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function initSearch() {
|
2023-04-06 10:27:04 +02:00
|
|
|
const input = <HTMLInputElement>document.querySelector('#filter-js');
|
|
|
|
|
|
|
|
if(input) {
|
2023-04-06 10:45:33 +02:00
|
|
|
filterElements(input.value);
|
|
|
|
|
2023-04-06 10:27:04 +02:00
|
|
|
input.addEventListener('input', () => {
|
|
|
|
filterElements(input.value);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function filterElements(input: string) {
|
|
|
|
const elements = document.querySelectorAll('form[data-filterable="true"]');
|
2023-04-06 10:45:33 +02:00
|
|
|
let resultWrapper = <HTMLElement>document.querySelector('#filter-result-js'),
|
|
|
|
amountShownElements = 0;
|
2023-04-06 10:27:04 +02:00
|
|
|
|
|
|
|
Array.prototype.forEach.call(elements, (element: HTMLElement) => {
|
|
|
|
// set both strings (input & dataset filter) to lowercase to not be case sensitive
|
|
|
|
let filterString = element.dataset.filter?.toLocaleLowerCase();
|
2023-04-06 10:45:33 +02:00
|
|
|
|
|
|
|
// bulk hide all elements
|
|
|
|
element.style.display = 'none';
|
2023-04-06 10:27:04 +02:00
|
|
|
|
2023-04-06 10:45:33 +02:00
|
|
|
// show if input matches
|
|
|
|
if(filterString?.includes(input.toLocaleLowerCase())) {
|
|
|
|
element.style.display = 'flex';
|
|
|
|
amountShownElements ++;
|
2023-04-06 10:27:04 +02:00
|
|
|
}
|
|
|
|
});
|
2023-04-06 10:45:33 +02:00
|
|
|
|
|
|
|
if(resultWrapper) {
|
|
|
|
resultWrapper.innerHTML = (amountShownElements === 0 ? 'Kein Ergebnis gefunden' : '<strong>' + amountShownElements + '</strong>' + (amountShownElements > 1 ? ' Ergebnisse' : ' Ergebnis') + ' gefunden');
|
|
|
|
}
|
2023-04-06 10:27:04 +02:00
|
|
|
}
|
2023-04-06 13:15:40 +02:00
|
|
|
|
|
|
|
function initSidebar() {
|
|
|
|
const sidebarTrigger = <NodeListOf<HTMLElement>>document.querySelectorAll('[data-trigger]');
|
|
|
|
|
|
|
|
if(sidebarTrigger) {
|
|
|
|
Array.prototype.forEach.call(sidebarTrigger, (triggerElement: HTMLElement) => {
|
|
|
|
if(triggerElement.dataset.trigger) {
|
|
|
|
const sidebar = new Sidebar(triggerElement.dataset.trigger);
|
|
|
|
|
2023-04-08 07:35:49 +02:00
|
|
|
triggerElement.addEventListener('click', (e) => {
|
|
|
|
e.preventDefault();
|
2023-04-08 09:14:48 +02:00
|
|
|
if(triggerElement.dataset.trigger === 'sidebar') {
|
2023-04-07 11:35:39 +02:00
|
|
|
initTripSidebar(triggerElement);
|
|
|
|
}
|
|
|
|
|
2023-04-06 13:15:40 +02:00
|
|
|
sidebar.toggle();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2023-04-07 11:35:39 +02:00
|
|
|
|
|
|
|
function initTripSidebar(triggerElement: HTMLElement) {
|
2023-04-08 09:14:48 +02:00
|
|
|
const sidebarElement = <HTMLElement>document.querySelector('#sidebar');
|
2023-04-08 09:17:46 +02:00
|
|
|
if(sidebarElement && triggerElement.dataset.body && triggerElement.dataset.header) {
|
|
|
|
let body = <HTMLElement>document.querySelector(triggerElement.dataset.body);
|
|
|
|
let bodyElement = <HTMLElement>body.cloneNode(true);
|
|
|
|
let bodyContainerElement = <HTMLElement>sidebarElement.querySelector('.body-js');
|
|
|
|
if(bodyContainerElement) {
|
|
|
|
bodyContainerElement.innerHTML = '';
|
|
|
|
bodyContainerElement.append(bodyElement);
|
2023-04-07 11:35:39 +02:00
|
|
|
}
|
|
|
|
if(triggerElement.dataset.day) {
|
2023-04-08 09:17:46 +02:00
|
|
|
let hiddenElement = <HTMLInputElement>bodyElement.querySelector('.day-js');
|
2023-04-07 11:35:39 +02:00
|
|
|
if(hiddenElement) {
|
|
|
|
hiddenElement.value = triggerElement.dataset.day;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
let headerElement = sidebarElement.querySelector('.header-js');
|
|
|
|
if(headerElement) {
|
|
|
|
headerElement.innerHTML = triggerElement.dataset.header;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|