Merge pull request #5 from cat-list/list-all-tags

List all tags

css/main.scss

@@ -37,6 +37,28 @@ form {
     }
 }
 
+.all_tags{
+    padding-top: 10px;
+    line-height: 28px;
+    text-align: center;
+    overflow: scroll;
+
+    &.short_view {
+        max-height: 125px;        
+    }
+}
+
+.centered {
+    padding-top: 10px;
+    text-align: center;
+    width: 100%;
+}
+
+button.show_more_toggle {
+    color: blue;
+
+}
+
 input[type="text"] {
     outline: none;
     border: none;

index.html

@@ -19,9 +19,29 @@ <h1 class="main_head">
   Hint: Press enter to add the current search term as a tag filter.
 </p>
 <table>
+  Chosen tags:
 <td class="software_tags hidden" id="filter-tags">
 </td></table>
 </div>
+
+<div id="all_tags" class="all_tags short_view">
+  All tags:
+  <br>
+{% capture tags_content %}{% include_relative metadata/all-tags.txt %}{% endcapture %}
+  {% assign tags = tags_content | newline_to_br | split: '<br />' %}
+  {% for tag in tags %}
+{%- assign stripped_tag = tag | strip_newlines -%}
+{% if stripped_tag != "" %}
+  {%- assign tag_main = stripped_tag | split:"/" | first -%}
+<span class="TAG_{{ tag_main}} pill">{{ stripped_tag }}&nbsp;<button onclick="addTag('{{ stripped_tag }}', true)" class="add-button">➕</button></span>
+{% endif %}
+{% endfor %}
+</div>
+<div class="centered">
+  <button id="show_more_toggle" class="show_more_toggle">↓ Show more ↓</button>
+</div>
+
+
 <table>
     <thead>
         <th>Software</th>

js/search.js

@@ -171,13 +171,30 @@ function SETUP() {
     document.getElementById('search-box').focus();
   }
 
+  function attachShowMoreListener() {
+    const button = document.getElementById("show_more_toggle")
+    const all_tags = document.getElementById("all_tags")
+    button.onclick = (e) => {
+      e.preventDefault();
+      const is_short_view = all_tags.classList.contains("short_view")
+      if (is_short_view) {
+        all_tags.classList.remove("short_view")
+        button.textContent = "↑ Show less ↑"
+      } else {
+        all_tags.classList.add("short_view")
+        button.textContent = "↓ Show more ↓"
+      }
+    }
+  }
+
   return Promise.all([
     setInitialQuery(),
     buildShadow(),
     getDataAndFuse(),
     getTags(),
     focusSearchBox(),
     attachSearchCallback(),
+    attachShowMoreListener()
   ]);
 }