| 1318 |
alexandre_ |
1 |
/*
|
|
|
2 |
Copyright (c) 2004-2006, The Dojo Foundation
|
|
|
3 |
All Rights Reserved.
|
|
|
4 |
|
|
|
5 |
Licensed under the Academic Free License version 2.1 or above OR the
|
|
|
6 |
modified BSD license. For more information on Dojo licensing, see:
|
|
|
7 |
|
|
|
8 |
http://dojotoolkit.org/community/licensing.shtml
|
|
|
9 |
*/
|
|
|
10 |
|
|
|
11 |
dojo.provide("dojo.widget.ShowSlide");
|
|
|
12 |
dojo.require("dojo.widget.*");
|
|
|
13 |
dojo.require("dojo.lang.common");
|
|
|
14 |
dojo.require("dojo.widget.HtmlWidget");
|
|
|
15 |
dojo.require("dojo.lfx.html");
|
|
|
16 |
dojo.require("dojo.html.display");
|
|
|
17 |
dojo.require("dojo.html.layout");
|
|
|
18 |
dojo.require("dojo.animation.Animation");
|
|
|
19 |
dojo.require("dojo.gfx.color");
|
|
|
20 |
dojo.widget.defineWidget("dojo.widget.ShowSlide", dojo.widget.HtmlWidget, {title:"", _action:-1, isContainer:true, _components:{}, _actions:[], gotoAction:function (action) {
|
|
|
21 |
this._action = action;
|
|
|
22 |
}, _nextAction:function (event) {
|
|
|
23 |
if ((this._action + 1) != this._actions.length) {
|
|
|
24 |
++this._action;
|
|
|
25 |
return true;
|
|
|
26 |
}
|
|
|
27 |
return false;
|
|
|
28 |
}, _previousAction:function (event) {
|
|
|
29 |
if ((this._action - 1) != -1) {
|
|
|
30 |
--this._action;
|
|
|
31 |
return true;
|
|
|
32 |
}
|
|
|
33 |
return false;
|
|
|
34 |
}, htmlTitle:null, debug:false, noClick:false, templateString:"<div class=\"dojoShowSlide\">\n\t<div class=\"dojoShowSlideTitle\">\n\t\t<h1 dojoAttachPoint=\"htmlTitle\">Title</h1>\n\t</div>\n\t<div class=\"dojoShowSlideBody\" dojoAttachPoint=\"containerNode\"></div>\n</div>\n", templateCssString:".dojoShowSlideTitle {\n\theight: 100px;\n\tbackground: #369;\n}\n.dojoShowSlideTitle h1 {\n\tmargin-top: 0;\n\tline-height: 100px;\n\tmargin-left: 30px;\n}\n.dojoShowSlideBody {\n\tmargin: 15px;\n}\n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/ShowSlide.css"), postCreate:function () {
|
|
|
35 |
this.htmlTitle.innerHTML = this.title;
|
|
|
36 |
var actions = this.getChildrenOfType("ShowAction", false);
|
|
|
37 |
var atypes = {};
|
|
|
38 |
dojo.lang.forEach(actions, function (act) {
|
|
|
39 |
atypes[act.on] = true;
|
|
|
40 |
});
|
|
|
41 |
this._components = {};
|
|
|
42 |
var cn = this.containerNode;
|
|
|
43 |
var nodes = dojo.render.html.ie ? cn.all : cn.getElementsByTagName("*");
|
|
|
44 |
dojo.lang.forEach(nodes, function (node) {
|
|
|
45 |
var as = node.getAttribute("as");
|
|
|
46 |
if (as) {
|
|
|
47 |
if (!this._components[as]) {
|
|
|
48 |
this._components[as] = [];
|
|
|
49 |
}
|
|
|
50 |
this._components[as].push(node);
|
|
|
51 |
if (!atypes[as]) {
|
|
|
52 |
var tmpAction = dojo.widget.createWidget("ShowAction", {on:as});
|
|
|
53 |
this.addChild(tmpAction);
|
|
|
54 |
atypes[as] = true;
|
|
|
55 |
}
|
|
|
56 |
}
|
|
|
57 |
}, this);
|
|
|
58 |
this._actions = [];
|
|
|
59 |
actions = this.getChildrenOfType("ShowAction", false);
|
|
|
60 |
dojo.lang.forEach(actions, function (child) {
|
|
|
61 |
this._actions.push(child);
|
|
|
62 |
var components = this._components[child.on];
|
|
|
63 |
for (var j = 0, component; component = components[j]; j++) {
|
|
|
64 |
if (child["action"] && ((child.action != "remove") && (child.action != "fadeout") && (child.action != "wipeout"))) {
|
|
|
65 |
this.hideComponent(component);
|
|
|
66 |
}
|
|
|
67 |
}
|
|
|
68 |
}, this);
|
|
|
69 |
}, previousAction:function (event) {
|
|
|
70 |
if (!this.parent.stopEvent(event)) {
|
|
|
71 |
return false;
|
|
|
72 |
}
|
|
|
73 |
var action = this._actions[this._action];
|
|
|
74 |
if (!action) {
|
|
|
75 |
return false;
|
|
|
76 |
}
|
|
|
77 |
var on = action.on;
|
|
|
78 |
while (action.on == on) {
|
|
|
79 |
var components = this._components[on];
|
|
|
80 |
for (var i = 0, component; component = components[i]; i++) {
|
|
|
81 |
if ((action.action == "remove") || (action.action == "fadeout") || (action.action == "wipeout")) {
|
|
|
82 |
if (component.style.display == "none") {
|
|
|
83 |
component.style.display = "";
|
|
|
84 |
component.style.visibility = "visible";
|
|
|
85 |
var exits = true;
|
|
|
86 |
}
|
|
|
87 |
dojo.html.setOpacity(component, 1);
|
|
|
88 |
} else {
|
|
|
89 |
if (action.action) {
|
|
|
90 |
this.hideComponent(component);
|
|
|
91 |
}
|
|
|
92 |
}
|
|
|
93 |
}
|
|
|
94 |
--this._action;
|
|
|
95 |
if (exits) {
|
|
|
96 |
return true;
|
|
|
97 |
}
|
|
|
98 |
if (action.auto == "true") {
|
|
|
99 |
on = this._actions[this._action].on;
|
|
|
100 |
}
|
|
|
101 |
action = this._actions[this._action];
|
|
|
102 |
if (!action) {
|
|
|
103 |
return false;
|
|
|
104 |
}
|
|
|
105 |
}
|
|
|
106 |
return true;
|
|
|
107 |
}, hideComponent:function (component) {
|
|
|
108 |
component.style.visibility = "hidden";
|
|
|
109 |
component.style.backgroundColor = "transparent";
|
|
|
110 |
var parent = component.parentNode;
|
|
|
111 |
if ((parent) && (parent.tagName.toLowerCase() == "li")) {
|
|
|
112 |
parent.oldType = parent.style.listStyleType;
|
|
|
113 |
parent.style.listStyleType = "none";
|
|
|
114 |
}
|
|
|
115 |
}, nextAction:function (event) {
|
|
|
116 |
if (!this.parent.stopEvent(event)) {
|
|
|
117 |
return false;
|
|
|
118 |
}
|
|
|
119 |
if (!this._nextAction(this)) {
|
|
|
120 |
return false;
|
|
|
121 |
}
|
|
|
122 |
var action = this._actions[this._action];
|
|
|
123 |
if (!action) {
|
|
|
124 |
return false;
|
|
|
125 |
}
|
|
|
126 |
var tmpAction = action["action"];
|
|
|
127 |
var components = this._components[action.on];
|
|
|
128 |
for (var i = 0, component; component = components[i]; i++) {
|
|
|
129 |
if (tmpAction) {
|
|
|
130 |
var duration = action.duration || 1000;
|
|
|
131 |
if ((tmpAction == "fade") || (tmpAction == "fadeIn")) {
|
|
|
132 |
dojo.html.setOpacity(component, 0);
|
|
|
133 |
dojo.lfx.html.fadeShow(component, duration).play(true);
|
|
|
134 |
} else {
|
|
|
135 |
if (tmpAction == "fadeout") {
|
|
|
136 |
dojo.lfx.html.fadeHide(component, duration).play(true);
|
|
|
137 |
} else {
|
|
|
138 |
if (tmpAction == "fly") {
|
|
|
139 |
var width = dojo.html.getMarginBox(component).width;
|
|
|
140 |
var position = dojo.html.getAbsolutePosition(component);
|
|
|
141 |
component.style.position = "relative";
|
|
|
142 |
component.style.left = -(width + position.x) + "px";
|
|
|
143 |
dojo.lfx.html.slideBy(component, {top:0, left:(width + position.x)}, duration, -1, this.callWith).play(true);
|
|
|
144 |
} else {
|
|
|
145 |
if ((tmpAction == "wipe") || (tmpAction == "wipein")) {
|
|
|
146 |
dojo.lfx.html.wipeIn(component, duration).play();
|
|
|
147 |
} else {
|
|
|
148 |
if (tmpAction == "wipeout") {
|
|
|
149 |
dojo.lfx.html.wipeOut(component, duration).play();
|
|
|
150 |
} else {
|
|
|
151 |
if (tmpAction == "color") {
|
|
|
152 |
var from = new dojo.gfx.color.Color(action.from).toRgb();
|
|
|
153 |
var to = new dojo.gfx.color.Color(action.to).toRgb();
|
|
|
154 |
var anim = new dojo.animation.Animation(new dojo.math.curves.Line(from, to), duration, 0);
|
|
|
155 |
var node = component;
|
|
|
156 |
dojo.event.connect(anim, "onAnimate", function (e) {
|
|
|
157 |
node.style.color = "rgb(" + e.coordsAsInts().join(",") + ")";
|
|
|
158 |
});
|
|
|
159 |
anim.play(true);
|
|
|
160 |
} else {
|
|
|
161 |
if (tmpAction == "bgcolor") {
|
|
|
162 |
dojo.lfx.html.unhighlight(component, action.to, duration).play();
|
|
|
163 |
} else {
|
|
|
164 |
if (tmpAction == "remove") {
|
|
|
165 |
component.style.display = "none";
|
|
|
166 |
}
|
|
|
167 |
}
|
|
|
168 |
}
|
|
|
169 |
}
|
|
|
170 |
}
|
|
|
171 |
}
|
|
|
172 |
}
|
|
|
173 |
}
|
|
|
174 |
if (tmpAction == "hide") {
|
|
|
175 |
component.style.visibility = "hidden";
|
|
|
176 |
} else {
|
|
|
177 |
component.style.visibility = "visible";
|
|
|
178 |
}
|
|
|
179 |
}
|
|
|
180 |
}
|
|
|
181 |
action = this._actions[this._action + 1];
|
|
|
182 |
if (action && action.auto == "true") {
|
|
|
183 |
this.nextAction();
|
|
|
184 |
}
|
|
|
185 |
return true;
|
|
|
186 |
}, callWith:function (node) {
|
|
|
187 |
if (!node) {
|
|
|
188 |
return;
|
|
|
189 |
}
|
|
|
190 |
if (dojo.lang.isArray(node)) {
|
|
|
191 |
dojo.lang.forEach(node, arguments.callee);
|
|
|
192 |
return;
|
|
|
193 |
}
|
|
|
194 |
var parent = node.parentNode;
|
|
|
195 |
if ((parent) && (parent.tagName.toLowerCase() == "li")) {
|
|
|
196 |
parent.style.listStyleType = parent.oldType;
|
|
|
197 |
}
|
|
|
198 |
}});
|
|
|
199 |
|