Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
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\">&#9650;</div\n\t\t><div class='arrowTextDown' waiRole=\"presentation\">&#9660;</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
}