dropdown filter

layouts/shortcodes/dropdown_filter.html

@@ -0,0 +1,27 @@
+{{ $id := .Get "id" }}
+{{ $default_selection := .Get "default_selection" }}
+{{ $options := .Get "options" }}
+
+{{ $options_split := split $options "," }}
+
+<div class="dropdown-filter-container">
+<select class="filter dropdown-filter" id="{{ $id }}" onchange="dispatchDropdownEvent(this)">
+  {{ range $options_split }}
+    {{ $parts := split . ":" }}
+    {{ $key := index $parts 0 }}
+    {{ $value := index $parts 1 }}
+    <option value="{{ $value }}" {{ if eq $key $default_selection }}selected{{ end }}>{{ $key }}</option>
+  {{ end }}
+</select>
+<script>
+  function dispatchDropdownEvent(selectElement) {
+    const event = new CustomEvent('filterChange', {
+      detail: {
+        filterId: selectElement.id,
+        filterValue: selectElement.value,
+      }
+    });
+    document.dispatchEvent(event);
+  }
+</script>
+</div>