if (!dojo._hasResource["dijit.TitlePane"]) { // _hasResource checks added by
// build. Do not use
// _hasResource directly in your
// code.
dojo._hasResource["dijit.TitlePane"] = true;
dojo.provide("dijit.TitlePane");
dojo.require("dojo.fx");
dojo.require("dijit._Templated");
dojo.require("dijit.layout.ContentPane");
dojo.declare("dijit.TitlePane",
[dijit.layout.ContentPane, dijit._Templated], {
// summary
// A pane with a title on top, that can be opened or collapsed.
//
// title: String
// Title of the pane
title : "",
// open: Boolean
// Whether pane is opened or closed.
open : true,
// duration: Integer
// Time in milliseconds to fade in/fade out
duration : 250,
// baseClass: String
// the root className to use for the various states of this
// widget
baseClass : "dijitTitlePane",
templateString : "
\n\t
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n
\n",
postCreate : function() {
this.setTitle(this.title);
if (!this.open) {
this.hideNode.style.display = this.wipeNode.style.display = "none";
}
this._setCss();
dojo.setSelectable(this.titleNode, false);
this.inherited("postCreate", arguments);
dijit.setWaiState(this.containerNode, "labelledby",
this.titleNode.id);
dijit.setWaiState(this.focusNode, "haspopup", "true");
// setup open/close animations
var hideNode = this.hideNode, wipeNode = this.wipeNode;
this._wipeIn = dojo.fx.wipeIn({
node : this.wipeNode,
duration : this.duration,
beforeBegin : function() {
hideNode.style.display = "";
}
});
this._wipeOut = dojo.fx.wipeOut({
node : this.wipeNode,
duration : this.duration,
onEnd : function() {
hideNode.style.display = "none";
}
});
},
setContent : function(content) {
// summary
// Typically called when an href is loaded. Our job is to
// make the animation smooth
if (this._wipeOut.status() == "playing") {
// we are currently *closing* the pane, so just let that
// continue
this.inherited("setContent", arguments);
} else {
if (this._wipeIn.status() == "playing") {
this._wipeIn.stop();
}
// freeze container at current height so that adding new
// content doesn't make it jump
dojo.marginBox(this.wipeNode, {
h : dojo.marginBox(this.wipeNode).h
});
// add the new content (erasing the old content, if any)
this.inherited("setContent", arguments);
// call _wipeIn.play() to animate from current height to
// new height
this._wipeIn.play();
}
},
toggle : function() {
// summary: switches between opened and closed state
dojo.forEach([this._wipeIn, this._wipeOut], function(
animation) {
if (animation.status() == "playing") {
animation.stop();
}
});
this[this.open ? "_wipeOut" : "_wipeIn"].play();
this.open = !this.open;
// load content (if this is the first time we are opening
// the TitlePane
// and content is specified as an href, or we have setHref
// when hidden)
this._loadCheck();
this._setCss();
},
_setCss : function() {
// summary: set the open/close css state for the TitlePane
var classes = ["dijitClosed", "dijitOpen"];
var boolIndex = this.open;
dojo.removeClass(this.focusNode, classes[!boolIndex + 0]);
this.focusNode.className += " " + classes[boolIndex + 0];
// provide a character based indicator for images-off mode
this.arrowNodeInner.innerHTML = this.open ? "-" : "+";
},
_onTitleKey : function(/* Event */e) {
// summary: callback when user hits a key
if (e.keyCode == dojo.keys.ENTER
|| e.charCode == dojo.keys.SPACE) {
this.toggle();
} else if (e.keyCode == dojo.keys.DOWN_ARROW) {
if (this.open) {
this.containerNode.focus();
e.preventDefault();
}
}
},
_handleFocus : function(/* Event */e) {
// summary: handle blur and focus for this widget
// add/removeClass is safe to call without hasClass in this
// case
dojo[(e.type == "focus" ? "addClass" : "removeClass")](
this.focusNode, this.baseClass + "Focused");
},
setTitle : function(/* String */title) {
// summary: sets the text of the title
this.titleNode.innerHTML = title;
}
});
}