Plugin MooTools PulseFade

Nedávno jsem byl nucen vytvořit plugin MooTools, který by vzal prvek a zeslabil ho na minimum z maxima pro daný počet opakování. Zde je výsledek mého Moo-bláznovství.

Zobrazit ukázku

JavaScript MooTools

var PulseFade = new Class({
			
	//implements
	Implements: [Options,Events],

	//options
	options: {
		min: 0,
		max: 1,
		duration: 200,
		times: 5
	},
	
	//initialization
	initialize: function(el,options) {
		//set options
		this.setOptions(options);
		this.element = $(el);
		this.times = 0;
	},
	
	//starts the pulse fade
	start: function(times) {
		if(!times) times = this.options.times * 2;
		this.running = 1;
		this.fireEvent('start').run(times -1);
	},
	
	//stops the pulse fade
	stop: function() {
		this.running = 0;
		this.fireEvent('stop');
	},
	
	//runs the shizzle
	run: function(times) {
		//make it happen
		var self = this;
		var to = self.element.get('opacity') == self.options.min ? self.options.max : self.options.min;
		self.fx = new Fx.Tween(self.element,{
			duration: self.options.duration / 2,
			onComplete: function() {
				self.fireEvent('tick');
				if(self.running && times)
				{
					self.run(times-1);
				}
				else
				{
					self.fireEvent('complete');
				}
			}
		}).start('opacity',to);
	}
});

Možnosti třídy zahrnují:

  • min:(výchozí hodnota je 0,5) minimální úroveň krytí
  • max:(výchozí hodnota je 1) maximální úroveň krytí
  • trvání:(výchozí hodnota je 200) délka doby vyblednutí
  • krát:(výchozí hodnota je 5) kolikrát by mělo dojít k zatmívání/zatmívání

Mezi události třídy patří:

  • onComplete
  • na Start
  • Zastavit
  • onTick – Spustí se pokaždé, když zeslabování dosáhne minimální nebo maximální hodnoty.

Ukázkové použití

window.addEvent('domready',function() {
	var pf = new PulseFade('pulse-fade',{
		min: .50,
		max: 1,
		duration: 400,
		onComplete: function() {
			alert('complete!');
		},
		onStart: function() {
			alert('started!');
		},
		onStop: function() {
			alert('stopped!');
		},
		onTick: function() {
			alert('tick!');
		}
	})
	
	$('stop-link').addEvent('click',function(e) { e.stop(); pf.stop(); });
	$('start-link').addEvent('click',function(e) { e.stop(); pf.start(); });
});
Zobrazit ukázku

Jsem spokojený s efektem ne třídy jako celku. MooTools Core Developer a -More csar Aaron Newton mi často připomíná, že třída musí být maximálně flexibilní a základní. Bohužel to není tak flexibilní třída, jak by mohla být, ale funguje to.