[483] | 1 | define([ |
---|
| 2 | "dojo/_base/declare", // declare |
---|
| 3 | "dojo/dom", // dom.setSelectable |
---|
| 4 | "dojo/dom-attr", // domAttr.attr |
---|
| 5 | "dojo/dom-class", // domClass.toggle |
---|
| 6 | "dojo/has", |
---|
| 7 | "dojo/i18n", // i18n.getLocalization |
---|
| 8 | "dojo/_base/lang", // lang.hitch lang.trim |
---|
| 9 | "./StackController", |
---|
| 10 | "../registry", |
---|
| 11 | "../Menu", |
---|
| 12 | "../MenuItem", |
---|
| 13 | "dojo/text!./templates/_TabButton.html", |
---|
| 14 | "dojo/i18n!../nls/common" |
---|
| 15 | ], function(declare, dom, domAttr, domClass, has, i18n, lang, StackController, registry, Menu, MenuItem, template){ |
---|
| 16 | |
---|
| 17 | // module: |
---|
| 18 | // dijit/layout/TabController |
---|
| 19 | |
---|
| 20 | var TabButton = declare("dijit.layout._TabButton" + (has("dojo-bidi") ? "_NoBidi" : ""), StackController.StackButton, { |
---|
| 21 | // summary: |
---|
| 22 | // A tab (the thing you click to select a pane). |
---|
| 23 | // description: |
---|
| 24 | // Contains the title of the pane, and optionally a close-button to destroy the pane. |
---|
| 25 | // This is an internal widget and should not be instantiated directly. |
---|
| 26 | // tags: |
---|
| 27 | // private |
---|
| 28 | |
---|
| 29 | // baseClass: String |
---|
| 30 | // The CSS class applied to the domNode. |
---|
| 31 | baseClass: "dijitTab", |
---|
| 32 | |
---|
| 33 | // Apply dijitTabCloseButtonHover when close button is hovered |
---|
| 34 | cssStateNodes: { |
---|
| 35 | closeNode: "dijitTabCloseButton" |
---|
| 36 | }, |
---|
| 37 | |
---|
| 38 | templateString: template, |
---|
| 39 | |
---|
| 40 | // Button superclass maps name to a this.valueNode, but we don't have a this.valueNode attach point |
---|
| 41 | _setNameAttr: "focusNode", |
---|
| 42 | |
---|
| 43 | // Override _FormWidget.scrollOnFocus. |
---|
| 44 | // Don't scroll the whole tab container into view when the button is focused. |
---|
| 45 | scrollOnFocus: false, |
---|
| 46 | |
---|
| 47 | buildRendering: function(){ |
---|
| 48 | this.inherited(arguments); |
---|
| 49 | |
---|
| 50 | dom.setSelectable(this.containerNode, false); |
---|
| 51 | }, |
---|
| 52 | |
---|
| 53 | startup: function(){ |
---|
| 54 | this.inherited(arguments); |
---|
| 55 | var n = this.domNode; |
---|
| 56 | |
---|
| 57 | // Required to give IE6 a kick, as it initially hides the |
---|
| 58 | // tabs until they are focused on. |
---|
| 59 | this.defer(function(){ |
---|
| 60 | n.className = n.className; |
---|
| 61 | }, 1); |
---|
| 62 | }, |
---|
| 63 | |
---|
| 64 | _setCloseButtonAttr: function(/*Boolean*/ disp){ |
---|
| 65 | // summary: |
---|
| 66 | // Hide/show close button |
---|
| 67 | this._set("closeButton", disp); |
---|
| 68 | domClass.toggle(this.domNode, "dijitClosable", disp); |
---|
| 69 | this.closeNode.style.display = disp ? "" : "none"; |
---|
| 70 | if(disp){ |
---|
| 71 | var _nlsResources = i18n.getLocalization("dijit", "common"); |
---|
| 72 | if(this.closeNode){ |
---|
| 73 | domAttr.set(this.closeNode, "title", _nlsResources.itemClose); |
---|
| 74 | } |
---|
| 75 | } |
---|
| 76 | }, |
---|
| 77 | |
---|
| 78 | _setDisabledAttr: function(/*Boolean*/ disabled){ |
---|
| 79 | // summary: |
---|
| 80 | // Make tab selected/unselectable |
---|
| 81 | |
---|
| 82 | this.inherited(arguments); |
---|
| 83 | |
---|
| 84 | // Don't show tooltip for close button when tab is disabled |
---|
| 85 | if(this.closeNode){ |
---|
| 86 | if(disabled){ |
---|
| 87 | domAttr.remove(this.closeNode, "title"); |
---|
| 88 | }else{ |
---|
| 89 | var _nlsResources = i18n.getLocalization("dijit", "common"); |
---|
| 90 | domAttr.set(this.closeNode, "title", _nlsResources.itemClose); |
---|
| 91 | } |
---|
| 92 | } |
---|
| 93 | }, |
---|
| 94 | |
---|
| 95 | _setLabelAttr: function(/*String*/ content){ |
---|
| 96 | // summary: |
---|
| 97 | // Hook for set('label', ...) to work. |
---|
| 98 | // description: |
---|
| 99 | // takes an HTML string. |
---|
| 100 | // Inherited ToggleButton implementation will Set the label (text) of the button; |
---|
| 101 | // Need to set the alt attribute of icon on tab buttons if no label displayed |
---|
| 102 | this.inherited(arguments); |
---|
| 103 | if(!this.showLabel && !this.params.title){ |
---|
| 104 | this.iconNode.alt = lang.trim(this.containerNode.innerText || this.containerNode.textContent || ''); |
---|
| 105 | } |
---|
| 106 | } |
---|
| 107 | }); |
---|
| 108 | |
---|
| 109 | if(has("dojo-bidi")){ |
---|
| 110 | TabButton = declare("dijit.layout._TabButton", TabButton, { |
---|
| 111 | _setLabelAttr: function(/*String*/ content){ |
---|
| 112 | this.inherited(arguments); |
---|
| 113 | this.applyTextDir(this.iconNode, this.iconNode.alt); |
---|
| 114 | } |
---|
| 115 | }); |
---|
| 116 | } |
---|
| 117 | |
---|
| 118 | var TabController = declare("dijit.layout.TabController", StackController, { |
---|
| 119 | // summary: |
---|
| 120 | // Set of tabs (the things with titles and a close button, that you click to show a tab panel). |
---|
| 121 | // Used internally by `dijit/layout/TabContainer`. |
---|
| 122 | // description: |
---|
| 123 | // Lets the user select the currently shown pane in a TabContainer or StackContainer. |
---|
| 124 | // TabController also monitors the TabContainer, and whenever a pane is |
---|
| 125 | // added or deleted updates itself accordingly. |
---|
| 126 | // tags: |
---|
| 127 | // private |
---|
| 128 | |
---|
| 129 | baseClass: "dijitTabController", |
---|
| 130 | |
---|
| 131 | templateString: "<div role='tablist' data-dojo-attach-event='onkeydown:onkeydown'></div>", |
---|
| 132 | |
---|
| 133 | // tabPosition: String |
---|
| 134 | // Defines where tabs go relative to the content. |
---|
| 135 | // "top", "bottom", "left-h", "right-h" |
---|
| 136 | tabPosition: "top", |
---|
| 137 | |
---|
| 138 | // buttonWidget: Constructor |
---|
| 139 | // The tab widget to create to correspond to each page |
---|
| 140 | buttonWidget: TabButton, |
---|
| 141 | |
---|
| 142 | // buttonWidgetCloseClass: String |
---|
| 143 | // Class of [x] close icon, used by event delegation code to tell when close button was clicked |
---|
| 144 | buttonWidgetCloseClass: "dijitTabCloseButton", |
---|
| 145 | |
---|
| 146 | postCreate: function(){ |
---|
| 147 | this.inherited(arguments); |
---|
| 148 | |
---|
| 149 | // Setup a close menu to be shared between all the closable tabs (excluding disabled tabs) |
---|
| 150 | var closeMenu = new Menu({ |
---|
| 151 | id: this.id + "_Menu", |
---|
| 152 | ownerDocument: this.ownerDocument, |
---|
| 153 | dir: this.dir, |
---|
| 154 | lang: this.lang, |
---|
| 155 | textDir: this.textDir, |
---|
| 156 | targetNodeIds: [this.domNode], |
---|
| 157 | selector: function(node){ |
---|
| 158 | return domClass.contains(node, "dijitClosable") && !domClass.contains(node, "dijitTabDisabled"); |
---|
| 159 | } |
---|
| 160 | }); |
---|
| 161 | this.own(closeMenu); |
---|
| 162 | |
---|
| 163 | var _nlsResources = i18n.getLocalization("dijit", "common"), |
---|
| 164 | controller = this; |
---|
| 165 | closeMenu.addChild(new MenuItem({ |
---|
| 166 | label: _nlsResources.itemClose, |
---|
| 167 | ownerDocument: this.ownerDocument, |
---|
| 168 | dir: this.dir, |
---|
| 169 | lang: this.lang, |
---|
| 170 | textDir: this.textDir, |
---|
| 171 | onClick: function(evt){ |
---|
| 172 | var button = registry.byNode(this.getParent().currentTarget); |
---|
| 173 | controller.onCloseButtonClick(button.page); |
---|
| 174 | } |
---|
| 175 | })); |
---|
| 176 | } |
---|
| 177 | }); |
---|
| 178 | |
---|
| 179 | TabController.TabButton = TabButton; // for monkey patching |
---|
| 180 | |
---|
| 181 | return TabController; |
---|
| 182 | }); |
---|