diff options
Diffstat (limited to 'includes/js/dijit/TitlePane.js')
-rw-r--r-- | includes/js/dijit/TitlePane.js | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/includes/js/dijit/TitlePane.js b/includes/js/dijit/TitlePane.js new file mode 100644 index 0000000..8e6368c --- /dev/null +++ b/includes/js/dijit/TitlePane.js @@ -0,0 +1,157 @@ +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. + // + // description: An accessible container with a Title Heading, and a content + // section that slides open and closed. TitlePane is an extension to + // ContentPane, providing all the usesful content-control aspects from. + // + // example: + // | // load a TitlePane from remote file: + // | var foo = new dijit.TitlePane({ href: "foobar.html", title:"Title" }); + // | foo.startup(); + // + // example: + // | <!-- markup href example: --> + // | <div dojoType="dijit.TitlePane" href="foobar.html" title="Title"></div> + // + // example: + // | <!-- markup with inline data --> + // | <div dojoType="dijit.TitlePane" title="Title"> + // | <p>I am content</p> + // | </div> + // + // 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:"<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", + + 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(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.open || this._wipeOut.status() == "playing"){ + // we are currently *closing* the pane (or the pane is closed), so just let that continue + this.inherited(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(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; + var node = this.titleBarNode || this.focusNode + dojo.removeClass(node, classes[!boolIndex+0]); + node.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 && 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; + } +}); + +} |