Dotter

Dotter is a plugin that allows you to create XHTML-based, periodical indicators quickly and easily.

Plugin Code (Version 1.0)

/* dotter */
var Dotter = new Class({
	
	/* implements */
	Implements: [Options,Events],

	/* options */
	options: {
		delay: 1000,
		dot: '.',
		message: 'Loading',
		numDots: 3,
		property: 'text',
		reset: false/*,
		onDot,
		onStart,
		onStop
		*/
	},
	
	/* initialization */
	initialize: function(container,options) {
		/* set options */
		this.setOptions(options);
		this.container = $(container);
		this.dots = 0;
		this.running = false;
	},
	
	/* adds dot */
	dot: function() {
		if(this.running) {
			var text = this.container.get(this.options.property);
			this.dots++;
			this.container.set(this.options.property,(this.dots % this.options.numDots != 0 ? text : this.options.message) + '' + this.options.dot);
		}
		return this;
	},
	
	/* loads or resets the dotter */
	load: function() {
		this.loaded = true;
		this.dots = 0;
		this.dotter = function(){ this.dot(); this.fireEvent('dot'); }.bind(this);
		this.periodical = this.dotter.periodical(this.options.delay);
		this.container.set(this.options.property,this.options.message + '' + this.options.dot);
		return this;
	},
	
	/* start the dotter */
	start: function() {
		if(!this.loaded || this.options.reset) this.load();
		this.running = true;
		this.fireEvent('start');
		return this;
	},
	
	/* stop the dotter */
	stop: function() {
		this.running = this.loaded = false;
		$clear(this.periodical);
		this.fireEvent('stop');
		return this;
	}
});

/* usage */
window.addEvent('domready',function() {
	var myDotter = new Dotter('dot-me-1');
	$('start').addEvent('click',function() { myDotter.start() });
	$('stop').addEvent('click',function() { myDotter.stop() });
});

Options and Events

• delay: (defaults to '1000') The speed at which the dotter show add dots.
• dot: (defaults to '.') The character or string that you want to be the "dot."
• message: (defaults to 'Loading') The string that preceeds the dots.
• numDots: (defaults to 3) The number of dots to go to before clearing.
• property: (defaults to 'text') The container's attribute to set each time. The alternative would "HTML."
• reset: (defaults to false) Defines whether to reset the dotter text on restart.

Events for Dotter include:

• Dot: Fires on each dot placement.
• Start: Fires when the Dotter starts.
• Stops: Fires when the Dotter stops.

Code Revisions & Bug Fixes

None.