001: /*
002: * Copyright (c) 2006-2007 Valerio Proietti
003: *
004: * Permission is hereby granted, free of charge, to any person obtaining a copy
005: * of this software and associated documentation files (the "Software"), to deal
006: * in the Software without restriction, including without limitation the rights
007: * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
008: * copies of the Software, and to permit persons to whom the Software is
009: * furnished to do so, subject to the following conditions:
010: *
011: * The above copyright notice and this permission notice shall be included in
012: * all copies or substantial portions of the Software.
013: *
014: * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
015: * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
016: * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
017: * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
018: * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
019: * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
020: * THE SOFTWARE.
021: *
022: * Contributors:
023: * Valerio Proietti - initial API and implementation
024: * MyGWT - derived implementation
025: */
026: package net.mygwt.ui.client.fx;
027:
028: import net.mygwt.ui.client.Style;
029: import net.mygwt.ui.client.MyDOM;
030: import net.mygwt.ui.client.util.Rectangle;
031:
032: import com.google.gwt.user.client.DOM;
033: import com.google.gwt.user.client.Element;
034:
035: /**
036: * Effects are a single fx operation involving an element, property, and to /
037: * from values.
038: *
039: * <p>
040: * This code is based on code from the MooTools Project by Valerio Proietti.
041: * </p>
042: *
043: * @see FX
044: */
045: public class Effect {
046:
047: /**
048: * A blink effect.
049: */
050: public static class Blink extends Effect {
051:
052: public Blink(Element element) {
053: super (element);
054: from = 0;
055: to = 20;
056: }
057:
058: public void increase(double now) {
059: if (to == now) {
060: MyDOM.setVisibility(elem, true);
061: } else {
062: MyDOM.setVisibility(elem, !MyDOM.isVisibility(elem));
063: }
064: }
065: }
066:
067: /**
068: * Fades an element in by adjusting its opacity from 0 to 1.
069: */
070: public static class FadeIn extends Effect {
071: public FadeIn(Element element) {
072: super (element);
073: style = "opacity";
074: from = 0;
075: to = 1;
076: }
077:
078: protected void onStart() {
079: MyDOM.setDoubleStyleAttribute(elem, "opacity", 0);
080: MyDOM.setVisibility(elem, true);
081:
082: }
083:
084: protected void onComplete() {
085: MyDOM.setStyleAttribute(elem, "filter", "");
086: }
087:
088: }
089:
090: /**
091: * Fades the element out by adjusting its opacity from 1 to 0.
092: */
093: public static class FadeOut extends Effect {
094: public FadeOut(Element element) {
095: super (element);
096: style = "opacity";
097: from = 1;
098: to = 0;
099: }
100:
101: protected void onComplete() {
102: MyDOM.setVisibility(elem, false);
103: super .onComplete();
104: }
105:
106: }
107:
108: /**
109: * Slides an element into view.
110: *
111: */
112: public static class SlideIn extends Slide {
113:
114: /**
115: * Creates a new slide in effect.
116: *
117: * @param dir the direction of travel. Values can be either My.HORIZONTAL or
118: * My.VERTICAL
119: * @param element the animation effect
120: */
121: public SlideIn(int dir, Element element) {
122: super (dir, element);
123: }
124:
125: protected void onComplete() {
126: MyDOM.unwrap(wrapElem, elem, oBounds, index);
127: DOM.setStyleAttribute(elem, "overflow", overflow);
128: super .onComplete();
129: }
130:
131: protected void onStart() {
132: overflow = DOM.getStyleAttribute(elem, "overflow");
133: wrapElem = DOM.createDiv();
134:
135: index = DOM.getChildIndex(DOM.getParent(elem), elem);
136: oBounds = MyDOM.wrap(elem, wrapElem);
137:
138: int h = oBounds.height;
139: int w = oBounds.width;
140:
141: MyDOM.setWidth(wrapElem, w);
142: MyDOM.setHeight(wrapElem, h);
143:
144: MyDOM.setVisible(elem, true);
145: MyDOM.setVisible(wrapElem, true);
146:
147: switch (dir) {
148: case Style.SOUTH:
149: MyDOM.setHeight(wrapElem, 1);
150: style = "height";
151: from = 1;
152: to = oBounds.height;
153: break;
154: case Style.EAST:
155: style = "width";
156: from = 1;
157: to = oBounds.width;
158: break;
159: case Style.WEST:
160: MyDOM.setWidth(wrapElem, 1);
161: style = "width";
162: from = 1;
163: to = oBounds.width;
164: break;
165: case Style.NORTH:
166: MyDOM.setHeight(wrapElem, 1);
167: style = "height";
168: from = 1;
169: to = oBounds.height;
170: }
171: }
172:
173: protected void increase(double now) {
174: int v = (int) now;
175: switch (dir) {
176: case Style.WEST:
177: MyDOM.setLeft(wrapElem, (oBounds.width - v));
178: DOM.setIntStyleAttribute(wrapElem, style, v);
179: break;
180: case Style.NORTH:
181: MyDOM.setTop(wrapElem, (oBounds.height - v));
182: DOM.setIntStyleAttribute(wrapElem, style, v);
183: break;
184: case Style.SOUTH:
185: DOM.setIntStyleAttribute(elem, "marginTop",
186: -(oBounds.height - v));
187: DOM.setIntStyleAttribute(wrapElem, style, v);
188: break;
189: case Style.EAST:
190: DOM.setIntStyleAttribute(elem, "marginLeft",
191: -(oBounds.width - v));
192: DOM.setIntStyleAttribute(wrapElem, style, v);
193: break;
194: }
195: }
196:
197: }
198:
199: /**
200: * Slides an element out of view.
201: */
202: public static class SlideOut extends Slide {
203:
204: /**
205: * Creates a new slide effect.
206: *
207: * @param dir the direction of travel (NORTH, EAST, SOUTH, or WEST)
208: * @param element the effect element
209: */
210: public SlideOut(int dir, Element element) {
211: super (dir, element);
212: }
213:
214: protected void onComplete() {
215: MyDOM.setVisible(elem, false);
216: MyDOM.unwrap(wrapElem, elem, oBounds);
217: DOM.setStyleAttribute(elem, "overflow", overflow);
218: super .onComplete();
219: }
220:
221: protected void onStart() {
222: overflow = DOM.getStyleAttribute(elem, "overflow");
223: wrapElem = DOM.createDiv();
224: oBounds = MyDOM.wrap(elem, wrapElem);
225:
226: int h = oBounds.height;
227: int w = oBounds.width;
228:
229: MyDOM.setWidth(wrapElem, w);
230: MyDOM.setHeight(wrapElem, h);
231:
232: MyDOM.setVisible(wrapElem, true);
233: MyDOM.setVisible(elem, true);
234:
235: switch (dir) {
236: case Style.NORTH:
237: style = "height";
238: from = oBounds.height;
239: to = 1;
240: break;
241: case Style.WEST:
242: style = "width";
243: from = oBounds.width;
244: to = 0;
245: break;
246: case Style.EAST:
247: style = "left";
248: from = MyDOM.getX(wrapElem);
249: to = from + MyDOM.getWidth(wrapElem);
250: break;
251:
252: case Style.SOUTH:
253: style = "top";
254: from = MyDOM.getY(wrapElem);
255: to = from + MyDOM.getHeight(wrapElem);
256: break;
257: }
258:
259: }
260:
261: }
262:
263: private static class Slide extends Effect {
264:
265: protected int dir;
266: protected int index;
267: protected Element wrapElem;
268: protected Rectangle oBounds;
269: protected String overflow;
270:
271: public Slide(int dir, Element element) {
272: super (element);
273: this .dir = dir;
274: }
275:
276: protected void increase(double now) {
277: int v = (int) now;
278:
279: switch (dir) {
280: case Style.WEST:
281: DOM.setIntStyleAttribute(elem, "marginLeft",
282: -(oBounds.width - v));
283: DOM.setIntStyleAttribute(wrapElem, style, v);
284: break;
285: case Style.NORTH:
286: DOM.setIntStyleAttribute(elem, "marginTop",
287: -(oBounds.height - v));
288: DOM.setIntStyleAttribute(wrapElem, style, v);
289: break;
290: case Style.SOUTH:
291: MyDOM.setY(elem, v);
292: break;
293: case Style.EAST:
294: MyDOM.setX(elem, v);
295: break;
296: }
297:
298: if (dir == Style.HORIZONTAL || dir == Style.VERTICAL) {
299: int m = dir == Style.VERTICAL ? oBounds.height - v
300: : oBounds.width - v;
301: String s = dir == Style.VERTICAL ? "marginTop"
302: : "marginLeft";
303: DOM.setIntStyleAttribute(elem, s, -m);
304: DOM.setIntStyleAttribute(wrapElem, style, v);
305: }
306:
307: }
308:
309: }
310:
311: /**
312: * The effect operation.
313: */
314: public int operation;
315:
316: /**
317: * The effect element.
318: */
319: public Element elem;
320:
321: /**
322: * The css style be adjusted.
323: */
324: public String style;
325:
326: /**
327: * The start value.
328: */
329: public double from;
330:
331: /**
332: * The end value.
333: */
334: public double to;
335:
336: /**
337: * Creates a new effect.
338: *
339: * @param elem the animation element
340: */
341: public Effect(Element elem) {
342: this .elem = elem;
343: }
344:
345: /**
346: * Creates a new effect.
347: *
348: * @param elem the effect element
349: * @param style the style
350: * @param from the from value
351: * @param to the to value
352: */
353: public Effect(Element elem, String style, double from, double to) {
354: this .elem = elem;
355: this .style = style;
356: this .from = from;
357: this .to = to;
358: }
359:
360: protected void increase(double now) {
361: if (style.equalsIgnoreCase("x")) {
362: MyDOM.setX(elem, (int) now);
363: } else if (style.equalsIgnoreCase("y")) {
364: MyDOM.setY(elem, (int) now);
365: } else {
366: MyDOM.setDoubleStyleAttribute(elem, style, now);
367: }
368:
369: }
370:
371: /**
372: * Called after the effect has been completed.
373: */
374: protected void onComplete() {
375:
376: }
377:
378: /**
379: * Called before the effect starts.
380: */
381: protected void onStart() {
382:
383: }
384:
385: }
|