working tags for filters

assets/javascript/downloads.js

@@ -13,6 +13,7 @@ document.addEventListener('DOMContentLoaded', function() {
   document.getElementById("search").addEventListener('keyup', handleSearch);
   document.querySelector(".downloads-filter .filter").addEventListener('click', handleFilter);
   document.querySelector(".filter-buttons .save-changes").addEventListener('click', handleSaveChanges);
+  document.addEventListener('click', handleRemoveTag);
 });
 
 function handleSearch(event) {
@@ -37,6 +38,21 @@ function initFilter() {
   downloadsSearch.initFilter = true;
 }
 
+function handleSaveChanges() {
+  toggleFilterContainer();
+}
+
+function handleRemoveTag(event) {
+  if (event.target && /tag-remove/gi.test(event.target.className)) {
+    var tag = event.target;
+    var name = tag.dataset.name;
+    var type = tag.dataset.type;
+    var selector = "input[name='" + type + "'][value='" + name + "']";
+
+    document.querySelector(selector).click();
+  }
+}
+
 function toggleFilterContainer() {
   var filterContainer = document.querySelector('.downloads-filter-content');
 
@@ -47,10 +63,6 @@ function toggleFilterContainer() {
   }
 }
 
-function handleSaveChanges() {
-  toggleFilterContainer();
-}
-
 function setupManufacturers(downloads) {
   downloads.forEach(function(download) {
     var manufacturer = download.dataset.manufacturer;
@@ -117,10 +129,12 @@ function setupFilterListeners() {
     if (checkbox.name === 'manufacturer') {
       if (checkbox.checked) {
         downloadsSearch.selected.manufacturers.push(checkbox.value);
+        appendFilterTag('manufacturer', checkbox.value);
       } else {
         var index = downloadsSearch.selected.manufacturers.indexOf(checkbox.value);
         if (index > -1) {
           downloadsSearch.selected.manufacturers.splice(index, 1);
+          removeFilterTag('manufacturer', checkbox.value);
         }
       }
       filterResults();
@@ -129,10 +143,12 @@ function setupFilterListeners() {
     if (checkbox.name === 'feature') {
       if (checkbox.checked) {
         downloadsSearch.selected.features.push(checkbox.value);
+        appendFilterTag('feature', checkbox.value);
       } else {
         var index = downloadsSearch.selected.features.indexOf(checkbox.value);
         if (index > -1) {
           downloadsSearch.selected.features.splice(index, 1);
+          removeFilterTag('feature', checkbox.value);
         }
       }
       filterResults();
@@ -217,3 +233,16 @@ function shouldDisplayDownload(download, searchTerm, displayedManufacturers, dis
 
   return shouldDisplay;
 }
+
+function appendFilterTag(type, name) {
+  var tagHtml = "<span class='tag'><i class='fas fa-times tag-remove' ";
+  tagHtml += "data-type='" + type + "' ";
+  tagHtml += "data-name='" + name + "'></i>";
+  tagHtml += name + "</span>";
+
+  document.querySelector('.downloads-filter-tags').insertAdjacentHTML('beforeend', tagHtml);
+}
+
+function removeFilterTag(type, name) {
+  document.querySelector("[data-type='" + type + "'][data-name='" + name + "']").parentNode.remove();
+}

assets/sass/pages/_downloads.scss

@@ -66,6 +66,27 @@
         }
       }
     }
+
+    .downloads-filter-tags {
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+
+      span {
+        padding: 5px 7px 5px 7px;
+        margin-left: 5px;
+        background-color: $purple;
+        color: #fff;
+        border-radius: 5px;
+        font-size: 14px;
+        text-transform: capitalize;
+
+        i {
+          margin-right: 5px;
+          cursor: pointer;
+        }
+      }
+    }
   }
 
   .downloads-filter-content {
@@ -102,6 +123,7 @@
 
       li {
         padding: 2px;
+        text-transform: capitalize;
 
         input {
           margin-right: 5px;

downloads.html

@@ -15,6 +15,8 @@ permalink: /downloads
     <div class="downloads-filter">
       <button class="filter"><i class="fas fa-sliders-h"></i></button>
     </div>
+    <div class="downloads-filter-tags">
+    </div>
   </div>
   <div class="downloads-filter-content">
     <div>