Team:SydneyUni Australia/Scripts/BarackSlideshow
From 2013.igem.org
(Difference between revisions)
C.Squirrel (Talk | contribs) (Blanked the page) |
C.Squirrel (Talk | contribs) |
||
Line 1: | Line 1: | ||
+ | /* | ||
+ | Script: BarackSlideshow.js | ||
+ | Lightweight slideshow script, based on Fx.MorphList | ||
+ | License: | ||
+ | MIT-style license. | ||
+ | |||
+ | Authors: | ||
+ | Guillermo Rauch | ||
+ | */ | ||
+ | |||
+ | var BarackSlideshow = new Class({ | ||
+ | |||
+ | Extends: Fx.MorphList, | ||
+ | Extends: MooTools, | ||
+ | |||
+ | options: {/* | ||
+ | onShow: $empty,*/ | ||
+ | auto: false, | ||
+ | autostart: false, | ||
+ | autointerval: 2000, | ||
+ | transition: 'fade', | ||
+ | tween: { duration: 700 } | ||
+ | }, | ||
+ | |||
+ | initialize: function(menu, images, loader, options){ | ||
+ | this.parent(menu, options); | ||
+ | this.images = $(images); | ||
+ | this.imagesitems = this.images.getChildren().fade('hide'); | ||
+ | $(loader).fade('in'); | ||
+ | new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() { | ||
+ | this.loaded = true; | ||
+ | $(loader).fade('out'); | ||
+ | if (this.current) this.show(this.items.indexOf(this.current)); | ||
+ | else if (this.options.auto && this.options.autostart) this.progress(); | ||
+ | }.bind(this) }); | ||
+ | if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition); | ||
+ | }, | ||
+ | |||
+ | auto: function(){ | ||
+ | if (!this.options.auto) return false; | ||
+ | $clear(this.autotimer); | ||
+ | this.autotimer = this.progress.delay(this.options.autointerval, this); | ||
+ | }, | ||
+ | |||
+ | onClick: function(event, item){ | ||
+ | this.parent(event, item); | ||
+ | event.stop(); | ||
+ | this.show(this.items.indexOf(item)); | ||
+ | $clear(this.autotimer); | ||
+ | }, | ||
+ | |||
+ | show: function(index) { | ||
+ | if (!this.loaded) return; | ||
+ | var image = this.imagesitems[index]; | ||
+ | if (image == this.curimage) return; | ||
+ | image.set('tween', this.options.tween).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide'); | ||
+ | image.getElement('img').setStyle('display', 'block'); | ||
+ | var trans = this.options.transition.run(null, this).split('-'); | ||
+ | switch(trans[0]){ | ||
+ | case 'slide': | ||
+ | var dir = $pick(trans[1], 'left'); | ||
+ | var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top'; | ||
+ | image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0); | ||
+ | break; | ||
+ | case 'fade': image.fade('in'); break; | ||
+ | } | ||
+ | image.get('tween').chain(function(){ | ||
+ | this.auto(); | ||
+ | this.fireEvent('show', image); | ||
+ | }.bind(this)); | ||
+ | this.curimage = image; | ||
+ | this.setCurrent(this.items[index]) | ||
+ | this.morphTo(this.items[index]); | ||
+ | return this; | ||
+ | }, | ||
+ | |||
+ | progress: function(){ | ||
+ | var curindex = this.imagesitems.indexOf(this.curimage); | ||
+ | this.show((this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0); | ||
+ | } | ||
+ | |||
+ | }); |
Latest revision as of 06:39, 1 August 2013
/* Script: BarackSlideshow.js Lightweight slideshow script, based on Fx.MorphList
License: MIT-style license.
Authors: Guillermo Rauch
- /
var BarackSlideshow = new Class({
Extends: Fx.MorphList, Extends: MooTools, options: {/* onShow: $empty,*/ auto: false, autostart: false, autointerval: 2000, transition: 'fade', tween: { duration: 700 } }, initialize: function(menu, images, loader, options){ this.parent(menu, options); this.images = $(images); this.imagesitems = this.images.getChildren().fade('hide'); $(loader).fade('in'); new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() { this.loaded = true; $(loader).fade('out'); if (this.current) this.show(this.items.indexOf(this.current)); else if (this.options.auto && this.options.autostart) this.progress(); }.bind(this) }); if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition); }, auto: function(){ if (!this.options.auto) return false; $clear(this.autotimer); this.autotimer = this.progress.delay(this.options.autointerval, this); }, onClick: function(event, item){ this.parent(event, item); event.stop(); this.show(this.items.indexOf(item)); $clear(this.autotimer); }, show: function(index) { if (!this.loaded) return; var image = this.imagesitems[index];
if (image == this.curimage) return;
image.set('tween', this.options.tween).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide');
image.getElement('img').setStyle('display', 'block');
var trans = this.options.transition.run(null, this).split('-'); switch(trans[0]){ case 'slide': var dir = $pick(trans[1], 'left'); var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top'; image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0); break; case 'fade': image.fade('in'); break; } image.get('tween').chain(function(){ this.auto(); this.fireEvent('show', image); }.bind(this)); this.curimage = image; this.setCurrent(this.items[index]) this.morphTo(this.items[index]);
return this;
}, progress: function(){ var curindex = this.imagesitems.indexOf(this.curimage); this.show((this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0); }
});