2150 |
mathias |
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");
|
|
|
4 |
|
|
|
5 |
dojo.require("dojo.fx");
|
|
|
6 |
|
|
|
7 |
dojo.require("dijit._Container");
|
|
|
8 |
dojo.require("dijit._Templated");
|
|
|
9 |
dojo.require("dijit.layout.StackContainer");
|
|
|
10 |
dojo.require("dijit.layout.ContentPane");
|
|
|
11 |
|
|
|
12 |
dojo.declare(
|
|
|
13 |
"dijit.layout.AccordionContainer",
|
|
|
14 |
dijit.layout.StackContainer,
|
|
|
15 |
{
|
|
|
16 |
// summary:
|
|
|
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.
|
|
|
19 |
// usage:
|
|
|
20 |
// <div dojoType="dijit.layout.AccordionContainer">
|
|
|
21 |
// <div dojoType="dijit.layout.AccordionPane" title="pane 1">
|
|
|
22 |
// <div dojoType="dijit.layout.ContentPane">...</div>
|
|
|
23 |
// </div>
|
|
|
24 |
// <div dojoType="dijit.layout.AccordionPane" title="pane 2">
|
|
|
25 |
// <p>This is some text</p>
|
|
|
26 |
// ...
|
|
|
27 |
// </div>
|
|
|
28 |
|
|
|
29 |
// duration: Integer
|
|
|
30 |
// Amount of time (in ms) it takes to slide panes
|
|
|
31 |
duration: 250,
|
|
|
32 |
|
|
|
33 |
_verticalSpace: 0,
|
|
|
34 |
|
|
|
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");
|
|
|
40 |
},
|
|
|
41 |
|
|
|
42 |
startup: function(){
|
|
|
43 |
if(this._started){ return; }
|
|
|
44 |
this.inherited("startup",arguments);
|
|
|
45 |
if(this.selectedChildWidget){
|
|
|
46 |
var style = this.selectedChildWidget.containerNode.style;
|
|
|
47 |
style.display = "";
|
|
|
48 |
style.overflow = "auto";
|
|
|
49 |
this.selectedChildWidget._setSelectedState(true);
|
|
|
50 |
}
|
|
|
51 |
},
|
|
|
52 |
|
|
|
53 |
layout: function(){
|
|
|
54 |
// summary
|
|
|
55 |
// Set the height of the open pane based on what room remains
|
|
|
56 |
// get cumulative height of all the title bars, and figure out which pane is open
|
|
|
57 |
var totalCollapsedHeight = 0;
|
|
|
58 |
var openPane = this.selectedChildWidget;
|
|
|
59 |
dojo.forEach(this.getChildren(), function(child){
|
|
|
60 |
totalCollapsedHeight += child.getTitleHeight();
|
|
|
61 |
});
|
|
|
62 |
var mySize = this._contentBox;
|
|
|
63 |
this._verticalSpace = (mySize.h - totalCollapsedHeight);
|
|
|
64 |
if(openPane){
|
|
|
65 |
openPane.containerNode.style.height = this._verticalSpace + "px";
|
|
|
66 |
/***
|
|
|
67 |
TODO: this is wrong. probably you wanted to call resize on the SplitContainer
|
|
|
68 |
inside the AccordionPane??
|
|
|
69 |
if(openPane.resize){
|
|
|
70 |
openPane.resize({h: this._verticalSpace});
|
|
|
71 |
}
|
|
|
72 |
***/
|
|
|
73 |
}
|
|
|
74 |
},
|
|
|
75 |
|
|
|
76 |
_setupChild: function(/*Widget*/ page){
|
|
|
77 |
// Summary: prepare the given child
|
|
|
78 |
return page;
|
|
|
79 |
},
|
|
|
80 |
|
|
|
81 |
_transition: function(/*Widget?*/newWidget, /*Widget?*/oldWidget){
|
|
|
82 |
//TODO: should be able to replace this with calls to slideIn/slideOut
|
|
|
83 |
if(this._inTransition){ return; }
|
|
|
84 |
this._inTransition = true;
|
|
|
85 |
var animations = [];
|
|
|
86 |
var paneHeight = this._verticalSpace;
|
|
|
87 |
if(newWidget){
|
|
|
88 |
newWidget.setSelected(true);
|
|
|
89 |
var newContents = newWidget.containerNode;
|
|
|
90 |
newContents.style.display = "";
|
|
|
91 |
|
|
|
92 |
animations.push(dojo.animateProperty({
|
|
|
93 |
node: newContents,
|
|
|
94 |
duration: this.duration,
|
|
|
95 |
properties: {
|
|
|
96 |
height: { start: "1", end: paneHeight }
|
|
|
97 |
},
|
|
|
98 |
onEnd: function(){
|
|
|
99 |
newContents.style.overflow = "auto";
|
|
|
100 |
}
|
|
|
101 |
}));
|
|
|
102 |
}
|
|
|
103 |
if(oldWidget){
|
|
|
104 |
oldWidget.setSelected(false);
|
|
|
105 |
var oldContents = oldWidget.containerNode;
|
|
|
106 |
oldContents.style.overflow = "hidden";
|
|
|
107 |
animations.push(dojo.animateProperty({
|
|
|
108 |
node: oldContents,
|
|
|
109 |
duration: this.duration,
|
|
|
110 |
properties: {
|
|
|
111 |
height: { start: paneHeight, end: "1" }
|
|
|
112 |
},
|
|
|
113 |
onEnd: function(){
|
|
|
114 |
oldContents.style.display = "none";
|
|
|
115 |
}
|
|
|
116 |
}));
|
|
|
117 |
}
|
|
|
118 |
|
|
|
119 |
this._inTransition = false;
|
|
|
120 |
|
|
|
121 |
dojo.fx.combine(animations).play();
|
|
|
122 |
},
|
|
|
123 |
|
|
|
124 |
// note: we are treating the container as controller here
|
|
|
125 |
_onKeyPress: function(/*Event*/ e){
|
|
|
126 |
if(this.disabled || e.altKey ){ return; }
|
|
|
127 |
var k = dojo.keys;
|
|
|
128 |
switch(e.keyCode){
|
|
|
129 |
case k.LEFT_ARROW:
|
|
|
130 |
case k.UP_ARROW:
|
|
|
131 |
case k.PAGE_UP:
|
|
|
132 |
this._adjacent(false)._onTitleClick();
|
|
|
133 |
dojo.stopEvent(e);
|
|
|
134 |
break;
|
|
|
135 |
case k.RIGHT_ARROW:
|
|
|
136 |
case k.DOWN_ARROW:
|
|
|
137 |
case k.PAGE_DOWN:
|
|
|
138 |
this._adjacent(true)._onTitleClick();
|
|
|
139 |
dojo.stopEvent(e);
|
|
|
140 |
break;
|
|
|
141 |
default:
|
|
|
142 |
if(e.ctrlKey && e.keyCode == k.TAB){
|
|
|
143 |
this._adjacent(e._dijitWidget, !e.shiftKey)._onTitleClick();
|
|
|
144 |
dojo.stopEvent(e);
|
|
|
145 |
}
|
|
|
146 |
|
|
|
147 |
}
|
|
|
148 |
}
|
|
|
149 |
}
|
|
|
150 |
);
|
|
|
151 |
|
|
|
152 |
dojo.declare(
|
|
|
153 |
"dijit.layout.AccordionPane",
|
|
|
154 |
[dijit.layout.ContentPane, dijit._Templated, dijit._Contained],
|
|
|
155 |
{
|
|
|
156 |
// summary
|
|
|
157 |
// AccordionPane is a ContentPane with a title that may contain another widget.
|
|
|
158 |
// Nested layout widgets, such as SplitContainer, are not supported at this time.
|
|
|
159 |
|
|
|
160 |
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'></div\n\t\t><div class='arrowTextUp' waiRole=\"presentation\">▲</div\n\t\t><div class='arrowTextDown' waiRole=\"presentation\">▼</div\n\t\t><div 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",
|
|
|
161 |
|
|
|
162 |
postCreate: function(){
|
|
|
163 |
this.inherited("postCreate",arguments)
|
|
|
164 |
dojo.setSelectable(this.titleNode, false);
|
|
|
165 |
this.setSelected(this.selected);
|
|
|
166 |
},
|
|
|
167 |
|
|
|
168 |
getTitleHeight: function(){
|
|
|
169 |
// summary: returns the height of the title dom node
|
|
|
170 |
return dojo.marginBox(this.titleNode).h; // Integer
|
|
|
171 |
},
|
|
|
172 |
|
|
|
173 |
_onTitleClick: function(){
|
|
|
174 |
// summary: callback when someone clicks my title
|
|
|
175 |
var parent = this.getParent();
|
|
|
176 |
if(!parent._inTransition){
|
|
|
177 |
parent.selectChild(this);
|
|
|
178 |
dijit.focus(this.focusNode);
|
|
|
179 |
}
|
|
|
180 |
},
|
|
|
181 |
|
|
|
182 |
_onTitleKeyPress: function(/*Event*/ evt){
|
|
|
183 |
evt._dijitWidget = this;
|
|
|
184 |
return this.getParent()._onKeyPress(evt);
|
|
|
185 |
},
|
|
|
186 |
|
|
|
187 |
_setSelectedState: function(/*Boolean*/ isSelected){
|
|
|
188 |
this.selected = isSelected;
|
|
|
189 |
dojo[(isSelected ? "addClass" : "removeClass")](this.domNode,"dijitAccordionPane-selected");
|
|
|
190 |
this.focusNode.setAttribute("tabIndex", isSelected ? "0" : "-1");
|
|
|
191 |
},
|
|
|
192 |
|
|
|
193 |
_handleFocus: function(/*Event*/e){
|
|
|
194 |
// summary: handle the blur and focus state of this widget
|
|
|
195 |
dojo[(e.type=="focus" ? "addClass" : "removeClass")](this.focusNode,"dijitAccordionPaneFocused");
|
|
|
196 |
},
|
|
|
197 |
|
|
|
198 |
setSelected: function(/*Boolean*/ isSelected){
|
|
|
199 |
// summary: change the selected state on this pane
|
|
|
200 |
this._setSelectedState(isSelected);
|
|
|
201 |
if(isSelected){ this.onSelected(); }
|
|
|
202 |
},
|
|
|
203 |
|
|
|
204 |
onSelected: function(){
|
|
|
205 |
// summary: called when this pane is selected
|
|
|
206 |
}
|
|
|
207 |
});
|
|
|
208 |
|
|
|
209 |
}
|