From 75f86b2a728a1af53b08e4b5f0013b7d87b4c670 Mon Sep 17 00:00:00 2001 From: Christoph Lehmann Date: Sun, 16 Oct 2022 01:31:47 +0200 Subject: [PATCH] Add filter input in wizard * A click on a wizard item adds the filter to the input field. There it could be extended. * Double click on a wizard item applies the filter immediately Relates: #12 --- .../Hooks/PageRendererRenderPreProcess.php | 2 ++ Resources/Private/Language/de.locallang.xlf | 12 +++---- Resources/Private/Language/locallang.xlf | 6 ++++ .../Public/Css/Backend/pagetreefilter.css | 8 +++++ Resources/Public/JavaScript/PageTreeFilter.js | 34 +++++++++++++++---- 5 files changed, 50 insertions(+), 12 deletions(-) diff --git a/Classes/Hooks/PageRendererRenderPreProcess.php b/Classes/Hooks/PageRendererRenderPreProcess.php index 9352c67..bcc9b23 100644 --- a/Classes/Hooks/PageRendererRenderPreProcess.php +++ b/Classes/Hooks/PageRendererRenderPreProcess.php @@ -24,6 +24,8 @@ public function addRequireJsModule(array $params, PageRenderer $pageRenderer): v $pageRenderer->addInlineLanguageLabelArray([ 'pagetreefilter_wizard_title' => $this->getLanguageService()->sL($labelPrefix . 'wizard_title'), 'pagetreefilter_button_title' => $this->getLanguageService()->sL($labelPrefix . 'filter_button_title'), + 'pagetreefilter_wizard_submit_button' => $this->getLanguageService()->sL($labelPrefix . 'wizard_submit_button'), + 'pagetreefilter_wizard_input_placeholder' => $this->getLanguageService()->sL($labelPrefix . 'wizard_input_placeholder'), ]); } } diff --git a/Resources/Private/Language/de.locallang.xlf b/Resources/Private/Language/de.locallang.xlf index b5edbff..0483feb 100644 --- a/Resources/Private/Language/de.locallang.xlf +++ b/Resources/Private/Language/de.locallang.xlf @@ -4,27 +4,27 @@
- Pagetree Filter Seitenbaum-Filter - Hide unused elements Unbenutzte Elemente ausblenden - Records Datensätze - Nothing found. Probably the page id was configured incorrectly. Nichts gefunden. Wahrscheinlich ist die Seiten-Id falsch konfiguriert. + + Anwenden + + + Filter eingeben + - Filter erroneous Filter fehlerhaft - Filter tree for content elements and records Baum nach Inhaltselementen und Datensätzen filtern diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf index 07385a0..fd3a21f 100644 --- a/Resources/Private/Language/locallang.xlf +++ b/Resources/Private/Language/locallang.xlf @@ -15,6 +15,12 @@ Nothing found. Probably the page id was configured incorrectly. + + Apply + + + Enter filter + Filter erroneous diff --git a/Resources/Public/Css/Backend/pagetreefilter.css b/Resources/Public/Css/Backend/pagetreefilter.css index 0138425..069cc19 100644 --- a/Resources/Public/Css/Backend/pagetreefilter.css +++ b/Resources/Public/Css/Backend/pagetreefilter.css @@ -13,4 +13,12 @@ .pagetreefilter-wizard .modal-body { background-color: #fafafa; padding: 0; +} + +.pagetreefilter-wizard .modal-footer { + display: inline-block; +} + +.pagetreefilter-wizard .modal-footer button { + width: 100%; } \ No newline at end of file diff --git a/Resources/Public/JavaScript/PageTreeFilter.js b/Resources/Public/JavaScript/PageTreeFilter.js index d7770ef..e550b8b 100644 --- a/Resources/Public/JavaScript/PageTreeFilter.js +++ b/Resources/Public/JavaScript/PageTreeFilter.js @@ -31,14 +31,32 @@ require([], function () { let links = document.querySelectorAll('a.pagetreefilter'); links.forEach((button) => { button.addEventListener('click', () => { - applyFilter(button.getAttribute('data-pagetreefilter')); - TYPO3.Modal.dismiss() + let filterInput = document.querySelector('.pagetreefilter-wizard #pagetreefilter-filter'); + let newFilter = button.getAttribute('data-pagetreefilter'); + if (filterInput.value === newFilter) { + applyFilter(); + } + filterInput.value = newFilter; + filterInput.focus(); }); }); toggleHideUnusedElements(); - document.querySelector('#pagetreefilterhideunused').addEventListener('click', (event) => { + document.querySelector('#pagetreefilterhideunused').addEventListener('click', () => { toggleHideUnusedElements() }); + + let footer = ` +
+
+
+
+
+
+
+
+ ` + document.querySelector('.pagetreefilter-wizard .modal-content').insertAdjacentHTML('beforeend', footer); + document.querySelector('#pagetreefilter-form').addEventListener('submit', applyFilter); }, content: TYPO3.settings.ajaxUrls.pagetreefilter_fetch_filter, additionalCssClasses: ['pagetreefilter-wizard'] @@ -79,10 +97,14 @@ require([], function () { } } - function applyFilter(filter) - { + function applyFilter(event) { + if (event) { + event.preventDefault(); + } + let filter = document.querySelector('#pagetreefilter-filter').value; document.querySelector('#typo3-pagetree .search-input').value = filter; - document.querySelector('#typo3-pagetree-tree').filter(filter) + document.querySelector('#typo3-pagetree-tree').filter(filter); + TYPO3.Modal.dismiss(); } initializeFilter();