ENHANCEMENT Using jQuery UI tabs for Security/login with multiple authentication methods (e.g. CMS-login and OpenID)

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@92478 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2009-11-21 02:22:36 +00:00
parent b3f0a9a034
commit deb691a481
4 changed files with 35 additions and 61 deletions

View File

@ -162,3 +162,7 @@ form .message {
#ForgotPassword {
margin-top: 1em;
}
.typography .ss-tabset ul {
margin: 0;
}

View File

@ -54,10 +54,13 @@ class TabSet extends CompositeField {
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::javascript(THIRDPARTY_DIR . '/jquery/plugins/fitheighttoparent/jquery.fitheighttoparent.js');
Requirements::css(THIRDPARTY_DIR . '/jquery/themes/smoothness/ui.all.css');
Requirements::css(THIRDPARTY_DIR . '/jquery/themes/smoothness/ui.tabs.css');
Requirements::javascript(SAPPHIRE_DIR . '/javascript/TabSet.js');
return $this->renderWith("TabSetFieldHolder");
}

View File

@ -13,51 +13,6 @@ jQuery(document).ready(function () {
// 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);
// if tab has no nested tabs, set overflow to auto
jQuery('.ss-tabset .tab').not(':has(.tab)').css('overflow', 'auto');
});

View File

@ -327,33 +327,45 @@ class Security extends Controller {
// only display tabs when more than one authenticator is provided
// to save bandwidth and reduce the amount of custom styling needed
if(count($forms) > 1) {
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 . "/scriptaculous/effects.js");
Requirements::javascript(SAPPHIRE_DIR . "/thirdparty/prototype/loader.js");
Requirements::javascript(SAPPHIRE_DIR . "/thirdparty/prototype/prototype.js");
Requirements::javascript(SAPPHIRE_DIR . "/thirdparty/behaviour/behaviour.js");
Requirements::javascript(SAPPHIRE_DIR . "/javascript/prototype_improvements.js");
Requirements::javascript(SAPPHIRE_DIR . "/thirdparty/scriptaculous/effects.js");
Requirements::css(SAPPHIRE_DIR . "/css/Form.css");
// Needed because the <base href=".."> in the template makes problems
// with the tabstrip library otherwise
$link_base = Director::absoluteURL($this->Link("login"));
Requirements::javascript(THIRDPARTY_DIR . "/jquery/jquery.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(SAPPHIRE_DIR . '/thirdparty/jquery/jquery.js');
Requirements::javascript(SAPPHIRE_DIR . "/javascript/jquery_improvements.js");
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/jquery-ui.js');
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.core.js');
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.tabs.js');
// concrete
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.class.js');
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.selector.js');
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.selector.specifity.js');
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.selector.matches.js');
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.dat.js');
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.concrete.js');
Requirements::css(SAPPHIRE_DIR . '/thirdparty/jquery-ui-themes/smoothness/ui.all.css');
Requirements::css(SAPPHIRE_DIR . '/thirdparty/jquery-ui-themes/smoothness/ui.tabs.css');
$content = '<div id="Form_EditForm">';
$content .= '<ul class="tabstrip">';
$content .= '<div class="ss-tabset">';
$content .= '<ul>';
$content_forms = '';
foreach($forms as $form) {
$content .= "<li><a href=\"$link_base#{$form->FormName()}_tab\">{$form->getAuthenticator()->get_name()}</a></li>\n";
$content .= "<li><a href=\"#{$form->FormName()}_tab\">{$form->getAuthenticator()->get_name()}</a></li>\n";
$content_forms .= '<div class="tab" id="' . $form->FormName() . '_tab">' . $form->forTemplate() . "</div>\n";
}
$content .= "</ul>\n" . $content_forms . "\n</div>\n";
$content .= "</ul>\n" . $content_forms . "\n</div>\n</div>\n";
} else {
$content .= $forms[0]->forTemplate();
}