]>
git.wh0rd.org - tt-rss.git/blob - lib/dijit/TitlePane.js.uncompressed.js
2 'url:dijit/templates/TitlePane.html' : "<div> \n\t <div data-dojo-attach-event= \" onclick:_onTitleClick, onkeypress:_onTitleKey \"\n\t\t\t class= \" 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
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
){
23 var _Widget = dijit._Widget;
24 var _TemplatedMixin = dijit._TemplatedMixin;
25 var _CssStateMixin = dijit._CssStateMixin;
26 var ContentPane = dijit.layout.ContentPane;
32 // A pane with a title on top, that can be expanded or collapsed.
35 return declare ( "dijit.TitlePane" , [ ContentPane
, _TemplatedMixin
, _CssStateMixin
], {
37 // A pane with a title on top, that can be expanded or collapsed.
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.
45 // | // load a TitlePane from remote file:
46 // | var foo = new dijit.TitlePane({ href: "foobar.html", title:"Title" });
50 // | <!-- markup href example: -->
51 // | <div data-dojo-type="dijit.TitlePane" data-dojo-props="href: 'foobar.html', title: 'Title'"></div>
54 // | <!-- markup with inline data -->
55 // | <div data-dojo-type="dijit.TitlePane" title="Title">
56 // | <p>I am content</p>
62 _setTitleAttr
: { node
: "titleNode" , type
: "innerHTML" }, // override default where title becomes a hover tooltip
65 // Whether pane is opened or closed.
68 // toggleable: Boolean
69 // Whether pane can be opened or closed by clicking the title bar.
73 // Tabindex setting for the title (so users can tab to the title then
74 // use space/enter to open/close the title pane)
78 // Time in milliseconds to fade in/fade out
79 duration
: manager
. defaultDuration
,
81 // baseClass: [protected] String
82 // The root className to be placed on this widget's domNode.
83 baseClass
: "dijitTitlePane" ,
85 templateString
: template
,
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.
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
97 buildRendering : function (){
98 this . inherited ( arguments
);
99 dom
. setSelectable ( this . titleNode
, false );
102 postCreate : function (){
103 this . inherited ( arguments
);
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
109 this . _trackMouseState ( this . titleBarNode
, "dijitTitlePaneTitle" );
112 // setup open/close animations
113 var hideNode
= this . hideNode
, wipeNode
= this . wipeNode
;
114 this . _wipeIn
= fxUtils
. wipeIn ({
116 duration
: this . duration
,
117 beforeBegin : function (){
118 hideNode
. style
. display
= "" ;
121 this . _wipeOut
= fxUtils
. wipeOut ({
123 duration
: this . duration
,
125 hideNode
. style
. display
= "none" ;
130 _setOpenAttr : function ( /*Boolean*/ open
, /*Boolean*/ animate
){
132 // Hook to make set("open", boolean) control the open/closed state of the pane.
134 // True if you want to open the pane, false if you want to close it.
136 array
. forEach ([ this . _wipeIn
, this . _wipeOut
], function ( animation
){
137 if ( animation
&& animation
. status () == "playing" ){
143 var anim
= this [ open
? "_wipeIn" : "_wipeOut" ];
146 this . hideNode
. style
. display
= this . wipeNode
. style
. display
= open
? "" : "none" ;
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)
159 this . arrowNodeInner
. innerHTML
= open
? "-" : "+" ;
161 this . containerNode
. setAttribute ( "aria-hidden" , open
? "false" : "true" );
162 this . focusNode
. setAttribute ( "aria-pressed" , open
? "true" : "false" );
164 this . _set ( "open" , open
);
169 _setToggleableAttr : function ( /*Boolean*/ canToggle
){
171 // Hook to make set("toggleable", boolean) work.
172 // canToggle: Boolean
173 // True to allow user to open/close pane by clicking title bar.
175 this . focusNode
. setAttribute ( "role" , canToggle
? "button" : "heading" );
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
);
181 domAttr
. remove ( this . focusNode
, "tabIndex" );
184 this . _set ( "toggleable" , canToggle
);
189 _setContentAttr : function ( /*String|DomNode|Nodelist*/ content
){
191 // Hook to make set("content", ...) work.
192 // Typically called when an href is loaded. Our job is to make the animation smooth.
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
);
198 if ( this . _wipeIn
&& this . _wipeIn
. status () == "playing" ){
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
});
205 // add the new content (erasing the old content, if any)
206 this . inherited ( arguments
);
208 // call _wipeIn.play() to animate from current height to new height
212 this . hideNode
. style
. display
= "" ;
219 // Switches between opened and closed state
223 this . _setOpenAttr (! this . open
, true );
228 // Set the open/close css state for the TitlePane
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
|| "" );
237 this . arrowNodeInner
. innerHTML
= this . open
? "-" : "+" ;
240 _onTitleKey : function ( /*Event*/ e
){
242 // Handler for when user hits a key
246 if ( e
. charOrCode
== keys
. ENTER
|| e
. charOrCode
== ' ' ){
251 } else if ( e
. charOrCode
== keys
. DOWN_ARROW
&& this . open
){
252 this . containerNode
. focus ();
257 _onTitleClick : function (){
259 // Handler when user clicks the title bar
267 setTitle : function ( /*String*/ title
){
269 // Deprecated. Use set('title', ...) instead.
272 kernel
. deprecated ( "dijit.TitlePane.setTitle() is deprecated. Use set('title', ...) instead." , "" , "2.0" );
273 this . set ( "title" , title
);