From: Eugene Crosser <crosser@average.org>
Date: Fri, 29 Aug 2008 13:48:04 +0000 (+0000)
Subject: switch to "new" slideshow (which is not working yet)
X-Git-Tag: 2.00~36
X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=commitdiff_plain;h=b55242bcbdfa5ab5bea3b3391cee28b79ce59762

switch to "new" slideshow (which is not working yet)
showwin and controls work fine
---

diff --git a/include/controls.js b/include/controls.js
index 0392bb7..4aa3002 100644
--- a/include/controls.js
+++ b/include/controls.js
@@ -60,7 +60,7 @@ var Controls = new Class({
 			id: 'controlPosition',
 		}).injectInside(this.commbox);
 		this.refbox = new Element('a', {
-			href: 'javascript: void();',
+			href: 'javascript: void(1);',
 			html: 'title',
 		}).addClass('controlRef').setProperties({
 			id: 'controlRef',
diff --git a/include/gallery.js b/include/gallery.js
index 5cd2b5d..0809758 100644
--- a/include/gallery.js
+++ b/include/gallery.js
@@ -5,123 +5,63 @@
         http://www.average.org/mkgallery/
 
 	Uses mootools (1.2) http://www.mootools.net/
-	Uses slideshow http://www.phatfusion.net/slideshow/
+	Uses multibox http://www.phatfusion.net/multibox/
+	Inspired by slideshow http://www.phatfusion.net/slideshow/
 */
 
 /*
 	Use slideshow classes with the index generated by mkgallery.pl
 */
 
-var showControls = new Class({
-
-	getOptions: function(){
-		return {
-			next: $empty,
-			prev: $empty,
-			stop: $empty,
-			play: $empty,
-			exit: $empty,
-		}
-	},
-
-	initialize: function(name,options){
-		this.setOptions(this.getOptions(), options)
-
-		this.container = $(name)
-
-		var buttons = ['prev','stop','play','next','exit','comm']
-		buttons.each(function(el){
-			var sub = new Element('div')
-			if (this.options[el]) {
-				sub.addEvent('click', function() {
-					this.options[el]()
-				}.bind(this))
-			}
-			sub.addClass('controlButton').setProperties({
-				id: el,
-				name: el,
-			}).injectInside(this.container)
-		},this)
-	},
-
-})
-showControls.implement(new Options)
-
-/* Make overlay window and start slideshow */
-function showImage(id,doplay) {
-	var i=rimgs[id]
-	/* alert('show id='+id+' index='+i+' doplay='+doplay) */
-	showwin.show()
-	show.play(i)
-	if (!doplay) {
-		show.stop()
-	}
-	return false
-}
-
-/* Stop slideshow and return to index page */
-function showStop() {
-	show.quit()
-	showwin.hide()
-	return false
-}
-
-/* List of lists of img variations. Each image variation is a three-element  */
-/* array: [width, height, url]. Index of the outer array is the global ID.   */
-var vimgs=[]
-/*
- * [
- *  [ id, title, [
- *                [ width, height, url ]
- *                ...
- *               ]
- *   ...
- *  ]
- *  ...
- * ]
-*/
-/* resolve string ID to index No which is the index in vimgs[] array */
-var rimgs=[]
-
 /* Initialize everything, to be called on domready */
 function init_gallery() {
-	$$('.conceal').each(function(el){
-		el.setStyle('display', 'none')
-	})
-	$$('a.infoBox').each(function(el){
-		var url=el.get('href')
-		el.set('href',url+'?conceal')
-	})
-	$$('a.showStart').each(function(el){
-		el.addEvent('click', showImage.bind(el,[el.get('id'),1]))
-	})
-	$$('a.showImage').each(function(el){
-		el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
-	})
+
+	/* List of lists of img variations. Each image variation is a three-element
+	 * array: [width, height, url]. Index of the outer array is the global ID.
+	 *
+	 * [
+	 *  [ id, title, [
+	 *                [ width, height, url ]
+	 *                ...
+	 *               ]
+	 *   ...
+	 *  ]
+	 *  ...
+	 * ]
+	*/
+	var vimgs=[];
+
+	/* resolve string ID to index No which is the index in vimgs[] array */
+	var rimgs=[];
+
+	/* Populate images list */
+
 	$$('div.varimages').each(function(el,i){
-		rimgs[el.id] = i
-		vimgs[i] = []
+		rimgs[el.id] = i;
+		vimgs[i] = [];
 		el.getElements('a').each(function(ael,j){
-			dim = /(\d+)[^\d](\d+)/.exec(ael.text)
-			w = dim[1]
-			h = dim[2]
-			vimgs[i][j]=[w,h,ael.href,el.id,el.title]
-		})
-	})
+			dim = /(\d+)[^\d](\d+)/.exec(ael.text);
+			w = dim[1];
+			h = dim[2];
+			vimgs[i][j]=[w,h,ael.href,el.id,el.title];
+		});
+	});
 
 			/* debugging output
-	var msg='loaded '+vimgs.length+' image descriptions:'
+	var msg='loaded '+vimgs.length+' image descriptions:';
 	vimgs.each(function(vimg,i){
-		msg+='\nid='+i
+		msg+='\nid='+i;
 		vimg.each(function(vimg,i){
-			msg+='\n     w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2]
-		})
-	})
-	alert(msg)
+			msg+='\n     w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2];
+		});
+	});
+	alert(msg);
 			/* end debugging output */
 
-	var ovlparams = {}
-	ovl = new overlay(ovlparams)
+	/* Initialize objects */
+
+	var ovlparams = {};
+	ovl = new overlay(ovlparams);
 
 	var iboxparams = {
 		overlay: ovl,
@@ -131,39 +71,50 @@ function init_gallery() {
 		movieWidth: 640,
 		movieHeight: 480,
 		descClassName: 'infoBoxDesc',
-	}
-	ibox = new multiBox('infoBox', iboxparams)
+	};
+	ibox = new multiBox('infoBox', iboxparams);
 
 	var winparms = {
-		/* onClick: showStop,  /* temporarily */
-		embed: ['slideshowControls'],
-	}
-	showwin = new showWindow('slideshowContainer',winparms)
+		tohide: 'indexContainer',
+	};
+	var showwin = new showWindow('slideshowContainer',winparms);
+
+	var ctlparams = {
+	};
+	var ctl = new Controls('slideshowControls','slideshowContainer',
+				ctlparams);
 
 	var showparms = {
-		wait: 3000,
-		effect: 'fade',
-		duration: 1000,
-		loop: false, 
-		thumbnails: false,
-		onClick: function(i){alert(i)},
-		comment: 'comm',
-	}
-	show = new slideShow('slideshowContainer',vimgs,showparms)
+		cbStart: function(){ showwin.show(); },
+		cbExit: function(){ showwin.hide(); },
+	};
+	var show = new Show(vimgs,showwin,ctl,showparms);
 
-	var ctlparams = {
-		next: function(){show.next()},
-		prev: function(){show.previous()},
-		stop: function(){show.stop()},
-		play: function(){show.play()},
-		exit: function(){showStop()},
-	}
-	ctl = new showControls('slideshowControls',ctlparams)
+	/* Update HTML */
+
+	$$('.conceal').each(function(el){
+		el.setStyle('display', 'none');
+	});
+	$$('a.infoBox').each(function(el){
+		var url=el.get('href');
+		el.set('href',url+'?conceal');
+	});
+
+	$$('a.showStart').each(function(el){
+		el.addEvent('click',
+				show.start.bind(show,[rimgs[el.get('id')],1]));
+	});
+	$$('a.showImage').each(function(el){
+		el.addEvent('click',
+				show.start.bind(show,[rimgs[el.get('id')],0]));
+	});
+
+	/* Determine if we need to go directly into show mode */
 
-	parsedurl = parseUrl(document.URL)
-	/* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) */
+	parsedurl = parseUrl(document.URL);
+	/* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL); */
 	if ($chk(parsedurl['anchor'])){
-		showImage(parsedurl['anchor'],0)
+		show.start(rimgs[parsedurl['anchor']],0);
 	}
 }
 
diff --git a/include/show.js b/include/show.js
index 427cb38..2b5264f 100644
--- a/include/show.js
+++ b/include/show.js
@@ -36,8 +36,8 @@ var Show = new Class({
 
 	getOptions: function(){
 		return {
-			onClick: $empty,
-			exit: function(){ alert('show exit undefined'); },
+			cbStart: function(){ alert('show start undefined'); },
+			cbExit: function(){ alert('show exit undefined'); },
 		}
 	},
 
@@ -82,8 +82,14 @@ var Show = new Class({
 				'<ref>','next called');
 	},
 
+	start: function(id, play){
+		this.options.cbStart();
+		/* real job here */
+		return false; /* tao make it usable from href links */
+	},
+
 	exit: function(){
-		this.options.exit();
+		this.options.cbExit();
 	},
 
 	comm: function(){
diff --git a/include/showwin.js b/include/showwin.js
index 6171ba2..3fac7f6 100644
--- a/include/showwin.js
+++ b/include/showwin.js
@@ -18,6 +18,7 @@ var showWindow = new Class({
 		return {
 			zIndex: 2,
 			container: document.body,
+			tohide: '',
 			onClick: $empty,
 		}
 	},
@@ -26,6 +27,7 @@ var showWindow = new Class({
 		this.setOptions(this.getOptions(), options);
 
 		this.options.container = $(this.options.container);
+		this.options.tohide = $(this.options.tohide);
 
 		this.container = new Element('div').addClass(name).
 		setProperties({
@@ -65,10 +67,16 @@ var showWindow = new Class({
 	},
 
 	show: function(){
+		if (this.options.tohide) {
+			this.options.tohide.setStyle('display', 'none');
+		}
 		this.container.setStyle('display', 'block');
 	},
 
 	hide: function(){
+		if (this.options.tohide) {
+			this.options.tohide.setStyle('display', 'block');
+		}
 		this.container.setStyle('display', 'none');
 	}
 })
diff --git a/include/slideshow.js b/include/slideshow.js
deleted file mode 100644
index 5d648c8..0000000
--- a/include/slideshow.js
+++ /dev/null
@@ -1,479 +0,0 @@
-
-/**************************************************************
-
-	Script		: slideShow
-	Version		: 1.3
-	Authors		: Samuel Birch
-	Desc		: transitions between images
-	Licence		: Open Source MIT Licence
-
-**************************************************************/
-
-var slideShow = new Class({
-	
-	getOptions: function(){
-		return {
-			effect: 'fade', //fade|wipe|slide|random
-			duration: 2000,
-			transition: Fx.Transitions.linear,
-			direction: 'right', //top|right|bottom|left|random
-			//color: false,
-			wait: 5000,
-			loop: true,
-			thumbnails: false,
-			thumbnailCls: 'outline',
-			backgroundSlider: false, //change to be an instance.
-			loadingCls: 'loading',
-			onClick: false,
-			comment: null,
-		};
-	},
-
-	initialize: function(container, images, options){
-		this.setOptions(this.getOptions(), options);
-		
-		this.container = $(container);
-		this.container.setStyles({
-			/* position: 'relative', */
-			overflow: 'hidden'
-		});
-		if(this.options.onClick){
-			this.container.addEvent('click', function(){
-				this.options.onClick(this.imageLoaded);
-			}.bind(this));
-		}
-		this.comm=this.options.comment;
-
-		this.imagesHolder = new Element('div').setStyles({
-			position: 'absolute',
-			overflow: 'hidden',
-			top: this.container.getStyle('height'),
-			left: 0,
-			width: '0px',
-			height: '0px',
-			display: 'none'
-		}).injectInside(this.container);
-		
-		/*
-		if($type(images) == 'string' && !this.options.thumbnails){
-			var imageList = [];
-			$$('.'+images).each(function(el){
-				imageList.push(el.src);
-				el.injectInside(this.imagesHolder);
-			},this);
-			this.images = imageList;
-			
-		}else if($type(images) == 'string' && this.options.thumbnails){
-			var imageList = [];
-			var srcList = [];
-			this.thumbnails = $$('.'+images);
-			this.thumbnails.each(function(el,i){
-				srcList.push(el.href);
-				imageList.push(el.getElement('img'));
-				el.href = 'javascript:;';
-				el.addEvent('click',function(){
-					this.stop();
-					this.play(i);				 
-				}.bind(this,el,i));
-			},this);
-			this.images = srcList;
-			this.thumbnailImages = imageList;
-			
-			if(this.options.backgroundSlider){
-				this.bgSlider = new BackgroundSlider(this.thumbnailImages,{mouseOver: false, duration: this.options.duration, className: this.options.thumbnailCls, padding:{top:0,right:-2,bottom:-2,left:0}});
-				this.bgSlider.set(this.thumbnailImages[0]);
-			}
-		
-		}else{
-		*/
-			this.images = images;
-		/*
-		}
-		*/
-		
-		this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
-			position: 'absolute',
-			top: 0,
-			left: 0,
-			zIndex: 3,
-			display: 'none',
-			width: this.container.getStyle('width'),
-			height: this.container.getStyle('height')
-		}).injectInside(this.container);
-		
-		this.oldImage = new Element('div').setStyles({
-			position: 'absolute',
-			overflow: 'hidden',
-			top: 0,
-			left: 0,
-			opacity: 0,
-			width: this.container.getStyle('width'),
-			height: this.container.getStyle('height')
-		}).injectInside(this.container);
-		
-		this.newImage = this.oldImage.clone();
-		this.newImage.injectInside(this.container);
-		
-		
-		
-		this.timer = 0;
-		this.image = -1;
-		this.imageLoaded = 0;
-		this.stopped = true;
-		this.started = false;
-		this.animating = false;
-		window.addEvent('resize', this.reshow.bind(this));
-		window.addEvent('scroll', this.reshow.bind(this));
-	},
-	
-	load: function(){
-		$clear(this.timer);
-		this.loading.setStyle('display','block');
-		this.image++;
-		var i;
-		var width;
-		var height;
-		var img;
-		for (i=0;i<this.images[this.image].length;i++) {
-			width = this.images[this.image][i][0];
-			height = this.images[this.image][i][1];
-			img = this.images[this.image][i][2];
-			if (width >= this.width || height >= this.height) {
-				break;
-			}
-		}
-		/* alert('req1 image '+img); */
-		delete this.imageObj;
-		
-		doLoad = true;
-		this.imagesHolder.getElements('img').each(function(el){
-			var src = this.images[this.image][i][2];
-			/* alert('req2 image '+src); */
-			if(el.src == src){
-				this.imageObj = el;
-				doLoad = false;
-				this.add = false;
-				this.show();
-			}
-		},this);
-		
-		if(doLoad){
-			this.add = true;
-			this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});
-			this.imageObj.set('width', width).set('height', height);
-		}
-		this.imageObj.set('id', this.images[this.image][i][3]);
-		this.imageObj.set('title', this.images[this.image][i][4]);
-	},
-
-	restyle: function(imgobj){
-		var width = imgobj.get('width');
-		var height = imgobj.get('height');
-		var vfactor = this.width/width;
-		var hfactor = this.height/height;
-		var factor = 1;
-		if (vfactor < factor) { factor = vfactor; }
-		if (hfactor < factor) { factor = hfactor; }
-		factor *= .95;
-		if (factor < 1) {
-			height = Math.round(height * factor);
-			width = Math.round(width * factor);
-		}
-		var topoff = (this.height - height)/2;
-		var leftoff = (this.width - width)/2;
-		/* alert('dim: '+width+'x'+height+'+'+leftoff+'+'+topoff); */
-		imgobj.setStyles({
-			position: 'absolute',
-			top: topoff,
-			left: leftoff,
-			width: width,
-			height: height,
-		});
-	},
-
-	show: function(add){
-		
-		this.restyle(this.imageObj);
-		var oimg = this.oldImage.getElement('img');
-		if (oimg) {
-			this.restyle(oimg);
-		}
-
-		if(this.add){
-			this.imageObj.injectInside(this.imagesHolder);
-		}
-		
-		this.newImage.setStyles({
-			zIndex: 1,
-			opacity: 0
-		});
-		var img = this.newImage.getElement('img');
-		if(img){
-			this.imageObj.clone().replaces(img);
-			//img.replaces(this.imageObj.clone());
-		}else{
-			var obj = this.imageObj.clone();
-			obj.injectInside(this.newImage);
-		}
-
-		this.imageLoaded = this.image;
-		this.loading.setStyle('display','none');
-		this.effect();
-		this.comm = $(this.comm);
-		if (this.comm) {
-			var a = this.comm.getElement('a');
-			if (a) a.dispose();
-			a = new Element('a', {
-				href: '#'+this.imageObj.get('id'),
-				html: this.imageObj.get('title'),
-			}).injectInside(this.comm);
-		}
-	},
-	
-	wait: function(){
-		this.timer = this.load.delay(this.options.wait,this);
-	},
-	
-	play: function(num){
-		this.position();
-		if(this.stopped){
-			if(num > -1){this.image = num-1};
-			if(this.image < this.images.length){
-				this.stopped = false;
-				if(this.started){
-					this.next();
-				}else{
-					this.load();
-				}
-				this.started = true;
-			}
-		}
-	},
-	
-	stop: function(){
-		$clear(this.timer);
-		this.stopped = true;
-	},
-
-	quit: function(){
-		this.stop();
-	/* does not work */
-		var oimg = this.oldImage.getElement('img');
-		if (oimg) {
-			oimg.dispose();
-			delete oimg;
-		}
-	},
-	
-	next: function(wait){
-		var doNext = true;
-		if(wait && this.stopped){
-			doNext = false;
-		}
-		if(this.animating){
-			doNext = false;
-		}
-		if(doNext){
-			this.cloneImage();
-			$clear(this.timer);
-			/* console.log(this.image) */
-			if(this.image < this.images.length-1){
-				if(wait){
-					this.wait();
-				}else{
-					this.load();	
-				}
-			}else{
-				if(this.options.loop){
-					this.image = -1;
-					if(wait){
-						this.wait();
-					}else{
-						this.load();	
-					}
-				}else{
-					this.stopped = true;
-				}
-			}
-		}
-	},
-	
-	previous: function(){
-		if(this.imageLoaded == 0){
-			this.image = this.images.length-2;	
-		}else{
-			this.image = this.imageLoaded-2;
-		}
-		this.next();
-	},
-	
-	cloneImage: function(){
-		var img = this.oldImage.getElement('img');
-		if(img){
-			this.imageObj.clone().replaces(img);
-			//img.replaces(this.imageObj.clone());
-		}else{
-			var obj = this.imageObj.clone();
-			obj.injectInside(this.oldImage);
-		}
-		
-		this.oldImage.setStyles({
-			zIndex: 0,
-			top: 0,
-			left: 0,
-			opacity: 1
-		});
-		
-		this.newImage.setStyles({opacity:0});
-	},
-	
-	
-	effect: function(){
-		this.animating = true;
-		this.effectObj = new Fx.Morph(this.newImage, {
-			duration: this.options.duration,
-			transition: this.options.transition
-		});
-		
-		var myFxTypes = ['fade','wipe','slide'];
-		var myFxDir = ['top','right','bottom','left'];
-		
-		if(this.options.effect == 'fade'){
-			this.fade();
-			
-		}else if(this.options.effect == 'wipe'){
-			if(this.options.direction == 'random'){
-				this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
-			}else{
-				this.setup(this.options.direction);
-			}
-			this.wipe();
-			
-		}else if(this.options.effect == 'slide'){
-			if(this.options.direction == 'random'){
-				this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
-			}else{
-				this.setup(this.options.direction);
-			}
-			this.slide();
-			
-		}else if(this.options.effect == 'random'){
-			var type = myFxTypes[Math.floor(Math.random()*(2+1))];
-			if(type != 'fade'){
-				var dir = myFxDir[Math.floor(Math.random()*(3+1))];
-				if(this.options.direction == 'random'){
-					this.setup(dir);
-				}else{
-					this.setup(this.options.direction);
-				}
-			}else{
-				this.setup();
-			}
-			this[type]();
-		}
-	},
-	
-	setup: function(dir){
-		if(dir == 'top'){
-			this.top = -this.height;
-			this.left = 0;
-			this.topOut = this.height;
-			this.leftOut = 0;
-			
-		}else if(dir == 'right'){
-			this.top = 0;
-			this.left = this.width;
-			this.topOut = 0;
-			this.leftOut = -this.width;
-			
-		}else if(dir == 'bottom'){
-			this.top = this.height;
-			this.left = 0;
-			this.topOut = -this.height;
-			this.leftOut = 0;
-			
-		}else if(dir == 'left'){
-			this.top = 0;
-			this.left = -this.width;
-			this.topOut = 0;
-			this.leftOut = this.width;
-			
-		}else{
-			this.top = 0;
-			this.left = 0;
-			this.topOut = 0;
-			this.leftOut = 0;
-		}
-	},
-	
-	fade: function(){
-		this.effectObj.start({
-			opacity: [0,1]
-		});
-		this.resetAnimation.delay(this.options.duration+90,this);
-		if(!this.stopped){
-		this.next.delay(this.options.duration+100,this,true);
-		}
-	},
-	
-	wipe: function(){
-		this.newImage.morph({
-			duration: this.options.duration,
-			transition: this.options.transition,
-			top: [0,this.topOut],
-			left: [0, this.leftOut]
-		})
-		this.effectObj.start({
-			top: [this.top,0],
-			left: [this.left,0],
-			opacity: [1,1]
-		},this);
-		this.resetAnimation.delay(this.options.duration+90,this);
-		if(!this.stopped){
-		this.next.delay(this.options.duration+100,this,true);
-		}
-	},
-	
-	slide: function(){
-		this.effectObj.start({
-			top: [this.top,0],
-			left: [this.left,0],
-			opacity: [1,1]
-		},this);
-		this.resetAnimation.delay(this.options.duration+90,this);
-		if(!this.stopped){
-		this.next.delay(this.options.duration+100,this,true);
-		}
-	},
-	
-	resetAnimation: function(){
-		this.animating = false;
-		this.oldImage.setStyles({
-			opacity: 0
-		});
-	},
-
-	position: function(){
-		var myCoords = this.container.getCoordinates();
-		this.width = myCoords.width;
-		this.height = myCoords.height;
-		/*
-		this.width = this.container.getStyle('width').toInt();
-		this.height = this.container.getStyle('height').toInt();
-		*/
-		/* alert('container dim: '+this.width+'x'+this.height); */
-	},
-
-	reshow: function(){
-		this.position();
-		this.image--;
-		this.load();
-	},
-	
-});
-slideShow.implement(new Options);
-slideShow.implement(new Events);
-
-
-/*************************************************************/
-
diff --git a/mkgallery.pl b/mkgallery.pl
index d5473c1..6b3febe 100755
--- a/mkgallery.pl
+++ b/mkgallery.pl
@@ -577,10 +577,14 @@ sub startindex {
 				{-src=>$inc."overlay.js"},
 				{-src=>$inc."urlparser.js"},
 				{-src=>$inc."multibox.js"},
-				{-src=>$inc."slideshow.js"},
+				{-src=>$inc."showwin.js"},
+				{-src=>$inc."controls.js"},
+				{-src=>$inc."show.js"},
 				{-src=>$inc."gallery.js"},
 			]),"\n",
 		comment("Created by ".$version),"\n",
+		start_div({-class => 'indexContainer',
+				-id => 'indexContainer'}),
 		a({-href=>"../index.html"},"UP"),"\n",
 		start_center,"\n",
 		h1($title),"\n",
@@ -591,7 +595,7 @@ sub endindex {
 	my $self = shift;
 	my $IND = $self->{-IND};
 
-	print $IND end_center,end_html,"\n";
+	print $IND end_center,end_div,end_html,"\n";
 
 	close($IND) if ($IND);
 	undef $self->{-IND};