From 84036a64eb5be457cfa21450ddc7da596eec8bbc Mon Sep 17 00:00:00 2001 From: Eugene Crosser Date: Sun, 31 Aug 2008 15:23:58 +0000 Subject: [PATCH] display & slideshow work, FX not implemented --- include/gallery.js | 6 +- include/show.js | 204 ++++++++++++++++++++++++++++++++++++++++++--- include/showwin.js | 10 +++ 3 files changed, 205 insertions(+), 15 deletions(-) diff --git a/include/gallery.js b/include/gallery.js index 4ea3f2d..e4eeef3 100644 --- a/include/gallery.js +++ b/include/gallery.js @@ -51,9 +51,9 @@ function init_gallery() { /* debugging output var msg='loaded '+vimgs.length+' image descriptions:'; vimgs.each(function(vimg,i){ - msg+='\nid='+i; - vimg.each(function(vimg,i){ - msg+='\n w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2]; + msg+='\nid='+i+' ('+vimg[0]+') title='+vimg[1]; + vimg[2].each(function(vv,i){ + msg+='\n w='+vv[0]+' h='+vv[1]+' url='+vv[2]; }); }); alert(msg); diff --git a/include/show.js b/include/show.js index a614c34..0658983 100644 --- a/include/show.js +++ b/include/show.js @@ -41,15 +41,38 @@ var Show = new Class({ return { cbStart: function(){ alert('show start undefined'); }, cbExit: function(){ alert('show exit undefined'); }, + percentage: 98, + delay: 5000, } }, initialize: function(vimgs, container, controls, options){ this.setOptions(this.getOptions(), options); this.vimgs = vimgs; - this.container = $(container); + this.container = container; this.controls = controls; this.controls.registershow(this); + this.timer = 0; + this.delay = this.options.delay; + this.cache = { + prev: {}, + curr: {}, + next: {}, + }; + this.updatecoords(); + this.previd = -1; + this.ondisplay = new Element('img'). + injectInside(this.container.container); + this.loadingdiv = new Element('div'). + addClass('loading').setStyles({ + position: 'absolute', + top: 0, + left: 0, + zIndex: 3, + display: 'none', + width: this.coords.width, + height: this.coords.height, + }).injectInside(this.container.container); window.addEvent('resize', this.resizer.bind(this)) }, @@ -57,34 +80,46 @@ var Show = new Class({ /* event handler for window resize */ resizer: function(){ - alert('show.resizer called'); + this.updatecoords(); + var newstyle = this.calcsize(this.cache.curr); + this.ondisplay.setStyles(newstyle); + /* check if we need reload */ }, /* prev, play, stop, next, exit, comm are methods for button presses */ prev: function(){ - this.controls.info(-1,this.vimgs.length, - '','prev called'); + if (this.currentid > 0) { + this.show(this.currentid-1); + } else { + alert('show.prev called beyond first element'); + } }, stop: function(){ - this.controls.info(0,this.vimgs.length, - '','stop called'); + if (this.isplaying) { $clear(this.timer); } + this.isplaying = false; + $clear(this.timer); this.controls.running(0); }, play: function(){ - this.controls.info(999,this.vimgs.length, - '','play called'); + this.isplaying = true; + this.timer = this.autonext.delay(this.delay,this); this.controls.running(1); }, next: function(){ - this.controls.info(1,this.vimgs.length, - '','next called'); + if (this.currentid < this.vimgs.length-1) { + this.show(this.currentid+1); + } else { + alert('show.next called beyond last element'); + } }, exit: function(){ + if (this.isplaying) { $clear(this.timer); } + this.stopfx(); this.options.cbExit(); }, @@ -96,13 +131,158 @@ var Show = new Class({ start: function(id, play){ this.options.cbStart(); - alert('starting at '+id+', play='+play); - /* real job here */ + this.isplaying = play; + this.controls.running(this.isplaying); + this.show(id); return false; /* to make it usable from href links */ }, /* "Private" methods to do the real job */ + show: function(id){ + /* alert('called show.show('+id+')'); */ + this.previd = this.currentid; + this.currentid = id; + var newcache = { + prev: (id > 0)?this.prepare(id-1):{}, + curr: this.prepare(id), + next: (id < (this.vimgs.length-1))?this.prepare(id+1):{}, + }; + delete this.cache; + this.cache = newcache; + if (this.cache.curr.ready) { + this.display(this.cache.curr); + } else { + this.pendingload = true; + this.showloading(); + } + this.controls.info(id,this.vimgs.length, + this.vimgs[id][0], + this.vimgs[id][1]); + }, + + prepare: function(id){ + var vi; + for (vi=0;vi= this.target.width) || + (this.vimgs[id][2][vi][1] >= this.target.height)) { + break; + } + } + /* alert('prepare id='+id+', selected '+vi+' at '+ + this.vimgs[id][2][vi][0]+'x'+ + this.vimgs[id][2][vi][1]); */ + var cachel; + ['prev', 'curr', 'next'].each(function(el){ + if (this.cache[el] && + this.cache[el].id == id && + this.cache[el].vi == vi) { + cachel = this.cache[el]; + } + }.bind(this)); + if (! cachel) { + cachel = { + id: id, + vi: vi, + ready: false, + url: this.vimgs[id][2][vi][2], + }; + cachel.img = this.bgload(cachel); + } + return cachel; + }, + + bgload: function(cachel){ + /* alert('bgload: id='+cachel.id+' vi='+cachel.vi+ + ' url='+cachel.url); */ + return new Asset.image(this.vimgs[cachel.id][2][cachel.vi][2],{ + id: this.vimgs[cachel.id][0], + title: this.vimgs[cachel.id][1], + onload: this.loadcomplete.bind(this,[cachel]), + }); + }, + + loadcomplete: function(cachel){ + /* alert('loadcomplete '+cachel.url+' id='+cachel.id+ + ' vi='+cachel.vi); */ + cachel.ready = true; + if (cachel.id == this.currentid && + this.pendingload) { + this.pendingload = false; + this.hideloading(); + this.display(cachel); + } + }, + + display: function(cachel){ + var newstyle = this.calcsize(cachel); + var newimg = cachel.img.clone(); + newimg.setStyles(newstyle); + newimg.replaces(this.ondisplay); + this.ondisplay = newimg; + if (this.isplaying) { + this.timer = this.autonext.delay(this.delay,this); + } + }, + + autonext: function(){ + if (this.isplaying) { + if (this.currentid < this.vimgs.length-1) { + this.show(this.currentid+1); + } else { + this.exit(); + } + } + }, + + calcsize: function(cachel){ + var factor = 1; + var candidate; + candidate = this.target.width / + this.vimgs[cachel.id][2][cachel.vi][0]; + if (factor > candidate) { factor = candidate; } + candidate = this.target.height / + this.vimgs[cachel.id][2][cachel.vi][1]; + if (factor > candidate) { factor = candidate; } + var w = Math.round(this.vimgs[cachel.id][2][cachel.vi][0] * + factor); + var h = Math.round(this.vimgs[cachel.id][2][cachel.vi][1] * + factor); + var t = Math.round((this.coords.height-h)/2); + var l = Math.round((this.coords.width-w)/2); + /* alert('new size: '+w+'x'+h+'+'+l+'+'+t); */ + return { + position: 'absolute', + top: t+'px', + left: l+'px', + width: w, + height: h, + }; + }, + + showloading: function(){ + this.loadingdiv.setStyle('display', 'block'); + }, + + hideloading: function(){ + this.loadingdiv.setStyle('display', 'none'); + }, + + stopfx: function(){ + }, + + updatecoords: function(){ + this.coords = this.container.getCoordinates(); + this.target = { + width: Math.round(this.coords.width * + this.options.percentage / 100), + height: Math.round(this.coords.height * + this.options.percentage / 100), + }; + /* alert('coords: '+this.coords.width+'x'+this.coords.height+ + ', target: '+this.target.width+'x'+this.target.height); */ + }, + }); Show.implement(new Options); Show.implement(new Events); diff --git a/include/showwin.js b/include/showwin.js index c900ab4..9656826 100644 --- a/include/showwin.js +++ b/include/showwin.js @@ -53,10 +53,12 @@ var showWindow = new Class({ position: function(){ if(this.options.container == document.body){ + this.w = window.getWidth(); this.h = window.getHeight(); this.s = window.getScrollTop(); }else{ var myCoords = this.options.container.getCoordinates(); + this.w = myCoords.width; this.h = myCoords.height; this.s = myCoords.top; } @@ -66,6 +68,14 @@ var showWindow = new Class({ }) }, + getCoordinates: function(){ + return { + width: this.w, + height: this.h, + top: this.s, + }; + }, + show: function(){ if (this.options.tohide) { this.hiddenstyles = this.options.tohide.getStyles( -- 2.39.2