rowt/frontend/main.ts

import { Sidebar } from './js/sidebar';
import './scss/app.scss'

document.addEventListener('DOMContentLoaded', function() {
  initSearch();
  initSidebar();
});

 function initSearch() {
  const input = <HTMLInputElement>document.querySelector('#filter-js');

  if(input) {
    filterElements(input.value);

    input.addEventListener('input', () => {
      filterElements(input.value);
    });
  }
}

function filterElements(input: string) {
  const elements = document.querySelectorAll('form[data-filterable="true"]');
  let resultWrapper = <HTMLElement>document.querySelector('#filter-result-js'),
      amountShownElements = 0;

  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();
    
    // bulk hide all elements
    element.style.display = 'none';

    // show if input matches
    if(filterString?.includes(input.toLocaleLowerCase())) {
      element.style.display = 'flex';
      amountShownElements ++;
    }
  });

  if(resultWrapper) {
    resultWrapper.innerHTML = (amountShownElements === 0 ? 'Kein Ergebnis gefunden' : '<strong>' + amountShownElements + '</strong>' + (amountShownElements > 1 ? ' Ergebnisse' : ' Ergebnis') + ' gefunden');
  }
}

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);

        triggerElement.addEventListener('click', () => {
          sidebar.toggle();
        });
        
      }
    });
  }
}