initially import ZendFramework-1.9.5 into repository
[cacert-mgr.git] / external / ZendFramework-1.9.5 / externals / dojo / demos / faces / src.js
1 dojo.provide("dojoc.demos.faces.src");
2
3 dojo.require("dojox.fx.flip");
4 dojo.require("demos.faces.src.block");
5 dojo.require("dijit._base.sniff");
6 dojo.require("dojox.image._base");
7 dojo.require("dojox.image.LightboxNano");
8 dojo.require("dojox.analytics.Urchin");
9
10 (function(d){
11
12 // to reuse
13 d.NodeList.prototype.makeNano = function(){
14 return this.forEach(function(n){
15 new dojox.image.LightboxNano({ href: d.attr(n, "href") }, n);
16 });
17 }
18
19 var v = "flip", x = 0;
20 var base64Img = "";
21
22 var sortDivsByLengthOfFirstChildUl = function(id){
23 // don't ever let me see you doing this outside of a demo situation. there has
24 // got to be a better way.
25 id = d.byId(id);
26 d.query("> div", id).sort(function(a,b){
27 var q = "ul > li", al = d.query(q, a).length, bl = d.query(q, b).length;
28 return al > bl ? 0 : al < bl ? 1 : -1;
29 }).forEach(function(n){
30 id.appendChild(n);
31 });
32 }
33
34 var nameset = function(){
35 // quick, generate a list of names from top to bottom
36 var byid = d.byId;
37 return "" +
38 byid("hair").parentNode.className + ", " +
39 byid("eyes").parentNode.className + ", and " +
40 byid("mouth").parentNode.className + " make: "
41 ;
42 };
43
44 var demo = function(){
45
46 // each region has an id, and this order is convenient. keep it:
47 var pieceId = ["hair", "eyes", "mouth"],
48
49 // cache a ref to this node, and always make it 'off' by default
50 checknode = d.byId("random");
51
52 checknode.checked = false;
53
54 var nextImage = function(n){
55 // FIXME: there is no unity to this. should keep an index
56 // of each region individually. This is more "random" though.
57 if(++x > people.length - 1 ){ x = 0; }
58 if(people[x] == "webcam"){
59 // if we loaded webcam.js, this applies
60 n.parentNode.className = "";
61 var image = new Image();
62 image.src = base64Img;
63 d.style(n, "backgroundImage", "url(" + image.src + ")");
64 }else{
65 // otherwise, just set the image
66 d.style(n, "backgroundImage", "");
67 n.parentNode.className = people[x];
68 }
69 };
70
71 var flip = function(e){
72 // flip one of the pieceId nodes:
73 var n = e.target,
74 // create the flip animation:
75 fl = dojox.fx[v]({ node: n }),
76 // and determine which image to show after flip is over:
77 c = d.connect(fl, "onEnd", function(){
78 nextImage(n);
79 d.disconnect(c);
80 })
81 ;
82 fl.play();
83 }
84
85 // random logic, could move out into module:
86 var randomInterval;
87 var stopRandom = function(){
88 checknode.checked = false;
89 clearTimeout(randomInterval);
90 randomInterval = null;
91 }
92 var randomFunc = function(){
93 // pseudo-emulate (duck) the event object randomly:
94 flip({ target: d.byId(pieceId[(Math.floor(Math.random() * 3))]) });
95 }
96 var startRandom = function(){
97 randomInterval = setInterval(randomFunc, 4500);
98 randomFunc();
99 }
100
101 d.query("#flipper").onclick(function(e){
102 if(randomInterval){ stopRandom(); }
103 flip(e);
104 });
105 d.connect(checknode, "onchange", function(e){
106 // check if we should be looping or stop it:
107 if(!e.target.checked){
108 stopRandom();
109 }else{
110 startRandom();
111 }
112 });
113 // end random logic
114
115 // click handling for "hall of shame" link:
116 var blocker;
117 d.query("#saveAs").onclick(function(e){
118
119 var target = d.query("#faceContainer .container")[0];
120 blocker = d.block(target, { opacity:0.6, keepPosition:true, backgroundColor:"#000" });
121
122 // onclick, create a data object from the selected faces and send to backend
123 var data = {};
124 d.forEach(pieceId, function(piece){
125 data[piece] = d.byId(piece).parentNode.className || "";
126 });
127 setTimeout(d.partial(saveFace, data), 50);
128 stopRandom();
129
130 });
131
132 var saveFace = function(pay){
133 // a function to send the list of currently selected users to the backend
134 var url;
135 d.xhrPost({
136 url: "resources/imageMaker.php",
137 handleAs: "json",
138 handle: function(response){
139 // try{
140 url = response["file"];
141 if(response["name"]){
142 d.byId("savedName").innerHTML =
143 "<p class='who'>" + nameset() + "</p>" +
144 "<h2 id='currentName'>" + response["name"] + "</h2>"
145 ;
146
147 var c = response['clan'];
148
149 if(!response['duplicate'] && c){
150 // figure out clan
151
152 var clan = dojo.query("ul." + c);
153 if(!clan.length){
154 var t =
155 dojo.create("div",{
156 "class":"clan",
157 id: c,
158 innerHTML:"<h2><a href='#" + c + "'>" + c + "</a></h2>"
159 + "<ul class='" + c + "'></ul>"
160 }, "thumbnails");
161 clan = dojo.query("ul", t);
162 }
163
164 var td = dojo.create("li", {
165 "class":"thumbnail",
166 style:{ opacity:0 },
167 innerHTML:"<a href ='" + response["file"] + "'><img src='" + response["thumb"] + "'></a>"
168 }, clan[0]);
169
170 dojo.query("a", td).makeNano();
171
172 dojo.fadeIn({ node: td }).play();
173
174 }
175
176 sortDivsByLengthOfFirstChildUl("thumbnails");
177
178 setTimeout(function(){
179 window.location.hash = c;
180 }, 400);
181
182 }
183 // }catch(e){ console.warn(e); }
184 blocker.hide();
185 },
186 content: pay
187 });
188 }
189
190 // preload all the available images in people array:
191 dojox.image.preload(d.map(people, function(person){
192 return "images/" + person + ".jpg";
193 }));
194
195 // connect to the "hidden" setupSwf button to load the webcam code:
196 d.query("#setupSwf").onclick(function(e){
197 this.disabled = true;
198 d.addClass(this, "invisible");
199 // use keepRequires=[..] or this bracketed notation to prevent build from inlining:
200 // TODOC: maybe 'd.require()' isn't picked up either?!?
201 // d.require("dojoc.demos.faces.src.webcam");
202 d["require"]("dojoc.demos.faces.src.webcam");
203 }).forEach(function(n){
204 // in the "progressive case", FF and others retain all states :/ force it back.
205 n.disabled = false;
206 });
207
208 d.query(".imageThumb").makeNano();
209
210 // now set the three images to something random:
211 // FIXME: should we look for a #hash first, too?
212 sortDivsByLengthOfFirstChildUl("thumbnails");
213
214 setTimeout(function(){
215 d.forEach(pieceId, function(p, i){
216 setTimeout(function(){
217 flip({ target: d.byId(p) });
218 }, i * 150);
219 });
220 }, 300); // after a bit of time
221
222 // stall this just a little
223 setTimeout(function(){
224 new dojox.analytics.Urchin({
225 acct: "UA-3572741-1",
226 GAonLoad: function(){
227 this.trackPageView("/demos/faces");
228 }
229 });
230 }, 1500);
231
232 };
233
234 d.addOnLoad(demo);
235
236 })(dojo);