]>
Commit | Line | Data |
---|---|---|
1354d172 AD |
1 | require({cache:{ |
2 | 'url:dijit/templates/TitlePane.html':"<div>\n\t<div data-dojo-attach-event=\"onclick:_onTitleClick, onkeypress:_onTitleKey\"\n\t\t\tclass=\"dijitTitlePaneTitle\" data-dojo-attach-point=\"titleBarNode\">\n\t\t<div class=\"dijitTitlePaneTitleFocus\" data-dojo-attach-point=\"focusNode\">\n\t\t\t<img src=\"${_blankGif}\" alt=\"\" data-dojo-attach-point=\"arrowNode\" class=\"dijitArrowNode\" role=\"presentation\"\n\t\t\t/><span data-dojo-attach-point=\"arrowNodeInner\" class=\"dijitArrowNodeInner\"></span\n\t\t\t><span data-dojo-attach-point=\"titleNode\" class=\"dijitTitlePaneTextNode\"></span>\n\t\t</div>\n\t</div>\n\t<div class=\"dijitTitlePaneContentOuter\" data-dojo-attach-point=\"hideNode\" role=\"presentation\">\n\t\t<div class=\"dijitReset\" data-dojo-attach-point=\"wipeNode\" role=\"presentation\">\n\t\t\t<div class=\"dijitTitlePaneContentInner\" data-dojo-attach-point=\"containerNode\" role=\"region\" id=\"${id}_pane\">\n\t\t\t\t<!-- nested divs because wipeIn()/wipeOut() doesn't work right on node w/padding etc. Put padding on inner div. -->\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n"}}); | |
3 | define("dijit/TitlePane", [ | |
4 | "dojo/_base/array", // array.forEach | |
5 | "dojo/_base/declare", // declare | |
6 | "dojo/dom", // dom.setSelectable | |
7 | "dojo/dom-attr", // domAttr.set or get domAttr.remove | |
8 | "dojo/dom-class", // domClass.replace | |
9 | "dojo/dom-geometry", // domGeometry.setMarginBox domGeometry.getMarginBox | |
10 | "dojo/_base/event", // event.stop | |
11 | "dojo/fx", // fxUtils.wipeIn fxUtils.wipeOut | |
12 | "dojo/_base/kernel", // kernel.deprecated | |
13 | "dojo/keys", // keys.DOWN_ARROW keys.ENTER | |
14 | "./_CssStateMixin", | |
15 | "./_TemplatedMixin", | |
16 | "./layout/ContentPane", | |
17 | "dojo/text!./templates/TitlePane.html", | |
18 | "./_base/manager" // defaultDuration | |
19 | ], function(array, declare, dom, domAttr, domClass, domGeometry, event, fxUtils, kernel, keys, | |
20 | _CssStateMixin, _TemplatedMixin, ContentPane, template, manager){ | |
21 | ||
22 | /*===== | |
23 | var _Widget = dijit._Widget; | |
24 | var _TemplatedMixin = dijit._TemplatedMixin; | |
25 | var _CssStateMixin = dijit._CssStateMixin; | |
26 | var ContentPane = dijit.layout.ContentPane; | |
27 | =====*/ | |
28 | ||
29 | // module: | |
30 | // dijit/TitlePane | |
31 | // summary: | |
32 | // A pane with a title on top, that can be expanded or collapsed. | |
33 | ||
34 | ||
35 | return declare("dijit.TitlePane", [ContentPane, _TemplatedMixin, _CssStateMixin], { | |
36 | // summary: | |
37 | // A pane with a title on top, that can be expanded or collapsed. | |
38 | // | |
39 | // description: | |
40 | // An accessible container with a title Heading, and a content | |
41 | // section that slides open and closed. TitlePane is an extension to | |
42 | // `dijit.layout.ContentPane`, providing all the useful content-control aspects from it. | |
43 | // | |
44 | // example: | |
45 | // | // load a TitlePane from remote file: | |
46 | // | var foo = new dijit.TitlePane({ href: "foobar.html", title:"Title" }); | |
47 | // | foo.startup(); | |
48 | // | |
49 | // example: | |
50 | // | <!-- markup href example: --> | |
51 | // | <div data-dojo-type="dijit.TitlePane" data-dojo-props="href: 'foobar.html', title: 'Title'"></div> | |
52 | // | |
53 | // example: | |
54 | // | <!-- markup with inline data --> | |
55 | // | <div data-dojo-type="dijit.TitlePane" title="Title"> | |
56 | // | <p>I am content</p> | |
57 | // | </div> | |
58 | ||
59 | // title: String | |
60 | // Title of the pane | |
61 | title: "", | |
62 | _setTitleAttr: { node: "titleNode", type: "innerHTML" }, // override default where title becomes a hover tooltip | |
63 | ||
64 | // open: Boolean | |
65 | // Whether pane is opened or closed. | |
66 | open: true, | |
67 | ||
68 | // toggleable: Boolean | |
69 | // Whether pane can be opened or closed by clicking the title bar. | |
70 | toggleable: true, | |
71 | ||
72 | // tabIndex: String | |
73 | // Tabindex setting for the title (so users can tab to the title then | |
74 | // use space/enter to open/close the title pane) | |
75 | tabIndex: "0", | |
76 | ||
77 | // duration: Integer | |
78 | // Time in milliseconds to fade in/fade out | |
79 | duration: manager.defaultDuration, | |
80 | ||
81 | // baseClass: [protected] String | |
82 | // The root className to be placed on this widget's domNode. | |
83 | baseClass: "dijitTitlePane", | |
84 | ||
85 | templateString: template, | |
86 | ||
87 | // doLayout: [protected] Boolean | |
88 | // Don't change this parameter from the default value. | |
89 | // This ContentPane parameter doesn't make sense for TitlePane, since TitlePane | |
90 | // is never a child of a layout container, nor should TitlePane try to control | |
91 | // the size of an inner widget. | |
92 | doLayout: false, | |
93 | ||
94 | // Tooltip is defined in _WidgetBase but we need to handle the mapping to DOM here | |
95 | _setTooltipAttr: {node: "focusNode", type: "attribute", attribute: "title"}, // focusNode spans the entire width, titleNode doesn't | |
96 | ||
97 | buildRendering: function(){ | |
98 | this.inherited(arguments); | |
99 | dom.setSelectable(this.titleNode, false); | |
100 | }, | |
101 | ||
102 | postCreate: function(){ | |
103 | this.inherited(arguments); | |
104 | ||
105 | // Hover and focus effect on title bar, except for non-toggleable TitlePanes | |
106 | // This should really be controlled from _setToggleableAttr() but _CssStateMixin | |
107 | // doesn't provide a way to disconnect a previous _trackMouseState() call | |
108 | if(this.toggleable){ | |
109 | this._trackMouseState(this.titleBarNode, "dijitTitlePaneTitle"); | |
110 | } | |
111 | ||
112 | // setup open/close animations | |
113 | var hideNode = this.hideNode, wipeNode = this.wipeNode; | |
114 | this._wipeIn = fxUtils.wipeIn({ | |
115 | node: wipeNode, | |
116 | duration: this.duration, | |
117 | beforeBegin: function(){ | |
118 | hideNode.style.display=""; | |
119 | } | |
120 | }); | |
121 | this._wipeOut = fxUtils.wipeOut({ | |
122 | node: wipeNode, | |
123 | duration: this.duration, | |
124 | onEnd: function(){ | |
125 | hideNode.style.display="none"; | |
126 | } | |
127 | }); | |
128 | }, | |
129 | ||
130 | _setOpenAttr: function(/*Boolean*/ open, /*Boolean*/ animate){ | |
131 | // summary: | |
132 | // Hook to make set("open", boolean) control the open/closed state of the pane. | |
133 | // open: Boolean | |
134 | // True if you want to open the pane, false if you want to close it. | |
135 | ||
136 | array.forEach([this._wipeIn, this._wipeOut], function(animation){ | |
137 | if(animation && animation.status() == "playing"){ | |
138 | animation.stop(); | |
139 | } | |
140 | }); | |
141 | ||
142 | if(animate){ | |
143 | var anim = this[open ? "_wipeIn" : "_wipeOut"]; | |
144 | anim.play(); | |
145 | }else{ | |
146 | this.hideNode.style.display = this.wipeNode.style.display = open ? "" : "none"; | |
147 | } | |
148 | ||
149 | // load content (if this is the first time we are opening the TitlePane | |
150 | // and content is specified as an href, or href was set when hidden) | |
151 | if(this._started){ | |
152 | if(open){ | |
153 | this._onShow(); | |
154 | }else{ | |
155 | this.onHide(); | |
156 | } | |
157 | } | |
158 | ||
159 | this.arrowNodeInner.innerHTML = open ? "-" : "+"; | |
160 | ||
161 | this.containerNode.setAttribute("aria-hidden", open ? "false" : "true"); | |
162 | this.focusNode.setAttribute("aria-pressed", open ? "true" : "false"); | |
163 | ||
164 | this._set("open", open); | |
165 | ||
166 | this._setCss(); | |
167 | }, | |
168 | ||
169 | _setToggleableAttr: function(/*Boolean*/ canToggle){ | |
170 | // summary: | |
171 | // Hook to make set("toggleable", boolean) work. | |
172 | // canToggle: Boolean | |
173 | // True to allow user to open/close pane by clicking title bar. | |
174 | ||
175 | this.focusNode.setAttribute("role", canToggle ? "button" : "heading"); | |
176 | if(canToggle){ | |
177 | // TODO: if canToggle is switched from true to false shouldn't we remove this setting? | |
178 | this.focusNode.setAttribute("aria-controls", this.id+"_pane"); | |
179 | domAttr.set(this.focusNode, "tabIndex", this.tabIndex); | |
180 | }else{ | |
181 | domAttr.remove(this.focusNode, "tabIndex"); | |
182 | } | |
183 | ||
184 | this._set("toggleable", canToggle); | |
185 | ||
186 | this._setCss(); | |
187 | }, | |
188 | ||
189 | _setContentAttr: function(/*String|DomNode|Nodelist*/ content){ | |
190 | // summary: | |
191 | // Hook to make set("content", ...) work. | |
192 | // Typically called when an href is loaded. Our job is to make the animation smooth. | |
193 | ||
194 | if(!this.open || !this._wipeOut || this._wipeOut.status() == "playing"){ | |
195 | // we are currently *closing* the pane (or the pane is closed), so just let that continue | |
196 | this.inherited(arguments); | |
197 | }else{ | |
198 | if(this._wipeIn && this._wipeIn.status() == "playing"){ | |
199 | this._wipeIn.stop(); | |
200 | } | |
201 | ||
202 | // freeze container at current height so that adding new content doesn't make it jump | |
203 | domGeometry.setMarginBox(this.wipeNode, { h: domGeometry.getMarginBox(this.wipeNode).h }); | |
204 | ||
205 | // add the new content (erasing the old content, if any) | |
206 | this.inherited(arguments); | |
207 | ||
208 | // call _wipeIn.play() to animate from current height to new height | |
209 | if(this._wipeIn){ | |
210 | this._wipeIn.play(); | |
211 | }else{ | |
212 | this.hideNode.style.display = ""; | |
213 | } | |
214 | } | |
215 | }, | |
216 | ||
217 | toggle: function(){ | |
218 | // summary: | |
219 | // Switches between opened and closed state | |
220 | // tags: | |
221 | // private | |
222 | ||
223 | this._setOpenAttr(!this.open, true); | |
224 | }, | |
225 | ||
226 | _setCss: function(){ | |
227 | // summary: | |
228 | // Set the open/close css state for the TitlePane | |
229 | // tags: | |
230 | // private | |
231 | ||
232 | var node = this.titleBarNode || this.focusNode; | |
233 | var oldCls = this._titleBarClass; | |
234 | this._titleBarClass = "dijit" + (this.toggleable ? "" : "Fixed") + (this.open ? "Open" : "Closed"); | |
235 | domClass.replace(node, this._titleBarClass, oldCls || ""); | |
236 | ||
237 | this.arrowNodeInner.innerHTML = this.open ? "-" : "+"; | |
238 | }, | |
239 | ||
240 | _onTitleKey: function(/*Event*/ e){ | |
241 | // summary: | |
242 | // Handler for when user hits a key | |
243 | // tags: | |
244 | // private | |
245 | ||
246 | if(e.charOrCode == keys.ENTER || e.charOrCode == ' '){ | |
247 | if(this.toggleable){ | |
248 | this.toggle(); | |
249 | } | |
250 | event.stop(e); | |
251 | }else if(e.charOrCode == keys.DOWN_ARROW && this.open){ | |
252 | this.containerNode.focus(); | |
253 | e.preventDefault(); | |
254 | } | |
255 | }, | |
256 | ||
257 | _onTitleClick: function(){ | |
258 | // summary: | |
259 | // Handler when user clicks the title bar | |
260 | // tags: | |
261 | // private | |
262 | if(this.toggleable){ | |
263 | this.toggle(); | |
264 | } | |
265 | }, | |
266 | ||
267 | setTitle: function(/*String*/ title){ | |
268 | // summary: | |
269 | // Deprecated. Use set('title', ...) instead. | |
270 | // tags: | |
271 | // deprecated | |
272 | kernel.deprecated("dijit.TitlePane.setTitle() is deprecated. Use set('title', ...) instead.", "", "2.0"); | |
273 | this.set("title", title); | |
274 | } | |
275 | }); | |
276 | ||
277 | }); |