画像グリッド + フィルタリング
まず初めに
GitHub - metafizzy/isotope: Filter & sort magical layouts
プロジェクトで触った時に出くわしたちょっと困ったところを備忘録としてただ書くだけの記事です。
導入とか基本的な使い方は他の記事の方が詳しいです。
セルの css ルールは .grid-sizer を継承する
.grid-sizer に width: 50%; が適用されていればセルの基本サイズも width: 50%; になります。
おそらくマニュアル通りに html を構築すると、
div.grid の子として div.grid-sizer があり、その下に div.grid-item が存在することと思います。
上記の状況で、例えば .grid > div に css ルールが設定されていた場合、
絞り込み検索等で表示できるセルが 1 つもない場合、
div.grid-sizer だけが残って .grid > div のルールが適用されてしまうため、表示が崩れたりします。
グリッドの表示フロー
オプションを連想配列で指定し、isotope() で呼び出すことでグリッドを更新します。
特定のセルだけを絞り込んで表示するようにオプションで指定することができるフィルタリング機能があります。
isotope が勝手にセルを生成するわけではなく、前もって自分で全セルを html に定義する必要があります。
isotope にセルとして認識させるためには itemSelector オプションで予めクラス名を与えておく必要があります。
isotope({itemSelector: '.grid-item'}) として定義した場合、
<div class="grid-item"></div>
で定義された要素がセルとして認識されます。
更に、各セルに定義されるクラス名を使ってフィルタリングを行います。
<div class="grid-item red"></div>
といったセルが存在する場合、
isotope({filter: '.red'}) という指定をすると上記のように .red が付与されているセルが全て表示されます。
フィルタリングルール
OR 検索と AND 検索が使用できます。
OR 検索
filter: '.red, .yellow' のように、カンマ + スペースで複数のクラス名を記述した場合、
指定したクラスのいずれかが含まれているセルが表示されます。
<div class="grid-item red"></div> <div class="grid-item yellow"></div> <div class="grid-item red yellow"></div>
AND 検索
filter: '.red.yellow' のように、スペースなしで複数のクラス名を記述した場合、
指定したクラスが全て含まれているセルが表示されます。
<div class="grid-item red yellow"></div>
OR 検索と AND 検索を組み合わせて filter: '.red.yellow, .red.blue' のようにすることもできます。
全件検索は filter: '*' です。
でも空文字でも全件になったような気がします。
最大表示件数を指定する
isotope の filter オプションにはクロージャを指定できるので、そこで良い感じにやります。
let maxLimit = 10;
let filterValue = '.red.yellow';
filter: function (_, item) {
let index = $(this).parent().children(filterValue).index(this);
return maxLimit === undefined
? index > -1
: (index > -1) && (index < maxLimit);
};$(this) じゃなくて 普通に item でもいいんだけど、
とにかく現在検証している要素のインデックスが表示最大件数を超えているかどうかを判定しています。
つまりこれ要素数が多くなるほどボトルネックになるので、公式でこれくらいは用意してほしいです。
