Moduł: filters

W katalogu

|--src/                           →  Pliki źródłowe
|  |--modules/                    →  Moduły: katalog główny
|  |  |--filters/                   
|  |  |  |--filters.twig       
|  |  |  |--filters.scss       
|  |  |  |--filters.js       

JS

/**
 * Filters menu
 */

export default function filters() {

  const targets = Array.from(document.querySelectorAll('[data-js="filterMenuTrigger"]'));


  // When trigger for menu exists
  if (targets.length > 0) {

    // Show menu on click
    var trigger = function () {
      targets.forEach(target => {
        target.addEventListener('click', toggleMenu);
      });
    };
    trigger();

    function toggleMenu(e) {
      if(e.target.classList.contains('filterBtn')) {
        if(e.target.querySelector('.filterMenu').classList.contains('is-open')) {
          e.target.querySelector('.filterMenu').classList.remove('is-open');
        
        } else {
          targets.forEach(target => {
            target.querySelector('.filterMenu').classList.remove('is-open');
          });
          e.target.querySelector('.filterMenu').classList.add('is-open');
        }
      }
    }
  }
}

HTML

<div class="filters">
  <ul class="filter">
    <li class="filterBtn" data-js="filterMenuTrigger">Wszystkie kategorie <span><img src="./img/icon__angle-down.svg" alt=""></span>
      <ul class="filterMenu">
        <li><a href="" class="filterBtn">Dla domu</a></li>
        <li><a href="" class="filterBtn">Kino</a></li>
        <li><a href="" class="filterBtn">Wycieczki</a></li>
      </ul>
    </li> 
  </ul>
  <ul class="filter">
    <li class="filterBtn" data-js="filterMenuTrigger">Cena <span><p>0 pkt - 20 000 pkt</p><img src="./img/icon__angle-down.svg" alt=""></span>
      <div class="filterMenu filterSliderWrap">
        <div class="filterSlider">
          <input type="text" class="price-range-slider" name="priceRangeSlider" value=""
          data-type="double"
          data-min="0"
          data-max="506"
          data-from="0"
          data-to="506" 
          data-grid="false"
          data-postfix=" pkt" />
          <div id="priceRangeSliderTrigger" class="btn btn-secondary">zobacz nagrody</div>
        </div>
      </div>
    </li>
  </ul>
  <ul class="filter">
    <li class="filterBtn" data-js="filterMenuTrigger">Od najtańszych <span><img src="./img/icon__angle-down.svg" alt=""></span>
      <ul class="filterMenu">
        <li><a href="" class="filterBtn">Dla domu</a></li>
        <li><a href="" class="filterBtn">Kino</a></li>
        <li><a href="" class="filterBtn">Wycieczki</a></li>
      </ul>
    </li>
  </ul>
</div>