[FEATURE] Add version filter

Author: thomasrawiel

assets/js/main.js

@@ -37,6 +37,30 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 
+    document.querySelectorAll('.btn-check[data-version]').forEach(el => {
+        el.addEventListener('change', () => {
+            const activeVersions = Array.from(
+                document.querySelectorAll('.btn-check[data-version]:checked')
+            ).map(e => e.dataset.version);
+
+            const items = document.querySelectorAll('[data-versions]');
+
+            items.forEach((item) => {
+                const versions = item.dataset.versions
+                    .trim()
+                    .split(/\s+/);
+
+                const match =
+                    activeVersions.length === 0
+                        ? true
+                        : activeVersions.some(v => versions.includes(v));
+
+                item.classList.toggle('d-none', !match);
+            });
+
+        });
+    });
+
     document.querySelectorAll('.code-copy-btn').forEach((button) => {
         button.addEventListener('click', () => {
             const codeBlock = button.nextElementSibling?.querySelector('code');

assets/scss/docs.scss

@@ -5,3 +5,4 @@
 @import 'docs/iconstage';
 @import 'docs/preview';
 @import 'docs/misc';
+@import "docs/version-filter";

assets/scss/docs/_version-filter.scss

@@ -0,0 +1,16 @@
+.version-badge {
+    cursor: pointer;
+    user-select: none;
+    transition: all .2s ease;
+    opacity: .6;
+}
+
+/* checked state */
+.btn-check:checked + .version-badge {
+    opacity: 1;
+}
+
+/* hover */
+.version-badge:hover {
+    opacity: .85;
+}

tmpl/html/docs/_filters.html.twig

@@ -7,5 +7,26 @@
         </label>
     </div>
     {%- endif -%}
-    <input class="form-control search mb-0" id="search" placeholder="Start typing to filter..." autocomplete="off">
+    {%- if showVersionFilter is not defined or showVersionFilter -%}
+        <div class="d-flex flex-wrap gap-2">
+            <span class="me-2">Available in TYPO3</span>
+            {%- for typo3version, version in typo3.versions -%}
+                <input
+                    type="checkbox"
+                    class="btn-check"
+                    id="version-{{ typo3version }}"
+                    autocomplete="off"
+                    data-version="{{ typo3version }}"
+                >
+
+                <label
+                    class="badge bg-primary version-badge"
+                    for="version-{{ typo3version }}"
+                >
+                    {{ typo3version }}
+                </label>
+            {%- endfor -%}
+        </div>
+    {%- endif -%}
+    <input class="form-control search mb-0 flex-shrink-0 w-auto" style="min-width: 220px;" id="search" placeholder="Start typing to filter..." autocomplete="off">
 </div>

tmpl/html/docs/index.html.twig

@@ -12,7 +12,7 @@
         <h2 class="mb-0">Icons</h2>
         {%- include '_filters.html.twig' -%}
     </div>
-
+    
     <div class="icongrid" id="iconlist">
         {%- for category in categories -%}
             {%- for iconIdentifier in category.icons -%}
@@ -22,6 +22,7 @@
                         data-type="icon"
                         data-identifier="{{ icon.identifier }}"
                         data-search="{{ icon.identifier }} {{ icon._meta.tags|join(' ') }}"
+                        data-versions="{%- for typo3version, version in typo3.versions -%}{%- if version in icon._meta.changes %}{{ typo3version }} {% endif -%}{%- endfor -%}"
                         {% if icon._meta.bidi %}data-bidi="true"{% endif %}
                         href="{{ pathPrefix }}icons/{{ category.identifier }}/{{ icon.identifier }}.html"
                         title="{{ icon.identifier }}"

tmpl/html/docs/section.html.twig

@@ -11,7 +11,7 @@
 
     <div class="d-flex mb-4 align-items-center">
         <h2 class="mb-0">{{ category.title }}</h2>
-        {%- include '_filters.html.twig' with { showBidiFilter: not category.rendering.menuview } -%}
+        {%- include '_filters.html.twig' with { showBidiFilter: not category.rendering.menuview, showVersionFilter: not category.rendering.menuview } -%}
     </div>
 
     {%- if category.rendering.menuview -%}