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 | }); |
---|