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
|
package gquery.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NodeList;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Node;
import com.google.gwt.user.client.Event;
import static gquery.client.GQuery.$;
import static gquery.client.Effects.Effects;
/**
*
*/
public class GQueryDemoModule implements EntryPoint {
// Compile-time Selectors!
interface Slide extends Selectors {
// find all LI elements in DIV.slide elements
@Selector("div.slide li")
NodeList<Element> allSlideBullets();
// find all LI elements rooted at ctx
@Selector("li")
NodeList<Element> slideBulletsCtx(Node ctx);
// Find all DIV elements with class 'slide'
@Selector("div.slide")
NodeList<Element> allSlides();
}
public void onModuleLoad() {
// Ask GWT compiler to generate our interface
final Slide s = GWT.create(Slide.class);
// Find all slides, set css to display: none
// change first slide to display: block
$(s.allSlides()).css("display", "none")
.eq(0).css("display", "block");
// we initially hide all bullets by setting opacity to 0
$(s.allSlideBullets()).css("opacity", "0");
// add onclick handler to body element
$(Document.get().getBody()).click(new Function() {
// two state variables to note current slide being shown
// and current bullet
int curSlide = 0;
int curBullets = 0;
// query and store all slides, and bullets of current slide
GQuery slides = $(s.allSlides());
GQuery bullets = $(s.slideBulletsCtx(slides.get(curSlide)));
public boolean f(Event e) {
// onclick, if not all bullets shown, show a bullet and increment
if (curBullets < bullets.size()) {
bullets.eq(curBullets++).as(Effects).fadeIn();
} else {
// all bullets shown, hide them and current slide
bullets.css("opacity","0");
slides.eq(curSlide).css("display", "none");
// move to next slide, checking for wrap around
curSlide++;
if(curSlide == slides.size()) {
curSlide = 0;
}
curBullets = 0;
// query for new set of bullets, and show next slide
// by changing opacity to 1 and display to block
bullets = $(s.slideBulletsCtx(slides.get(curSlide)));
slides.eq(curSlide).css("display", "block").as(Effects).fadeIn();
}
return true;
}
});
}
}
|
