Implemented draft-version of replacement for SubTabMenu

diff --git a/wcfsetup/install/files/acp/templates/userGroupAdd.tpl b/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
index 10fef626a58735dcd2523a608ae94846e12ef12e..556808d3636d487925e3480ac919ab3a15474c86 100644 (file)
--- a/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
@@ -1,10 +1,10 @@
 {include file='header'}
 
-<script type="text/javascript" src="{@RELATIVE_WCF_DIR}js/TabMenu.class.js"></script>
 <script type="text/javascript">
        //<![CDATA[
-       var tabMenu = new TabMenu();
-       onloadEvents.push(function() { tabMenu.showSubTabMenu("{$activeTabMenuItem}", "{$activeSubTabMenuItem}"); });
+       $(function() {
+               new WCF.Menu();
+       });
        //]]>
 </script>
 
@@ -68,43 +68,74 @@
                        </ul>
                </nav>
                
-               <nav class="menu"><!-- ToDo -->
-                       {foreach from=$optionTree item=categoryLevel1}
-                               <ul id="{@$categoryLevel1[object]->categoryName}-categories" class="hidden">
-                                       {foreach from=$categoryLevel1[categories] item=categoryLevel2}
-                                               <li id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}"><a onclick="tabMenu.showTabMenuContent('{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}');"><span>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</span></a></li>
-                                       {/foreach}
-                               </ul>
-                       {/foreach}
-               </nav>
-               
+               {*
+                       Note:
+                       
+                        - Remove inline css (relocate to global WCF-CSS)
+                        - [.menuItems] is used by JS to determine container and additionally (!) applying [.menuItemsJS]
+                        - [.menuItemsJS] is applied with JavaScript, do NOT copy css instructions into the non-js class,
+                          as certain dimension calculations will be broken after applying them
+
+                        - JavaScript is provided within wcf/js/WCF.js, search for WCF.Menu
+
+               *}
+               <style type="text/css">
+                       .scrollableMenuContainer {
+                               overflow: hidden;
+                               position: relative;
+                       }
+
+                       .menuItemsJS {
+                               overflow: hidden;
+                               position: relative;
+                               width: 20000em;
+                       }
+
+                       .menuItemsJS > div {
+                               float: left;
+                               margin-top: 0 !important;
+                       }
+               </style>
+
                {foreach from=$optionTree item=categoryLevel1}
-                       {foreach from=$categoryLevel1[categories] item=categoryLevel2}
-                               <div id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}-content" class="border tabMenuContent hidden">
-                                       <hgroup class="subHeading">
-                                               <h1>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</h1>
-                                               <h2>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}.description{/lang}</h2>
-                                       </hgroup>
+                       <div class="scrollableMenuContainer" data-categoryName="{$categoryLevel1[object]->categoryName}">
+                               <nav class="menu">
+                                       <ul id="{@$categoryLevel1[object]->categoryName}-categories">
+                                               {foreach from=$categoryLevel1[categories] item=$categoryLevel2}
+                                                       <li id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}"><a href="#{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}-content"><span>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</span></a></li>
+                                               {/foreach}
+                                       </ul>
+                               </nav>
+
+                               <div class="menuItems" id="{$categoryLevel1[object]->categoryName}-items">
+                                       {foreach from=$categoryLevel1[categories] item=categoryLevel2}
+                                               <div id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}-content" class="border tabMenuContent hidden">
+                                                       <hgroup class="subHeading">
+                                                               <h1>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</h1>
+                                                               <h2>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}.description{/lang}</h2>
+                                                       </hgroup>
                                        
-                                       {if $categoryLevel2[options]|count}
-                                               {include file='optionFieldList' options=$categoryLevel2[options] langPrefix='wcf.acp.group.option.'}
-                                       {/if}
+                                                       {if $categoryLevel2[options]|count}
+                                                               {include file='optionFieldList' options=$categoryLevel2[options] langPrefix='wcf.acp.group.option.'}
+                                                       {/if}
                                        
-                                       {if $categoryLevel2[categories]|count}
-                                               {foreach from=$categoryLevel2[categories] item=categoryLevel3}
-                                                       <fieldset>
-                                                               <legend>{lang}wcf.acp.group.option.category.{@$categoryLevel3[object]->categoryName}{/lang}</legend>
-                                                               <p class="description">{lang}wcf.acp.group.option.category.{@$categoryLevel3[object]->categoryName}.description{/lang}</p>
+                                                       {if $categoryLevel2[categories]|count}
+                                                               {foreach from=$categoryLevel2[categories] item=categoryLevel3}
+                                                                       <fieldset>
+                                                                               <legend>{lang}wcf.acp.group.option.category.{@$categoryLevel3[object]->categoryName}{/lang}</legend>
+                                                                               <p class="description">{lang}wcf.acp.group.option.category.{@$categoryLevel3[object]->categoryName}.description{/lang}</p>
                                                        
-                                                               <div>
-                                                                       {include file='optionFieldList' options=$categoryLevel3[options] langPrefix='wcf.acp.group.option.'}
-                                                               </div>
-                                                       </fieldset>
-                                               {/foreach}
-                                       {/if}
+                                                                               <div>
+                                                                                       {include file='optionFieldList' options=$categoryLevel3[options] langPrefix='wcf.acp.group.option.'}
+                                                                               </div>
+                                                                       </fieldset>
+                                                               {/foreach}
+                                                       {/if}
                                        
+                                               </div>
+                                       {/foreach}
                                </div>
-                       {/foreach}
+                       </div>
                {/foreach}
        </div>
        

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index fb341ca6bcc5b5a0f455b32b0889f22388519f3c..2e60e8642e19c8a0bd25fb0d4651bc7cdc4f4298 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -1281,6 +1281,48 @@ WCF.TabMenu = {
        }
 };
 
+WCF.Menu = function() { this.init(); };
+WCF.Menu.prototype = {
+       init: function() {
+               $('.scrollableMenuContainer').each(function(index, container) {
+                       var $container = $(container);
+                       var $categoryName = $container.data('categoryName');
+                       
+                       var $containerDimensions = $container.getDimensions('outer');
+                       var $menuItems = $container.find('div.menuItems');
+                       
+                       if ($menuItems.length) {
+                               var $items = $container.find('div.menuItems > div');
+                               
+                               if ($items.length) {
+                                       var $itemDimensions = $($items[0]).getDimensions();
+                                       $items.css({ width: $itemDimensions.width + 'px' });
+                                       
+                                       $menuItems.addClass('menuItemsJS');
+                                       $(container).css({ width: $containerDimensions.width + 'px' }).scrollable({
+                                               items: '#' + $categoryName + '-items',
+                                               onBeforeSeek: function(event, index) {
+                                                       var $item = this.getItems()[index];
+                                                       var $dimensions = $($item).getDimensions('outer');
+                                                       
+                                                       $($item).parent().animate({
+                                                               height: $dimensions.height + 'px'
+                                                       }, {
+                                                               queue: false,
+                                                               duration: 400
+                                                       });
+                                               },
+                                               touch: false
+                                       }).navigator({
+                                               history: true,
+                                               navi: '#' + $categoryName + '-categories'
+                                       });
+                               }
+                       }
+               });
+       }
+};
+
 /**
  * Templates that may be fetched more than once with different variables. Based upon ideas from Prototype's template
  *