Oskar Krawczyk – blog.olicio.us

What I did is a simplistic MooTools-based window session manager implementation.

The pretty cool thing about the library is the fact that the values of the session can be stored as simple strings of as objects, which makes it really easy for us to manage.

Storing a simple session

// init MooWindowSession
var Session = new MooWindowSession();
 
// store a string
Session.set("first", "first value");
 
// returns: "first value"
Session.get()

Storing multiple session values

// init MooWindowSession
var Session = new MooWindowSession();
 
// store an object
Session.set({
  first: "first value",
  second: "second value"
});
 
// returns: {first: "first value", second: "second value"}
Session.get()
 
// returns: "first value"
Session.get().first

Clearing the session

// init MooWindowSession
var Session = new MooWindowSession();
 
// store an object
Session.set({
  first: "first value",
  second: "second value"
});
 
// clear the session
Session.remove()
 
// returns: null
Session.get()

• Example
• Get MooWindowSession (1.1Kb) – (latest from SVN)
• Documentation
• Requires mootools-1.2.0-core.js or newer

Alexbuga.com

Alex Buga is the Creative Director down at MB Dragan – one of the most impressive southeastern Europe Interactive Agencies.

Visit Alexbuga.com

MacHeist.com

No introduction needed.

Visit MacHeist.com

zootool.com

I actually had a brief chat with Bastian Allgeier and as it turns out he’s the one-man-army behind the project – that is really impressive considering the amount of detailed work that was put in this website!

Visit ZooTool.com

Like for example a very handy feature which is not mentioned in the online documentation, is Browser.Engine.version which simply returns the integerified number of the browsers engine version.

Stumbled upon that little code while researching ways of determining whether a user is using Firefox 2 or 3 (Gecko 1.8 and 1.9 respectfully) – had to get rid of the opacity animation on the page which also contained a Flash movie – the old flickering problem.

Very handy indeed.

• MooTorial is the Holy Ground for every MooTooler – the motoorial was updated to version 1.2 just a few days ago.
• MooSound is an absolutely stunning piece of code written by one of the MooTools Core developers – Michelle Steigerwalt. This is pretty much a self-contained, fully-functional, Flash-enabled sound management library. You can do pretty much everything with it: load MP3 files, create playlists, jump to a specific part of the track, set volume, manage the ID3 metadata, etc.
• CustomScrollBar and MooScroll for all your User Interface customization needs! This one gets very hand when creating custom UI using Adobe AIR for instance.
• In-line editable content within 30 lines of code (MooTools 1.2).
• Input Class is a beautifully written piece of a very neat code. Thanks to Kassens we can create permalink-friendly URL’s on the fly, match and restrict content that can be inputed into a field, or create a automagically generated list of tags which are being injected upon pressing space.
• BarackSlideshow is basically a simple yet functional rotator script.

Basically what they did was creating a prototype-based live search script which uses QuickSilver’s scoring algorithm as an output enhancement.

We all know Prototype by itself pretty much… well, sucks. So, I took my time and ported their work to the new MooTools version – the one and only example.

var QuicksilverLiveSearch = new Class({
 
	Implements: Options,
 
	options: {
		field: $empty,
		list: $empty
	},
 
	initialize: function(options) {
		this.setOptions(options);
		this.field = $(this.options.field);
		this.list = $(this.options.list);
 
		if(this.field && this.list) {
			this.rows  = $A([]);
			this.cache = $A([]); 
			this.setupCache();
			this.form = this.field.getParent('form');
			this.form.addEvent('submit', function(e) { e.stop(); });
			this.field.addEvent('keyup', this.filter.bind(this));
			this.filter();
		}
	},
 
	setupCache: function() {
		this.list.getChildren().each(function(child) {
			this.cache.push(child.get('html').toLowerCase());
			this.rows.push(child);
		}.bind(this));
		this.cache_length = this.cache.length;
	},
 
	filter: function() {
		if(!this.field.get('value')) { $$(this.rows).set('styles', {display: 'block'}); return; }
		this.displayResults(this.getScores(this.field.value.toLowerCase()));
	},
 
	displayResults: function(scores) {
		$$(this.rows).set('styles', {display: 'none'});
		scores.each(function(score) { this.rows[score[1]].set('styles', {display: 'block'}); }.bind(this))
	},
 
	getScores: function(term) {
	var scores = $A([]);
 
	for(var i=0; i < this.cache_length; i++) {
		var score = this.cache[i].score(term);
		if(score > 0) { scores.push([score, i]); }
	}
 
	return scores.sort(function(a, b) { return b[0] - a[0]; });
	}
});

And the trigger:

window.addEvent('domready', function() { 
	new QuicksilverLiveSearch({
		field: $('q'),
		list: $('posts')
	});
});

• quicksilver.js
• livesearch.js
• mootools-1.2-core.js

Speaking of rank scoring, Jan Kassen has also developed a nice and dandy version of a live search script with some fancy highlighting options – worth checking out.

Not more than a few days ago, good people of MooTools released a completely new version of their wonderful framework. Since that time there popped out a few interesting new and re-written scripts, here’s a handful of them:

• CNET Clientside MooTools Plugins 1.2 Release – Aaron of Clientside just released the updated list of CNET plugins.
• Slimbox for MooTools 1.2 – everyone loves the unobtrusive Lightbox image viewer, Slimbox is a MooToolified port of the famous script. The new version is highly customizable and all under 4kb.
• ReMooz – Harald has been busy re-writing his amazing scripts for a while now, ReMooz is just one of many (like FancyUpload or HistoryManager) – which you definitely should take a glance at.
• MooFx – remember the amazing piece of work people of WebKit did called CSS Transforms? Well now you can do some these on every A-Grade browser.
• Window.Growl 2.0 – I haven’t actually saw this ever being used on a web page – which is odd as this is an amazing way of displaying live activity.

That’s it for today folks.