/******************************************************************************** * ProtoSlider.js - prototype.js based plugin * @version: 1.0 alhpa 6 * @requires: prototype.js v1.6.1 or later * @author: Alexandre Anoutchine * * Examples and documentation at: http://www.protoslider.com * Prototype.js at : http://www.prototypejs.org/download * * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php ********************************************************************************/ //"use strict"; //var alert, Class, $A, $, Ajax, Hash, Element, document, window, setInterval, clearInterval, setTimeout, clearTimeout, Event; /* settings: default possible description * navigation: [false] (false, true) Left, right navigation buttons * navOpacity: [0.7] (0 - 1) Nav. button's opacity * navId: [] Extended navigation container id * * fps: [25] (1 - 100) Frames per second * duration: [2000] (100 - 10000) Animation time * interval: [false] (100 - 1000000) or false Interval between slides (in milliseconds) * hoverPause: [true] (true, false) Pause on mouse hover * * effect [] (straight, corner, random) Effect * random: [all combination] (list of effects separeted by space, ex: "straight:owh:a swirl:owh:a:inv grid:ow:a") * columns: [] (1 - 100) Number of columns ( columns*rows must be between 1 - 300 ) * rows: [] (1 - 100) Number of rows ( columns*rows must be between 1 - 300 ) * seat: [0.25] (0.0 - 1.0) Single element animation time in % of total "duration" * speedup: [2] (1 - 10) Speedup the animation * * onChange(n): On change event * onFinished(n): On animation finished */ var ProtoSlider = Class.create({ // Public methods initialize: function(id, settings) { settings = settings || {}; if (!id || !$(id)) { throw "No protoSlider container found!"; } // Internal data this._ns_slider = { container: $(id), nav: { ext:[], // Extended navigation lr: [] // Simple (left, right) navigation }, dim: this._dimensions($(id)), path: this._path(), ptimer: null, // Periodical timer resize: false, // New size flag slide: 0, // Current slide number slides: [], // Data timer: null, // Animation timer task: {slide: -1, type: 1, effect: null, speedup: false}, work: [], // Animation queue working: false }; // ProtoSlider Settings Object.extend(this._ns_slider, { settings: { // General navigation: settings.navigation || false, navId: settings.navId || null, navOpacity: settings.navOpacity || 0.7, onChange: settings.onChange || null, onFinished: settings.onFinished || null, // Animation fps: this._check(settings.fps, 1, 100, 25), duration: this._check(settings.duration, 100, 10000, 2000), interval: settings.interval ? this._check(settings.interval, 100, 1000000, 5000) : false, hoverPause: settings.hoverPause || true, // Main slide animation effect: settings.effect || null, random: settings.random ? settings.random.split(' ') : null, columns: this._check(settings.columns, 1, 100, 0), rows: this._check(settings.rows, 1, 100, 0), seat: this._check(settings.seat, 0, 1, 0.25), speedup: this._check(settings.speedup, 1, 10, 2) // Title animation } }); // Validate params this._validate(); this._ns_slider.container.observe('mouseover', this._onMouseOver.bindAsEventListener(this)); this._ns_slider.container.observe('mouseout', this._onMouseOut.bindAsEventListener(this)); this._init(); this._create(); this._createNavigation(); // Create navigation this.play(); }, cancel: function() { var ropt; for (var i=0; i=1 ? factor : 1); for (var i=0; i= min && value <= max? value : def_value); }, _create: function() { var elm_h = Math.round(this._ns_slider.dim.height/this._ns_slider.settings.rows); var elm_w = Math.round(this._ns_slider.dim.width/this._ns_slider.settings.columns); var last_h = this._ns_slider.dim.height-(this._ns_slider.settings.rows-1)*elm_h; var last_w = this._ns_slider.dim.width-(this._ns_slider.settings.columns-1)*elm_w; this._ns_slider.resize = false; for (var k=0; k0 ? effect.substr(0, effect.indexOf(':')) : effect) { case 'straight': for (i=0; i=0 && sense; j--) { for (i=0; i=0 && (1-sense)*j(0-sense)) { if (sense) {y++;} else {y--;} } else {if (x=x1; i--) {addxy1(i, y2);}}y2--; if (x1<=x2) {for (i=y2; i>=y1; i--) {addxy1(x1, i);}}x1++; } break; case 'grid': for (i=0; i=0; j--) { if ((i+j)%2) {addxy1(i ,j);} else {addxy2(i ,j);} } } pattern1 = pattern1.concat(pattern2); break; case 'strokes1': for (i=0; i=0; j--) { addxy1(i%2 ? columns-i-columns%2 : i ,i%2 ? rows-j-1 : j); } } for (j=0; j=0; i--) { addxy1(j%2 ? columns-i-1 : i ,j%2 ? rows-j-rows%2 : j); } } break; case '':alert("oups !!!"); break; } return (effect.include(this._eff_inv) ? pattern1.reverse() : pattern1); }, _random: function() { if (this._ns_slider.settings.random) { return this._ns_slider.settings.random[Math.round(Math.random()* (this._ns_slider.settings.random.length-1))]; } return this._effects[Math.round(Math.random()*(this._effects.length-1))]+ this._eff_trans[Math.round(Math.random()*(this._eff_trans.length-1))]+ this._eff_sense[Math.round(Math.random()*(this._eff_sense.length-1))]+ (Math.round(Math.random())? this._eff_inv : '')+ (Math.round(Math.random())? this._eff_od : ''); }, _render: function() { for (var i=0; i= ropt.fpa) { ropt.render(frame = ropt.fpa); this._ns_slider.slides[ropt.prev].meta.visibility(false); this._ns_slider.slides[this._ns_slider.slide].meta.visibility(true); this._ns_slider.slides[this._ns_slider.slide].meta.remove(); this._ns_slider.work.splice(i--, 1); this._onFinished(this._ns_slider.slide); } else {ropt.render(frame);} } if (!this._ns_slider.work.length) { if (this._ns_slider.task.slide != -1) { this._addWork(this._ns_slider.task); this._ns_slider.task.slide = -1; } else { this._ns_slider.working = false; this._stop(); } } /* var time; /////////////////////////////////////////////////////// temp if (ropt) { time = (new Date()).getTime()-ropt.timestamp; frame = (frame < 10? "00"+frame : frame < 100? "0"+frame : frame); $('info').update("frame: "+frame); } /////////////////////////////////////////////////////////////////// temp */ }, _rend_engine_alpha: function(frame) { var alpha1, alpha2; for (var i=0; i this.opacity[1] ? this.opacity[1] : alpha1))+ (alpha2 < 0 ? 0 : (alpha2 > this.opacity[2] ? this.opacity[2] : alpha2)); if (this.pattern[i].dim.alpha !== alpha1) { this.pattern[i].dim.alpha = alpha1; this.transition(this.pattern[i], alpha1); } } }, _rend_trans_o: function(elm, p) { elm.setStyle({opacity: p}); }, _rend_trans_oh: function(elm, p) { elm.setStyle({ opacity: p, height: Math.round(p*elm.dim.height)+'px' }); }, _rend_trans_ow: function(elm, p) { elm.setStyle({ opacity: p, width: Math.round(p*elm.dim.width)+'px' }); }, _rend_trans_owh: function(elm, p) { elm.setStyle({ opacity: p, height: Math.round(p*elm.dim.height)+'px', width: Math.round(p*elm.dim.width)+'px' }); }, _rend_trans_oc: function(elm, p) { var height = elm.dim.height*p, width = elm.dim.width*p, left = Math.round(elm.dim.x+(elm.dim.width-width)/2), top = Math.round(elm.dim.y+(elm.dim.height-height)/2); elm.setStyle({ opacity: p, backgroundPosition: (-left)+'px '+(-top)+'px', height: Math.round(height)+'px', left: (left)+'px', top: (top)+'px', width: Math.round(width)+'px' }); }, _rend_trans_och: function(elm, p) { var height = elm.dim.height*p, top = Math.round(elm.dim.y+(elm.dim.height-height)/2); elm.setStyle({ opacity: p, backgroundPosition: (-elm.dim.x)+'px '+(-top)+'px', height: Math.round(height)+'px', top: (top)+'px' }); }, _rend_trans_ocw: function(elm, p) { var width = elm.dim.width*p, left = Math.round(elm.dim.x+(elm.dim.width-width)/2); elm.setStyle({ opacity: p, backgroundPosition: (-left)+'px '+(-elm.dim.y)+'px', left: (left)+'px', width: Math.round(width)+'px' }); }, _rend_trans_ohl: function(elm, p) { elm.setStyle({ opacity: p, left: Math.round(elm.dim.x + elm.dim.width*p - elm.dim.width)+'px' }); }, _rend_trans_ohr: function(elm, p) { elm.setStyle({ opacity: p, left: Math.round(elm.dim.x + elm.dim.width - elm.dim.width*p)+'px' }); }, _rend_trans_ovb: function(elm, p) { elm.setStyle({ opacity: p, top: Math.round(elm.dim.y + elm.dim.height - elm.dim.height*p)+'px' }); }, _rend_trans_ovt: function(elm, p) { elm.setStyle({ opacity: p, top: Math.round(elm.dim.y + elm.dim.height*p - elm.dim.height)+'px' }); }, _s_insert: function(container) { for (var i=0; i 300) { throw "protoSlider: \"columns * rows\" must be less than 300"; } if (this._ns_slider.settings.effect && !this._match(this._ns_slider.settings.effect, this._effects)) { throw "protoSlider: Unknown effect name"; } } }); // ProtoSlider version ProtoSlider.version = "1.0a6";