egroupware/etemplate/js/et2_core_stylesheet.js

/**
 * eGroupWare eTemplate2 - Stylesheet class
 *
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @package etemplate
 * @subpackage api
 * @link http://www.egroupware.org
 * @author Andreas Stöckel
 * @copyright Stylite 2011
 * @version $Id$
 */

"use strict"

/**
 * Contains the egwDynStyleSheet class which allows dynamic generation of stylesheet
 * rules - updating a single stylesheet rule is way more efficient than updating
 * the element style of many objects.
 */
var ET2_DYNAMIC_STYLESHEET = null;

/**
 * Main egwDynStyleSheet class - all egwDynStyleSheets share the same stylesheet
 * which is dynamically inserted into the head section of the DOM-Tree.
 * This stylesheet is created with the first egwDynStyleSheet class.
 */
function et2_dynStyleSheet()
{
	// Check whether the ET2_DYNAMIC_STYLESHEET has already be created
	if (!ET2_DYNAMIC_STYLESHEET)
	{
		var style = document.createElement("style");
		document.getElementsByTagName("head")[0].appendChild(style);

		this.styleSheet = style.sheet ? style.sheet : style.styleSheet;
		this.selectors = {};
		this.selectorCount = 0;

		ET2_DYNAMIC_STYLESHEET = this;

		return this;
	}
	else
	{
		return ET2_DYNAMIC_STYLESHEET;
	}
}

/**
 * Creates/Updates the given stylesheet rule. Example call:
 *
 * styleSheet.updateRule("#container", "background-color: blue; font-family: sans;")
 *
 * @param string _selector is the css selector to which the given rule should apply
 * @param string _rule is the rule which is bound to the selector.
 */
et2_dynStyleSheet.prototype.updateRule = function (_selector, _rule)
{
	var ruleObj = {
		"index": this.selectorCount
	}

	// Remove any existing rule first
	if (typeof this.selectors[_selector] !== "undefined")
	{
		var ruleObj = this.selectors[_selector];
		if (typeof this.styleSheet.removeRule !== "undefined")
		{
			this.styleSheet.removeRule(ruleObj.index);
		}
		else
		{
			this.styleSheet.deleteRule(ruleObj.index);
		}

		delete (this.selectors[_selector]);
	}
	else
	{
		this.selectorCount++;
	}

	// Add the rule to the stylesheet
	if (typeof this.styleSheet.addRule !== "undefined")
	{
		this.styleSheet.addRule(_selector, _rule, ruleObj.index);
	}
	else
	{
		this.styleSheet.insertRule(_selector + "{" + _rule + "}", ruleObj.index);
	}

	this.selectors[_selector] = ruleObj;
}