index.html

---
layout: default
title: browse
---
<h2 class="page-title">Browse:</h2>
<div id="archiveList" class="archive-list">

  <div class="browse">
    <input class="search" placeholder=" Search" type="text" aria-label="Search posts">
    <button class="buttons sort" data-sort="title">title</button>
    <button class="buttons sort" data-sort="date">date</button>
    <button class="buttons sort" data-sort="tags">tags</button>
    <br>

    Filter: 
    <button class="buttons filter-buttons" onclick="filterByHandy()">Handy!</button>
    {% assign categories = "workshop;web;dh;food;git;library;linux" | split: ";" %}
    {% for c in categories %}
    <button class="buttons filter-buttons" onclick="filterByCategory('{{ c }}')">{{ c }}</button>
    {% endfor %}
    <button id="view-all" class="buttons filter-buttons">All</button>

  </div>

  <div class="listjs">
    {% for post in site.notes reversed %}{% unless post.hide == true %}
    <div class="archive-list-post">
      <a href="{{ post.url | relative_url }}">  
      <span class="title archive-list-post-title">
        {{ post.title }}
      </span>
      <span class="date archive-list-post-date"> | 
        <time>{{ post.date | date: "%Y-%m-%d" }}</time> | 
      </span>
      <span class="tags">{{ post.tags | join: ', ' }}</span>
      {% if post.handy == true %}<span class="handy d-none">true</span>{% endif %}
      </a>
    </div>
    {% endunless %}{% endfor %}
  </div>

</div>
<!-- add list.js http://www.listjs.com/ @javve -->
<script src="{{ '/js/list.min.js' | relative_url }}"></script>
<script> 
    // filter by handy function
    function filterByHandy() {
      userList.filter( function(item) {
        var cat = item.values().handy;
        if (cat.indexOf(true) != -1) {
          return true;
        } else {
          return false;
        }
      })
    };

    // filter by category function
    function filterByCategory(filter_category) {
      userList.filter( function(item) {
        var cat = item.values().tags;
        if (cat.indexOf(filter_category) != -1) {
          return true;
        } else {
          return false;
        }
      })
    };

    var options = {
        valueNames: [ 'title', 'date', 'tags', 'handy' ],
        listClass: 'listjs'
    };
    var userList = new List('archiveList', options);

    // reset filter
    document.getElementById('view-all').onclick = function() { userList.filter(); };

</script>