lib/dijit/layout/TabController.js.uncompressed.js

   1 require({cache:{
   2 'url:dijit/layout/templates/_TabButton.html':"<div role=\"presentation\" data-dojo-attach-point=\"titleNode\" data-dojo-attach-event='onclick:onClick'>\n    <div role=\"presentation\" class='dijitTabInnerDiv' data-dojo-attach-point='innerDiv'>\n        <div role=\"presentation\" class='dijitTabContent' data-dojo-attach-point='tabContent'>\n        \t<div role=\"presentation\" data-dojo-attach-point='focusNode'>\n\t\t        <img src=\"${_blankGif}\" alt=\"\" class=\"dijitIcon dijitTabButtonIcon\" data-dojo-attach-point='iconNode' />\n\t\t        <span data-dojo-attach-point='containerNode' class='tabLabel'></span>\n\t\t        <span class=\"dijitInline dijitTabCloseButton dijitTabCloseIcon\" data-dojo-attach-point='closeNode'\n\t\t        \t\tdata-dojo-attach-event='onclick: onClickCloseButton' role=\"presentation\">\n\t\t            <span data-dojo-attach-point='closeText' class='dijitTabCloseText'>[x]</span\n\t\t        ></span>\n\t\t\t</div>\n        </div>\n    </div>\n</div>\n"}});
   3 define("dijit/layout/TabController", [
   4         "dojo/_base/declare", // declare
   5         "dojo/dom", // dom.setSelectable
   6         "dojo/dom-attr", // domAttr.attr
   7         "dojo/dom-class", // domClass.toggle
   8         "dojo/i18n", // i18n.getLocalization
   9         "dojo/_base/lang", // lang.hitch lang.trim
  10         "./StackController",
  11         "../Menu",
  12         "../MenuItem",
  13         "dojo/text!./templates/_TabButton.html",
  14         "dojo/i18n!../nls/common"
  15 ], function(declare, dom, domAttr, domClass, i18n, lang, StackController, Menu, MenuItem, template){
  16
  17 /*=====
  18         var StackController = dijit.layout.StackController;
  19         var Menu = dijit.Menu;
  20         var MenuItem = dijit.MenuItem;
  21 =====*/
  22
  23         // module:
  24         //              dijit/layout/TabController
  25         // summary:
  26         //              Set of tabs (the things with titles and a close button, that you click to show a tab panel).
  27         //              Used internally by `dijit.layout.TabContainer`.
  28
  29         var TabButton = declare("dijit.layout._TabButton", StackController.StackButton, {
  30                 // summary:
  31                 //              A tab (the thing you click to select a pane).
  32                 // description:
  33                 //              Contains the title of the pane, and optionally a close-button to destroy the pane.
  34                 //              This is an internal widget and should not be instantiated directly.
  35                 // tags:
  36                 //              private
  37
  38                 // baseClass: String
  39                 //              The CSS class applied to the domNode.
  40                 baseClass: "dijitTab",
  41
  42                 // Apply dijitTabCloseButtonHover when close button is hovered
  43                 cssStateNodes: {
  44                         closeNode: "dijitTabCloseButton"
  45                 },
  46
  47                 templateString: template,
  48
  49                 // Override _FormWidget.scrollOnFocus.
  50                 // Don't scroll the whole tab container into view when the button is focused.
  51                 scrollOnFocus: false,
  52
  53                 buildRendering: function(){
  54                         this.inherited(arguments);
  55
  56                         dom.setSelectable(this.containerNode, false);
  57                 },
  58
  59                 startup: function(){
  60                         this.inherited(arguments);
  61                         var n = this.domNode;
  62
  63                         // Required to give IE6 a kick, as it initially hides the
  64                         // tabs until they are focused on.
  65                         setTimeout(function(){
  66                                 n.className = n.className;
  67                         }, 1);
  68                 },
  69
  70                 _setCloseButtonAttr: function(/*Boolean*/ disp){
  71                         // summary:
  72                         //              Hide/show close button
  73                         this._set("closeButton", disp);
  74                         domClass.toggle(this.innerDiv, "dijitClosable", disp);
  75                         this.closeNode.style.display = disp ? "" : "none";
  76                         if(disp){
  77                                 var _nlsResources = i18n.getLocalization("dijit", "common");
  78                                 if(this.closeNode){
  79                                         domAttr.set(this.closeNode,"title", _nlsResources.itemClose);
  80                                 }
  81                                 // add context menu onto title button
  82                                 this._closeMenu = new Menu({
  83                                         id: this.id+"_Menu",
  84                                         dir: this.dir,
  85                                         lang: this.lang,
  86                                         textDir: this.textDir,
  87                                         targetNodeIds: [this.domNode]
  88                                 });
  89
  90                                 this._closeMenu.addChild(new MenuItem({
  91                                         label: _nlsResources.itemClose,
  92                                         dir: this.dir,
  93                                         lang: this.lang,
  94                                         textDir: this.textDir,
  95                                         onClick: lang.hitch(this, "onClickCloseButton")
  96                                 }));
  97                         }else{
  98                                 if(this._closeMenu){
  99                                         this._closeMenu.destroyRecursive();
 100                                         delete this._closeMenu;
 101                                 }
 102                         }
 103                 },
 104                 _setLabelAttr: function(/*String*/ content){
 105                         // summary:
 106                         //              Hook for set('label', ...) to work.
 107                         // description:
 108                         //              takes an HTML string.
 109                         //              Inherited ToggleButton implementation will Set the label (text) of the button;
 110                         //              Need to set the alt attribute of icon on tab buttons if no label displayed
 111                         this.inherited(arguments);
 112                         if(!this.showLabel && !this.params.title){
 113                                 this.iconNode.alt = lang.trim(this.containerNode.innerText || this.containerNode.textContent || '');
 114                         }
 115                 },
 116
 117                 destroy: function(){
 118                         if(this._closeMenu){
 119                                 this._closeMenu.destroyRecursive();
 120                                 delete this._closeMenu;
 121                         }
 122                         this.inherited(arguments);
 123                 }
 124         });
 125
 126         var TabController = declare("dijit.layout.TabController", StackController, {
 127                 // summary:
 128                 //              Set of tabs (the things with titles and a close button, that you click to show a tab panel).
 129                 //              Used internally by `dijit.layout.TabContainer`.
 130                 // description:
 131                 //              Lets the user select the currently shown pane in a TabContainer or StackContainer.
 132                 //              TabController also monitors the TabContainer, and whenever a pane is
 133                 //              added or deleted updates itself accordingly.
 134                 // tags:
 135                 //              private
 136
 137                 baseClass: "dijitTabController",
 138
 139                 templateString: "<div role='tablist' data-dojo-attach-event='onkeypress:onkeypress'></div>",
 140
 141                 // tabPosition: String
 142                 //              Defines where tabs go relative to the content.
 143                 //              "top", "bottom", "left-h", "right-h"
 144                 tabPosition: "top",
 145
 146                 // buttonWidget: Constructor
 147                 //              The tab widget to create to correspond to each page
 148                 buttonWidget: TabButton,
 149
 150                 _rectifyRtlTabList: function(){
 151                         // summary:
 152                         //              For left/right TabContainer when page is RTL mode, rectify the width of all tabs to be equal, otherwise the tab widths are different in IE
 153
 154                         if(0 >= this.tabPosition.indexOf('-h')){ return; }
 155                         if(!this.pane2button){ return; }
 156
 157                         var maxWidth = 0;
 158                         for(var pane in this.pane2button){
 159                                 var ow = this.pane2button[pane].innerDiv.scrollWidth;
 160                                 maxWidth = Math.max(maxWidth, ow);
 161                         }
 162                         //unify the length of all the tabs
 163                         for(pane in this.pane2button){
 164                                 this.pane2button[pane].innerDiv.style.width = maxWidth + 'px';
 165                         }
 166                 }
 167         });
 168
 169         TabController.TabButton = TabButton;    // for monkey patching
 170
 171         return TabController;
 172 });