[FEATURE] Add option to hide unused elements

christophlehmann · May 6, 2022 · 66a1247 · 66a1247
1 parent 78eb348
commit 66a1247
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 8 deletions.
diff --git a/Resources/Private/Language/de.locallang.xlf b/Resources/Private/Language/de.locallang.xlf
@@ -7,9 +7,9 @@
 				<source>Pagetree Filter</source>
 				<target>Seitenbaum-Filter</target>
 			</trans-unit>
-			<trans-unit id="wizard_description" resname="wizard_description">
-				<source>What are you looking for?</source>
-				<target>Was suchst du?</target>
+			<trans-unit id="wizard_hide_unused_elements" resname="wizard_hide_unused_elements">
+				<source>Hide unused elements</source>
+				<target>Unbenutzte Elemente ausblenden</target>
 			</trans-unit>
 			<trans-unit id="wizard_tab_records" resname="wizard_tab_records">
 				<source>Records</source>

diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
@@ -6,8 +6,8 @@
 			<trans-unit id="wizard_title" resname="wizard_title">
 				<source>Pagetree Filter</source>
 			</trans-unit>
-			<trans-unit id="wizard_description" resname="wizard_description">
-				<source>What are you looking for?</source>
+			<trans-unit id="wizard_hide_unused_elements" resname="wizard_hide_unused_elements">
+				<source>Hide unused elements</source>
 			</trans-unit>
 			<trans-unit id="wizard_tab_records" resname="wizard_tab_records">
 				<source>Records</source>

diff --git a/Resources/Private/Templates/Filter/Wizard.html b/Resources/Private/Templates/Filter/Wizard.html
@@ -1,10 +1,31 @@
-<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<html
+    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+    xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
+    data-namespace-typo3-fluid="true">
 
 <f:if condition="{hasAccess}">
     <f:then>
         <div class="t3-new-content-element-wizard-window">
-            <div class="container mt-2">
-                <f:translate key="wizard_description"/>
+            <div class="container mt-3">
+                <div class="form-wizards-element">
+                    <div class="form-check form-check-type-icon-toggle">
+                        <input type="checkbox" class="form-check-input"
+                               id="pagetreefilterhideunused" checked="checked">
+                        <label class="form-check-label" for="pagetreefilterhideunused">
+                            <span class="form-check-label-icon">
+                                <span class="form-check-label-icon-checked">
+                                    <core:icon identifier="actions-check" alternativeMarkupIdentifier="inline" />
+                                </span>
+                                <span class="form-check-label-icon-unchecked">
+                                    <core:icon identifier="empty-empty" alternativeMarkupIdentifier="inline" />
+                                </span>
+                            </span>
+                            <span class="form-check-label-text">
+                                <f:translate key="wizard_hide_unused_elements"/>
+                            </span>
+                        </label>
+                    </div>
+                </div>
             </div>
             <div class="t3-new-content-element-wizard-inner">
                 {renderedTabs -> f:format.raw()}

diff --git a/Resources/Public/JavaScript/PageTreeFilter.js b/Resources/Public/JavaScript/PageTreeFilter.js
@@ -35,12 +35,50 @@ require([], function () {
                         TYPO3.Modal.dismiss()
                     });
                 });
+                toggleHideUnusedElements();
+                document.querySelector('#pagetreefilterhideunused').addEventListener('click', (event) => {
+                    toggleHideUnusedElements()
+                });
             },
             content: TYPO3.settings.ajaxUrls.pagetreefilter_fetch_filter,
             additionalCssClasses: ['pagetreefilter-wizard']
         });
     }
 
+    function toggleHideUnusedElements()
+    {
+        const wizard = document.querySelector('.pagetreefilter-wizard');
+        const isHidden = wizard.querySelector('.hide');
+        if (!isHidden) {
+            wizard.querySelectorAll('a.nav-link').forEach(function (tab) {
+                const tabContentIdentifier = tab.getAttribute('aria-controls');
+
+                wizard.querySelectorAll('a.pagetreefilter.disabled').forEach(function(item) {
+                    item.parentNode.classList.add('hide');
+                })
+
+                const hasVisibleItems = wizard.querySelector('#' + tabContentIdentifier + ' a.pagetreefilter:not(.disabled)');
+                if (!hasVisibleItems) {
+                    tab.classList.add('hide');
+                }
+            });
+
+            const activeTabIsHidden = wizard.querySelector('a.nav-link.active.hide');
+            if (activeTabIsHidden) {
+               wizard.querySelectorAll('.active').forEach(function (activeItem) {
+                   activeItem.classList.remove('active');
+               });
+               const firstNonHiddenTab = wizard.querySelector('a.nav-link:not(.hide)');
+               firstNonHiddenTab.classList.add('active');
+               wizard.querySelector('#' + firstNonHiddenTab.getAttribute('aria-controls')).classList.add('active');
+            }
+        } else {
+            wizard.querySelectorAll('.hide').forEach(function (hiddenItem) {
+                hiddenItem.classList.remove('hide');
+            });
+        }
+    }
+
     function applyFilter(filter)
     {
         document.querySelector('#typo3-pagetree .search-input').value = filter;