ENHANCEMENT Using jQuery UI tabs in TabSet form field. Using custom j…

…avascript 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@92483 467b73ca-7a2a-4603-9d3b-597d59a354a9

forms/TabSet.php

@@ -54,21 +54,10 @@ public function FieldHolder() {
 		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(THIRDPARTY_DIR . '/jquery/plugins/fitheighttoparent/jquery.fitheighttoparent.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');
 
-		// concrete
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/concrete/jquery.class.js');
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/concrete/jquery.selector.js');
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/concrete/jquery.selector.specifity.js');
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/concrete/jquery.selector.matches.js');
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/concrete/jquery.dat.js');
-		Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/concrete/jquery.concrete.js');
-
-		Requirements::javascript(SAPPHIRE_DIR . '/javascript/TabSet.js');
-
 		return $this->renderWith("TabSetFieldHolder");
 	}
 

javascript/TabSet.js

@@ -1,37 +1,63 @@
-(function($){
+jQuery(document).ready(function () {
 	/**
-	 * Lightweight wrapper around jQuery UI tabs.
-	 * Ensures that anchor links are set properly,
-	 * and any nested tabs are scrolled if they have
-	 * their height explicitly set. This is important
-	 * for forms inside the CMS layout.
+	 * 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.
 	 */
-	$('.ss-tabset').concrete({
-		onmatch: function() {
-			this.rewriteHashlinks();
-
-			// Initialize jQuery UI tabs
-			this.tabs();
-		},
+	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);
 
-		/**
-		 * 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.
-		 */
-		rewriteHashlinks: function() {
-			$(this).find('ul a').each(function() {
-				var href = $(this).attr('href').replace(/.*(#.*)/, '$1');
-				if(href) $(this).attr('href', href);
-			})
-		},
-
-		/**
-		 * If tab has no nested tabs, set overflow to auto
-		 */
-		setOverflows: function() {
-			$(this).find('.tab').not(':has(.tab)').css('overflow', 'auto');
-		}
-	});
-})(jQuery);
+			// 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);
+});