Neverwinter Wiki
мНет описания правки
мНет описания правки
Строка 12: Строка 12:
   
 
<style type="text/css">
 
<style type="text/css">
tbody.filter-table-mount tr:last-child{
+
tbody .filter-table-mount tr:last-child{
 
text-align: center;
 
text-align: center;
 
display: none;
 
display: none;

Версия от 17:53, 19 января 2020

<fieldset style="position: sticky; top: 0; z-index: 100;">

   <legend>Параметры фильтра таблицы:</legend>

Нижеследующие таблицы можно отфильтровать, используя следующие кнопки. Несколько фильтров могут быть применены сразу, щелкнув несколько кнопок.

       <button class="btn" type="button Crescent" value="Ячейка серповидных знаков"><img src="/images/6/61/Серповидный_знак.png" style="width: 50px;"></button>
       <button class="btn" type="button Enlightened" value="Ячейка просвещенных знаков"><img src="/images/3/3c/Просвещенный_знак.png" style="width: 50px;"></button>
       <button class="btn" type="button Illuminated" value="Ячейка украшенных знаков"><img src="/images/c/c9/Украшенный_знак.png" style="width: 50px;"></button>
       <button class="btn" type="button Regal" value="Ячейка царственных знаков"><img src="/images/1/1a/Царственный_знак.png" style="width: 50px;"></button>
       <button class="btn" type="button Barbed" value="Ячейка шипастых знаков"><img src="/images/5/52/Шипастый_знак.png" style="width: 50px;"></button>
   </fieldset>
   <style type="text/css">
   tbody .filter-table-mount tr:last-child{
       text-align: center;
       display: none;
   }
   tbody.no-results-mount tr:last-child{
       display: table-row;
   }
   .btn{
   color: #f7aa54 !important;
   border: none !important;
   background: none !important;
   margin: 0 !important;
   padding: 5px !important;

}

   .btn.active{
   color: #f7aa54 !important;
   background-color: #341f17 !important;
   border: none !important;
   }
   .btn:focus{
       outline: none;
   }
   </style>
   <script>
document.addEventListener("click", ({target}) => {
      if(target = target.closest(".btn")) {
      target.classList.toggle("active");
      const show = [...document.querySelectorAll(".btn.active")].map(({value})=> value);
      const rows = [...document.querySelectorAll("[data-filter]")].
      filter((el, i) => {
      const data = el.dataset.filter.split(", ");  console.log(show, data)
      const hide = show.some(value => !data.includes(value))
      el.hidden = hide;
      return !hide
      })
      document.querySelector(".filter-table-mount tbody").classList.toggle("no-results-mount", !rows.length)
      }
  })
   </script>