From 8018b940637045479724dd3e4cce8ee8f95987d0 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 30 Jul 2016 17:55:18 +0200
Subject: [PATCH] Added support for page navigation icons

---
 com.woltlab.wcf/templates/pageMenuMobile.tpl  | 63 ++++++----------
 com.woltlab.wcf/templates/pageNavbarTop.tpl   |  2 +-
 .../js/WoltLab/WCF/Ui/Page/Menu/Abstract.js   | 10 ++-
 .../files/js/WoltLab/WCF/Ui/Page/Menu/Main.js | 73 ++++++++++++++++++-
 4 files changed, 106 insertions(+), 42 deletions(-)

diff --git a/com.woltlab.wcf/templates/pageMenuMobile.tpl b/com.woltlab.wcf/templates/pageMenuMobile.tpl
index 33ea5b0f7d..d640410aca 100644
--- a/com.woltlab.wcf/templates/pageMenuMobile.tpl
+++ b/com.woltlab.wcf/templates/pageMenuMobile.tpl
@@ -2,47 +2,32 @@
 <div id="pageMainMenuMobile" class="pageMainMenuMobile menuOverlayMobile" data-page-logo="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}">
 	<ol class="menuOverlayItemList" data-title="{lang}wcf.menu.page{/lang}">
 		<li class="menuOverlayTitle">{lang}wcf.menu.page.navigation{/lang}</li>
-		{*<li class="menuOverlayItem">
-			<a href="#" class="menuOverlayItemLink box24">
-				<span class="icon icon24 fa-sitemap"></span>
-				<span class="menuOverlayItemTitle"></span>
-			</a>
-			<ol class="menuOverlayItemList">*}
-				{foreach from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList() item=menuItemNode}
-					<li class="menuOverlayItem">
-						{assign var=__outstandingItems value=$menuItemNode->getOutstandingItems()}
-						<a href="{$menuItemNode->getURL()}" class="menuOverlayItemLink{if $__outstandingItems} menuOverlayItemBadge{/if}{if $menuItemNode->isActiveNode()} active{/if}">
-							<span class="menuOverlayItemTitle">{lang}{$menuItemNode->title}{/lang}</span>
-							{if $__outstandingItems}
-								<span class="badge badgeUpdate">{#$__outstandingItems}</span>
-							{/if}
-						</a>
-						
-						{if $menuItemNode->hasChildren()}<ol class="menuOverlayItemList">{else}</li>{/if}
-							
-							{if !$menuItemNode->hasChildren() && $menuItemNode->isLastSibling()}
-								{@"</ol></li>"|str_repeat:$menuItemNode->getOpenParentNodes()}
-							{/if}
-				{/foreach}
-			{*</ol>
-		</li>*}
-		{hascontent}
+		{foreach from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList() item=menuItemNode}
 			<li class="menuOverlayItem">
-				<a href="#" class="menuOverlayItemLink box24">
-					<span class="icon icon24 fa-gears"></span>
-					<span class="menuOverlayItemTitle">{lang}wcf.menu.page.options{/lang}</span>
+				{assign var=__outstandingItems value=$menuItemNode->getOutstandingItems()}
+				<a href="{$menuItemNode->getURL()}" class="menuOverlayItemLink{if $__outstandingItems} menuOverlayItemBadge{/if}{if $menuItemNode->isActiveNode()} active{/if}">
+					<span class="menuOverlayItemTitle">{lang}{$menuItemNode->title}{/lang}</span>
+					{if $__outstandingItems}
+						<span class="badge badgeUpdate">{#$__outstandingItems}</span>
+					{/if}
 				</a>
-				<ol class="menuOverlayItemList">
-					{content}
-						{if !$__pageOptions|empty}
-							{@$__pageOptions}
-						{/if}
-						
-						{event name='pageOptions'}
-					{/content}
-				</ol>
-			</li>
-		{/hascontent}
+				
+				{if $menuItemNode->hasChildren()}<ol class="menuOverlayItemList">{else}</li>{/if}
+					
+					{if !$menuItemNode->hasChildren() && $menuItemNode->isLastSibling()}
+						{@"</ol></li>"|str_repeat:$menuItemNode->getOpenParentNodes()}
+					{/if}
+		{/foreach}
+		<li class="menuOverlayItemSpacer"></li>
+		<li class="menuOverlayItem" id="pageMainMenuMobilePageOptionsContainer">
+			<a href="#" class="menuOverlayItemLink box24">
+				<span class="icon icon24 fa-gears"></span>
+				<span class="menuOverlayItemTitle">{lang}wcf.menu.page.options{/lang}</span>
+			</a>
+			<ol class="menuOverlayItemList">
+				<li class="menuOverlayItem jsMenuOverlayItemPlaceholder"><a href="#">(placeholder)</a></li>
+			</ol>
+		</li>
 		{hascontent}
 			<li class="menuOverlayTitle">{lang}wcf.menu.page.location{/lang}</li>
 			{content}
diff --git a/com.woltlab.wcf/templates/pageNavbarTop.tpl b/com.woltlab.wcf/templates/pageNavbarTop.tpl
index ae94d1501e..4442996c88 100644
--- a/com.woltlab.wcf/templates/pageNavbarTop.tpl
+++ b/com.woltlab.wcf/templates/pageNavbarTop.tpl
@@ -2,7 +2,7 @@
 	<div class="layoutBoundary">
 		{if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
 		
-		<ul class="pageNavigationIcons">
+		<ul class="pageNavigationIcons jsPageNavigationIcons">
 			{if $headerNavigation|isset}{@$headerNavigation}{/if}
 			{event name='navigationIcons'}
 		</ul>
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js
index cab400d793..19c4a388fd 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js
@@ -82,10 +82,11 @@ define(['Environment', 'EventHandler', 'ObjectMap', 'Dom/Traverse', 'Dom/Util',
 		 * Opens the menu.
 		 * 
 		 * @param       {Event}         event   event object
+		 * @return      {boolean}       true if menu has been opened
 		 */
 		open: function(event) {
 			if (!this._enabled) {
-				return;
+				return false;
 			}
 			
 			if (event instanceof Event) {
@@ -101,12 +102,15 @@ define(['Environment', 'EventHandler', 'ObjectMap', 'Dom/Traverse', 'Dom/Util',
 			_pageContainer.classList.add('menuOverlay-' + this._menu.id);
 			
 			document.documentElement.classList.add('pageOverlayActive');
+			
+			return true;
 		},
 		
 		/**
 		 * Closes the menu.
 		 * 
 		 * @param       {(Event|boolean)}       event   event object or boolean true to force close the menu
+		 * @return      {boolean}               true if menu was open
 		 */
 		close: function(event) {
 			if (event instanceof Event) {
@@ -121,7 +125,11 @@ define(['Environment', 'EventHandler', 'ObjectMap', 'Dom/Traverse', 'Dom/Util',
 				_pageContainer.classList.remove('menuOverlay-' + this._menu.id);
 				
 				document.documentElement.classList.remove('pageOverlayActive');
+				
+				return true;
 			}
+			
+			return false;
 		},
 		
 		/**
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Main.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Main.js
index 9cedcb3ecd..eeba6ce800 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Main.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Main.js
@@ -6,9 +6,15 @@
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLab/WCF/Ui/Page/Menu/Main
  */
-define(['Core', './Abstract'], function(Core, UiPageMenuAbstract) {
+define(['Core', 'Dom/Traverse', './Abstract'], function(Core, DomTraverse, UiPageMenuAbstract) {
 	"use strict";
 	
+	var _container = elById('pageMainMenuMobilePageOptionsContainer');
+	var _hasItems = null;
+	var _list = DomTraverse.childByClass(_container, 'menuOverlayItemList');
+	var _navigationList = elBySel('.jsPageNavigationIcons');
+	var _spacer = _container.nextElementSibling;
+	
 	/**
 	 * @constructor
 	 */
@@ -24,6 +30,71 @@ define(['Core', './Abstract'], function(Core, UiPageMenuAbstract) {
 				'pageMainMenuMobile',
 				'#pageHeader .mainMenu'
 			);
+			
+			// remove placeholder item
+			elRemove(DomTraverse.childByClass(_list, 'jsMenuOverlayItemPlaceholder'));
+		},
+		
+		open: function (event) {
+			if (!UiPageMenuMain._super.prototype.open.call(this, event)) {
+				return false;
+			}
+			
+			_hasItems = _navigationList.childElementCount > 0;
+			
+			if (_hasItems) {
+				var item, link;
+				while (_navigationList.childElementCount) {
+					item = _navigationList.children[0];
+					
+					item.classList.add('menuOverlayItem');
+					
+					link = item.children[0];
+					link.classList.add('menuOverlayItemLink');
+					link.classList.add('box24');
+					
+					link.children[1].classList.remove('invisible');
+					link.children[1].classList.add('menuOverlayItemTitle');
+					
+					_list.appendChild(item);
+				}
+				
+				elShow(_container);
+				elShow(_spacer);
+			}
+			else {
+				elHide(_container);
+				elHide(_spacer);
+			}
+			
+			return true;
+		},
+		
+		close: function(event) {
+			if (!UiPageMenuMain._super.prototype.close.call(this, event)) {
+				return false;
+			}
+			
+			if (_hasItems) {
+				elHide(_container);
+				elHide(_spacer);
+				
+				var item, link, title = DomTraverse.childByClass(_list, 'menuOverlayTitle');
+				while (item = title.nextElementSibling) {
+					item.classList.remove('menuOverlayItem');
+					
+					link = item.children[0];
+					link.classList.remove('menuOverlayItemLink');
+					link.classList.remove('box24');
+					
+					link.children[1].classList.add('invisible');
+					link.children[1].classList.remove('menuOverlayItemTitle');
+					
+					_navigationList.appendChild(item);
+				}
+			}
+			
+			return true;
 		}
 	});
 	
-- 
2.20.1