From 11debffe1989587268b8ce236677c6dc0ee3e27d Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 16 Aug 2011 15:58:53 +0200
Subject: [PATCH] Implemented draft-version of replacement for SubTabMenu

---
 .../files/acp/templates/userGroupAdd.tpl      | 99 ++++++++++++-------
 wcfsetup/install/files/js/WCF.js              | 42 ++++++++
 2 files changed, 107 insertions(+), 34 deletions(-)

diff --git a/wcfsetup/install/files/acp/templates/userGroupAdd.tpl b/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
index 10fef626a5..556808d363 100644
--- 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 fb341ca6bc..2e60e8642e 100644
--- 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
  * 
-- 
2.20.1