utopia.js

/**
 * Utopia: A JavaScript util library that assumes modern standards support and doesn't fix any browser bugs
 * @author Lea Verou (http://lea.verou.me)
 * MIT license (http://www.opensource.org/licenses/mit-license.php)
 * Last update: 2012-4-29
 */
 
function $(expr, con) {
	return typeof expr === 'string'? (con || document).querySelector(expr) : expr;
}

function $$(expr, con) {
	var elements = (con || document).querySelectorAll(expr);
	
	try {
		return Array.prototype.slice.call(elements);
	}
	catch(e) {
		var arr = Array(elements.length);
	    
	    for (var i = elements.length; i-- > 0;) {
			arr[i] = elements[i];
		}
		
		return arr;
	}
}

if (!Array.prototype.forEach) {
	Array.prototype.forEach = function(fn, scope) {
		for (var i = 0, len = this.length; i < len; ++i) {
			fn.call(scope || this, this[i], i, this);
		}
	}
}

// Make each ID a global variable
// Many browsers do this anyway (it’s in the HTML5 spec), so it ensures consistency
$$('[id]').forEach(function(element) { window[element.id] = element; });

// Array#splice but for strings
String.prototype.splice = function(i, remove, add) {
	remove = +remove || 0;
	add = add || '';
	
	return this.slice(0,i) + add + this.slice(i + remove);
};

(function(){

var _ = window.Utopia = {
	/**
	 * Returns the [[Class]] of an object in lowercase (eg. array, date, regexp, string etc)
	 * Caution: Results for DOM elements and collections aren't reliable.
	 * @param {Object} obj
	 *
	 * @return {String}
	 */
	type: function(obj) {
		if(obj === null) { return 'null'; }

		if(obj === undefined) { return 'undefined'; }

		var ret = Object.prototype.toString.call(obj).match(/^\[object\s+(.*?)\]$/)[1];

		ret = ret? ret.toLowerCase() : '';

		if(ret == 'number' && isNaN(obj)) {
			return 'NaN';
		}

		return ret;
	},

	/**
	 * Iterate over the properties of an object. Checks whether the properties actually belong to it.
	 * Can be stopped if the function explicitly returns a value that isn't null, undefined or NaN.
	 * 
	 * @param obj {Object} The object to iterate over
	 * @param func {Function} The function used in the iteration. Can accept 2 parameters: one of the
	 * 							value of the object and one for its name.
	 * @param context {Object} Context for the above function. Default is the object being iterated.
	 *
	 * @return {Object} Null or the return value of func, if it broke the loop at some point.
	 */
	each: function(obj, func, context) {
		if(!_.type(func) == 'function') {
			throw Error('The second argument in Utopia.each() must be a function');
		};

		context = context || obj;

		for (var i in obj) {
			if(obj.hasOwnProperty && obj.hasOwnProperty(i)) {
				var ret = func.call(context, obj[i], i);

				if(!!ret || ret === 0 || ret === '') {
					return ret;
				}
			}
		}

		return null;
	},

	/**
	 * Copies the properties of one object onto another.
	 * When there is a collision, the later one wins
	 *
	 * @return {Object} destination object
	 */
	merge: function(objects) {
		var ret = {};
		
		for(var i=0; i<arguments.length; i++) {
			var o = arguments[i];
			
			for(var j in o) {
				ret[j] = o[j];
			}
		}
		
		return ret;
	},
	
	/**
	 * Copies the properties of one or more objects onto the first one
	 * When there is a collision, the first object wins
	 */
	attach: function(object, objects) {
		for(var i=0; i<arguments.length; i++) {
			var o = arguments[i];
			
			for(var j in o) {
				if(!(j in object)) {
					object[j] = o[j];
				}
			}
		}
		
		return object;
	},
	
	element: {
		/**
		 * Creates a new DOM element
		 * @param options {Object} A set of key/value pairs for attributes, properties, contents, placement in the DOM etc
		 * @return The new DOM element
		 */
		create: function() {
			var options;

			if(_.type(arguments[0]) === 'string') {
				if(_.type(arguments[1]) === 'object') {
					// Utopia.element.create('div', { ... });
					options = arguments[1];
					options.tag = arguments[0];
				}
				else {
					// Utopia.element.create('div', ...);
					options = {
						tag: arguments[0]
					};
					
					// Utopia.element.create('div', [contents]);
					if(_.type(arguments[1]) === 'array') {
						options.contents = arguments[1];
					}
					// Utopia.element.create('div', 'Text contents');
					else if(_.type(arguments[1]) === 'string' || _.type(arguments[1]) === 'number') {
						options.contents = ['' + arguments[1]];
					}
				}
			}
			else {
				options = arguments[0];
			}
			
			var namespace = options.namespace || '', element;
			
			if(namespace) {
				element = document.createElementNS(namespace, options.tag);
			}
			else {
				element = document.createElement(options.tag);
			}
			
			if(options.className) {
				options.properties = options.properties || {};
				options.properties.className = options.className;
			}
			
			// Set properties, attributes and contents
			_.element.set(element, options);
			
			// Place the element in the DOM (inside, before or after an existing element)
			// This could be a selector
			if(options.before) {
				var before = $(options.before);
				
				if (before && before.parentNode) {
					before.parentNode.insertBefore(element, before);
				}
			}
			
			if (options.after && element.parentNode === null) {
				var after = $(options.after);
				
				if (after && after.parentNode) {
					after.parentNode.insertBefore(element, after.nextSibling)
				}
			}
			
			if (options.inside && element.parentNode === null) {
				$(options.inside).appendChild(element);
			}
			
			return element;
		},
		
		set: function(element, options) {
			_.element.prop(element, options.properties || options.prop);
					
			_.element.attr(element, options.attributes || options.attr);
			
			_.element.contents(element, options.contents);
	
			return element;
		},
		
		prop: function (element, properties) {
			if (properties) {
				for (var prop in properties) {
					element[prop] = properties[prop];
				}
			}
			
			return element;
		},
		
		attr: function (element, attributes) {
			if (attributes) {
				for (attr in attributes) {
					element.setAttribute(attr, attributes[attr]);
				}
			}
			
			return element;
		},
		
		/**
		 * Sets an element’s contents
		 * Contents could be: One or multiple (as an array) of the following:
		 *			- An object literal that will be passed through Utopia.element.create
		 *			- A string or number, which will become a text node
		 *			- An existing DOM element
		 */
		contents: function (element, contents, where) {
			if(contents || contents === 0) {
				if (_.type(contents) !== 'array') {
					contents = [contents];
				}
				
				var firstChild = element.firstChild;
				
				for (var i=0; i<contents.length; i++) {
					var content = contents[i], child;
					
					switch(_.type(content)) {
						case 'string':
							if(content === '') {
								continue;
							}
							// fall through
						case 'number':
							child = document.createTextNode(content);
							break;
						case 'object':
							child = _.element.create(content);
							break;
						default:
							child = content;

					}
					
					if(child) {
						if (!where || where === 'end') {
							element.appendChild(child);
						}
						else if (where === 'start') {
							element.insertBefore(child, firstChild);
						}
					}
				}	
			}
			
			return element;
		}
	},
	
	elements: {
		// set, attr, prop, contents functions from Utopia.element, but for multiple elements
	},
	
	event: {
		/**
		 * Binds one or more events to one or more elements
		 */
		bind: function(target, event, callback, traditional) {
			if(_.type(target) === 'string' || _.type(target) === 'array') {
				var elements = _.type(target) === 'string'? $$(target) : target;
				
				elements.forEach(function(element) {
					_.event.bind(element, event, callback, traditional);
				});
			}
			else if(_.type(event) === 'string') {
				if(traditional) {
					target['on' + event] = callback;
				}
				else {
					target.addEventListener(event, callback, false);
				}
			}
			else if(_.type(event) === 'array') {
				for (var i=0; i<event.length; i++) {
					_.event.bind(target, event[i], callback, arguments[2]);
				}
			}
			else {
				for (var name in event) {
					_.event.bind(target, name, event[name], arguments[2]);
				}
			}
		},
		
		/**
		 * Fire a custom event
		 */
		fire: function(target, type, properties) {
			if(_.type(target) === 'string' || _.type(target) === 'array') {
				var elements = _.type(target) === 'string'? $$(target) : target;
				
				elements.forEach(function(element) {
					_.event.fire(element, type, properties);
				});
			}
			else if (document.createEvent) {
				var evt = document.createEvent("HTMLEvents");
		
				evt.initEvent(type, true, true );
				evt.custom = true;
		
				if(properties) {
					_.attach(evt, properties);
				}
		
				target.dispatchEvent(evt);
			}
		}
	},
	
	/**
	 * Helper for XHR requests
	 */
	xhr: function(o) {
		document.body.setAttribute('data-loading', '');
		
		var xhr = new XMLHttpRequest(),
			method = o.method || 'GET',
			data = o.data || '';
		
		xhr.open(method, o.url + (method === 'GET' && data? '?' + data : ''), true);
		
		o.headers = o.headers || {};
		
		if(method !== 'GET' && !o.headers['Content-type'] && !o.headers['Content-Type']) {
			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		}
		
		for (var header in o.headers) {
			xhr.setRequestHeader(header, o.headers[header]);
		}
		
		xhr.onreadystatechange = function(){
			
			if(xhr.readyState === 4) {
				document.body.removeAttribute('data-loading');
				
				o.callback(xhr);
			}
		};
		
		xhr.send(method === 'GET'? null : data);
	
		return xhr;
	},
	
	/**
	 * Lazy loads an external script
	 */
	script: function(url, callback, doc) {
		doc = doc || document;
		
		return _.element.create({
			tag: 'script',
			properties: {
				src: url,
				async: true,
				onload: callback
			},
			inside: doc.documentElement
		});
	},
	
	/**
	 * Returns the absolute X, Y offsets for an element
	 */
	offset: function(element) {
	    var left = 0, top = 0, el = element;
	    
	    if (el.parentNode) {
			do {
				left += el.offsetLeft;
				top += el.offsetTop;
			} while ((el = el.offsetParent) && el.nodeType < 9);
			
			el = element;
			
			do {
				left -= el.scrollLeft;
				top -= el.scrollTop;
			} while ((el = el.parentNode) && !/body/i.test(el.nodeName));
		}
	
	    return {
			top: top,
	    	right: innerWidth - left - element.offsetWidth,
	    	bottom: innerHeight - top - element.offsetHeight,
	    	left: left,
	    };
	}
};

['set', 'prop', 'attr', 'contents'].forEach(function(method) {
	_.elements[method] = function(elements) {
		elements = _.type(elements) === 'string'? $$(elements) : Array.prototype.slice.call(elements);
		
		var args = Array.prototype.slice.call(arguments);
		args.shift(); // Remove the elements argument
		
		elements = elements.map(function(element) {
			return _.element[method](element, args);
		});
		
		return elements;
	}
});

})();

window.$u = window.$u || Utopia;