gwtquery/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java

/*
 * Copyright 2011, The gwtquery team.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */
package gwtquery.samples.client;

import static com.google.gwt.query.client.GQuery.$;
import static com.google.gwt.query.client.GQuery.$$;
import static com.google.gwt.query.client.GQuery.lazy;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.Style.Position;
import com.google.gwt.query.client.Function;
import com.google.gwt.query.client.css.CSS;
import com.google.gwt.query.client.css.Length;
import com.google.gwt.query.client.css.RGBColor;
import com.google.gwt.query.client.plugins.Effects;
import com.google.gwt.query.client.plugins.PropertiesAnimation.Easing;
import com.google.gwt.user.client.Event;

public class GwtQueryEffectsModule implements EntryPoint {

  public void onModuleLoad() {
    $("div > div").css(CSS.COLOR.with(RGBColor.BLUE))
    .hover(lazy().css(CSS.COLOR.with(RGBColor.RED)).done(),
           lazy().css(CSS.COLOR.with(RGBColor.BLUE)).done());

    $("div.outer > div").css(CSS.POSITION.with(Position.RELATIVE)).dblclick(new Function() {
      public boolean f(Event e) {
         $("div.outer > div").as(Effects.Effects).
         animate($$("left: '+=100'"), 400, Easing.LINEAR).
         animate($$("top: '+=100'"), 400, Easing.LINEAR).
         animate($$("left: '-=100'"), 400, Easing.LINEAR).
         animate($$("top: '-=100'"), 400, Easing.LINEAR);
        return true;
      }
    });
    $(".note").click(lazy().fadeOut().done());
    $(".note").append(" Hello");
    
    final Effects a = $(".a, .b > div:nth-child(2)").as(Effects.Effects);
    final Effects b = $(".b > div:nth-child(odd)").as(Effects.Effects);
    
    $("#b0").width(150).css(CSS.FONT_SIZE.with(Length.px(10))).toggle(new Function() {
      public void f(Element e) {
        $("#b0").as(Effects.Effects).animate(" width: '400', opacity: '0.4', marginLeft: '0.6in', fontSize: '24px'");
      }
    }, new Function() {
      public void f(Element e) {
        $("#b0").as(Effects.Effects).animate(" width: '150', opacity: '1', marginLeft: '0', fontSize: '10px'");
      }
    });
    
    $("#b1").toggle(new Function() {
      public void f(Element e) {
        $(".a").toggle();
      }
    }, new Function() {
      public void f(Element e) {
        a.fadeOut();
      }
    }, new Function() {
      public void f(Element e) {
        a.fadeIn();
      }
    }, new Function() {
      public void f(Element e) {
        a.slideUp();
      }
    }, new Function() {
      public void f(Element e) {
        a.slideDown();
      }
    }, new Function() {
      public void f(Element e) {
        a.slideLeft();
      }
    }, new Function() {
      public void f(Element e) {
        a.slideRight();
      }
    }, new Function() {
      public void f(Element e) {
        a.animate("left: '+=300', width: 'hide'");
      }
    }, new Function() {
      public void f(Element e) {
        a.animate("left: '-=300', width: 'show'");
      }
    });
    
    $("#b2").toggle(new Function() {
      public void f(Element e) {
        b.as(Effects.Effects).clipUp();
      }
    }, new Function() {
      public void f(Element e) {
        b.as(Effects.Effects).clipDown();
      }
    }, new Function() {
      public void f(Element e) {
        b.as(Effects.Effects).clipDisappear();
      }
    }, new Function() {
      public void f(Element e) {
        b.as(Effects.Effects).clipAppear();
      }
    });
    
  }
}