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