nefiltrat

Простая JavaScript библиотека для фильрации элементов списка.

Установка

npm

npm -i -s nefiltrat

cdn

<script src="https://unpkg.com/[email protected]/build/nefiltrat.min.js"></script>

Использование

Общие принципы

• Фильтровать можно любые HTML элементы (фильтруемые элементы);
• Для фильрации можно использовать либо кнопки, либо чекбоксы, либо и то и то (управляющие элементы);
• Отличия между кнопками и чекбоксами - чекбоксы можно комбинировать;
• Фильрация происходить после клика по кнопке или чекбоксу;
• Фильтрация обеспечтвается атрибутом связкой nef;

Начало работы

• Для настройки фильтруемых элементов нужно:
• создать корневой элемент и присвоить ему уникальный id (для списков это <ul> или <ol>, для таблиц - <tbody>, для дивов - <div>);
• внутри корневого элемента разместить элементы которые будут фильтроваться (для списков это <li>, для таблиц - <tr>, для дивов - <div>);
• внутри каждого элемента разместить атрибут связку nef, его значение должно совпадать с атрибутом связкой управляющего элемента;
• Для настройки управляющего элемента нужно:
• создать кнопку лиюо чекбокс;
• присвоить ему общий для всех управляющих элементов конкретного фильра класс;
• в атрибуте связке nef указать значение которое должно совпадать со значениями атрибутов nef тех фильтруемых элементов которых данный управляющий элемент должен отфильтровать;
• если в атрибуте nef указать значение "showAll" - будут показаны все фильтруемые элементы;
• Для активации модуля фильтрации нужно:
• при условии установленной библиотеки создать обект фильтр var filter = new Nefiltrat('filter-data', 'filter-unit', callback); где:
• 'filter-data' - обязательный параметр, id корневого элемента для фильруемых елементов;
• 'filter-unit' - обязательный параметр, класс общий для все управляющих элементов;
• callback - необязательный параметр, функция которая будет вызвана после выполнения фильтрации

Примеры

<h1>With List</h1>
<button type="button" nef="asd" class="nef-item-list">first</button>
<button type="button" nef="zxc" class="nef-item-list">second</button>
<button type="button" nef="qwe" class="nef-item-list">therd</button>
<button type="button" nef="showAll" class="nef-item-list">showAll</button>
<br>
<hr>
<input type="checkbox" id="chk-list1" nef="asd" class="nef-item-list"><label for="chk-list1">first</label>
<input type="checkbox" id="chk-list2" nef="zxc" class="nef-item-list"><label for="chk-list2">second</label>
<input type="checkbox" id="chk-list3" nef="qwe" class="nef-item-list"><label for="chk-list3">therd</label>
<br>

<ul id='filter-list-container'>
  <li nef='asd'>first1</li>
  <li nef='asd'>first2</li>
  <li nef='zxc'>second1</li>
  <li nef='zxc'>second2</li>
  <li nef='qwe'>therd1</li>
  <li nef='qwe'>therd2</li>
</ul>

<h1>With Div</h1>
<button type="button" nef="asd" class="nef-item-div">first</button>
<button type="button" nef="zxc" class="nef-item-div">second</button>
<button type="button" nef="qwe" class="nef-item-div">therd</button>
<button type="button" nef="showAll" class="nef-item-div">showAll</button>
<br>
<hr>
<input type="checkbox" id="chk-div1" nef="asd" class="nef-item-div"><label for="chk-div1">first</label>
<input type="checkbox" id="chk-div2" nef="zxc" class="nef-item-div"><label for="chk-div2">second</label>
<input type="checkbox" id="chk-div3" nef="qwe" class="nef-item-div"><label for="chk-div3">therd</label>
<br>

<div id='filter-div-container'>
  <div nef='asd'>first1</div>
  <div nef='asd'>first2</div>
  <div nef='zxc'>second1</div>
  <div nef='zxc'>second2</div>
  <div nef='qwe'>therd1</div>
  <div nef='qwe'>therd2</div>
</div>

<h1>With Table</h1>

<button type="button" nef="asd" class="nef-item-table">first</button>
<button type="button" nef="zxc" class="nef-item-table">second</button>
<button type="button" nef="qwe" class="nef-item-table">therd</button>
<button type="button" nef="showAll" class="nef-item-table">showAll</button>
<br>
<hr>
<input type="checkbox" id="chk-table1" nef="asd" class="nef-item-table"><label for="chk-table1">first</label>
<input type="checkbox" id="chk-table2" nef="zxc" class="nef-item-table"><label for="chk-table2">second</label>
<input type="checkbox" id="chk-table3" nef="qwe" class="nef-item-table"><label for="chk-table3">therd</label>
<br>

<table border="1">
  <tbody id='filter-table-container'>
    <tr>
      <td>#</td>
      <td>Name</td>
    </tr>
    <tr nef='asd'>
      <td>1</td>
      <td>first1</td>
    </tr>
    <tr nef='asd'>
      <td>2</td>
      <td>first2</td>
    </tr>
    <tr nef='zxc'>
      <td>4</td>
      <td>second1</td>
    </tr>
    <tr nef='zxc'>
      <td>5</td>
      <td>second2</td>
    </tr>
    <tr nef='qwe'>
      <td>6</td>
      <td>therd1</td>
    </tr>
    <tr nef='qwe'>
      <td>7</td>
      <td>therd2</td>
    </tr>
  </tbody>
</table>

<script src="https://unpkg.com/[email protected]/build/nefiltrat.min.js"></script>
<script type="text/javascript">
  var test = function () {
    console.log('callback');
  }
  var filterList = new Nefiltrat('filter-list-container', 'nef-item-list', test);
  var filterDiv = new Nefiltrat('filter-div-container', 'nef-item-div', test);
  var filterTable = new Nefiltrat('filter-table-container', 'nef-item-table');
</script>

TODO

• [ ] Добавить юнит-тесты;
• [ ] Улучшить документацию;
• [x] ~~Добавить колбек в функцию фильтрации (например для возможности перестройки расположения элементов списка декорированных masonry);~~
• [x] ~~Робота с несколькими фильрами на странице одновременно;~~
• [x] ~~Фильтрация строк таблицы.~~