Multiple Gallery Filters

portal/_extensions/yaml_gallery_generator.py

@@ -38,12 +38,13 @@ def _generate_tag_menu(all_items, tag_key):
     tag_list = sorted(tag_set)
 
     options = ''.join(
-        f'<li><a class="dropdown-item" href="/gallery/{tag.replace(" ", "-")}.html">{tag.title()}</a></li>\n'
+        f'<li><label class="dropdown-item checkbox {tag_key}"><input type="checkbox" rel={tag} onchange="change();">&nbsp;{tag.capitalize()}</label></li>'
         for tag in tag_list
     )
 
     return f"""
 <div class="dropdown">
+
 <button class="btn btn-sm btn-outline-primary mx-1 dropdown-toggle" type="button" id="{tag_key}Dropdown" data-bs-toggle="dropdown" aria-expanded="false">
 {tag_key.title()}
 </button>
@@ -54,17 +55,16 @@ def _generate_tag_menu(all_items, tag_key):
 """
 
 
-def _generate_menu(all_items, flt=None):
+def _generate_menu(all_items):
 
     key_list = _generate_sorted_tag_keys(all_items)
 
     menu_html = '<div class="d-sm-flex mt-3 mb-4">\n'
     menu_html += '<div class="d-flex gallery-menu">\n'
     menu_html += '<div><a role="button" class="btn btn-primary btn-sm mx-1" href="https://github.com/ProjectPythia/projectpythia.github.io/issues/new?assignees=&labels=external-links-gallery-submission&template=update-external-links-gallery.md&title=">Submit a new resource</a></div>\n'
-    if flt:
-        menu_html += '<div><a role="button" class="btn btn-link btn-sm text-decoration-none" href="/gallery.html">Return to Full Gallery</a></div>\n'
     menu_html += '</div>\n'
     menu_html += '<div class="ms-auto d-flex">\n'
+    menu_html += '<div><button class="btn btn-link btn-sm mx-1" onclick="clearCbs()">Clear all filters</button></div>\n'
     for tag_key in key_list:
         menu_html += _generate_tag_menu(all_items, tag_key) + '\n'
     menu_html += '</div>\n'
@@ -82,12 +82,13 @@ def build_from_items(items, filename, title='Gallery', subtitle=None, menu_html=
             item['thumbnail'] = '/_static/images/ebp-logo.png'
         thumbnail = item['thumbnail']
         tag_list = sorted((itertools.chain(*item['tags'].values())))
-        tags = [
-            f'<a href="/gallery/{tag.replace(" ", "-")}.html" class="badge bg-primary link-light">{tag}</a>'
-            for tag in tag_list
-        ]
+        tag_list_f = [tag.replace(' ', '-') for tag in tag_list]
+
+        tags = [f'<span class="badge bg-primary">{tag}</span>' for tag in tag_list_f]
         tags = '\n'.join(tags)
 
+        tag_class_str = ' '.join(tag_list_f)
+
         author_strs = set()
         institution_strs = set()
         for a in item['authors']:
@@ -139,6 +140,7 @@ def build_from_items(items, filename, title='Gallery', subtitle=None, menu_html=
         panels_body.append(
             f"""\
 ---
+:column: + tagged-card {tag_class_str}
 
 <div class="d-flex gallery-card">
 <img src="{thumbnail}" class="gallery-thumbnail" />
@@ -197,13 +199,6 @@ def main(app):
     menu_html = _generate_menu(all_items)
     build_from_items(all_items, 'gallery', title=title, menu_html=menu_html)
 
-    menu_html_flt = _generate_menu(all_items, flt=True)
-    tag_set = _generate_tag_set(all_items)
-
-    for tag in tag_set:
-        items = [item for item in all_items if _tag_in_item(item, tag)]
-        build_from_items(items, f'gallery/{tag.replace(" ", "-")}', title=title, subtitle=tag, menu_html=menu_html_flt)
-
 
 def setup(app):
     app.connect('builder-inited', main)

portal/_static/custom.js

@@ -30,3 +30,155 @@ for (i = 0; i < buttons.length; i++) {
     })(i)
   )
 }
+
+
+function change() {
+  var affiliationCbs = document.querySelectorAll(".affiliation input[type='checkbox']");
+  var domainsCbs = document.querySelectorAll(".domains input[type='checkbox']");
+  var formatsCbs = document.querySelectorAll(".formats input[type='checkbox']");
+  var packagesCbs = document.querySelectorAll(".packages input[type='checkbox']");
+
+  var filters = {
+    affiliation: getClassOfCheckedCheckboxes(affiliationCbs),
+    domains: getClassOfCheckedCheckboxes(domainsCbs),
+    formats: getClassOfCheckedCheckboxes(formatsCbs),
+    packages: getClassOfCheckedCheckboxes(packagesCbs)
+  };
+
+  filterResults(filters);
+}
+
+function getClassOfCheckedCheckboxes(checkboxes) {
+  var classes = [];
+
+  if (checkboxes && checkboxes.length > 0) {
+    for (var i = 0; i < checkboxes.length; i++) {
+      var cb = checkboxes[i];
+
+      if (cb.checked) {
+        classes.push(cb.getAttribute("rel"));
+      }
+    }
+  }
+
+  return classes;
+}
+
+function filterResults(filters) {
+  var rElems = document.querySelectorAll(".tagged-card");
+  var hiddenElems = [];
+
+  if (!rElems || rElems.length <= 0) {
+    return;
+  }
+
+  for (var i = 0; i < rElems.length; i++) {
+    var el = rElems[i];
+
+    if (filters.affiliation.length > 0) {
+      var isHidden = true;
+
+      for (var j = 0; j < filters.affiliation.length; j++) {
+        var filter = filters.affiliation[j];
+
+        if (el.classList.contains(filter)) {
+          isHidden = false;
+          break;
+        }
+      }
+
+      if (isHidden) {
+        hiddenElems.push(el);
+      }
+    }
+
+    if (filters.domains.length > 0) {
+      var isHidden = true;
+
+      for (var j = 0; j < filters.domains.length; j++) {
+        var filter = filters.domains[j];
+
+        if (el.classList.contains(filter)) {
+          isHidden = false;
+          break;
+        }
+      }
+
+      if (isHidden) {
+        hiddenElems.push(el);
+      }
+    }
+
+    if (filters.formats.length > 0) {
+      var isHidden = true;
+
+      for (var j = 0; j < filters.formats.length; j++) {
+        var filter = filters.formats[j];
+
+        if (el.classList.contains(filter)) {
+          isHidden = false;
+          break;
+        }
+      }
+
+      if (isHidden) {
+        hiddenElems.push(el);
+      }
+    }
+
+    if (filters.packages.length > 0) {
+      var isHidden = true;
+
+      for (var j = 0; j < filters.packages.length; j++) {
+        var filter = filters.packages[j];
+
+        if (el.classList.contains(filter)) {
+          isHidden = false;
+          break;
+        }
+      }
+
+      if (isHidden) {
+        hiddenElems.push(el);
+      }
+    }
+  }
+
+  for (var i = 0; i < rElems.length; i++) {
+    rElems[i].classList.replace("d-none", "d-flex");
+  }
+
+  if (hiddenElems.length <= 0) {
+    return;
+  }
+
+  for (var i = 0; i < hiddenElems.length; i++) {
+    hiddenElems[i].classList.replace("d-flex", "d-none");
+  }
+}
+
+
+function clearCbs() {
+  var affiliationCbs = document.querySelectorAll(".affiliation input[type='checkbox']");
+  var domainsCbs = document.querySelectorAll(".domains input[type='checkbox']");
+  var formatsCbs = document.querySelectorAll(".formats input[type='checkbox']");
+  var packagesCbs = document.querySelectorAll(".packages input[type='checkbox']");
+
+  for (var i = 0; i < affiliationCbs.length; i++) {
+    affiliationCbs[i].checked=false;
+  }
+
+  for (var i = 0; i < domainsCbs.length; i++) {
+    domainsCbs[i].checked=false;
+  }
+
+  for (var i = 0; i < formatsCbs.length; i++) {
+    formatsCbs[i].checked=false;
+  }
+
+  for (var i = 0; i < packagesCbs.length; i++) {
+    packagesCbs[i].checked=false;
+  }
+
+  change();
+}