Essays filtering by labels in Liquid language for Semantic UI select

liquid_essays_filtering.html

<!-- 

Code snippet for adding essays filtering by labels 
using Liquid language and Semantic UI for e.g. to
TechFolios portfolio http://techfolios.github.io/ 

-->

<!-- Single essay card example from TechFolios -->
<a class="grey card myessay" href="{{ site.baseurl}}{{ include.page.url }}">
  <div class="content">
    <span class="header">{{ include.page.title }}</span>
    <div class="meta">
      <span class="date">{{ include.page.date | date: "%d.%m.%Y" }}</span>
    </div>
    <div class="description center aligned" style="font-size: 13px;">
      {{ include.page.summary }}
    </div>
  </div>
  <div class="extra content">
    <div class="ui tiny labels">
      {% for label in include.page.labels %}
      <div class="ui custom-color label">{{ label }}</div>
      {% endfor %}
    </div>
  </div>
</a>

<!-- Step 1 -->
<!-- Prepare & feed label picker -->
<div class="" style="margin-bottom: 5%;">
  {% assign essays = site.pages | where: "type", "essay" %}
  {% assign labels = '' | split: '' %}
    {% for essay in essays %}
      {% for label in essay.labels %}
        {% assign tmp = label | split: '_' %}
        {% assign labels = labels | concat: tmp %}
      {% endfor %}
    {% endfor %}
  {% assign labels = labels | uniq | sort %}
  <select id="labelPicker" multiple="multiple" name="skills" class="ui fluid search dropdown">
    <option value="">Pick label(s)</option>
    {% for label in labels %}
    <option value="{{label}}">{{ label }}</option>
    {% endfor %}
  </select>
</div>

<!-- Step 2 -->
<!-- Prepare hide class for hiding essays instead of using display attribute -->
<!-- idea comes from: https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ -->

<style>
.hide {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}
</style>

<!-- Step 3 -->
<!-- Add JS script for filtering management -->
<script>

var essays = document.getElementsByClassName('myessay');

$(document).ready(function () {
    $('.ui.dropdown').dropdown({
        maxSelections: 2,           // here you can change how many selections are allowed
        onChange: function() {
            if ($('#labelPicker').val() == null) {
                displayAllEssays();
                return false;
            }
            var labels = $('#labelPicker').val();
            // loop through essays
            for (var i = 0; i < essays.length; i++) {
                var essayLabels = essays[i].getElementsByClassName('label');
                var array = [];
                // loop through essay labels
                for (var j = 0; j < essayLabels.length; j++) {
                    array.push(essayLabels[j].textContent);
                    var isMatched = false;
                    // loop through picked labels
                    for (var k = 0; k < labels.length; k++) {
                        if (array.includes(labels[k]) == true) {
                            isMatched = true;
                        }
                        else {
                            isMatched = false;
                            break;
                        }
                    }
                }
                if (isMatched == true) {
                    essays[i].classList.remove('hide');
                }
                else {
                    essays[i].classList.add('hide');
                }
            }
        }
    });
});

function displayAllEssays() {
    for (var i = 0; i < essays.length; i++) { 
        essays[i].classList.remove('hide');
    }
}

</script>