Add ability to filter by tags in kiwix serve

This change introduces filtering by tags. To filter, the user can click on the tag name and it will filter it. A label is added (clickable) to show the tag filter, it can be clicked to remove the filter
kiwix · Feb 11, 2022 · 0c0dad4 · 0c0dad4
1 parent 711d324
commit 0c0dad4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/static/skin/index.css b/static/skin/index.css
@@ -264,6 +264,10 @@ body {
     -webkit-box-orient: vertical;
 }
 
+.book__tags--wrapper:hover {
+    font-weight: bold;
+}
+
 .modal-wrapper {
     position: fixed;
     z-index: 100;
@@ -423,7 +427,7 @@ body {
 @media screen and (max-width: 590px) {
 
     .kiwixNav {
-        height: 257px;
+        height: 280px;
     }
 
     .kiwixHomeBody {
@@ -435,7 +439,7 @@ body {
     }
 
     .kiwixButton {
-        margin: 19px 0;
+        margin: 10px 0;
         width: 229px;
     }
 

diff --git a/static/skin/index.js b/static/skin/index.js
@@ -372,6 +372,20 @@
         }
     }
 
+    function addTagElement(tagValue) {
+        const searchFilter = document.getElementById('searchFilter');
+        const tagElement = document.createElement('button');
+        tagElement.classList.add('kiwixButton');
+        tagElement.style.width = 'max-content';
+        tagElement.style.paddingLeft = tagElement.style.paddingRight = '8px';
+        tagElement.innerHTML = `&#127991; ${tagValue}`;
+        tagElement.addEventListener('click', (e) => {
+            searchFilter.parentElement.removeChild(tagElement);
+            resetAndFilter('tag', '');
+        });
+        searchFilter.insertAdjacentElement('afterend', tagElement);
+    }
+
     window.addEventListener('resize', (event) => {
         if (timer) {clearTimeout(timer)}
         timer = setTimeout(() => {
@@ -407,6 +421,21 @@
         document.querySelectorAll('.filter').forEach(filter => {
             filter.addEventListener('change', () => {resetAndFilter(filter.name, filter.value)});
         });
+        document.querySelectorAll('.book__tags--wrapper').forEach(bookTagElement => {
+            bookTagElement.addEventListener('click', (e) => {
+                // prevent <a> tag
+                if (bookTagElement.contains(e.target)) {
+                    e.preventDefault();
+                }
+                let tagValue = bookTagElement.innerText;
+                filterValue = tagValue.toLowerCase();
+                filterValue = filterValue.replace(/\s/g, '_');
+                if (params.get('tag') != filterValue) {
+                    resetAndFilter('tag', filterValue);
+                    addTagElement(tagValue);
+                }
+            });
+        });
         if (filters) {
             window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`);
         }
@@ -415,6 +444,9 @@
             if (selectBox) {
                 selectBox.value = value
             }
+            if (key == 'tag' && value.trim() != '') {
+                addTagElement(humanFriendlyTitle(value));
+            }
         });
         document.getElementById('kiwixSearchForm').onsubmit = (event) => {event.preventDefault()};
         if (!window.location.search) {