git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/TitlePane.js

   1 if(!dojo._hasResource["dijit.TitlePane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
   2 dojo._hasResource["dijit.TitlePane"] = true;
   3 dojo.provide("dijit.TitlePane");
   4
   5 dojo.require("dojo.fx");
   6
   7 dojo.require("dijit._Templated");
   8 dojo.require("dijit.layout.ContentPane");
   9
  10 dojo.declare(
  11         "dijit.TitlePane",
  12         [dijit.layout.ContentPane, dijit._Templated],
  13 {
  14         // summary: A pane with a title on top, that can be opened or collapsed.
  15         //
  16         // description: An accessible container with a Title Heading, and a content
  17         //      section that slides open and closed. TitlePane is an extension to
  18         //      ContentPane, providing all the usesful content-control aspects from.
  19         //
  20         // example:
  21         // |    // load a TitlePane from remote file:
  22         // |    var foo = new dijit.TitlePane({ href: "foobar.html", title:"Title" });
  23         // |    foo.startup();
  24         //
  25         // example:
  26         // |    <!-- markup href example: -->
  27         // |    <div dojoType="dijit.TitlePane" href="foobar.html" title="Title"></div>
  28         //
  29         // example:
  30         // |    <!-- markup with inline data -->
  31         // |    <div dojoType="dijit.TitlePane" title="Title">
  32         // |            <p>I am content</p>
  33         // |    </div>
  34         //
  35         // title: String
  36         //              Title of the pane
  37         title: "",
  38
  39         // open: Boolean
  40         //              Whether pane is opened or closed.
  41         open: true,
  42
  43         // duration: Integer
  44         //              Time in milliseconds to fade in/fade out
  45         duration: 250,
  46
  47         // baseClass: String
  48         //      The root className to use for the various states of this widget
  49         baseClass: "dijitTitlePane",
  50
  51         templateString:"<div class=\"${baseClass}\">\n\t<div dojoAttachEvent=\"onclick:toggle,onkeypress: _onTitleKey,onfocus:_handleFocus,onblur:_handleFocus\" tabindex=\"0\"\n\t\t\twaiRole=\"button\" class=\"dijitTitlePaneTitle\" dojoAttachPoint=\"titleBarNode,focusNode\">\n\t\t<div dojoAttachPoint=\"arrowNode\" class=\"dijitInline dijitArrowNode\"><span dojoAttachPoint=\"arrowNodeInner\" class=\"dijitArrowNodeInner\"></span></div>\n\t\t<div dojoAttachPoint=\"titleNode\" class=\"dijitTitlePaneTextNode\"></div>\n\t</div>\n\t<div class=\"dijitTitlePaneContentOuter\" dojoAttachPoint=\"hideNode\">\n\t\t<div class=\"dijitReset\" dojoAttachPoint=\"wipeNode\">\n\t\t\t<div class=\"dijitTitlePaneContentInner\" dojoAttachPoint=\"containerNode\" waiRole=\"region\" tabindex=\"-1\">\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",
  52
  53         postCreate: function(){
  54                 this.setTitle(this.title);
  55                 if(!this.open){
  56                         this.hideNode.style.display = this.wipeNode.style.display = "none";
  57                 }
  58                 this._setCss();
  59                 dojo.setSelectable(this.titleNode, false);
  60                 this.inherited(arguments);
  61                 dijit.setWaiState(this.containerNode, "labelledby", this.titleNode.id);
  62                 dijit.setWaiState(this.focusNode, "haspopup", "true");
  63
  64                 // setup open/close animations
  65                 var hideNode = this.hideNode, wipeNode = this.wipeNode;
  66                 this._wipeIn = dojo.fx.wipeIn({
  67                         node: this.wipeNode,
  68                         duration: this.duration,
  69                         beforeBegin: function(){
  70                                 hideNode.style.display="";
  71                         }
  72                 });
  73                 this._wipeOut = dojo.fx.wipeOut({
  74                         node: this.wipeNode,
  75                         duration: this.duration,
  76                         onEnd: function(){
  77                                 hideNode.style.display="none";
  78                         }
  79                 });
  80         },
  81
  82         setContent: function(content){
  83                 // summary:
  84                 //              Typically called when an href is loaded.  Our job is to make the animation smooth
  85                 if(!this.open || this._wipeOut.status() == "playing"){
  86                         // we are currently *closing* the pane (or the pane is closed), so just let that continue
  87                         this.inherited(arguments);
  88                 }else{
  89                         if(this._wipeIn.status() == "playing"){
  90                                 this._wipeIn.stop();
  91                         }
  92
  93                         // freeze container at current height so that adding new content doesn't make it jump
  94                         dojo.marginBox(this.wipeNode, { h: dojo.marginBox(this.wipeNode).h });
  95
  96                         // add the new content (erasing the old content, if any)
  97                         this.inherited(arguments);
  98
  99                         // call _wipeIn.play() to animate from current height to new height
 100                         this._wipeIn.play();
 101                 }
 102         },
 103
 104         toggle: function(){
 105                 // summary: switches between opened and closed state
 106                 dojo.forEach([this._wipeIn, this._wipeOut], function(animation){
 107                         if(animation.status() == "playing"){
 108                                 animation.stop();
 109                         }
 110                 });
 111
 112                 this[this.open ? "_wipeOut" : "_wipeIn"].play();
 113                 this.open =! this.open;
 114
 115                 // load content (if this is the first time we are opening the TitlePane
 116                 // and content is specified as an href, or we have setHref when hidden)
 117                 this._loadCheck();
 118
 119                 this._setCss();
 120         },
 121
 122         _setCss: function(){
 123                 // summary: set the open/close css state for the TitlePane
 124                 var classes = ["dijitClosed", "dijitOpen"];
 125                 var boolIndex = this.open;
 126                 var node = this.titleBarNode || this.focusNode
 127                 dojo.removeClass(node, classes[!boolIndex+0]);
 128                 node.className += " " + classes[boolIndex+0];
 129
 130                 // provide a character based indicator for images-off mode
 131                 this.arrowNodeInner.innerHTML = this.open ? "-" : "+";
 132         },
 133
 134         _onTitleKey: function(/*Event*/ e){
 135                 // summary: callback when user hits a key
 136                 if(e.keyCode == dojo.keys.ENTER || e.charCode == dojo.keys.SPACE){
 137                         this.toggle();
 138                 }else if(e.keyCode == dojo.keys.DOWN_ARROW && this.open){
 139                         this.containerNode.focus();
 140                         e.preventDefault();
 141                 }
 142         },
 143
 144         _handleFocus: function(/*Event*/ e){
 145                 // summary: handle blur and focus for this widget
 146
 147                 // add/removeClass is safe to call without hasClass in this case
 148                 dojo[(e.type == "focus" ? "addClass" : "removeClass")](this.focusNode, this.baseClass + "Focused");
 149         },
 150
 151         setTitle: function(/*String*/ title){
 152                 // summary: sets the text of the title
 153                 this.titleNode.innerHTML = title;
 154         }
 155 });
 156
 157 }