List View

feat: replace wordcloud with listview

_includes/js/list-js.html

@@ -0,0 +1,87 @@
+{%- comment -%}
+
+    Generates a list-group using js to process the terms for display on "list" layout.
+    Requires CB's array_count_uniq.rb plugin!
+
+{%- endcomment -%}
+{% if site.data.theme.browse-child-objects == true %}
+{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid' -%}
+{% else %}
+{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' -%}
+{% endif %}
+{%- assign termsMin = include.min | plus: 0 | default: 1 -%}
+{%- assign list_id = include.id | default: "list-group" -%}
+{%- assign list-fields = include.fields | split: ";" -%}
+
+{%- comment -%} capture terms from all list fields {%- endcomment -%}
+{%- assign terms = "" -%}
+{%- for c in list-fields -%}
+{% assign new = items | map: c | join: ";" %}
+{% assign terms = terms | append: ";" | append: new %}
+{%- endfor -%}
+{%- comment -%} find unique terms and counts {%- endcomment -%}
+{%- assign uniqTerms = terms | split: ";" | array_count_uniq | sort | where_exp: 't','t[1] >= termsMin' -%}
+
+<script>  
+    var currentSortMethod = 'count';
+
+    /* subject terms + count */
+    var terms = [
+        {% for t in uniqTerms %}[{{ t[0] | jsonify }}, {{ t[1] | jsonify }}]{% unless forloop.last %}, {% endunless %}{% endfor %}
+    ];
+
+    {% if include.stopwords %}/* apply stopwords */
+    var stopWords = {{ include.stopwords | split: ';' | jsonify }};
+    terms = terms.filter(function(a) { return stopWords.indexOf(a[0]) < 0;});{% endif %}
+
+    /* sort terms */
+    function sortTerms(sortMethod) {
+        if (sortMethod === 'count') {
+            terms.sort(function(a, b) {
+                return b[1] - a[1];
+            });
+        } else if (sortMethod === 'term') {
+            terms.sort(function(a, b) {
+                return a[0].localeCompare(b[0]);
+            });
+        }
+    }
+
+    /* create list-group */
+    function makeList(array) {
+        var items = "";
+        for (var i = 0; i < array.length; i++) {
+            items += '<a href="{{ "/browse.html" | relative_url }}#' + encodeURIComponent(array[i][0]) + '" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center text-primary">' + array[i][0] + ' <span class="badge bg-primary rounded-pill">' + array[i][1] + '</span></li>';
+        }
+        var listGroup = document.getElementById("{{ list_id }}");
+        listGroup.innerHTML = items;
+    }
+
+    /* toggle sorting method */
+    function changeSortMethod(sortMethod) {
+        currentSortMethod = sortMethod;
+        sortTerms(currentSortMethod);
+        makeList(terms);
+        document.getElementById('sortFilter').innerText = capitalizeFirstLetter(sortMethod);
+
+        // Remove 'active' class from all items
+        var items = document.querySelectorAll('.list-sort-item');
+        items.forEach(function(item) {
+            item.classList.remove('active');
+        });
+
+        // Add 'active' class to the selected item
+        var selected = document.querySelector('.list-sort-item[onclick="changeSortMethod(\'' + sortMethod + '\')"]');
+        if (selected) {
+            selected.classList.add('active');
+        }
+    }
+
+    function capitalizeFirstLetter(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+
+    /* initial sorting */
+    sortTerms(currentSortMethod);
+    makeList(terms);
+</script>

_layouts/list.html

@@ -0,0 +1,33 @@
+---
+layout: page
+---
+
+{{ content }}
+
+
+{%- if page.cloud-fields == "site.data.theme.subjects-fields" -%}
+  {% assign fields = site.data.theme.subjects-fields %}
+  {% assign min = site.data.theme.subjects-min | default: 1 %}
+  {% assign stopwords = site.data.theme.subjects-stopwords %}
+{%- elsif page.cloud-fields == "site.data.theme.locations-fields" -%}
+  {% assign fields = site.data.theme.locations-fields %}
+  {% assign min = site.data.theme.locations-min | default: 1 %}
+  {% assign stopwords = site.data.theme.locations-stopwords %}
+{%- else -%}
+  {% assign fields = page.cloud-fields | default: "subjects" %}
+  {% assign min = page.cloud-min | default: 1 %}
+  {% assign stopwords = page.cloud-stopwords %}
+{%- endif -%}
+
+{% assign list_id = "list-div-" | append: fields | slugify %}
+<div class="dropdown">
+  <button class="btn btn-secondary mt-1 dropdown-toggle" type="button" id="browseSortButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Sort by <span id="sortFilter">Count</span>
+  </button>
+  <div class="dropdown-menu browse-sort-menu" aria-labelledby="browseSortButton">
+      <button class="dropdown-item list-sort-item active" onclick="changeSortMethod('count')">Count</button>
+      <button class="dropdown-item list-sort-item" onclick="changeSortMethod('term')">Term</button>
+  </div>
+</div>
+<div id="{{ list_id }}" class="text-center my-4 bg-{{ page.background | default: 'light' }} border rounded p-2"></div>
+{% include js/list-js.html id=list_id fields=fields min=min stopwords=stopwords %}

pages/locations.md

@@ -1,13 +1,10 @@
 ---
 title: Locations
-layout: cloud
+layout: list
 permalink: /locations.html
 # Default locations page is configured in "_data/theme.yml"
 # leave cloud-fields as "site.data.theme.locations-fields"
 cloud-fields: site.data.theme.locations-fields
 ---
 
-## Browse Locations
-
-Use this word cloud visualization to browse locations.
-Word size is determined by frequency and all words link to a corresponding collection search.
+## Browse Locations

pages/subjects.md

@@ -1,13 +1,10 @@
 ---
 title: Subjects
-layout: cloud
+layout: list
 permalink: /subjects.html
 # Default subject page is configured in "_data/theme.yml"
 # leave cloud-fields as "site.data.theme.subjects-fields"
 cloud-fields: site.data.theme.subjects-fields
 ---
 
-## Browse Subjects
-
-Use this word cloud visualization to browse terms and subjects.
-Word size is determined by frequency and all words link to a corresponding collection search.
+## Browse Tags