diff --git a/forms/TabSet.php b/forms/TabSet.php index cc3e077d4c2..1b6a8b46737 100644 --- a/forms/TabSet.php +++ b/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"); } diff --git a/javascript/TabSet.js b/javascript/TabSet.js index 538ff2f5c53..5aa3078a054 100644 --- a/javascript/TabSet.js +++ b/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); \ No newline at end of file + // 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