mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-09 01:24:07 +01:00
96 lines
2.3 KiB
JavaScript
96 lines
2.3 KiB
JavaScript
/**
|
|
* 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;
|
|
}
|
|
|