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