From b3f0a9a034c0d8963095fc8d5693f54a3c4dcc91 Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Sat, 21 Nov 2009 02:22:33 +0000
Subject: [PATCH] ENHANCEMENT Using jQuery UI tabs in TabSet form field. Using
 custom javascript to ensure sizing of tabs within layout-managed containers.
 API CHANGE Changed CSS-class in TabSet template from "tabstrip" to
 "ss-tabset".

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@92477 467b73ca-7a2a-4603-9d3b-597d59a354a9
---
 forms/TabSet.php               | 15 ++++----
 javascript/TabSet.js           | 63 ++++++++++++++++++++++++++++++++++
 templates/TabSetFieldHolder.ss | 24 +++++++------
 3 files changed, 83 insertions(+), 19 deletions(-)
 create mode 100644 javascript/TabSet.js

diff --git a/forms/TabSet.php b/forms/TabSet.php
index 7c1e9c9fe..1b6a8b467 100644
--- a/forms/TabSet.php
+++ b/forms/TabSet.php
@@ -49,15 +49,14 @@ class TabSet extends CompositeField {
 	 * The HTML is a standardised format, containing a &lt;ul;
 	 */
 	public function FieldHolder() {
-		Requirements::javascript(THIRDPARTY_DIR . "/loader.js");
-		Requirements::javascript(THIRDPARTY_DIR . "/prototype.js");
-		Requirements::javascript(THIRDPARTY_DIR . "/behaviour.js");
-		Requirements::javascript(THIRDPARTY_DIR . "/prototype_improvements.js");
-		Requirements::javascript(THIRDPARTY_DIR . "/jquery/jquery.js");
+		Requirements::javascript(THIRDPARTY_DIR . "/jquery/jquery-latest.js");
 		Requirements::javascript(THIRDPARTY_DIR . "/jquery/jquery_improvements.js");
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/livequery/jquery.livequery.js');
-		Requirements::javascript(THIRDPARTY_DIR . "/tabstrip/tabstrip.js");
-		Requirements::css(THIRDPARTY_DIR . "/tabstrip/tabstrip.css");
+		Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/jquery-ui.js');
+		Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/ui.core.js');
+		Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/ui.tabs.js');
+		Requirements::javascript(SAPPHIRE_DIR . '/javascript/TabSet.js');
+		Requirements::css(THIRDPARTY_DIR . '/jquery/themes/smoothness/ui.all.css');
+		Requirements::css(THIRDPARTY_DIR . '/jquery/themes/smoothness/ui.tabs.css');
 		
 		return $this->renderWith("TabSetFieldHolder");
 	}
diff --git a/javascript/TabSet.js b/javascript/TabSet.js
new file mode 100644
index 000000000..5aa3078a0
--- /dev/null
+++ b/javascript/TabSet.js
@@ -0,0 +1,63 @@
+jQuery(document).ready(function () {
+	/**
+	 * Replace prefixes for all hashlinks in tabs.
+	 * SSViewer rewrites them from "#Root_MyTab" to
+	 * e.g. "/admin/#Root_MyTab" which makes them
+	 * unusable for jQuery UI.
+	 */
+	jQuery('.ss-tabset > ul a').each(function() {
+		var href = jQuery(this).attr('href').replace(/.*(#.*)/, '$1');
+		jQuery(this).attr('href', href);
+	})
+	
+	// Initialize tabset
+	jQuery('.ss-tabset').tabs();
+	
+	/**
+	 * Adjust height of nested tabset panels contained
+	 * in jQuery.layout panels to allow scrolling.
+	 */
+	var ss_tabset_fixHeight = function(e) {
+		console.debug(jQuery('.ss-tabset .tab'));
+		jQuery('.ss-tabset .tab').each(function() {
+			console.debug(this);
+			var $tabPane = jQuery(this);
+			var $layoutPane = $tabPane.parents('.ui-layout-pane:first');
+			
+			// don't apply resizing if tabset is not contained in a layout pane
+			if(!$layoutPane) return;
+			
+			// substract heights of unrelated tab elements
+			var $tabSets = $tabPane.parents('.ss-tabset');
+			var $tabBars = $tabSets.children('.ui-tabs-nav');
+			var tabPaneHeight = $layoutPane.height();
+			console.log('total', tabPaneHeight);
+			// each tabset has certain padding and borders
+			$tabSets.each(function() {
+				console.log('tabset',jQuery(this).outerHeight(true) - jQuery(this).innerHeight());
+				tabPaneHeight -= jQuery(this).outerHeight(true) - jQuery(this).innerHeight();
+			});
+			// get all "parent" tab navigation bars to substract their heights
+			// from the total panel height
+			$tabBars.each(function() {
+				console.log('tabbar', jQuery(this).outerHeight(true));
+				// substract height of every tab bar from the total panel height
+				tabPaneHeight -= jQuery(this).outerHeight(true);
+			});
+			// Remove any margins from the tab pane
+			console.log('tabpane', $tabPane.outerHeight(true) - $tabPane.innerHeight());
+			tabPaneHeight -= $tabPane.outerHeight(true) - $tabPane.innerHeight();
+			console.log('final', tabPaneHeight);
+			$tabPane.height(tabPaneHeight);
+			
+			// if tab has no nested tabs, set overflow to auto
+			if(!$tabPane.find('.tab').length) {
+				$tabPane.css('overflow', 'auto');	
+			}
+		});
+	}
+	
+	ss_tabset_fixHeight();
+	
+	jQuery(window).bind('resize', ss_tabset_fixHeight);
+});
\ No newline at end of file
diff --git a/templates/TabSetFieldHolder.ss b/templates/TabSetFieldHolder.ss
index 924886650..303e66137 100644
--- a/templates/TabSetFieldHolder.ss
+++ b/templates/TabSetFieldHolder.ss
@@ -1,17 +1,19 @@
-	<ul class="tabstrip">
+<div class="ss-tabset">
+	<ul>
 	<% control Tabs %>
 		<li class="$FirstLast $MiddleString"><a href="#$id" id="tab-$id">$Title</a></li>
 	<% end_control %>
 	</ul>
-	
+
 	<% control Tabs %>
-		<div class="tab" id="$id">
-		<% if Tabs %>
-			$FieldHolder
-		<% else %>
-			<% control Fields %>
-			$FieldHolder
-			<% end_control %>
-		<% end_if %>
-		</div>
+	<div class="tab" id="$id">
+	<% if Tabs %>
+		$FieldHolder
+	<% else %>
+		<% control Fields %>
+		$FieldHolder
+		<% end_control %>
+	<% end_if %>
+	</div>
 	<% end_control %>
+</div>
\ No newline at end of file