ENHANCEMENT Using "concrete" jQuery plugin for SilverStripe tabset

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@92485 467b73ca-7a2a-4603-9d3b-597d59a354a9

forms/TabSet.php

@@ -59,6 +59,14 @@ public function FieldHolder() {
 		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,18 +1,42 @@
-jQuery(document).ready(function () {
+(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.
+	 * 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.
 	 */
-	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();
-
-	// if tab has no nested tabs, set overflow to auto
-	jQuery('.ss-tabset .tab').not(':has(.tab)').css('overflow', 'auto');
+	$('.ss-tabset').concrete({
+		onmatch: function() {
+			this.rewriteHashlinks();
+
+			// Initialize jQuery UI tabs
+			this.tabs();
+		},
+
+		/**
+		 * 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);
+
+jQuery(document).ready(function() {
+	// @todo remove
+	jQuery.concrete.triggerMatching();
 });