Added support for page navigation icons

diff --git a/com.woltlab.wcf/templates/pageMenuMobile.tpl b/com.woltlab.wcf/templates/pageMenuMobile.tpl
index 33ea5b0f7d87df213819eeb2d938740c6d63ef1a..d640410aca1dd859e9d436710154503b2a3abc1b 100644 (file)
--- 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 ae94d1501e83d047a472de418ac1858baa5c35c6..4442996c880c1a906bd5e8f000290ade61fed1c8 100644 (file)
--- 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 cab400d7930ba97932fdddf6b23e3b96463dfaa6..19c4a388fd0a31825130fc9f83540df40fb0f8fb 100644 (file)
--- 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 9cedcb3ecd2feffe65ce7f745d86411f6221fca4..eeba6ce80016a18ec541a9c1fdbffe80c873208c 100644 (file)
--- 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;
                }
        });