to stop leaking showwin's internals, make a trivial getter
[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 /*
64  *  thescripts.com/forum/thread170365.html
65  */
66                 var hashpos = document.URL.search(/#/);
67                 if (hashpos > 0) {
68                         this.baseurl = document.URL.slice(0,hashpos);
69                 } else {
70                         this.baseurl = document.URL
71                 }
72
73                 this.updatecoords();
74                 this.prevdisplay = new Element('img').
75                         set('class', 'mainformat').
76                         setProperty('alt', 'Current Image').
77                         setStyle('opacity', 0).
78                         injectInside(this.container.domelement());
79                 this.ondisplay = this.prevdisplay.clone().
80                         injectInside(this.container.domelement());
81                 this.loadingdiv = new Element('div').
82                 addClass('loading').setStyles({
83                         position: 'absolute',
84                         top: 0,
85                         left: 0,
86                         zIndex: 4,
87                         display: 'none',
88                         width: this.coords.width,
89                         height: this.coords.height,
90                 }).injectInside(this.container.domelement());
91
92                 window.addEvent('resize', this.resizer.bind(this))
93         },
94
95         /* event handler for window resize */
96
97         resizer: function(){
98                 this.updatecoords();
99                 var newstyle = this.calcsize(this.cache.curr);
100                 this.ondisplay.setStyles(newstyle);
101                 /* check if we need reload */
102         },
103
104         /* prev, play, stop, next, exit, comm are methods for button presses */
105
106         prev: function(){
107                 this.cleartimer();
108                 this.stopfx();
109                 if (this.currentid > 0) {
110                         this.show(this.currentid-1);
111                 } else {
112                         /* alert('show.prev called beyond first element'); */
113                 }
114         },
115
116         stop: function(){
117                 this.cleartimer()
118                 this.isplaying = false;
119                 this.controls.running(0);
120         },
121
122         play: function(){
123                 this.isplaying = true;
124                 this.timer = this.autonext.delay(this.delay,this);
125                 this.controls.running(1);
126         },
127
128         toggleplay: function(){
129                 if (this.isplaying) { this.stop(); }
130                 else { this.play(); }
131         },
132
133         next: function(){
134                 this.cleartimer();
135                 this.stopfx();
136                 if (this.currentid < this.vimgs.length-1) {
137                         this.show(this.currentid+1);
138                 } else {
139                         /* alert('show.next called beyond last element'); */
140                 }
141         },
142
143         exit: function(){
144                 this.cleartimer();
145                 this.stopfx();
146                 this.prevdisplay.setStyle('display', 'none');
147                 this.ondisplay.setStyle('display', 'none');
148                 document.location.href = this.baseurl;
149                 this.options.cbExit();
150         },
151
152         comm: function(){
153                 /* alert('show.comm called, do nothing'); */
154         },
155
156         /* Entry point: called to start doing things */
157
158         start: function(id, play){
159                 this.options.cbStart();
160                 this.isplaying = play;
161                 this.controls.running(this.isplaying);
162                 this.updatecoords();
163                 this.show(id);
164                 return false; /* to make it usable from href links */
165         },
166
167         /* "Private" methods to do the real job */
168
169         show: function(id){
170                 /* alert('called show.show('+id+')'); */
171                 this.currentid = id;
172                 var newcache = {
173                         prev: (id > 0)?this.prepare(id-1):{},
174                         curr: this.prepare(id),
175                         next: (id < (this.vimgs.length-1))?this.prepare(id+1):{},
176                 };
177                 delete this.cache;
178                 this.cache = newcache;
179                 if (this.cache.curr.ready) {
180                         this.display(this.cache.curr);
181                 } else {
182                         this.pendingload = true;
183                         this.showloading();
184                 }
185                 document.location.href = this.baseurl+'#'+this.vimgs[id][0];
186                 this.controls.info(id,this.vimgs.length,
187                                 '#'+this.vimgs[id][0],
188                                 this.vimgs[id][1]);
189         },
190
191         prepare: function(id){
192                 var vi;
193                 for (vi=0;vi<this.vimgs[id][2].length-1;vi++) {
194                         if ((this.vimgs[id][2][vi][0] >= this.target.width) ||
195                             (this.vimgs[id][2][vi][1] >= this.target.height)) {
196                                 break;
197                         }
198                 }
199                 /* alert('prepare id='+id+', selected '+vi+' at '+
200                         this.vimgs[id][2][vi][0]+'x'+
201                         this.vimgs[id][2][vi][1]); */
202                 var cachel;
203                 ['prev', 'curr', 'next'].each(function(el){
204                         if (this.cache[el] &&
205                             this.cache[el].id == id &&
206                             this.cache[el].vi == vi) {
207                                 cachel = this.cache[el];
208                         }
209                 }.bind(this));
210                 if (! cachel) {
211                         cachel = {
212                                 id: id,
213                                 vi: vi,
214                                 ready: false,
215                                 url: this.vimgs[id][2][vi][2],
216                         };
217                         cachel.img = this.bgload(cachel);
218                 }
219                 return cachel;
220         },
221
222         bgload: function(cachel){
223                 /* alert('bgload: id='+cachel.id+' vi='+cachel.vi+
224                         ' url='+cachel.url); */
225                 return new Asset.image(this.vimgs[cachel.id][2][cachel.vi][2],{
226                         id: this.vimgs[cachel.id][0],
227                         title: this.vimgs[cachel.id][1],
228                         onload: this.loadcomplete.bind(this,[cachel]),
229                 });
230         },
231
232         loadcomplete: function(cachel){
233                 /* alert('loadcomplete '+cachel.url+' id='+cachel.id+
234                         ' vi='+cachel.vi); */
235                 cachel.ready = true;
236                 if (cachel.id == this.currentid &&
237                     this.pendingload) {
238                         this.pendingload = false;
239                         this.hideloading();
240                         this.display(cachel);
241                 }
242         },
243
244         display: function(cachel){
245                 var newstyle = this.calcsize(cachel);
246                 var newimg = cachel.img.clone();
247                 newimg.setStyles(newstyle);
248                 newimg.setStyles({
249                         zIndex: 3,
250                         opacity: 0,
251                 });
252                 this.prevdisplay.dispose();
253                 this.prevdisplay = this.ondisplay.clone().
254                 setStyle('zIndex', 2).injectInside(this.container.domelement());
255                 newimg.replaces(this.ondisplay);
256                 this.ondisplay = newimg;
257                 this.effect();
258         },
259
260         effect: function(){
261                 this.fx = new Fx.Tween(this.ondisplay, {
262                         duration: this.options.fxduration,
263                 });
264                 this.fx.addEvent('complete',this.displaycomplete.bind(this));
265                 this.fx.start('opacity', 0, 1);
266         },
267
268         displaycomplete: function(){
269                 this.prevdisplay.setStyle('display', 'none');
270                 if (this.isplaying) {
271                         this.timer = this.autonext.delay(this.delay,this);
272                 }
273         },
274
275         autonext: function(){
276                 if (this.isplaying) {
277                         if (this.currentid < this.vimgs.length-1) {
278                                 this.show(this.currentid+1);
279                         } else {
280                                 this.exit();
281                         }
282                 }
283         },
284
285         calcsize: function(cachel){
286                 var factor = 1;
287                 var candidate;
288                 candidate = this.target.width /
289                                 this.vimgs[cachel.id][2][cachel.vi][0];
290                 if (factor > candidate) { factor = candidate; }
291                 candidate = this.target.height /
292                                 this.vimgs[cachel.id][2][cachel.vi][1];
293                 if (factor > candidate) { factor = candidate; }
294                 var w = Math.round(this.vimgs[cachel.id][2][cachel.vi][0] *
295                         factor);
296                 var h = Math.round(this.vimgs[cachel.id][2][cachel.vi][1] *
297                         factor);
298                 var t = Math.round((this.coords.height-h)/2);
299                 var l = Math.round((this.coords.width-w)/2);
300                 /* alert('new size: '+w+'x'+h+'+'+l+'+'+t); */
301                 return {
302                         position: 'absolute',
303                         top: t+'px',
304                         left: l+'px',
305                         width: w,
306                         height: h,
307                 };
308         },
309
310         showloading: function(){
311                 this.loadingdiv.setStyle('display', 'block');
312         },
313
314         hideloading: function(){
315                 this.loadingdiv.setStyle('display', 'none');
316         },
317
318         cleartimer: function(){
319                 if (this.isplaying) { $clear(this.timer); }
320         },
321
322         stopfx: function(){
323                 if (this.fx) this.fx.cancel();
324         },
325
326         updatecoords: function(){
327                 this.coords = this.container.getCoordinates();
328                 this.target = {
329                         width: Math.round(this.coords.width *
330                                                 this.options.percentage / 100),
331                         height: Math.round(this.coords.height *
332                                                 this.options.percentage / 100),
333                 };
334                 /* alert('coords: '+this.coords.width+'x'+this.coords.height+
335                      ', target: '+this.target.width+'x'+this.target.height); */
336         },
337
338 });
339 Show.implement(new Options);
340 Show.implement(new Events);
341