diff options
author | 2008-11-13 09:49:11 +0000 | |
---|---|---|
committer | 2008-11-13 09:49:11 +0000 | |
commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/layout/TabContainer.js | |
parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
download | scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dijit/layout/TabContainer.js')
-rw-r--r-- | includes/js/dijit/layout/TabContainer.js | 184 |
1 files changed, 184 insertions, 0 deletions
diff --git a/includes/js/dijit/layout/TabContainer.js b/includes/js/dijit/layout/TabContainer.js new file mode 100644 index 0000000..769a25f --- /dev/null +++ b/includes/js/dijit/layout/TabContainer.js @@ -0,0 +1,184 @@ +if(!dojo._hasResource["dijit.layout.TabContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.layout.TabContainer"] = true; +dojo.provide("dijit.layout.TabContainer"); + +dojo.require("dijit.layout.StackContainer"); +dojo.require("dijit._Templated"); + +dojo.declare("dijit.layout.TabContainer", + [dijit.layout.StackContainer, dijit._Templated], + { + // summary: + // A Container with Title Tabs, each one pointing at a pane in the container. + // description: + // A TabContainer is a container that has multiple panes, but shows only + // one pane at a time. There are a set of tabs corresponding to each pane, + // where each tab has the title (aka title) of the pane, and optionally a close button. + // + // Publishes topics [widgetId]-addChild, [widgetId]-removeChild, and [widgetId]-selectChild + // (where [widgetId] is the id of the TabContainer itself. + // + // tabPosition: String + // Defines where tabs go relative to tab content. + // "top", "bottom", "left-h", "right-h" + tabPosition: "top", + + templateString: null, // override setting in StackContainer + templateString:"<div class=\"dijitTabContainer\">\n\t<div dojoAttachPoint=\"tablistNode\"></div>\n\t<div class=\"dijitTabPaneWrapper\" dojoAttachPoint=\"containerNode\"></div>\n</div>\n", + + // _controllerWidget: String + // An optional parameter to overrider the default TabContainer controller used. + _controllerWidget: "dijit.layout.TabController", + + postCreate: function(){ + this.inherited(arguments); + // create the tab list that will have a tab (a.k.a. tab button) for each tab panel + var TabController = dojo.getObject(this._controllerWidget); + this.tablist = new TabController({ + id: this.id + "_tablist", + tabPosition: this.tabPosition, + doLayout: this.doLayout, + containerId: this.id + }, this.tablistNode); + }, + + _setupChild: function(/* Widget */tab){ + dojo.addClass(tab.domNode, "dijitTabPane"); + this.inherited(arguments); + return tab; // Widget + }, + + startup: function(){ + if(this._started){ return; } + + // wire up the tablist and its tabs + this.tablist.startup(); + this.inherited(arguments); + + if(dojo.isSafari){ + // sometimes safari 3.0.3 miscalculates the height of the tab labels, see #4058 + setTimeout(dojo.hitch(this, "layout"), 0); + } + + if(dojo.isIE && !this.isLeftToRight() && this.tabPosition == "right-h" && + this.tablist && this.tablist.pane2button){ + //need rectify non-closable tab in IE, only for "right-h" mode + for(var pane in this.tablist.pane2button){ + var tabButton = this.tablist.pane2button[pane]; + if(!tabButton.closeButton){ continue; } + tabButtonStyle = tabButton.closeButtonNode.style; + tabButtonStyle.position ="absolute"; + if(dojo.isIE < 7){ + tabButtonStyle.left = tabButton.domNode.offsetWidth + "px"; + }else{ + tabButtonStyle.padding = "0px"; + } + } + } + }, + + layout: function(){ + // Summary: Configure the content pane to take up all the space except for where the tabs are + if(!this.doLayout){ return; } + + // position and size the titles and the container node + var titleAlign = this.tabPosition.replace(/-h/,""); + var children = [ + { domNode: this.tablist.domNode, layoutAlign: titleAlign }, + { domNode: this.containerNode, layoutAlign: "client" } + ]; + dijit.layout.layoutChildren(this.domNode, this._contentBox, children); + + // Compute size to make each of my children. + // children[1] is the margin-box size of this.containerNode, set by layoutChildren() call above + this._containerContentBox = dijit.layout.marginBox2contentBox(this.containerNode, children[1]); + + if(this.selectedChildWidget){ + this._showChild(this.selectedChildWidget); + if(this.doLayout && this.selectedChildWidget.resize){ + this.selectedChildWidget.resize(this._containerContentBox); + } + } + }, + + destroy: function(){ + if(this.tablist){ + this.tablist.destroy(); + } + this.inherited(arguments); + } +}); + +//TODO: make private? +dojo.declare("dijit.layout.TabController", + dijit.layout.StackController, + { + // summary: + // Set of tabs (the things with titles and a close button, that you click to show a tab panel). + // description: + // Lets the user select the currently shown pane in a TabContainer or StackContainer. + // TabController also monitors the TabContainer, and whenever a pane is + // added or deleted updates itself accordingly. + + templateString: "<div wairole='tablist' dojoAttachEvent='onkeypress:onkeypress'></div>", + + // tabPosition: String + // Defines where tabs go relative to the content. + // "top", "bottom", "left-h", "right-h" + tabPosition: "top", + + // doLayout: Boolean + // TODOC: deprecate doLayout? not sure. + doLayout: true, + + // buttonWidget: String + // The name of the tab widget to create to correspond to each page + buttonWidget: "dijit.layout._TabButton", + + postMixInProperties: function(){ + this["class"] = "dijitTabLabels-" + this.tabPosition + (this.doLayout ? "" : " dijitTabNoLayout"); + this.inherited(arguments); + }, + +//TODO: can this be accomplished in CSS? + _rectifyRtlTabList: function(){ + //Summary: Rectify the length of all tabs in rtl, otherwise the tab lengths are different in IE + if(0 >= this.tabPosition.indexOf('-h')){ return; } + if(!this.pane2button){ return; } + + var maxLen = 0; + for(var pane in this.pane2button){ + maxLen = Math.max(maxLen, dojo.marginBox(this.pane2button[pane].innerDiv).w); + } + //unify the length of all the tabs + for(pane in this.pane2button){ + this.pane2button[pane].innerDiv.style.width = maxLen + 'px'; + } + } +}); + +dojo.declare("dijit.layout._TabButton", + dijit.layout._StackButton, + { + // summary: + // A tab (the thing you click to select a pane). + // description: + // Contains the title of the pane, and optionally a close-button to destroy the pane. + // This is an internal widget and should not be instantiated directly. + + baseClass: "dijitTab", + + templateString:"<div waiRole=\"presentation\" dojoAttachEvent='onclick:onClick,onmouseenter:_onMouse,onmouseleave:_onMouse'>\n <div waiRole=\"presentation\" class='dijitTabInnerDiv' dojoAttachPoint='innerDiv'>\n <div waiRole=\"presentation\" class='dijitTabContent' dojoAttachPoint='tabContent'>\n\t <span dojoAttachPoint='containerNode,focusNode' class='tabLabel'>${!label}</span>\n\t <span dojoAttachPoint='closeButtonNode' class='closeImage' dojoAttachEvent='onmouseenter:_onMouse, onmouseleave:_onMouse, onclick:onClickCloseButton' stateModifier='CloseButton'>\n\t <span dojoAttachPoint='closeText' class='closeText'>x</span>\n\t </span>\n </div>\n </div>\n</div>\n", + + postCreate: function(){ + if(this.closeButton){ + dojo.addClass(this.innerDiv, "dijitClosable"); + }else{ + this.closeButtonNode.style.display="none"; + } + this.inherited(arguments); + dojo.setSelectable(this.containerNode, false); + } +}); + +} |