usecueweb development

Filter & Sort by Usecue

Close
  • readme.txt
  • index.html
  • filter.css
  • filter.js

What is this?

I saw the Isotope filter and I just had to write a rebuild using modern web standards. This filter uses a grid layout and animates using view transition. It is silky smooth, blazing fast and has graceful degredation. The code consists of only 63 lines of vanilla JS, while the old version required an astonishing 3500+ lines. If you choose to leave the sorting out, you can even reduce the code to 37 lines. Yup… the web has come a long way.

How to use it?

Just set id="filter" on any container and give its children classes that represent categories, like class="metal". Then create some buttons with data attributes, like data-filter=".metal" or data-sortby="symbol". Load the JS from this demo in the footer and it works. You don’t need ANY of the CSS. That is all just fancy stuff.

<div>
    <button data-filter="*">show all</button>
    <button data-filter=".metal">metal</button>
    ...
</div>
<div>
    <button data-sortby="order">original order</button>
    <button data-sortby="name">name</button>
    ...
</div>
<div id="filter">
    <div class="metal">
        <h3 class="name">Mercury</h3>
        <p class="symbol">Hg</p>
        <p class="number">80</p>
        <p class="weight">200.59</p>
    </div>
    ....
</div>
<link rel="stylesheet" href="filter.css" />
<script src="filter.js"></script>

Caveats

Note that this version only supports basic filtering and sorting. Also note that the animation might not show in older browsers. Finally, be aware that you can not use this Isotope filter twice on the same page, as it lacks abstraction for that.

License

The original Isotope code was licensed GPLv3 and was not free for commercial use ($25/dev). That made sense. However, this code is so basic, you can’t license it. You would license modern web standards, which is crazy. So, if anything, it should be WTFPL.

<h3>Filter</h3>
<div class="button-group">
    <button class="button is-checked" data-filter="*">show all</button>
    <button class="button" data-filter=".metal">metal</button>
    <button class="button" data-filter=".alkali">alkali</button>
    <button class="button" data-filter=".alkaline-earth">alkaline-earth</button>
    <button class="button" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</button>
    <button class="button" data-filter=".transition">transition</button>
    <button class="button" data-filter=".post-transition">post-transition</button>
</div>
<h3>Sort</h3>
<div class="button-group">
    <button class="button is-checked" data-sortby="order">original order</button>
    <button class="button" data-sortby="name">name</button>
    <button class="button" data-sortby="symbol">symbol</button>
    <button class="button" data-sortby="number">number</button>
    <button class="button" data-sortby="weight">weight</button>
</div>
<br>
<div class="grid" id="filter">
  <div class="element-item transition metal ">
    <h3 class="name">Mercury</h3>
    <p class="symbol">Hg</p>
    <p class="number">80</p>
    <p class="weight">200.59</p>
  </div>
  <div class="element-item metalloid ">
    <h3 class="name">Tellurium</h3>
    <p class="symbol">Te</p>
    <p class="number">52</p>
    <p class="weight">127.6</p>
  </div>
  <div class="element-item post-transition metal ">
    <h3 class="name">Bismuth</h3>
    <p class="symbol">Bi</p>
    <p class="number">83</p>
    <p class="weight">208.980</p>
  </div>
  <div class="element-item post-transition metal ">
    <h3 class="name">Lead</h3>
    <p class="symbol">Pb</p>
    <p class="number">82</p>
    <p class="weight">207.2</p>
  </div>
  <div class="element-item transition metal ">
    <h3 class="name">Gold</h3>
    <p class="symbol">Au</p>
    <p class="number">79</p>
    <p class="weight">196.967</p>
  </div>
  <div class="element-item alkali metal ">
    <h3 class="name">Potassium</h3>
    <p class="symbol">K</p>
    <p class="number">19</p>
    <p class="weight">39.0983</p>
  </div>
  <div class="element-item alkali metal ">
    <h3 class="name">Sodium</h3>
    <p class="symbol">Na</p>
    <p class="number">11</p>
    <p class="weight">22.99</p>
  </div>
  <div class="element-item transition metal ">
    <h3 class="name">Cadmium</h3>
    <p class="symbol">Cd</p>
    <p class="number">48</p>
    <p class="weight">112.411</p>
  </div>
  <div class="element-item alkaline-earth metal ">
    <h3 class="name">Calcium</h3>
    <p class="symbol">Ca</p>
    <p class="number">20</p>
    <p class="weight">40.078</p>
  </div>
  <div class="element-item transition metal ">
    <h3 class="name">Rhenium</h3>
    <p class="symbol">Re</p>
    <p class="number">75</p>
    <p class="weight">186.207</p>
  </div>
  <div class="element-item post-transition metal ">
    <h3 class="name">Thallium</h3>
    <p class="symbol">Tl</p>
    <p class="number">81</p>
    <p class="weight">204.383</p>
  </div>
  <div class="element-item metalloid ">
    <h3 class="name">Antimony</h3>
    <p class="symbol">Sb</p>
    <p class="number">51</p>
    <p class="weight">121.76</p>
  </div>
  <div class="element-item transition metal ">
    <h3 class="name">Cobalt</h3>
    <p class="symbol">Co</p>
    <p class="number">27</p>
    <p class="weight">58.933</p>
  </div>
  <div class="element-item lanthanoid metal inner-transition ">
    <h3 class="name">Ytterbium</h3>
    <p class="symbol">Yb</p>
    <p class="number">70</p>
    <p class="weight">173.054</p>
  </div>
  <div class="element-item noble-gas nonmetal ">
    <h3 class="name">Argon</h3>
    <p class="symbol">Ar</p>
    <p class="number">18</p>
    <p class="weight">39.948</p>
  </div>
  <div class="element-item diatomic nonmetal ">
    <h3 class="name">Nitrogen</h3>
    <p class="symbol">N</p>
    <p class="number">7</p>
    <p class="weight">14.007</p>
  </div>
  <div class="element-item actinoid metal inner-transition ">
    <h3 class="name">Uranium</h3>
    <p class="symbol">U</p>
    <p class="number">92</p>
    <p class="weight">238.029</p>
  </div>
  <div class="element-item actinoid metal inner-transition ">
    <h3 class="name">Plutonium</h3>
    <p class="symbol">Pu</p>
    <p class="number">94</p>
    <p class="weight">(244)</p>
  </div>
</div>

<link rel="stylesheet" href="/demos/filter/filter.css" />
<script src="/demos/filter/filter.js"></script>
h3 {font-size: 1.25rem; margin-block: 0.25rem 0.5rem}
h3:first-child {margin-top: 1rem;}

/* ---- button ---- */
.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  border: none;
  border-radius: 7px;
  background: #ddd;
  color: #222;
  font-family: sans-serif;
  font-size: 1rem;
  cursor: pointer;
}

.button:hover {
  background-color: #8CF;
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #19F;
  color: white;
}

.button.is-checked {
  color: white;
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.2);
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group {display: flex; flex-wrap: wrap;}
.button-group .button {
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .button:first-child { border-radius: 0.25em 0 0 0.25em; }
.button-group .button:last-child { border-radius: 0 0.25em 0.25em 0; }

/* ---- isotope ---- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 5px;
  margin-bottom: 4rem;
  font-family: sans-serif;
}

/* ---- .element-item ---- */

.element-item {
  position: relative;
  padding: 10px;
  background: #888;
  color: #262524;
  aspect-ratio: 1;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;
  left: 10px;
  bottom: 25px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 12px;
}

.element-item.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element-item.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element-item.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
.element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }
var els = document.querySelectorAll('#filter > *');
var container = els[0].parentElement;
var filters = document.querySelectorAll('[data-filter], [data-sortby]');
function applyFilter(filter) {
    els.forEach(function(el) {
        if (el.matches(filter)) {
            el.style.display = 'block';
        } else {
            el.style.display = 'none';
        }
    });
}
function applySort(sortby) {
    if (sortby === 'order') {
      els = Array.from(els).sort(function(a, b) {
          return parseInt(a.dataset.order) - parseInt(b.dataset.order);
      });
    } else if (sortby === 'number') {
      els = Array.from(els).sort(function(a, b) {
          return parseInt(a.querySelector('.number').textContent) - parseInt(b.querySelector('.number').textContent);
      });
    } else if (sortby === 'weight') {
      els = Array.from(els).sort(function(a, b) {
          return parseFloat(a.querySelector('.weight').textContent) - parseFloat(b.querySelector('.weight').textContent);
      });
    } else {     
      els = Array.from(els).sort(function(a, b) {
          return a.querySelector('.'+sortby).textContent.localeCompare(b.querySelector('.'+sortby).textContent);
      });
    }
    container.append(...els);
}
function updateActiveButton(el) {
    filters.forEach(function(f) {
      if((el.dataset.filter && f.dataset.filter) || (el.dataset.sortby && f.dataset.sortby)) {
        if (f === el) {
            f.classList.add('is-checked');
        } else {
            f.classList.remove('is-checked');
        }
      }
    });
}
let isotopeNum = 0;
els.forEach(function(el) {
  el.style.viewTransitionName = 'isotopeNum-' + isotopeNum++;
  el.dataset.order = isotopeNum;
});
filters.forEach(function(f) {
  f.addEventListener('click', function() {
    if(!document.startViewTransition) {
      updateActiveButton(f);
      if(f.dataset.filter) applyFilter(f.dataset.filter);
      else applySort(f.dataset.sortby);
    } else {
      document.startViewTransition(() => {
        updateActiveButton(f);
        if(f.dataset.filter) applyFilter(f.dataset.filter);
        else applySort(f.dataset.sortby);
      });
    }
  });
});