1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
|
if(!dojo._hasResource["dojox.layout.RadioGroup"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.layout.RadioGroup"] = true;
dojo.provide("dojox.layout.RadioGroup");
dojo.experimental("dojox.layout.RadioGroup");
//
// dojox.layout.RadioGroup - an experimental (probably poorly named) Layout widget extending StackContainer
// that accepts ContentPanes as children, and applies aesthetically pleasing responsive transition animations
// attached to :hover of the Buttons created.
//
// FIXME: take the Buttons out of the root template, and allow layoutAlign or similar attrib to use a different
// template, or build the template dynamically?
//
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit._Container");
dojo.require("dijit.layout.StackContainer");
dojo.require("dojox.fx.easing");
dojo.declare("dojox.layout.RadioGroup",
[dijit.layout.StackContainer,dijit._Templated],
{
// summary: A Container that turns its Layout Children into a single Pane and transitions between states
// onHover of the button
//
// duration: Int
// used for Fade and Slide RadioGroup's, the duration to run the transition animation. does not affect anything
// in default RadioGroup
duration: 750,
// hasButtons: Boolean
// toggles internal button making on or off
hasButtons: true,
// templateString: String
// the template for our container
templateString: '<div class="dojoxRadioGroup">'
+' <div dojoAttachPoint="buttonHolder" style="display:none;">'
+' <table class="dojoxRadioButtons"><tbody><tr class="dojoxRadioButtonRow" dojoAttachPoint="buttonNode"></tr></tbody></table>'
+' </div>'
+' <div class="dojoxRadioView" dojoAttachPoint="containerNode"></div>'
+'</div>',
startup: function(){
// summary: scan the container for children, and make "tab buttons" for them
this.inherited("startup",arguments);
this._children = this.getChildren();
this._buttons = this._children.length;
this._size = dojo.coords(this.containerNode);
if(this.hasButtons){
dojo.style(this.buttonHolder,"display","block");
dojo.forEach(this._children,this._makeButton,this);
}
},
// private:
_makeButton: function(/* DomNode */n){
// summary: creates a hover button for a child node of the RadioGroup
dojo.style(n.domNode,"position","absolute");
var tmp = document.createElement('td');
this.buttonNode.appendChild(tmp);
var tmpt = tmp.appendChild(document.createElement('div'));
var tmpw = new dojox.layout._RadioButton({
label: n.title,
page: n
},tmpt);
tmpw.startup();
},
// FIXME: shouldn't have to rewriting these, need to take styling out of _showChild and _hideChild
// and use classes on the domNode in _transition or something similar (in StackContainer)
_transition: function(/*Widget*/newWidget, /*Widget*/oldWidget){
// summary: called when StackContainer receives a selectChild call, used to transition the panes.
this._showChild(newWidget);
if(oldWidget){
this._hideChild(oldWidget);
}
// Size the new widget, in case this is the first time it's being shown,
// or I have been resized since the last time it was shown.
// page must be visible for resizing to work
if(this.doLayout && newWidget.resize){
newWidget.resize(this._containerContentBox || this._contentBox);
}
},
_showChild: function(/*Widget*/ page){
// summary: show the selected child widget
var children = this.getChildren();
page.isFirstChild = (page == children[0]);
page.isLastChild = (page == children[children.length-1]);
page.selected = true;
page.domNode.style.display="";
if(page._loadCheck){
page._loadCheck(); // trigger load in ContentPane
}
if(page.onShow){
page.onShow();
}
},
_hideChild: function(/*Widget*/ page){
// summary: hide the specified child widget
page.selected=false;
page.domNode.style.display="none";
if(page.onHide){
page.onHide();
}
}
});
dojo.declare("dojox.layout.RadioGroupFade",
dojox.layout.RadioGroup,
{
// summary: An extension on a stock RadioGroup, that fades the panes.
_hideChild: function(page){
// summary: hide the specified child widget
dojo.fadeOut({
node:page.domNode,
duration:this.duration,
onEnd: this.inherited("_hideChild",arguments)
}).play();
},
_showChild: function(page){
// summary: show the specified child widget
this.inherited("_showChild",arguments);
dojo.style(page.domNode,"opacity",0);
dojo.fadeIn({
node:page.domNode,
duration:this.duration
}).play();
}
});
dojo.declare("dojox.layout.RadioGroupSlide",
dojox.layout.RadioGroup,
{
// summary: A Sliding Radio Group
// description:
// An extension on a stock RadioGroup widget, sliding the pane
// into view from being hidden. The entry direction is randomized
// on each view
//
// easing: dojo._Animation.easing
// A hook to override the default easing of the pane slides.
easing: dojox.fx.easing.easeOut,
startup: function(){
// summary: on startup, set each of the panes off-screen (_showChild is called later)
this.inherited("startup",arguments);
dojo.forEach(this._children,this._positionChild,this);
},
_positionChild: function(page){
// summary: randomly set the child out of view
// description:
var rA = Math.round(Math.random());
var rB = Math.round(Math.random());
dojo.style(page.domNode, rA? "top" : "left", (rB ? "-" : "") + this._size[rA?"h":"w"]+"px");
},
_showChild: function(page){
// summary: Slide in the selected child widget
this.inherited("_showChild",arguments);
if(this._anim && this._anim.status()=="playing"){
this._anim.gotoPercent(100,true);
}
this._anim = dojo.animateProperty({
node:page.domNode,
properties: {
// take a performance hit determinging one of these doesn't get modified
// but it's better this way than an extra call to mixin in think?
left: { end:0, unit:"px" },
top: { end:0, unit:"px" }
},
duration:this.duration,
easing:this.easing
});
this._anim.play();
},
_hideChild: function(page){
// summary: reset the position of the hidden pane out of sight
this.inherited("_hideChild",arguments);
this._positionChild(page);
}
});
dojo.declare("dojox.layout._RadioButton",
[dijit._Widget,dijit._Templated,dijit._Contained],
{
// summary: The Buttons for a RadioGroup
//
// description: A private widget used to manipulate the StackContainer (RadioGroup*). Don't create directly.
//
// label: String
// the Text Label of the button
label: "",
// domNode to tell parent to select
page: null,
templateString: '<div dojoAttachPoint="focusNode" class="dojoxRadioButton"><span dojoAttachPoint="titleNode" class="dojoxRadioButtonLabel">${label}</span></div>',
startup: function(){
// summary: start listening to mouseOver
this.connect(this.domNode,"onmouseover","_onMouse");
},
_onMouse: function(/* Event */e){
// summary: set the selected child on hover, and set our hover state class
this.getParent().selectChild(this.page);
this._clearSelected();
dojo.addClass(this.domNode,"dojoxRadioButtonSelected");
},
_clearSelected: function(){
// summary: remove hover state class from sibling Buttons. This is easier (and more reliable)
// than setting up an additional connection to onMouseOut
// FIXME: this relies on the template being [div][span]node[/span][/div]
dojo.query(".dojoxRadioButtonSelected",this.domNode.parentNode.parentNode).forEach(function(n){
dojo.removeClass(n,"dojoxRadioButtonSelected");
});
}
});
}
|
