[FEATURE] Add fast menu svg-file support

buepro · Jan 18, 2024 · baf17f7 · baf17f7
1 parent ccce570
commit baf17f7
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 15 deletions.
diff --git a/Configuration/TypoScript/Main/Constants/Subcategory/Menu.typoscript b/Configuration/TypoScript/Main/Constants/Subcategory/Menu.typoscript
@@ -108,7 +108,7 @@ pizpalue.menu {
     fast {
         items {
             first {
-                # cat=6060/1060/0510; type=string; label=Fastmenu first item icon class
+                # cat=6060/1060/0510; type=string; label=Fastmenu first item icon:Icon font class or svg-file path
                 iconClass = ppicon ppicon-log-in
                 # cat=6060/1060/0512; type=string; label=Fastmenu first item content uid:Uid from content element being rendered. Leave empty if not used.
                 contentUid =
@@ -117,7 +117,7 @@ pizpalue.menu {
             }
 
             second {
-                # cat=6060/1060/0520; type=string; label=Fastmenu second item icon class
+                # cat=6060/1060/0520; type=string; label=Fastmenu second item icon:Icon font class or svg-file path
                 iconClass = ppicon ppicon-call
                 # cat=6060/1060/0522; type=string; label=Fastmenu second item content uid:Uid from content element being rendered. Leave empty if not used.
                 contentUid =
@@ -126,7 +126,7 @@ pizpalue.menu {
             }
 
             third {
-                # cat=6060/1060/0530; type=string; label=Fastmenu third item icon class
+                # cat=6060/1060/0530; type=string; label=Fastmenu third item icon:Icon font class or svg-file path
                 iconClass = ppicon ppicon-location
                 # cat=6060/1060/0532; type=string; label=Fastmenu third item content uid:Uid from content element being rendered. Leave empty if not used.
                 contentUid =

diff --git a/Extensions/easyconf/Configuration/TCA/Overrides/20_tx_easyconf_configuration_menu.php b/Extensions/easyconf/Configuration/TCA/Overrides/20_tx_easyconf_configuration_menu.php
@@ -117,6 +117,9 @@
     $tca['columns']['menu_scroll_data_key']['description'] = $l10nFile . ':menu_scroll_data_key.description';
     $tca['columns']['menu_scroll_menu_id']['description'] = $l10nFile . ':menu_scroll_menu_id.description';
     $tca['columns']['menu_scroll_offset']['description'] = $l10nFile . ':menu_scroll_offset.description';
+    $tca['columns']['menu_fast_items_first_icon_class']['description'] = $l10nFile . ':menu_fast_items_icon_class.description';
+    $tca['columns']['menu_fast_items_second_icon_class']['description'] = $l10nFile . ':menu_fast_items_icon_class.description';
+    $tca['columns']['menu_fast_items_third_icon_class']['description'] = $l10nFile . ':menu_fast_items_icon_class.description';
 
     /**
      * Define palettes

diff --git a/Extensions/easyconf/Resources/Private/Language/locallang_db_menu.xlf b/Extensions/easyconf/Resources/Private/Language/locallang_db_menu.xlf
@@ -90,8 +90,11 @@
 					is opened. Just define one action by setting either a content or a link.
 				</source>
 			</trans-unit>
+			<trans-unit id="menu_fast_items_icon_class.description" resname="menu_fast_items_icon_class.description">
+				<source>Icon font class or svg-file path (e.g. EXT:your_extension/...)</source>
+			</trans-unit>
 			<trans-unit id="menu_fast_items_first_icon_class" resname="menu_fast_items_first_icon_class">
-				<source>First item icon class</source>
+				<source>First item icon</source>
 			</trans-unit>
 			<trans-unit id="menu_fast_items_first_content_uid" resname="menu_fast_items_first_content_uid">
 				<source>First item content</source>
@@ -100,7 +103,7 @@
 				<source>First item link</source>
 			</trans-unit>
 			<trans-unit id="menu_fast_items_second_icon_class" resname="menu_fast_items_second_icon_class">
-				<source>Second item icon class</source>
+				<source>Second item icon</source>
 			</trans-unit>
 			<trans-unit id="menu_fast_items_second_content_uid" resname="menu_fast_items_second_content_uid">
 				<source>Second item content</source>
@@ -109,7 +112,7 @@
 				<source>Second item link</source>
 			</trans-unit>
 			<trans-unit id="menu_fast_items_third_icon_class" resname="menu_fast_items_third_icon_class">
-				<source>Third item icon class</source>
+				<source>Third item icon</source>
 			</trans-unit>
 			<trans-unit id="menu_fast_items_third_content_uid" resname="menu_fast_items_third_content_uid">
 				<source>Third item content</source>

diff --git a/Resources/Private/Partials/Page/Navigation/Fast.html b/Resources/Private/Partials/Page/Navigation/Fast.html
@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"
       xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      xmlns:pvh="http://typo3.org/ns/Buepro/Pvh/ViewHelpers"
+      xmlns:bp="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers"
       data-namespace-typo3-fluid="true">
 
 <div class="pp-fastmenu">
@@ -22,23 +24,36 @@
                 {f:variable(name:'justShowIcon', value:1)}
                 <f:if condition="{item.pageUid}">
                     {f:variable(name:'justShowIcon', value:0)}
-                    <f:link.typolink parameter="{item.pageUid}">
-                        <span class="{item.iconClass} pp-fm-linkicon"></span>
+                    <f:link.typolink parameter="{item.pageUid}" class="pp-fm-linkicon">
+                        <f:render section="FastMenuIcon" arguments="{item: item}" />
                     </f:link.typolink>
                 </f:if>
                 <f:if condition="{item.contentUid}">
                     {f:variable(name:'justShowIcon', value:0)}
-                    <button class="btn btn-link border border-0 p-0">
-                        <span id="pp-fm-contenticon-{item.contentUid}" class="{item.iconClass} pp-fm-contenticon"
-                              data-pp-fm-content="pp-fm-content-{item.contentUid}"
-                              title="{f:cObject(typoscriptObjectPath: 'lib.pizpalue.renderContentTitle', data: '{uid:item.contentUid}')}"></span>
+                    <button class="btn btn-link border border-0 p-0 pp-fm-contenticon"
+                            data-pp-fm-content="pp-fm-content-{item.contentUid}"
+                            id="pp-fm-contenticon-{item.contentUid}"
+                            title="{f:cObject(typoscriptObjectPath: 'lib.pizpalue.renderContentTitle', data: '{uid:item.contentUid}')}">
+                        <f:render section="FastMenuIcon" arguments="{item: item}" />
                     </button>
                 </f:if>
                 <f:if condition="{justShowIcon}">
-                    <span class="{item.iconClass}"></span>
+                    <f:render section="FastMenuIcon" arguments="{item: item}" />
                 </f:if>
             </div>
         </f:for>
     </div>
 </div>
+
+<f:section name="FastMenuIcon">
+    {f:variable(name: '_iconFile', value: item.iconClass) -> pvh:condition.string.contains(haystack: item.iconClass, needle: '.svg')}
+    <f:if condition="{_iconFile}">
+        <f:then>
+            <span class="ppicon ppc-inline">{bp:inlineSvg(src: _iconFile)}</span>
+        </f:then>
+        <f:else>
+            <span class="{item.iconClass} ppc-iconfont"></span>
+        </f:else>
+    </f:if>
+</f:section>
 </html>
diff --git a/Resources/Public/JavaScript/Dist/pizpalue.fastmenu.min.js b/Resources/Public/JavaScript/Dist/pizpalue.fastmenu.min.js
diff --git a/Resources/Public/JavaScript/Src/pizpalue.fastmenu.js b/Resources/Public/JavaScript/Src/pizpalue.fastmenu.js
@@ -29,7 +29,7 @@
 
     Plugin.prototype._contentIconClickHandler = function (event) {
         const
-            contentIcon = event.target,
+            contentIcon = event.target.closest('.pp-fm-contenticon'),
             content = document.getElementById(contentIcon.dataset.ppFmContent);
         if ( content.classList.contains('pp-show') ) {
             // Hides selected content

diff --git a/Resources/Public/Scss/Theme/Feature/fastmenu.scss b/Resources/Public/Scss/Theme/Feature/fastmenu.scss
@@ -51,6 +51,10 @@
             &.pp-active {
                 color: $pp-fastmenu-icon-active-color;
             }
+            &.ppc-inline svg {
+                width: var(--pp-fastmenu-icon-size);
+                height: var(--pp-fastmenu-icon-size);
+            }
         }
     }