A regular expression looks for text outside HTML tags. It uses a callback function to perform replacements to simulate native lookahead support.

When is this sort of replacement suitable ?

• Remote HTML responses (ajax) highlighting
• Autocompleters suggestion highlighting
• User-typed HTML, WYSIWIGs, etc.

Generally speaking, the only downside of this method, since it deals with the innerHTML, is that all attached events and properties are lost when the replacement is performed.

Note: this code is designed to match only beginning of words. If you want to match anywhere, remove \\b from the regular expression. And if you expect <script> tags, definitely don’t use it.

MooTools version (demo)

Element.implement({

	highlight: function(search, insensitive, klass){
		var regex = new RegExp('(<[^>]*>)|(\\b'+ search.escapeRegExp() +')', insensitive ? 'ig' : 'g');
		return this.set('html', this.get('html').replace(regex, function(a, b, c){
			return (a.charAt(0) == '<') ? a : '' + c + '';
		}));
	}

});

jQuery version (demo)

jQuery.fn.extend({

	highlight: function(search, insensitive, klass){
		var regex = new RegExp('(<[^>]*>)|(\\b'+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +')', insensitive ? 'ig' : 'g');
		return this.html(this.html().replace(regex, function(a, b, c){
			return (a.charAt(0) == '<') ? a : '' + c + '';
		}));
	}

});

You wanted more, we give you More. Today the new MooTools More RC1 is being released, with an outstanding number of new plugins. More functionality, but with the quality you come to expect from the MooTools framework.

Most of the new components come from the excellent Aaron’s Clientcide library. I contributed to the improvement, refining and testing of some of his vast code, which brings More to its present state.

The goal here is to provide more great, simple and extensible tools to make developers’ lives easier. I suggest you head to the Docs or Builder page right away to start trying out the new stuff. As always, head to Lighthouse to report the bugs you encounter, or even to suggest new additions or features.

At this point there’s no doubt in anyone’s mind that DRY is a principle we should stick to. However, let’s examine how to achieve this in the right way.

Natives extension

A script, no matter its purpose, deals with various native objects all the time. These may be native types, such as Strings, Arrays, Objects, Numbers, or objects that are not native to the language but are to the browser rendering engine, such as HTMLElement.

MooTools, as you already know, empowers us to extend these Natives really easily. To add a repeat() method to a String, this is all it takes:

String.implement({
	repeat: function(times){
		return new Array(times + 1).join(this);
	}
});

This is one of the pillars of code reusability within MooTools code. But, as I’ll explain later, it can be misused.

Self-invoking functions

Probably the most natural and straightforward way of avoiding code repetition is defining a function. The code above could have been written as:

function repeat(str, times){
	return new Array(times +1).join(str);
}

A downside of the snippet above is the pollution of the global namespace. The function repeat would be available to all your scripts within the window you execute it in, potentially colliding with other functions. Or making it harder to maintain when another programmer comes along and writes another repeat function, which may even do something different.

That’s when self-invoking functions come to the rescue. As you already know, the local variables defined within a function are only available to that context. If you decide to use functions instead of extending a native, this is the smart way to do it:

// we wrap our code in a self-invoking function
(function(){

   // local function within this context
   var repeat(str,times) = function(){
   	// ...
   });

   // notice we don't use var here, we want the Car class to be globally available
   Car = new Class({

      run: function() {
          var a = repeat('test', 20);
      }

   });

   ConvertibleCar = new Class({

      Extends: Car,

      display: function() {
          var b = repeat('some string', 20);
      }

   });

})();

// the repeat() we defined before is no longer accessible here

When to use which method

First of all, you might be wondering why you’d go through the trouble of defining a function within a sub-context if you could have extended String in the first place. That’s valid reasoning, but only because of the nature of the example.

If you’ve been writing MooTools code for a long time, maybe sometimes you found yourself polluting your own Natives, by extending them with functions that added little reusability value. An example:

Element.implement({

	doSomethingSoSpecificThatIevenFindItHardToName: function(){
        	// ...
	}

});

Sometimes extending the natives just doesn’t feel right, specially if it’s for a logic you repeat several times but only within a class or subset of classes, and it doesn’t award a public method within your class. That’s when a function wrapped in a self-invoking function described above is best suited.

To finalize, let’s see a real-world example that contrasts these two approaches, taken from the MooTools Core.

(function(){

var walk = function(element, walk, start, match, all, nocash){
	// internal dom walking logic
};

Element.implement({

	getPrevious: function(match, nocash){
		return walk(this, 'previousSibling', null, match, false, nocash);
	},

	getAllPrevious: function(match, nocash){
		return walk(this, 'previousSibling', null, match, true, nocash);
	},

	getNext: function(match, nocash){
		return walk(this, 'nextSibling', null, match, false, nocash);
	},

	getAllNext: function(match, nocash){
		return walk(this, 'nextSibling', null, match, true, nocash);
	},

	getFirst: function(match, nocash){
		return walk(this, 'nextSibling', 'firstChild', match, false, nocash);
	},

        // ...

});

})();

As you can see, it extends Element with methods that you reuse a lot, and that even MooTools utilizes in its other components. However, there’s no point in making the walk function available to the rest of the Core, let alone your scripts, since it’s used in a very specific part which deals with the DOM manipulation. Its only purpose is avoiding code repetition in the several methods it implements to Element.

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

I guess pretty much everyone has seen Barack Obama’s website by now, which is clearly one of the prettiest of all candidates we’ve heard of so far. Not only is it an example of state-of-the-art design, but it’s also nice to navigate and interact with.

I decided to imitate the homepage slideshow. I had already experimented with similar animated lists, which allowed me to have it ready within minutes

The creation

I took my previous class (SlideList), and made a few changes here and there. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists.

I extended it and came up with a new class that receives the images and loading spinner as parameters (note: it’s arguable whether this is the best decision OOP-wise, but due to the simplicity of this script, this was the right call)

The code

To ensure all images are loaded before the user makes any interaction, the MooTools Assets component is used.

The CSS plays a major role (as in every other animation-focused script). I suggest you analyze it carefully before implementing it in your applications or websites. You’ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean.

The markup is meaningful and simple. Two lists are used (one for the images and the other for the links). The loading element is included in the HTML, but it’s probably better to inject it from the script directly.

The pictures

The beautiful pictures were taken from Flickr with permission of the owners, unless they were directly released for non-commercial use. Thanks vgm8383, dogonnit, M. TANIGUCHI, GustavoBuriola & others!

The demo

Click here to see it in action or go to the project page for download and other details.

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!