SalesGames Dokumentacja

# Moduł: productListHistory

# W katalogu

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

# CSS

# Dostępne wartości do zmiany
Zmienna Wartość domyślna Opis
$plh-background-color $color-bg kolor tła
$plh-background-color-active $color-secondary-lighten kolor tła aktywnego
$plh-border-radius rem(16) zakrąglenia
$plh-padding rem(16) rem(24) padding
$plh-bold-color $color-primary kolor bolda

# JS

/**
 * dropdown
 */

export default function dropdown() {

  const dropdowns = Array.from(document.querySelectorAll('[data-js="dropdown-trigger"]'));

  // When dropdowns exists
  if (dropdowns.length > 0) {

    var trigger = function () {
      dropdowns.forEach(trigger => {
        trigger.addEventListener('click', function() {
          var id = trigger.dataset.menu
          document.getElementById(id).classList.toggle('is-open')
        }, false);
      });
    };
    trigger();
  }
}

# HTML

<ul class="productListHistory">
  <li><a href="" class="productListHistory__link"><b>Zamówienie nr 000124</b><span>13.02.2017</span></a></li>
  <li><a href="" class="productListHistory__link is-active"><b>Zamówienie nr 000124</b><span>13.02.2017</span></a></li>
  <li><a href="" class="productListHistory__link"><b>Zamówienie nr 000124</b><span>13.02.2017</span></a></li>
  <li><a href="" class="productListHistory__link"><b>Zamówienie nr 000124</b><span>13.02.2017</span></a></li>
  <li><a href="" class="productListHistory__link"><b>Zamówienie nr 000124</b><span>13.02.2017</span></a></li>
</ul>
<div class="productListHistory-dropdown dropdown"  id="dropdown-menu">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" data-menu="dropdown-menu" data-js="dropdown-trigger">
      <div class="productListHistory__link"><b>Zamówienie nr 000124</b><span>13.02.2017</span></div>
      <span class="icon">
        <img src="./img/icon__angle-down.svg" alt="">
      </span>
    </button>
  </div>
  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <ul>
        <li><a href="" class="productListHistory__link"><b>Zamówienie nr 000124</b><span>13.02.2017</span></a></li>
        <li><a href="" class="productListHistory__link"><b>Zamówienie nr 000124</b><span>13.02.2017</span></a></li>
        <li><a href="" class="productListHistory__link"><b>Zamówienie nr 000124</b><span>13.02.2017</span></a></li>
        <li><a href="" class="productListHistory__link"><b>Zamówienie nr 000124</b><span>13.02.2017</span></a></li>
        <li><a href="" class="productListHistory__link"><b>Zamówienie nr 000124</b><span>13.02.2017</span></a></li>
      </ul>
    </div>
  </div>
</div>

← Statement →