Introducing MooTools NextPrev

By  on  

MooTools NextPrev

One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item. MooTools NextPrev is a compact JavaScript class that allows you to move about a collection of items quickly using human terms.

The MooTools Class

var NextPrev = new Class({
	Implements: [Options,Events],
	options: {
		baseEvent: 'keyup',
		eventContainer: document,
		eventCheckNext: function(e){
			return true;
		},
		eventCheckPrevious: function(e){ 
			return true;
		},
		onLoad: $empty,
		onNext: $empty,
		onPrevious: $empty,
		startIndex: 0
	},
	initialize: function(collection,options) {
		this.setOptions(options);
		this.collection = $$(collection);
		if(this.options.container == document) this.options.container = document.body;
		this.index = this.options.startIndex;
		if(this.options.baseEvent) {
			$(this.options.eventContainer).addEvent(this.options.baseEvent,function(e) {
				if(this.options.eventCheckNext(e)) {
					this.move.bind(this)('next');
				}
				else if(this.options.eventCheckPrevious(e)) {
					this.move.bind(this)('previous');
				}
			}.bind(this));
		}
		this.fireEvent('load',[this.collection[this.index]]);
	},
	move: function(norp) {
		var previous = this.index;
		switch($type(norp)) {
			case 'string':
				var ev = 'next';
				if(norp == 'next') {
					var plus = this.index + 1;
					this.index = this.collection[plus] ? plus : 0;
				}
				else {
					var minus = this.index - 1;
					this.index = this.collection[minus] ? minus : this.collection.length-1;
					ev = 'previous';
				}
				this.fireEvent(ev,[this.collection[this.index],this.collection[previous]]);
				break;
			case 'element':
				this.index = this.collection.indexOf(norp) || 0;
				break;
			default:
				this.index = norp;
				break;
		}
		this.fireEvent('change',[this.collection[this.index],this.collection[previous]]);
		return this;
	}
});

The following are arguments, options, and events for NextPrev:

Arguments

  • collection: The collection of elements..
  • options: The instance options.

Options

  • baseEvent: (defaults to 'keyup') The event to listen to.
  • eventContainer: (defaults to document) The event listener container.
  • eventCheckNext: (defaults to function) The function that decides if the conditions to trigger a "next" have been met.
  • eventCheckPrevious: (defaults to function) The function that decides if the conditions to trigger a "previous" have been met.
  • startIndex: (defaults to 0) The starting index for the collection.

Events

  • change: Fired when the index changes.
  • load: Fired every time the class is initialized.
  • next: Fired when the next directive is triggered.
  • previous: Fired when the previous directive is triggered.

Public Methods

  • move: May be passed the Strings "next" or "prev", or a DOM node.

Sample Usage

var np2 = new NextPrev($$('#images img'),{
	eventCheckNext: function(e) {
		if(e) e.stop(e);
		return e.key == 'right';
	},
	eventCheckPrevious: function(e) {
		if(e) e.stop(e);
		return e.key == 'left';
	},
	onNext: function(cur,prev) {
		prev.removeClass('featured');
		cur.addClass('featured');
	},
	onPrevious: function(cur,prev) {
		prev.removeClass('featured');
		cur.addClass('featured');
	},
	onLoad: function(cur) {
		cur.addClass('featured');
	}
});

The code above hijacks the "left" and "right" keys, moving forward and backward in the collection depending on which key was pressed.

NextPrev is extremely simple but also quite flexible. You decide the events, keys, actions, etc -- the plugin simple allows for simple control of position in the list. Have ideas for this class? Know what you'd use it for? Let me know!

Recent Features

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3

    Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy. The XHTML A normal table. The cells...

  • By
    Create a Download Package Using MooTools Moousture

    Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP. The XHTML We provide...

Discussion

  1. Hey David this is really cool but using keypress instead of keyup is way slicker.

  2. @rickyH: Good thought, I may change that.

  3. I love this David BUT Where is Christina Ricci????
    :)

    @rickyH that’s why it’s an option

  4. Alex

    Yeah, where is CR ????!!!!

    keypress > subscribing.

    I’d also like to keep “down” pressed and see how it keeps going down, not only 1 item.

    Nice.

  5. That’s a cool one again! THX!
    I liked to see this nice use-cases for key-events.

  6. keypress wont work for up and down keys on some browsers.
    You could use this keyrepeat custom event:

    // the key event that repeats when you press a key
    Element.Events.keyrepeat = {
    	base : (Browser.Engine.gecko || Browser.Engine.presto) ? 'keypress' : 'keydown',
    	condition: $lambda(true)
    };
    

    hope its usefull.

  7. I am a jQuery user but I must say this is a GREAT tutorial, any chance of getting this ported over to jQuery in a tutorial for us? Would be very greatful!

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