Styling system for Appcelerator

CSS.js

(function() {
	/* =DEPENDENCIES
	 --------------------------------------------------------------------------- */
	var _ = require('utils/common/underscore')._;

	/* =CONSTRUCTOR
	 --------------------------------------------------------------------------- */
	var CSS = {
		
		/*
		 * GLOBAL
		 * ------------------------------------------------- */
		global : {
			
			windows : {
				backgroundColor : '#000',
				barColor : '#dc0000'
			}
			
		},
		
		/*
		 * WINDOWS
		 * ------------------------------------------------- */
		windows : {
			
			/* SAMPLE */
			sample : {
				barColor : 'blue'
			}
		},
		
		/* =|getStyles(base, styles)
		 *
		 * Creates an object composed with the attributes of the given
		 * dot notation string properties found on `this` and the `styles`
		 * object
		 * 
		 * Params:
		 *  - base (String):
		 * 		Dot notation string to find objects inside `this`
		 *  - styles (Object):
		 * 		Object to be merged with those found with `base`
		 * 
		 * Return:
		 *  - Object:
		 * 		Merged object
		 --------------------------------------------------------------------------- */
		getStyles : function(base, styles) {
			var base_styles = {};
			var that = this;
			
			_.each(base.split(','), function(style){
				var style = findByString(that, style.trim());
				
				_.extend(base_styles, style);
			});
			
			if (styles != null) {
				return _.extend(base_styles, styles);
			} else {
				return base_styles;
			}
		}
	};
	
	/* =INTERNAL UTILS
	 --------------------------------------------------------------------------- */

	/* =|findByString(o, s)
	 *
	 * Find childs into an object by a dot notation string
	 * 
	 * Params:
	 *  - o (Object):
	 * 		Object where the search will be produced
	 *  - s (String):
	 * 		Dot notation string
	 * 
	 * Return:
	 *  - o (Object):
	 * 		Found object
	 --------------------------------------------------------------------------- */
	function findByString(o, s) {
		s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
		s = s.replace(/^\./, ''); // strip a leading dot
		var a = s.split('.');
		while (a.length) {
			var n = a.shift();
			if ( n in o) {
				o = o[n];
			} else {
				return;
			}
		}
		return o;
	}
	
	/* =EXPOSE OBJECT
	 --------------------------------------------------------------------------- */
	module.exports = CSS;
})();

sample.js

(function() {
	var CSS = require('styles/CSS');

	var win = Ti.UI.createWindow(
		CSS.getStyles("global.windows, windows.sample",
		{
			title : "Dashboard"
		})
	);
})();