Feature: Share URL with filter

Resolves: #17
christophlehmann · Mar 17, 2024 · 6bd6d0c · 6bd6d0c
1 parent 4ab0836
commit 6bd6d0c
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 8 deletions.
diff --git a/Classes/Hooks/PageRendererRenderPreProcess.php b/Classes/Hooks/PageRendererRenderPreProcess.php
@@ -25,6 +25,8 @@ public function addRequireJsModule(array $params, PageRenderer $pageRenderer): v
                 'pagetreefilter_wizard_title' => $this->getLanguageService()->sL($labelPrefix . 'wizard_title'),
                 'pagetreefilter_button_title' => $this->getLanguageService()->sL($labelPrefix . 'filter_button_title'),
                 'pagetreefilter_button_text_show_unused' => $this->getLanguageService()->sL($labelPrefix . 'wizard_show_unused_elements'),
+                'pagetreefilter_share' => $this->getLanguageService()->sL($labelPrefix . 'share'),
+                'pagetreefilter_copy_to_clipboard' => $this->getLanguageService()->sL($labelPrefix . 'copy_to_clipboard'),
             ]);
         }
     }

diff --git a/Resources/Private/Language/de.locallang.xlf b/Resources/Private/Language/de.locallang.xlf
@@ -35,6 +35,14 @@
 				<source>Filter tree for content elements and records</source>
 				<target>Baum nach Inhaltselementen und Datensätzen filtern</target>
 			</trans-unit>
+			<trans-unit id="share" resname="share">
+				<source>Share active filter</source>
+				<target>Aktiven Filter teilen</target>
+			</trans-unit>
+			<trans-unit id="copy_to_clipboard" resname="copy_to_clipboard">
+				<source>Copy URL to Clipboard</source>
+				<target>URL in Zwischenablage kopieren</target>
+			</trans-unit>
 		</body>
 	</file>
 </xliff>
diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
@@ -27,6 +27,12 @@
 			<trans-unit id="filter_button_title" resname="filter_button_title">
 				<source>Filter tree for content elements and records</source>
 			</trans-unit>
+			<trans-unit id="share" resname="share">
+				<source>Share active filter</source>
+			</trans-unit>
+			<trans-unit id="copy_to_clipboard" resname="copy_to_clipboard">
+				<source>Copy URL to Clipboard</source>
+			</trans-unit>
 		</body>
 	</file>
 </xliff>
diff --git a/Resources/Public/Css/Backend/pagetreefilter.css b/Resources/Public/Css/Backend/pagetreefilter.css
@@ -15,10 +15,6 @@
     padding: 0;
 }
 
-.pagetreefilter-wizard .modal-title {
-    color: #ffffff;
-}
-
 .pagetreefilter-wizard .nav-tabs {
     padding: 0.75rem 0.75rem 0;
     background: 0 0;

diff --git a/Resources/Public/JavaScript/PageTreeFilter.js b/Resources/Public/JavaScript/PageTreeFilter.js
@@ -1,8 +1,14 @@
 class PageTreeFilter
 {
+    selectorSearchInput = '#typo3-pagetree .search-input';
+    selectorPagetreeComponent = '#typo3-pagetree-tree';
+    selectorPagetreeReady = '#typo3-pagetree-tree .node';
+    selectorToolbarReady = '#typo3-pagetree .svg-toolbar__menu';
+    urlParameter = 'tx_pagetreefilter[filter]';
+
     constructor()
     {
-        this.waitForElement('#typo3-pagetree .svg-toolbar__menu').then((element) => {
+        this.waitForElement(this.selectorToolbarReady).then((element) => {
             if (!element.dataset.pageTreeFilterLoaded) {
                 element.dataset.pageTreeFilterLoaded = true;
                 TYPO3.Icons.getIcon('actions-rocket', 'small').then((icon) => {
@@ -17,6 +23,13 @@ class PageTreeFilter
                         this.openWizard();
                     }
                 });
+
+                const urlParams = new URLSearchParams(window.location.search)
+                if (urlParams.has(this.urlParameter)) {
+                    this.waitForElement(this.selectorPagetreeReady).then(() => {
+                        this.applyFilter(urlParams.get(this.urlParameter));
+                    });
+                }
             }
         })
     }
@@ -43,7 +56,8 @@ class PageTreeFilter
     }
 
     openWizard = () => {
-        TYPO3.Modal.advanced({
+        const currentFilter = document.querySelector(this.selectorSearchInput).value;
+        const wizard = TYPO3.Modal.advanced({
             size: 'medium',
             type: 'ajax',
             title: TYPO3.lang.pagetreefilter_wizard_title,
@@ -61,6 +75,18 @@ class PageTreeFilter
             content: TYPO3.settings.ajaxUrls.pagetreefilter_fetch_filter,
             additionalCssClasses: ['pagetreefilter-wizard'],
             buttons: [
+                {
+                    text: TYPO3.lang.pagetreefilter_share,
+                    name: 'pagetreefilter-wizard-share',
+                    icon: 'actions-share-alt',
+                    active: false,
+                    btnClass: 'btn-default' + (currentFilter ? '' : ' disabled'),
+                    trigger: (event, modal) => {
+                        const shareUrl = this.prepareShareUrl();
+                        TYPO3.Modal.dismiss();
+                        this.openShareModal();
+                    }
+                },
                 {
                     text: TYPO3.lang.pagetreefilter_button_text_show_unused,
                     name: 'pagetreefilter-wizard-show-unused',
@@ -75,6 +101,33 @@ class PageTreeFilter
         });
     }
 
+    openShareModal = () => {
+        TYPO3.Modal.confirm(
+            TYPO3.lang.pagetreefilter_share,
+            this.prepareShareUrl(),
+            'info',
+            [
+                {
+                    text: TYPO3.lang.pagetreefilter_copy_to_clipboard,
+                    name: 'pagetreefilter-ok',
+                    icon: 'actions-link',
+                    active: true,
+                    btnClass: 'btn-primary' + (navigator.clipboard ? '' : ' disabled'),
+                    trigger: (event, modal) => {
+                        navigator.clipboard.writeText(this.prepareShareUrl());
+                        TYPO3.Modal.dismiss();
+                    }
+                }
+            ]
+        );
+    }
+
+    prepareShareUrl = () => {
+        const url = new URL(window.location.origin + "/typo3/module/web/layout");
+        url.searchParams.set(this.urlParameter, document.querySelector(this.selectorSearchInput).value);
+        return url.toString();
+    }
+
     toggleHideUnusedElements = (modal) => {
         const items = modal.querySelectorAll('.pagetreefilter-wizard-item');
         const buttonIcon = modal.querySelector('button[name="pagetreefilter-wizard-show-unused"] typo3-backend-icon');
@@ -130,8 +183,8 @@ class PageTreeFilter
     }
 
     applyFilter = (filter) => {
-        document.querySelector('#typo3-pagetree .search-input').value = filter;
-        document.querySelector('#typo3-pagetree-tree').filter(filter)
+        document.querySelector(this.selectorSearchInput).value = filter;
+        document.querySelector(this.selectorPagetreeComponent).filter(filter)
     }
 }