_TabContainerBase.js.uncompressed.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. require({cache:{
  2. 'url:dijit/layout/templates/TabContainer.html':"<div class=\"dijitTabContainer\">\n\t<div class=\"dijitTabListWrapper\" data-dojo-attach-point=\"tablistNode\"></div>\n\t<div data-dojo-attach-point=\"tablistSpacer\" class=\"dijitTabSpacer ${baseClass}-spacer\"></div>\n\t<div class=\"dijitTabPaneWrapper ${baseClass}-container\" data-dojo-attach-point=\"containerNode\"></div>\n</div>\n"}});
  3. define("dijit/layout/_TabContainerBase", [
  4. "dojo/text!./templates/TabContainer.html",
  5. "./StackContainer",
  6. "./utils", // marginBox2contextBox, layoutChildren
  7. "../_TemplatedMixin",
  8. "dojo/_base/declare", // declare
  9. "dojo/dom-class", // domClass.add
  10. "dojo/dom-geometry", // domGeometry.contentBox
  11. "dojo/dom-style" // domStyle.style
  12. ], function(template, StackContainer, layoutUtils, _TemplatedMixin, declare, domClass, domGeometry, domStyle){
  13. // module:
  14. // dijit/layout/_TabContainerBase
  15. return declare("dijit.layout._TabContainerBase", [StackContainer, _TemplatedMixin], {
  16. // summary:
  17. // Abstract base class for TabContainer. Must define _makeController() to instantiate
  18. // and return the widget that displays the tab labels
  19. // description:
  20. // A TabContainer is a container that has multiple panes, but shows only
  21. // one pane at a time. There are a set of tabs corresponding to each pane,
  22. // where each tab has the name (aka title) of the pane, and optionally a close button.
  23. // tabPosition: String
  24. // Defines where tabs go relative to tab content.
  25. // "top", "bottom", "left-h", "right-h"
  26. tabPosition: "top",
  27. baseClass: "dijitTabContainer",
  28. // tabStrip: [const] Boolean
  29. // Defines whether the tablist gets an extra class for layouting, putting a border/shading
  30. // around the set of tabs. Not supported by claro theme.
  31. tabStrip: false,
  32. // nested: [const] Boolean
  33. // If true, use styling for a TabContainer nested inside another TabContainer.
  34. // For tundra etc., makes tabs look like links, and hides the outer
  35. // border since the outer TabContainer already has a border.
  36. nested: false,
  37. templateString: template,
  38. postMixInProperties: function(){
  39. // set class name according to tab position, ex: dijitTabContainerTop
  40. this.baseClass += this.tabPosition.charAt(0).toUpperCase() + this.tabPosition.substr(1).replace(/-.*/, "");
  41. this.srcNodeRef && domStyle.set(this.srcNodeRef, "visibility", "hidden");
  42. this.inherited(arguments);
  43. },
  44. buildRendering: function(){
  45. this.inherited(arguments);
  46. // Create the tab list that will have a tab (a.k.a. tab button) for each tab panel
  47. this.tablist = this._makeController(this.tablistNode);
  48. if(!this.doLayout){ domClass.add(this.domNode, "dijitTabContainerNoLayout"); }
  49. if(this.nested){
  50. /* workaround IE's lack of support for "a > b" selectors by
  51. * tagging each node in the template.
  52. */
  53. domClass.add(this.domNode, "dijitTabContainerNested");
  54. domClass.add(this.tablist.containerNode, "dijitTabContainerTabListNested");
  55. domClass.add(this.tablistSpacer, "dijitTabContainerSpacerNested");
  56. domClass.add(this.containerNode, "dijitTabPaneWrapperNested");
  57. }else{
  58. domClass.add(this.domNode, "tabStrip-" + (this.tabStrip ? "enabled" : "disabled"));
  59. }
  60. },
  61. _setupChild: function(/*dijit/_WidgetBase*/ tab){
  62. // Overrides StackContainer._setupChild().
  63. domClass.add(tab.domNode, "dijitTabPane");
  64. this.inherited(arguments);
  65. },
  66. startup: function(){
  67. if(this._started){ return; }
  68. // wire up the tablist and its tabs
  69. this.tablist.startup();
  70. this.inherited(arguments);
  71. },
  72. layout: function(){
  73. // Overrides StackContainer.layout().
  74. // Configure the content pane to take up all the space except for where the tabs are
  75. if(!this._contentBox || typeof(this._contentBox.l) == "undefined"){return;}
  76. var sc = this.selectedChildWidget;
  77. if(this.doLayout){
  78. // position and size the titles and the container node
  79. var titleAlign = this.tabPosition.replace(/-h/, "");
  80. this.tablist.layoutAlign = titleAlign;
  81. var children = [this.tablist, {
  82. domNode: this.tablistSpacer,
  83. layoutAlign: titleAlign
  84. }, {
  85. domNode: this.containerNode,
  86. layoutAlign: "client"
  87. }];
  88. layoutUtils.layoutChildren(this.domNode, this._contentBox, children);
  89. // Compute size to make each of my children.
  90. // children[2] is the margin-box size of this.containerNode, set by layoutChildren() call above
  91. this._containerContentBox = layoutUtils.marginBox2contentBox(this.containerNode, children[2]);
  92. if(sc && sc.resize){
  93. sc.resize(this._containerContentBox);
  94. }
  95. }else{
  96. // just layout the tab controller, so it can position left/right buttons etc.
  97. if(this.tablist.resize){
  98. //make the tabs zero width so that they don't interfere with width calc, then reset
  99. var s = this.tablist.domNode.style;
  100. s.width="0";
  101. var width = domGeometry.getContentBox(this.domNode).w;
  102. s.width="";
  103. this.tablist.resize({w: width});
  104. }
  105. // and call resize() on the selected pane just to tell it that it's been made visible
  106. if(sc && sc.resize){
  107. sc.resize();
  108. }
  109. }
  110. },
  111. destroy: function(){
  112. if(this.tablist){
  113. this.tablist.destroy();
  114. }
  115. this.inherited(arguments);
  116. }
  117. });
  118. });