[FEATURE] make it possible to add meta menu to main mobile menu (#142)

t3kit · Mar 23, 2017 · 99d77b2 · 99d77b2
1 parent fc41745
commit 99d77b2
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 20 deletions.
diff --git a/Configuration/TypoScript/Library/lib.menu.main.setupts b/Configuration/TypoScript/Library/lib.menu.main.setupts
@@ -1,9 +1,10 @@
-lib.menu.main = HMENU
-lib.menu.main {
+lib.menu.main = COA
+lib.menu.main.100 = HMENU
+lib.menu.main.100 {
     entryLevel = 0
     includeNotInMenu = 0
     excludeUidList = {$themes.configuration.menu.main.excludeUidList}
-    # wrap = <ul class="main-navigation__items-list js__main-navigation__items-list"> | </ul>
+    #wrap = <ul class="main-navigation__items-list js__main-navigation__items-list">|</ul>
     1 = TMENU
     1 {
         expAll = 1
@@ -55,7 +56,7 @@ lib.menu.main {
 
 [globalVar = LIT:_sub = {$themes.configuration.menu.main.dropdown}] && [globalVar = LIT:1 = {$themes.configuration.menu.main.dropdownColumns}]
 
-lib.menu.main {
+lib.menu.main.100 {
     1 {
         IFSUB {
             after = <div class="tablet-arrow"><a href="#" class="main-navigation__open-sub-menu-link js__main-navigation__open-sub-menu-link">Open</a></div>
@@ -129,12 +130,10 @@ lib.menu.main {
         }
     }
 }
-[global]
-
 
 # Add third navigation level if dropdown and third level is enabled
 [globalVar = LIT:_sub = {$themes.configuration.menu.main.dropdown}] && [globalVar = LIT:1 = {$themes.configuration.menu.main.showThirdNavLevel}]
-lib.menu.main {
+lib.menu.main.100 {
     2 {
         expAll = 1
         wrap = <ul class="main-navigation__sub-item-list second-navigation-level"> | </ul>
@@ -175,4 +174,4 @@ lib.menu.main {
         ACTIFSUB >
     }
 }
-[global]
+[global]
diff --git a/Configuration/TypoScript/Library/lib.menu.topMobile.setupts b/Configuration/TypoScript/Library/lib.menu.topMobile.setupts
@@ -0,0 +1,70 @@
+# Meta menu to mobile menu
+lib.menu.topMobile = COA
+lib.menu.topMobile.150 = HMENU
+lib.menu.topMobile.150 {
+    special = directory
+    special.value = {$themes.configuration.header.top.menu.containerPid}
+}
+
+[globalVar = LIT:1 = {$themes.configuration.elem.status.headerTopNavigationAsOneItemInMobileMenu}]
+    lib.menu.topMobile.100 = HMENU
+    lib.menu.topMobile.100 {
+        special = list
+        special.value = {$themes.configuration.header.top.menu.containerPid}
+        includeNotInMenu = 1
+
+        1 = TMENU
+        1 {
+            NO = 1
+            NO {
+                wrapItemAndSub = <li class="main-navigation__item js__main-navigation__item meta-menu-wrapper__main-navigation__item hidden-md hidden-lg">|
+                ATagParams = class="main-navigation__item-link js__main-navigation__item-link js__main-navigation__open-sub-menu-link"
+                after = <div class="tablet-arrow"><a href="#" class="main-navigation__open-sub-menu-link js__main-navigation__open-sub-menu-link">Open</a></div>
+            }
+
+            ACT < .NO
+            ACT {
+                wrapItemAndSub = <li class="main-navigation__item js__main-navigation__item meta-menu-wrapper__main-navigation__item _active hidden-md hidden-lg">|
+            }
+        }
+    }
+    lib.menu.topMobile.150 {
+        1 = TMENU
+        1 {
+            expAll = 0
+            wrap = <ul class="main-navigation__sub-item-list">|</ul>
+            NO = 1
+            NO {
+                wrapItemAndSub.insertData = 1
+                wrapItemAndSub = <li class="main-navigation__sub-item uid-{field:uid} point-{register:count_MENUOBJ} first">|</li>|*|<li class="main-navigation__sub-item uid-{field:uid} point-{register:count_MENUOBJ} middle">|</li>|*|<li class="main-navigation__sub-item uid-{field:uid} point-{register:count_MENUOBJ} last">|</li>
+                ATagParams = class="main-navigation__sub-item-link"
+            }
+            ACT < .NO
+            ACT {
+                wrapItemAndSub.insertData = 1
+                wrapItemAndSub = <li class="main-navigation__sub-item _active uid-{field:uid} point-{register:count_MENUOBJ} first">|</li>|*|<li class="main-navigation__sub-item _active uid-{field:uid} point-{register:count_MENUOBJ} middle">|</li>|*|<li class="main-navigation__sub-item _active uid-{field:uid} point-{register:count_MENUOBJ} last">|</li>
+                ATagParams = class="main-navigation__sub-item-link"
+            }
+        }
+    }
+
+    lib.menu.topMobile.wrap = |</li>
+[else]
+    lib.menu.topMobile.150 {
+        1 = TMENU
+        1 {
+            expAll = 1
+            NO = 1
+            NO {
+                wrapItemAndSub.insertData = 1
+                wrapItemAndSub = <li class="main-navigation__item js__main-navigation__item meta-menu__main-navigation__item uid-{field:uid} point-{register:count_MENUOBJ} hidden-md hidden-lg first">|</li>|*|<li class="main-navigation__item js__main-navigation__item meta-menu__main-navigation__item uid-{field:uid} point-{register:count_MENUOBJ} hidden-md hidden-lg middle">|</li>|*|<li class="main-navigation__item js__main-navigation__item meta-menu__main-navigation__item uid-{field:uid} point-{register:count_MENUOBJ} hidden-md hidden-lg last">|</li>
+                ATagParams = class="main-navigation__item-link js__main-navigation__item-link"
+            }
+
+            ACT < .NO
+            ACT {
+                wrapItemAndSub = <li class="main-navigation__item js__main-navigation__item meta-menu__main-navigation__item uid-{field:uid} point-{register:count_MENUOBJ} _active hidden-md hidden-lg first">|</li>|*|<li class="main-navigation__item js__main-navigation__item meta-menu__main-navigation__item uid-{field:uid} point-{register:count_MENUOBJ} _active hidden-md hidden-lg middle">|</li>|*|<li class="main-navigation__item js__main-navigation__item meta-menu__main-navigation__item uid-{field:uid} point-{register:count_MENUOBJ} _active hidden-md hidden-lg last">|</li>
+            }
+        }
+    }
+[end]
diff --git a/Configuration/TypoScript/Library/themes.header.constantsts b/Configuration/TypoScript/Library/themes.header.constantsts
@@ -28,6 +28,12 @@ themes.configuration.elem.status.showHeaderMainMenuSearch = 0
 # cat=header,advanced/header_top; type=options[0,1]; label= Show Header Top Navigation
 themes.configuration.elem.status.showHeaderTopNavigation = 1
 
+# cat=header,advanced/header_top; type=options[No=0,Yes=1]; label= Header Top Navigation Visible in mobile menu
+themes.configuration.elem.status.headerTopNavigationVisibleInMobileMenu = 0
+
+# cat=header,advanced/header_top; type=options[No=0,Yes=1]; label= Header Top Navigation mobile menu as one item
+themes.configuration.elem.status.headerTopNavigationAsOneItemInMobileMenu = 1
+
 # cat=header,advanced/header_top; type=int+; label= Header Top: Container pid where the menu items are located
 themes.configuration.header.top.menu.containerPid = 6
 

diff --git a/Resources/Private/Partials/Header/Header.html b/Resources/Private/Partials/Header/Header.html
@@ -80,26 +80,19 @@
 		</button>
 	</f:if>
 
-	<f:if condition="{theme:constant(constant:'themes.configuration.menu.main.dropdownColumns')} == 1">
-		<f:then>
-			<nav class="main-navigation js__main-navigation _dropdown-menu-with-columns js__dropdown-menu-with-columns">
-		</f:then>
-		<f:else>
-			<nav class="main-navigation js__main-navigation">
-		</f:else>
-	</f:if>
+	<nav class="main-navigation js__main-navigation{f:if(condition: '{theme:constant(constant:\'themes.configuration.menu.main.dropdownColumns\')} == 1', then: ' _dropdown-menu-with-columns js__dropdown-menu-with-columns')}">
 		<div class="main-navigation__items-wrp js__navigation__items-wrp">
-
 			<ul class="main-navigation__items-list js__main-navigation__items-list">
-
 				<f:cObject typoscriptObjectPath="lib.menu.main" />
 
+				<f:if condition="{theme:constant(constant:'themes.configuration.elem.status.headerTopNavigationVisibleInMobileMenu')}">
+					<f:cObject typoscriptObjectPath="lib.menu.topMobile" />
+				</f:if>
+
 				<f:if condition="{theme:constant(constant:'themes.configuration.elem.status.showHeaderMainMenuSearch')}">
 					<f:cObject typoscriptObjectPath="lib.menu.main.search" />
 				</f:if>
-
 			</ul>
-
 		</div>
 	</nav>