lib/dijit/TitlePane.js.uncompressed.js

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