Behavior.js

/*
---
name: Behavior
description: Auto-instantiates widgets/classes based on parsed, declarative HTML.
requires: [Core/Class.Extras, Core/Element, /ART.Window]
provides: [Behavior]
...
*/

(function(){

this.Behavior = new Class({

	Implements: [Options, Events, ART.WindowTools],
	
	options: {
		behaviors: null
	},
	
	initialize: function(container, options){
		this.element = $(container);
		this.setOptions(options);
	},
	
	toElement: function() {
		return this.element;
	},
	
	apply: function(meta){
		this.options.behaviors.each(function(name) { 
			console.log(name);
			behavior = this.getBehavior(name);
			if (behavior) behavior.run.call(this, this.element, meta);
		}, this);
	},
	
	getBehavior: function(name) {
		return this._behaviors[name] || Behavior._behaviors[name];
	},
	
	markForCleanup: function(fn) {
		if (!this._marked) this._marked = [];
		this._marked.push(fn);
	},
	
	sweep:function(){
		this._marked.each(function(fn) {
			fn.apply(this);
		});
		this.marked.empty();
	}
	
});

var registration = {
	_behaviors: {},
	setBehavior: function(name, behavior){
		this._behaviors[name] = behavior;
	},
	setBehaviors: function(behaviors) {
		for (name in behaviors) {
			this.setBehavior(name, behaviors[name]);
		}
	}
};
$extend(Behavior, registration);
Behavior.implement(registration);

})();

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Example:

// Copyright (c) 2010, Cloudera, inc. All rights reserved.
/*
---
description: Sets up all inputs with the css class .overtext to have an OverText instance for inline labeling.
provides: [Behavior.OverText]
requires: [/Behavior, More/OverText]
script: Behavior.OverText.js
...
*/

Behavior.setBehavior('OverText', {

	run: function(container, meta){
		if (!container.hasClass('overtext') && !container.get('html').contains('overtext')) return;
		var inputs = container.getElements('input.overtext, textarea.overtext');
		if (!inputs.length) return;
		// make an OverText for elements returned by the test.
		var ots = inputs.map(function(input){
			return new OverText(input);
		});
		var updater = function(){
			(function(){
				ots.each(function(ot) {
					ot.reposition();
				});
			}).delay(10);
		};
		updater();
		var win = this.getWindow();
		if (win) win.addEvent('unshade', updater);
		this.markForCleanup(function(){
			if (win) win.removeEvent('unshade', updater);
			ots.each(function(ot) { ot.destroy(); });
		});
	}

});

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* HTML usage
<p>
	The input below should have some text on top of it that goes away when you click it and enter a value.
</p>
<input type="text" class="overtext" title="this is the overtext text..."/>
<script src="/depender/build?require=Widgets/Behavior.OverText"></script>
<script>
new Behavior(document.body, {
	behaviors: ['OverText']
}).apply();
</script>
*/