Kleine Utitiles

utills.js

document.addEventListener("DOMContentLoaded", function (event) {

    let htmlRoot = document.querySelector('html');
    htmlRoot.classList.add('js');
    htmlRoot.classList.remove('no-js');

    let body = document.querySelector('body');
    body.addEventListener('click', function (event) {

      if (event.target.getAttribute('data-confirm')) {
          let customEvent = new CustomEvent('confirm', event);
          return event.target.dispatchEvent(customEvent);
      }

      if (event.target.getAttribute('data-toggle')) {
          let customEvent = new CustomEvent('toggle', event);
          return event.target.dispatchEvent(customEvent);
      }

      if (event.target.classList.contains('show-hide')) {
          let customEvent = new CustomEvent('show-hide', event);
          return event.target.dispatchEvent(customEvent);
      }

    },true);




    body.addEventListener('confirm',function (event) {
        let confirmMessage = event.target.getAttribute('data-confirm');
        return confirm(confirmMessage);
    },true);

    body.addEventListener('show-hide', function (event) {
        let showSelector = event.target.getAttribute('data-show');
        let hideSelector = event.target.getAttribute('data-hide');

        if (showSelector) {
            for (let showElement of document.querySelectorAll(showSelector)) {

                let originalDisplay = event.target.getAttribute('data-original-display');
                if (!originalDisplay) {
                    originalDisplay = 'block';
                }
                showElement.style.display = originalDisplay;
            }
        }
        if (hideSelector) {
            for (let hideElement of document.querySelectorAll(hideSelector)) {
                hideElement.style.display = 'none';
            }
        }
        return event;
    }, true);

    
        body.addEventListener('toggle', function (event) {
            let toggleSelector = event.target.getAttribute('data-toggle');
            if (!toggleSelector) {
              return event;
            }
                for (let toggleElement of document.querySelectorAll(toggleSelector)) {
                    let originalDisplay = event.target.getAttribute('data-original-display');

                    if (!originalDisplay) {
                        originalDisplay = getComputedStyle(toggleElement, null).display;
                        event.target.setAttribute('data-original-display', originalDisplay);
                    }

                    if (toggleElement.style.display === 'none') {
                        toggleElement.style.display = originalDisplay;
                        continue;
                    }
                    toggleElement.style.display = 'none';
                }

            return event;
        }, true);

});