O'Reilly

Introducing MooTools Dotter

By on  

It's best practice to provide an indicator of some sort when performing an AJAX request or processing that takes place in the background. Since the dawn of AJAX, we've been using colorful spinners and imagery as indicators. While I enjoy those images, I am a Web Developer and prefer JavaScript/text-based solutions. That's where my inspiration for MooTools Dotter came from.

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

The XHTML

<div id="dot-me-1">(Dotter will be here)</div>

Simply create a containing XHTML element that the Dotter instance will live in.

The CSS

You can style the contianer however you'd like. Dotter could care less about your styling...and that's a good thing.

The MooTools JavaScript

/* 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 = document.id(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;
	}
});

Options for Dotter include:

  • 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.

The Usage

/* simple instance */
var myDotter = new Dotter('dot-me-1');
document.id('start').addEvent('click',function() { myDotter.start() });
document.id('stop').addEvent('click',function() { myDotter.stop() });

/* advanced usage */
var myDotter3 = new Dotter('dot-me-3',{
	periodical: 500,
	dot: '.',
	numDots: 5,
	onDot:function() {
		this.container.setStyles({
			'border-color': '#ccc',
			'background-color': '#eee'
		});
		var effect = new Fx.Morph(this.container,{
			duration: 400
		});
		effect.start({
			'background-color': '#fffea1',
			'border-color': '#fc0'
		});
	},
	onStart: function() {
		this.container.setStyle('visibility','visible');
	},
	onStop: function() {
		this.container.setStyle('visibility','hidden');
	}
});
document.id('start3').addEvent('click',function() { myDotter3.start() });
document.id('stop3').addEvent('click',function() { myDotter3.stop() });

Per usual, simply set the options and events as you wish and move on with more difficult things! Waiting on an AJAX response (onRequest) is a prefect scenario to use Dotter.

Who needs imagery to build an indicator? Simply use Dotter! Any and all suggestions are welcome.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • Animated AJAX Record Deletion Using jQuery

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery JavaScript. The PHP - Content & Header The following snippet goes at the...

  • Custom Scrollbars in WebKit

    Before each of the browser vendors we like was providing unique CSS controls, Internet Explorer was setting the tone.  One such example is IE's early implementation of CSS filters. Internet Explorer was also the first browser that allowed developers to, for better or worse, customize...

Discussion

  1. artmania

    hey it is cool! thanks :D

  2. looks like mootools has changed quite a bit since I last worked with it a year ago. Thanks for this helpful little class. One question, could you explain what the Implements property does? I understand interfaces in OO, but don’t quite get it here. Thanks again!

  3. Another useful tutorial! thanks again!

  4. emehrkay

    Cool, I needed one of these…

    Thanks

  5. Geat! Very useful!! Thanks for share!!

  6. Great post, this will be very useful. Thanks for sharing.

  7. Thankx for sharing this little gem, David! We used the Dotter for a simple twitter geolocation mashup. It’s a great way for setting up a nice progress indicator on mobile Safari and the Android Browser as they cannot display animated gifs… Keep up the good work!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...