keyboard controls
[mkgallery.git] / include / show.js
1 /*
2         $Id$
3
4         This is a part of mkgallery.pl suite
5         http://www.average.org/mkgallery/
6
7         Uses mootools (1.2) http://www.mootools.net/
8         Inspired by slideshow http://www.phatfusion.net/slideshow/
9 */
10
11 /*
12         Slideshow
13
14   - On show image: find this and next urls; put in place
15     those that are already here; free unneeded; initiate download of
16     the rest; if needed image is ready then initiate "transitioning", else
17     initiate "loading".
18   - On load complete: if this is the target image, initiate "transitioning".
19   - On "loading": show "loading" image
20   - On "transitioning": hide "loading" image; initiate FX animation to the
21     needed image.
22   - On animation complete: blank previous image; if "playing" then schedule
23     autoswitch to next image in the future.
24   - On autoswitch to next image: if "playing" then switch to next image.
25   - On switch to next image: if next exists, show next image, else show
26     "last image" message.
27   - On switch to prev image: if prev exists, show prev image, else show
28     "first image" message.
29   - On "play": make "playing"; switch to next image.
30   - On "stop": if "playing" cancel autoswitch; break "playing".
31   - On "start show": set up things; set "playing" state; show needed image.
32   - On "stop show": cancel any schedules, hide things.
33   - On resize: recalculate existing image size and position; determine
34     what image is needed; if it is not the one on display then request
35     "show image" for the new image.
36 */
37
38 var Show = new Class({
39
40         getOptions: function(){
41                 return {
42                         cbStart: function(){ alert('show start undefined'); },
43                         cbExit: function(){ alert('show exit undefined'); },
44                         percentage: 98,
45                         delay: 5000,
46                         fxduration: 200,
47                 }
48         },
49
50         initialize: function(vimgs, container, controls, options){
51                 this.setOptions(this.getOptions(), options);
52                 this.vimgs = vimgs;
53                 this.container = container;
54                 this.controls = controls;
55                 this.controls.registershow(this);
56                 this.timer = 0;
57                 this.delay = this.options.delay;
58                 this.cache = {
59                         prev: {},
60                         curr: {},
61                         next: {},
62                 };
63                 this.updatecoords();
64                 this.prevdisplay = new Element('img').
65                         setStyle('opacity', 0).
66                         injectInside(this.container.container);
67                 this.ondisplay = new Element('img').
68                         setStyle('opacity', 0).
69                         injectInside(this.container.container);
70                 this.loadingdiv = new Element('div').
71                 addClass('loading').setStyles({
72                         position: 'absolute',
73                         top: 0,
74                         left: 0,
75                         zIndex: 4,
76                         display: 'none',
77                         width: this.coords.width,
78                         height: this.coords.height,
79                 }).injectInside(this.container.container);
80
81                 window.addEvent('resize', this.resizer.bind(this))
82         },
83
84         /* event handler for window resize */
85
86         resizer: function(){
87                 this.updatecoords();
88                 var newstyle = this.calcsize(this.cache.curr);
89                 this.ondisplay.setStyles(newstyle);
90                 /* check if we need reload */
91         },
92
93         /* prev, play, stop, next, exit, comm are methods for button presses */
94
95         prev: function(){
96                 if (this.currentid > 0) {
97                         this.show(this.currentid-1);
98                 } else {
99                         /* alert('show.prev called beyond first element'); */
100                 }
101         },
102
103         stop: function(){
104                 if (this.isplaying) { $clear(this.timer); }
105                 this.isplaying = false;
106                 $clear(this.timer);
107                 this.controls.running(0);
108         },
109
110         play: function(){
111                 this.isplaying = true;
112                 this.timer = this.autonext.delay(this.delay,this);
113                 this.controls.running(1);
114         },
115
116         toggleplay: function(){
117                 if (this.isplaying) { this.stop(); }
118                 else { this.play(); }
119         },
120
121         next: function(){
122                 if (this.currentid < this.vimgs.length-1) {
123                         this.show(this.currentid+1);
124                 } else {
125                         /* alert('show.next called beyond last element'); */
126                 }
127         },
128
129         exit: function(){
130                 if (this.isplaying) { $clear(this.timer); }
131                 this.prevdisplay.setStyle('display', 'none');
132                 this.ondisplay.setStyle('display', 'none');
133                 this.stopfx();
134                 this.options.cbExit();
135         },
136
137         comm: function(){
138                 /* alert('show.comm called, do nothing'); */
139         },
140
141         /* Entry point: called to start doing things */
142
143         start: function(id, play){
144                 this.options.cbStart();
145                 this.isplaying = play;
146                 this.controls.running(this.isplaying);
147                 this.updatecoords();
148                 this.show(id);
149                 return false; /* to make it usable from href links */
150         },
151
152         /* "Private" methods to do the real job */
153
154         show: function(id){
155                 /* alert('called show.show('+id+')'); */
156                 this.currentid = id;
157                 var newcache = {
158                         prev: (id > 0)?this.prepare(id-1):{},
159                         curr: this.prepare(id),
160                         next: (id < (this.vimgs.length-1))?this.prepare(id+1):{},
161                 };
162                 delete this.cache;
163                 this.cache = newcache;
164                 if (this.cache.curr.ready) {
165                         this.display(this.cache.curr);
166                 } else {
167                         this.pendingload = true;
168                         this.showloading();
169                 }
170                 this.controls.info(id,this.vimgs.length,
171                                 this.vimgs[id][0],
172                                 this.vimgs[id][1]);
173         },
174
175         prepare: function(id){
176                 var vi;
177                 for (vi=0;vi<this.vimgs[id][2].length-1;vi++) {
178                         if ((this.vimgs[id][2][vi][0] >= this.target.width) ||
179                             (this.vimgs[id][2][vi][1] >= this.target.height)) {
180                                 break;
181                         }
182                 }
183                 /* alert('prepare id='+id+', selected '+vi+' at '+
184                         this.vimgs[id][2][vi][0]+'x'+
185                         this.vimgs[id][2][vi][1]); */
186                 var cachel;
187                 ['prev', 'curr', 'next'].each(function(el){
188                         if (this.cache[el] &&
189                             this.cache[el].id == id &&
190                             this.cache[el].vi == vi) {
191                                 cachel = this.cache[el];
192                         }
193                 }.bind(this));
194                 if (! cachel) {
195                         cachel = {
196                                 id: id,
197                                 vi: vi,
198                                 ready: false,
199                                 url: this.vimgs[id][2][vi][2],
200                         };
201                         cachel.img = this.bgload(cachel);
202                 }
203                 return cachel;
204         },
205
206         bgload: function(cachel){
207                 /* alert('bgload: id='+cachel.id+' vi='+cachel.vi+
208                         ' url='+cachel.url); */
209                 return new Asset.image(this.vimgs[cachel.id][2][cachel.vi][2],{
210                         id: this.vimgs[cachel.id][0],
211                         title: this.vimgs[cachel.id][1],
212                         onload: this.loadcomplete.bind(this,[cachel]),
213                 });
214         },
215
216         loadcomplete: function(cachel){
217                 /* alert('loadcomplete '+cachel.url+' id='+cachel.id+
218                         ' vi='+cachel.vi); */
219                 cachel.ready = true;
220                 if (cachel.id == this.currentid &&
221                     this.pendingload) {
222                         this.pendingload = false;
223                         this.hideloading();
224                         this.display(cachel);
225                 }
226         },
227
228         display: function(cachel){
229                 var newstyle = this.calcsize(cachel);
230                 var newimg = cachel.img.clone();
231                 newimg.setStyles(newstyle);
232                 newimg.setStyles({
233                         zIndex: 3,
234                         opacity: 0,
235                 });
236                 this.prevdisplay.dispose();
237                 this.prevdisplay = this.ondisplay.clone().
238                 setStyle('zIndex', 2).injectInside(this.container.container);
239                 newimg.replaces(this.ondisplay);
240                 this.ondisplay = newimg;
241                 this.effect();
242         },
243
244         effect: function(){
245                 this.fx = new Fx.Tween(this.ondisplay, {
246                         duration: this.options.fxduration,
247                 });
248                 this.fx.addEvent('complete',this.displaycomplete.bind(this));
249                 this.fx.start('opacity', 0, 1);
250         },
251
252         displaycomplete: function(){
253                 this.prevdisplay.setStyle('display', 'none');
254                 if (this.isplaying) {
255                         this.timer = this.autonext.delay(this.delay,this);
256                 }
257         },
258
259         autonext: function(){
260                 if (this.isplaying) {
261                         if (this.currentid < this.vimgs.length-1) {
262                                 this.show(this.currentid+1);
263                         } else {
264                                 this.exit();
265                         }
266                 }
267         },
268
269         calcsize: function(cachel){
270                 var factor = 1;
271                 var candidate;
272                 candidate = this.target.width /
273                                 this.vimgs[cachel.id][2][cachel.vi][0];
274                 if (factor > candidate) { factor = candidate; }
275                 candidate = this.target.height /
276                                 this.vimgs[cachel.id][2][cachel.vi][1];
277                 if (factor > candidate) { factor = candidate; }
278                 var w = Math.round(this.vimgs[cachel.id][2][cachel.vi][0] *
279                         factor);
280                 var h = Math.round(this.vimgs[cachel.id][2][cachel.vi][1] *
281                         factor);
282                 var t = Math.round((this.coords.height-h)/2);
283                 var l = Math.round((this.coords.width-w)/2);
284                 /* alert('new size: '+w+'x'+h+'+'+l+'+'+t); */
285                 return {
286                         position: 'absolute',
287                         top: t+'px',
288                         left: l+'px',
289                         width: w,
290                         height: h,
291                 };
292         },
293
294         showloading: function(){
295                 this.loadingdiv.setStyle('display', 'block');
296         },
297
298         hideloading: function(){
299                 this.loadingdiv.setStyle('display', 'none');
300         },
301
302         stopfx: function(){
303                 if (this.fx) this.fx.cancel();
304         },
305
306         updatecoords: function(){
307                 this.coords = this.container.getCoordinates();
308                 this.target = {
309                         width: Math.round(this.coords.width *
310                                                 this.options.percentage / 100),
311                         height: Math.round(this.coords.height *
312                                                 this.options.percentage / 100),
313                 };
314                 /* alert('coords: '+this.coords.width+'x'+this.coords.height+
315                      ', target: '+this.target.width+'x'+this.target.height); */
316         },
317
318 });
319 Show.implement(new Options);
320 Show.implement(new Events);
321