脱jQuery！「Shuffle.js」で絞り込み・ソートを実装する

こんにちは、ナカムラです。
今回はjavaScriptのプラグイン「Shuffle.js」を使って絞り込みとソートの実装をしてみたいと思います。jQueryは使用しません。

オプションがいろいろありすぎて読み解くのがなかなか辛かったので
一番シンプルな絞り込みとソートだけの状態にしてみました。

使用するプラグインのサイトはこちら：Shuffle.js

DEMO

See the Pen 脱jQuery！「Shuffle.js」で絞り込み・ソートを実装する by Nakamura (@takayo-nakamura) on CodePen.

ここからDEMOの内容を解説していきます。
※Shuffle.js自体はcodepenのjsの基本設定で読み込んだ状態にしています。

ベースのセットアップ

インスタンスを生成します。

// インスタンスを生成
const Shuffle = window.Shuffle;
const element = document.querySelector('.my-shuffle-container');

const shuffleInstance = new Shuffle(element, {
  itemSelector: '.item'
});

セレクターの設定

.my-shuffle-container：ソートしたい要素の親要素
.item：ソートしたい要素

アイテムに必要な属性

data属性の値を元に絞り込みやソートを行うので、ここが重要になります。

<p class="item" data-groups='["animal"]' data-date-created="2016-08-12" data-title="Crocodile">

data-groups='["animal"]'：絞り込みに使います
data-date-created="2016-08-12"：ソートに使います
data-title="Crocodile"：ソートに使います

絞り込み・ソートの選択肢

今回は単一選択のみの対応になりますのでselect要素にしました。
絞り込み・ソートには選択した要素のvalue属性の値を使います。

絞り込みの処理

select要素（class名：js-filter-options）が変更された時に関数getFilterを実行します。

// 絞り込み
const getFilter = e =>{
  if(e){
    // 選択された要素のvalue属性の値を取得
    const value = e.target.value;
    //取得した値で絞り込む
    shuffleInstance.filter(value);
  }  
}

// 絞り込みのselect要素が変更されたら実行する
const filterOptions = document.querySelectorAll('.js-filter-options');
const filterOptionsList = Array.prototype.slice.call(filterOptions, 0);
filterOptionsList.forEach(element => {
  element.addEventListener('change', getFilter, false);
});

ソートの処理

こちらも絞り込みと同様です。
select要素（class名：js-sort-options）が変更された時に関数getSortを実行します。選択された要素のvalue値によって設定されるオプションが変わります。

const getSort = e =>{
    const value = e.target.value;
    function sortByDate(e) {
      return e.getAttribute('data-date-created');
    }

    function sortByTitle(e) {
      return e.getAttribute('data-title').toLowerCase();
    }

    // 選択された内容によってソートのオプションを変える
    var options;
    if (value === 'date-new') {
      options = {
        reverse: true, // 降順
        by: sortByDate, // data-date-created属性の値を返す関数
      };
    } else if (value === 'date-old') {
      options = {
        reverse: false, // 昇順
        by: sortByDate,// data-date-created属性の値を返す関数
      };
    } else if (value === 'title') {
      options = {
        by: sortByTitle, // data-title属性の値を返す関数
      };
    } else {
      options = {};
    }
    // セットしたオプションでソートする
    shuffleInstance.sort(options);
}

// ソートのselect要素が変更されたら実行する
const sortOptions = document.querySelectorAll('.js-sort-options');
const sortOptionsList = Array.prototype.slice.call(sortOptions, 0);
sortOptionsList.forEach(element => {
  element.addEventListener('change', getSort , false);
});

まとめ

絞り込みもソートもユーザーが選択した内容を渡すという流れになります。
絞り込みの場合は複数選択したいこともあると思います。
その場合はチェックボックス（選択肢全て）のvalue値を配列にして渡せば良いようですが、
まだ作ったことがないので今回はここまでとします。
去年このプラグインを使おうとして、時間も足りず挫折してしまったので、今回基本だけでも理解できてよかったです。
複雑なものは徐々に挑戦していきます。

次週は祝日があるため、次回の更新は9月30日（水）となります。