• New project page with documentation and how to use explanation
• It includes the upcoming, updated and optimized Fx.MorphList
• The download package has been fixed for a very easy deployment.

TextboxList (demo) has been rewritten from scratch, and it’s more solid than ever. The first time around, elegance was not one of the goals. I focused on releasing the first open source script that reproduced the Facebook’s tokenizer.

Let’s see the new changes:

TextboxList

• Compatible with MooTools 1.2.x
• New options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).
• More events, which gives the developer more power to extend it.
• Each element is now identified by an id, a plain value and a HTML value.
• Use of control, alt, meta keys no longer interfere with the elements keyboard navigation.
• Bugs with text selection fixed.
• Improved API, even more extensible.
• Plugins support

Textboxlist.Autocomplete

This is the most important official plugin. It also has been rewritten, and packs new features:

• Flexible. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere.
• Binary search for maximum performance
• Simpler CSS with comments for non-experienced developers.

Without further ado, head to the project page to check out the demos and downloads.

Check out Devthought’s latest release, APNG 0.1

I came up with a document describing the projections, possibilities and capabilities of my creation, which you can access here. It includes different scenarios and variations of this implementation.

Go to the project page for download and other useful links.

MorphList is now even more flexible, supporting custom markup for the dynamic background.

Demo here

In my previous blogpost I explained how to extend TextboxList to add closing functionality via a link added to each box. But it was missing an important ingredient: autocompletion!

Again, all we have to do is extend the TextboxList class, override some methods, some events, and create some new ones (all prefixed by auto)

var FacebookList = new Class({

  Extends: TextboxList,

  data: [],

  options: {
    onInputFocus: function() { this.autoShow(); },
    onInputBlur: function(el) {
      el.value = '';
      this.autoHide();
    },
    onBoxDispose: function(item) {
      this.autoFeed(item.$attributes.$text);
    },
    autocomplete: {
      'opacity': 0.8,
      'maxresults': 10,
      'minchars': 1
    }
  },

  initialize: function(element, autoholder, options) {
    arguments.callee.parent(element, options);
		this.autoholder = $(autoholder).set('opacity', this.options.autocomplete.opacity);
		this.autoresults = this.autoholder.getElement('ul');
		var children = this.autoresults.getElements('li');
    children.each(function(el) { this.add(el.innerHTML); }, this);
  },

  autoShow: function(search) {
    this.autoholder.setStyle('display', 'block');
    this.autoholder.getElements('*').setStyle('display', 'none');
    if(! search || ! search.trim() || (! search.length || search.length < this.options.autocomplete.minchars ))
    {
      this.autoholder.getElement('.default').setStyle('display', 'block');
      this.resultsshown = false;
    } else {
      this.resultsshown = true;
      this.autoresults.setStyle('display', 'block').empty();
      this.data.filter(function(str) { return str ? str.test(search, 'i') : false; }).each(function(result, ti) {
        if(ti >= this.options.autocomplete.maxresults) return;
        var el = new Element('li').set('html', this.autoHighlight(result, search)).inject(this.autoresults);
        el.$attributes.$result = result;
        if(ti == 0) this.autoFocus(el);
      }, this);
    }
  },

  autoHighlight: function(html, highlight) {
    return html.replace(new RegExp(highlight, 'gi'), function(match) {
      return '' + match + '';
    });
  },

  autoHide: function() {
    this.resultsshown = false;
    this.autoholder.setStyle('display', 'none');
  },

  autoFocus: function(el) {
    if(! el) return;
    if(this.autocurrent) this.autocurrent.removeClass('auto-focus');
    this.autocurrent = el.addClass('auto-focus');
  },

  autoMove: function(direction) {
    if(!this.resultsshown) return;
    this.autoFocus(this.autocurrent['get' + (direction == 'up' ? 'Previous' : 'Next')]());
  },

  autoFeed: function(text) {
    if(this.data.indexOf(text) == -1)
      this.data.push(text);
  },

  autoAdd: function(el) {
    if(!el || ! el.$attributes.$result) return;
    this.add(el.$attributes.$result);
    delete this.data[this.data.indexOf(el.$attributes.$result)];
    this.autoHide();
    this.current.$attributes.$input.value = '';
  },

  createInput: function(options) {
    var li = arguments.callee.parent(options);
    var input = li.$attributes.$input;
    input.addEvents({
      'keydown': function(e) {
        e = new Event(e);
        this.dosearch = false;
        switch(e.code) {
          case Event.Keys.up: return this.autoMove('up');
          case Event.Keys.down: return this.autoMove('down');
          case Event.Keys.enter:
            this.autoAdd(this.autocurrent);
            this.autocurrent = false;
            this.autoenter = true;
            break;
          default: this.dosearch = true;
        }
      }.bind(this),
      'keyup': function() {
        if(this.dosearch) this.autoShow(input.value);
      }.bind(this)
    });
    input.addEvent(Browser.Engine.trident ? 'keydown' : 'keypress', function(e) {
      if(this.autoenter) new Event(e).stop();
      this.autoenter = false;
    }.bind(this));
    return li;
  },

  createBox: function(text, options) {
    var li = arguments.callee.parent(text, options);
    li.addEvents({
      'mouseenter': function() { this.addClass('bit-hover') },
      'mouseleave': function() { this.removeClass('bit-hover') }
    });
    li.adopt(new Element('a', {
      'href': '#',
      'class': 'closebutton',
      'events': {
        'click': function(e) {
          new Event(e).stop();
          if(! this.current) this.focus(this.maininput);
          this.dispose(li);
        }.bind(this)
      }
    }));
    li.$attributes.$text = text;
    return li;
  }

});

window.addEvent('domready', function() {
  // init
  var tlist2 = new FacebookList('facebook-demo', 'facebook-auto');

  // fetch and feed
  new Request.JSON({'url': 'json.html', 'onComplete': function(j) {
    j.each(tlist2.autoFeed, tlist2);
  }}).send();
});

It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.

Another new feature is that you’ll be able to let it add boxes from the HTML directly:

FacebookList input


Type the name of an argentine writer you like

Jorge Luis Borges
Julio Cortazar

The constructor now takes new parameters to configure the autocompletion, like the minimum number of characters to trigger the dropdown, and more.

Changelog

• 0.1: initial release
• 0.2: added click support, removed $attributes use, code cleanup

Download

Click here to download the zip with code and examples

While working on my big and exciting new project, I decided to include an input that resembles the famous Apple Mail to: textfield. I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)

I created my own, MooTools 1.2 compatible, in just 5kb. It’s not only small, but also really frexible! Here are some notes of the creation process and how to implement it in your own projects.

Anatomy of the control

As usual, I try to come up with a semantic, unobstrusive approach. I start with the CSS and the markup that will be my end result.

I want to go from something like this:

	FacebookList input

to something like this (only one possible scenario, naturally)

	FacebookList input



Jorge Luis Borges 


Julio Cortazar 

Basically, it’s a group of pieces (that I’ll call bits), that can be either a box or an input (small, except for the main one). The user is able to move around between the bits by using his keyboard or his mouse.

Javascript

As far as the javascript goes, I try to first think about reusable code (usually classes) that I may use. I thus first coded the class that adds resizing capabilities to the small fields as the user types, and a small utility method to find the caret position.

The only challenges I found was handling the complex events while keeping everything crossbrowser. Again, none of this would have been possible if it wasn’t for MooTools (1.2).

Using it

All you have to do is:

new TextboxList('input-demo');

Where input-demo is the id of the desired input to replace

The constructor can take these options:

• onInputFocus (event, fired when an input gets focus)
• onInputBlur (event, fired when an input loses focus)
• onBoxFocus (event, fired when a box gets focus)
• onBoxBlur (event, fired when a box loses focus)
• onBoxDispose (event, fired when a box is removed)
• resizable (option, hash, passed to ResizableTextbox constructor)
• className (option, string, prefix of the classnames of the generated objects)
• extrainputs (option, boolean, adds small inputs between boxes if true)
• startinput (option, boolean, adds a small input before the first box if true)
• hideempty (option, boolean, hides the small inputs by default)

Extending it

One of the my favorite features of MooTools is how easily you can create and extend classes. It makes you feel in a truly Object-Oriented environment, overcoming all Javascript limitations and complexities to handle functionalities like this by default.

I decided that, for the sake of simplicity, the class would not incorporate stuff like boxes removal through clicks, or even autocompletion (like Facebook does), since the scenarios to use this control are multiple and diverse.

Here is an example of how easily you can add the small remove links next to the name (and some CSS, of course)

var FacebookList = new Class({

Extends: TextboxList,

	createBox: function(text, options) {
		var li = arguments.callee.parent(text, options);
		li.addEvents({
			'mouseenter': function() { this.addClass('bit-hover') },
			'mouseleave': function() { this.removeClass('bit-hover') }
		});
		li.adopt(new Element('a', {
			'href': '#',
			'class': 'closebutton',
			'events': {
				'click': function(e) {
					new Event(e).stop();
					if(! this.current) this.focus(this.maininput);
					this.dispose(li);
				}.bind(this)
			}
		}));
		return li;
	}

});

Changelog

• 0.1: initial release
• 0.2: code cleanup, small blur/focus fixes

Download

Click here to download a zip file containing examples, TextboxList documented (8kb) and compressed (5kb)

New! TextboxList with autocompletion

When it comes to creating the navigation part of your Website, the first thing you might think of is an unordered list that you style as tabs. Lately, such navbars are everywhere, as many people believe they’ll make their site more Web 2.0-compatible. Personally, I just think they’re semantically better and accessible.

In this article I’ll go through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible!

Introduction

Every time that I know I’m going to use Javascript to alter the behavior or look of something, I try to come up with a simple markup, and make sure it renders perfectly with Javascript turned off. To illustrate this point, imagine that you want to make an element wider on rollover. The property Javascript would change is width:, so I make sure first that my style works when I modify the width randomly.

For this menu, as we’ll be having a movable element that acts as the background, we should first make sure that just by using css, we can freely move it and that it won’t affect the display of the menu. If you didn’t do this, when you’re coding the JS and face a bug, you’ll find yourself wondering if it is caused by the CSS, the Javascript, the browser?

Mark it up

Just like any other navigation, we’re going to use an unordered list with some anchors:

Home
Plant a tree
Travel
Ride an elephant

This is the foundation of a semantically correct, degradable navigation structure.

The CSS styling

As I said before, it’s paramount that we create flawless, cross browser CSS code. Let’s get to it

The first problem we face is that it’s impossible to use the background property for the rounded box that follows your mouse, with the current CSS specs shared by most browsers. That forces us to add a new LI item that will act as the moving background.

We’re going to set position: relative to the unordered list, and position: absolute to the moving item, so that it’s easy to move it between the menu boundaries from Javascript. If you don’t quite understand how this works, I encourage you to quickly read this article about CSS positioning. You’ll understand that if we simply set position: absolute to it, we’d have to do some hard, useless calculations Javascript side to positionate it correctly.

Then, this is the code we have so far:

#fancymenu {
  position: relative;
  height: 29px;
  width: 421px;
  background: url('images/bg.gif') no-repeat top;
  padding: 15px;
  margin: 10px 0;
  overflow: hidden;
}

#fancymenu ul {
  padding: 0;
  margin: 0;
}

/* Don't apply padding here (offsetWidth will differ in IE)
If you need padding add it to the child anchor */
#fancymenu ul li {
  float: left;
  list-style: none;
}

#fancymenu ul li a {
  text-indent: -500em;
  z-index: 10;
  display: block;
  float: left;
  height: 30px;
  position: relative;
  overflow: hidden;
}

So far it’s quite easy, and I included some comments for the tricky parts. The text-indent property is used to hide the text without adding extra markup, and keeping it accesible.

Now, we have to add the background images for each link:

#menu_home a {
  width: 59px;
  background: url('images/menu_home.png') no-repeat center !important;
  background: url('images/menu_home.gif') no-repeat center; // ie!
}

#menu_plantatree a {
  width: 119px;
  background: url('images/menu_plantatree.png') no-repeat center !important;
  background: url('images/menu_plantatree.gif') no-repeat center;
}

#menu_travel a {
  width: 70px;
  background: url('images/menu_travel.png') no-repeat center !important;
  background: url('images/menu_travel.gif') no-repeat center;
}

#menu_rideanelephant a {
  width: 142px;
  background: url('images/menu_rideanelephant.png') no-repeat center !important;
  background: url('images/menu_rideanelephant.gif') no-repeat center;
}

In the following section you’ll see why we use .gif images for Internet Explorer by using the !important hack.

The moving background

As we discussed, there’s a LI that moves in a lower layer and stretches to take the shape of each element. Because of its structure, we’re going to implement something similar to the Sliding Doors technique, but without text.

Its markup would be the following:

As it doesn’t have any semantic role in the unordered list, we’re going to include it from Javascript. Of course, for testing, you can include it first manually and then remove it. This is the style for it:

#fancymenu li.background {
  background: url('images/bg_menu_right.png') no-repeat top right !important;
  background: url('images/bg_menu_right.gif') no-repeat top right;
  z-index: 8;
  position: absolute;
  visibility: hidden;
}

#fancymenu .background .left {
  background: url('images/bg_menu.png') no-repeat top left !important;
  background: url('images/bg_menu.gif') no-repeat top left;
  height: 30px;
  margin-right: 9px; /* 7px is the width of the rounded shape */
}

The use of this technique is one of the main reasons why we don’t use filters to display the PNGs in Internet Explorer. You can’t decide the position of the background with them, which would make the right corner side display above the left part. Read this article about the png hack limitations to find out more. Another reason is that Microsoft is updating users to IE7 automatically, which supports png perfectly.

Keep in mind, as well, that when you export the .gifs you’ll have to set the Matte to match the background color, otherwise everything will look really bad. This picture illustrates what your images should look like:

Scripting it

Thanks to our smart CSS code, our Javascript is very short and simple. Its job is limited to adding the extra background markup, and of course the effects for shrinking and moving it.

We’re just going to need Mootools’ Fx.Style.js, Dom.js, and of course their dependencies. For this article’s example, I also used a custom transition found in the Fx.Transitions package (remember that transitions are what make the movement of the background vary). It’s coded in the form of a Class, so that it’s possible to initialize several menus on the same page.

var SlideList = new Class({
	initialize: function(menu, options) {
		this.setOptions(this.getOptions(), options);

		this.menu = $(menu), this.current = this.menu.getElement('li.current');

		this.menu.getElements('li').each(function(item){
			item.addEvent('mouseover', function(){ this.moveBg(item); }.bind(this));
			item.addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
			item.addEvent('click', function(event){ this.clickItem(event, item); }.bind(this));
		}.bind(this));

		this.back = new Element('li').addClass('background').adopt(new Element('div').addClass('left')).injectInside(this.menu);
		this.back.fx = this.back.effects(this.options);
		if(this.current) this.setCurrent(this.current);
	},

	setCurrent: function(el, effect){
		this.back.setStyles({left: (el.offsetLeft)+'px', width: (el.offsetWidth)+'px'});
		(effect) ? this.back.effect('opacity').set(0).start(1) : this.back.setOpacity(1);
		this.current = el;
	},

	getOptions: function(){
		return {
			transition: Fx.Transitions.sineInOut,
			duration: 500, wait: false,
			onClick: Class.empty
		};
	},

	clickItem: function(event, item) {
		if(!this.current) this.setCurrent(item, true);
		this.current = item;
		this.options.onClick(new Event(event), item);
	},

	moveBg: function(to) {
		if(!this.current) return;
		this.back.fx.custom({
			left: [this.back.offsetLeft, to.offsetLeft],
			width: [this.back.offsetWidth, to.offsetWidth]
		});
	}
});

SlideList.implement(new Options);

Finally, it’s time to start it. Just create the object, by passing the id and desired options. The following example shows how to do it when the page DOM tree is loaded.

window.addEvent('domready', function() {
	new SlideList($E('ul', 'fancymenu'), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.stop(); }});
});

The script first looks for the element that has the current class. If it finds it, it positions the background behind it. If it doesn’t, it waits till the user first click on some item to set the ‘current’ class. This comes in very handy for menus meant for user selection, like the example below, instead of menus with links to actual URLs.

There’s an onClick option, which calls a function with an Event object, and the clicked element object reference as parameters. You can also change the effect duration, transition, etc.

Extend it

If you’ve made it this far, you must’ve noticed that it hasn’t been dead easy. In fact, the tutorial is not aimed solely to teach you how to create a menu, but for you to understand the possibilities you have using CSS and Javascript to make something stand out, and at the same time provide some tips to get you started if you want to create your own.

Here’s another example, using the very same Javascript class!