1 if(!dojo._hasResource["dijit.layout.AccordionContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
2 dojo._hasResource["dijit.layout.AccordionContainer"] = true;
3 dojo.provide("dijit.layout.AccordionContainer");
5 dojo.require("dojo.fx");
7 dojo.require("dijit._Container");
8 dojo.require("dijit._Templated");
9 dojo.require("dijit.layout.StackContainer");
10 dojo.require("dijit.layout.ContentPane");
13 "dijit.layout.AccordionContainer",
14 dijit.layout.StackContainer,
17 // Holds a set of panes where every pane's title is visible, but only one pane's content is visible at a time,
18 // and switching between panes is visualized by sliding the other panes up/down.
20 // | <div dojoType="dijit.layout.AccordionContainer">
21 // | <div dojoType="dijit.layout.AccordionPane" title="pane 1">
22 // | <div dojoType="dijit.layout.ContentPane">...</div>
24 // | <div dojoType="dijit.layout.AccordionPane" title="pane 2">
25 // | <p>This is some text</p>
30 // Amount of time (in ms) it takes to slide panes
35 postCreate: function(){
36 this.domNode.style.overflow="hidden";
37 this.inherited("postCreate",arguments);
38 dijit.setWaiRole(this.domNode, "tablist");
39 dojo.addClass(this.domNode,"dijitAccordionContainer");
43 if(this._started){ return; }
44 this.inherited("startup",arguments);
45 if(this.selectedChildWidget){
46 var style = this.selectedChildWidget.containerNode.style;
48 style.overflow = "auto";
49 this.selectedChildWidget._setSelectedState(true);
55 // Set the height of the open pane based on what room remains
57 // get cumulative height of all the title bars, and figure out which pane is open
58 var totalCollapsedHeight = 0;
59 var openPane = this.selectedChildWidget;
60 dojo.forEach(this.getChildren(), function(child){
61 totalCollapsedHeight += child.getTitleHeight();
63 var mySize = this._contentBox;
64 this._verticalSpace = (mySize.h - totalCollapsedHeight);
66 openPane.containerNode.style.height = this._verticalSpace + "px";
68 TODO: this is wrong. probably you wanted to call resize on the SplitContainer
69 inside the AccordionPane??
71 openPane.resize({h: this._verticalSpace});
77 _setupChild: function(/*Widget*/ page){
78 // Summary: prepare the given child
82 _transition: function(/*Widget?*/newWidget, /*Widget?*/oldWidget){
83 //TODO: should be able to replace this with calls to slideIn/slideOut
84 if(this._inTransition){ return; }
85 this._inTransition = true;
87 var paneHeight = this._verticalSpace;
89 newWidget.setSelected(true);
90 var newContents = newWidget.containerNode;
91 newContents.style.display = "";
93 animations.push(dojo.animateProperty({
95 duration: this.duration,
97 height: { start: "1", end: paneHeight }
100 newContents.style.overflow = "auto";
105 oldWidget.setSelected(false);
106 var oldContents = oldWidget.containerNode;
107 oldContents.style.overflow = "hidden";
108 animations.push(dojo.animateProperty({
110 duration: this.duration,
112 height: { start: paneHeight, end: "1" }
115 oldContents.style.display = "none";
120 this._inTransition = false;
122 dojo.fx.combine(animations).play();
125 // note: we are treating the container as controller here
126 _onKeyPress: function(/*Event*/ e){
127 if(this.disabled || e.altKey || !(e._dijitWidget || e.ctrlKey)){ return; }
129 var fromTitle = e._dijitWidget;
134 this._adjacent(false)._onTitleClick();
140 this._adjacent(false)._onTitleClick();
147 this._adjacent(true)._onTitleClick();
153 this._adjacent(true)._onTitleClick();
158 if(e.ctrlKey && e.keyCode == k.TAB){
159 this._adjacent(e._dijitWidget, !e.shiftKey)._onTitleClick();
168 dojo.declare("dijit.layout.AccordionPane",
169 [dijit.layout.ContentPane, dijit._Templated, dijit._Contained],
172 // AccordionPane is a ContentPane with a title that may contain another widget.
173 // Nested layout widgets, such as SplitContainer, are not supported at this time.
175 // | see dijit.layout.AccordionContainer
177 templateString:"<div class='dijitAccordionPane'\n\t><div dojoAttachPoint='titleNode,focusNode' dojoAttachEvent='ondijitclick:_onTitleClick,onkeypress:_onTitleKeyPress,onfocus:_handleFocus,onblur:_handleFocus'\n\t\tclass='dijitAccordionTitle' wairole=\"tab\"\n\t\t><div class='dijitAccordionArrow' waiRole=\"presentation\"></div\n\t\t><div class='arrowTextUp' waiRole=\"presentation\">▲</div\n\t\t><div class='arrowTextDown' waiRole=\"presentation\">▼</div\n\t\t><div waiRole=\"presentation\" dojoAttachPoint='titleTextNode' class='dijitAccordionText'>${title}</div></div\n\t><div><div dojoAttachPoint='containerNode' style='overflow: hidden; height: 1px; display: none'\n\t\tclass='dijitAccordionBody' wairole=\"tabpanel\"\n\t></div></div>\n</div>\n",
179 postCreate: function(){
180 this.inherited("postCreate",arguments)
181 dojo.setSelectable(this.titleNode, false);
182 this.setSelected(this.selected);
185 getTitleHeight: function(){
186 // summary: returns the height of the title dom node
187 return dojo.marginBox(this.titleNode).h; // Integer
190 _onTitleClick: function(){
191 // summary: callback when someone clicks my title
192 var parent = this.getParent();
193 if(!parent._inTransition){
194 parent.selectChild(this);
195 dijit.focus(this.focusNode);
199 _onTitleKeyPress: function(/*Event*/ evt){
200 evt._dijitWidget = this;
201 return this.getParent()._onKeyPress(evt);
204 _setSelectedState: function(/*Boolean*/ isSelected){
205 this.selected = isSelected;
206 dojo[(isSelected ? "addClass" : "removeClass")](this.titleNode,"dijitAccordionTitle-selected");
207 this.focusNode.setAttribute("tabIndex", isSelected ? "0" : "-1");
210 _handleFocus: function(/*Event*/e){
211 // summary: handle the blur and focus state of this widget
212 dojo[(e.type=="focus" ? "addClass" : "removeClass")](this.focusNode,"dijitAccordionFocused");
215 setSelected: function(/*Boolean*/ isSelected){
216 // summary: change the selected state on this pane
217 this._setSelectedState(isSelected);
220 this._loadCheck(true); // if href specified, trigger load
224 onSelected: function(){
225 // summary: called when this pane is selected