64,7 → 64,8 |
|
var _LENGTH = 1; |
var _COLOR = 5; |
var _TRANSFORM = 7; |
var _FLOAT = 7; |
var _TRANSFORM = 8; |
|
return { |
/** |
145,10 → 146,28 |
/** |
* List of transformations |
*/ |
FLOAT: _FLOAT, |
|
/** |
* List of transformations |
*/ |
TRANSFORM: _TRANSFORM |
}, |
|
prefixedProperties: { |
transition: true, |
animation: true |
}, |
|
/** |
* Property name prefixes |
*/ |
prefixes: { |
camelized: ["Moz", "Ms", "O", "Webkit", ""], |
uncamelized: ["-moz-", "-ms-", "-o-", "-webkit-", ""] |
}, |
|
/** |
* Provides information about the type of a CSS property and its relation |
* to other CSS properties |
* |
155,18 → 174,51 |
* @namespace |
*/ |
propertyInfo: { |
left: {type: _LENGTH, correspondsTo: "top"}, |
top: {type: _LENGTH, correspondsTo: "left"}, |
right: {type: _LENGTH, correspondsTo: "bottom"}, |
bottom: {type: _LENGTH, correspondsTo: "right"}, |
width: {type: _LENGTH, correspondsTo: "height"}, |
height: {type: _LENGTH, correspondsTo: "width"}, |
color: {type: __COLOR}, |
backgroundColor: {type: _COLOR}, |
"background-color": {type: _COLOR}, |
transform: {type: _TRANSFORM} |
"float": { |
type: _FLOAT, |
aliases: ["cssFloat", "styleFloat"] |
}, |
left: { |
type: _LENGTH, |
correspondsTo: "top" |
}, |
top: { |
type: _LENGTH, |
correspondsTo: "left" |
}, |
right: { |
type: _LENGTH, |
correspondsTo: "bottom" |
}, |
bottom: { |
type: _LENGTH, |
correspondsTo: "right" |
}, |
width: { |
type: _LENGTH, |
correspondsTo: "height" |
}, |
height: { |
type: _LENGTH, |
correspondsTo: "width" |
}, |
color: { |
type: _COLOR |
}, |
|
/* FIXME */ |
backgroundColor: { |
type: _COLOR |
}, |
"background-color": { |
type: _COLOR |
}, |
|
transform: { |
type: _TRANSFORM |
} |
}, |
|
/** |
* @function |
*/ |
262,9 → 314,7 |
cache.put(sProperty, s2); |
return s2; |
}; |
})() |
}; |
})(); |
})(), |
|
/** |
* Returns the computed style of an {@link Element} or the |
272,16 → 322,10 |
* |
* @function |
*/ |
jsx.dom.getComputedStyle = (function () { |
var _camelize = jsx.dom.css.camelize; |
var _getProperty = jsx.object.getProperty; |
getComputedStyle: (function () { |
var _isMethod = _jsx_object.isMethod; |
var _defaultView; |
|
var |
hasGCS = jsx.object.isMethod(document, "defaultView", "getComputedStyle"), |
propertyMap = { |
"float": hasGCS ? "cssFloat" : "styleFloat" |
}; |
|
/** |
* @param {Element} oElement |
* Element for which the computed style should be retrieved. |
292,35 → 336,65 |
* The property name in CSS or script syntax (names are mapped |
* automatically according to the feature used). If not passed |
* or empty, the entire computed style is returned. |
* @return {CSSStyleDeclaration|currentStyle|string} |
* @return {CSSStyleDeclaration|currentStyle|string|null} |
* The return value depends on both the passed arguments |
* and the capabilities of the user agent: |
* |
* If the UA supports either ViewCSS::getComputedStyle() |
* from W3C DOM Level 2 CSS or MSHTML's currentStyle |
* property, then |
* a) if <var>sProperty</var> was passed, the value of the |
* CSS property with name <var>sProperty</vr> is returned; |
* it is a string if the property is supported; |
* b) if <var>cssProperty</var> was not passed, the corresponding |
* style object is returned |
* |
* However, MSHTML's currentStyle does not support pseudo-elements. |
* If you attempt to retrieve pseudo-element's computed style, |
* <code>null</code> is returned (without error). |
* |
* If the UA supports neither of the above, <code>null</code> |
* is returned. |
*/ |
function _getComputedStyle (oElement, sPseudoEl, sProperty) |
{ |
if (hasGCS || typeof oElement.currentStyle != "undefined") |
var computedStyle; |
|
if (_isMethod(document, "defaultView", "getComputedStyle") |
&& (typeof _defaultView != "undefined" || (_defaultView = document.defaultView))) |
{ |
var compStyle = (hasGCS |
? document.defaultView.getComputedStyle(oElement, sPseudoEl || null) |
: oElement.currentStyle); |
computedStyle = _defaultView.getComputedStyle(oElement, sPseudoEl || null); |
} |
else |
{ |
if (sPseudoEl) |
{ |
return null; |
} |
|
return (sProperty |
? compStyle[ |
_camelize( |
_getProperty(propertyMap, sProperty, sProperty)) |
] |
: compStyle); |
computedStyle = obj.currentStyle; |
} |
|
var emptyResult = {}; |
emptyResult[sProperty] = ""; |
if (typeof computedStyle != "undefined") |
{ |
if (!sProperty) |
{ |
return computedStyle; |
} |
|
return (sProperty ? emptyResult : null); |
return jsx.dom.getStyleProperty({style: computedStyle}, sProperty); |
} |
|
return null; |
} |
|
return _getComputedStyle; |
}()); |
}()) |
}; |
})(); |
|
/** |
* Retrieves the value of a style property of an HTMLElement object. |
* Retrieves the value of a style property of an {@link Element}. |
* |
* @author |
* (C) 2005, 2013 Thomas Lahn <js@PointedEars.de> |
332,14 → 406,25 |
var _camelize = jsx.dom.css.camelize; |
var _uncamelize = jsx.dom.css.uncamelize; |
|
var _prefixedProperties = jsx.dom.css.prefixedProperties; |
var _prefixes = jsx.dom.css.prefixes; |
var _propertyInfo = jsx.dom.css.propertyInfo; |
|
/** |
* @param {HTMLElement} oElement |
* @param {Element} oElement |
* Reference to the element object whose style is to be retrieved. |
* @param {String} sPropertyName |
* Name of the style property whose value is to be retrieved. |
* If "display", and there is no |
* <code>style[<var>sPropertyName</var>]</code> property, |
* "visibility" is used instead (fallback for the NN4 DOM). |
* Both camelCased and dash-property names are supported. |
* Mapping to supported prefix properties is done automatically, |
* i. e. <code>"transition"</code> would cause |
* <code>"-webkit-transition"</code> to be retrieved if |
* the former but not <code>"transition"</code> was available. |
* If the <code>style</code> property is available on the element, |
* the faster property-accessor approach is attempted first, |
* then the slower setProperty() call. |
* Otherwise <code>"visibility"</code> is used instead |
* (fallback for the NN4 DOM). |
* @return {string|null} |
* <code>null</code> if no matching object exists or if the |
* DOM does not provide for retrieval of the property value. |
349,55 → 434,86 |
if (oElement) |
{ |
/* TODO: Needed for NN4 DOM as well? */ |
var camelizedName = _camelize(sPropertyName); |
var camelized_name = _camelize(sPropertyName); |
|
if (typeof oElement.style != "undefined") |
{ |
var style = oElement.style; |
|
/* Prefer style.getPropertyValue() over mapping to extension properties */ |
if (_isHostMethod(style, "getPropertyValue")) |
var thisPropertyInfo = _propertyInfo[camelized_name]; |
var thisAliases = thisPropertyInfo && thisPropertyInfo.aliases; |
if (thisAliases) |
{ |
sPropertyName = _uncamelize(sPropertyName); |
for (var i = thisAliases.length; i--;) |
{ |
var alias = thisAliases[i]; |
if (typeof style[alias] != "undefined") |
{ |
return style[alias]; |
} |
} |
|
return style.getPropertyValue(sPropertyName); |
return null; |
} |
|
/* handle the `float' property */ |
var isStyleFloat = false; |
|
if (camelizedName == "float") |
if (_prefixedProperties[sPropertyName]) |
{ |
/* W3C DOM Level 2 CSS */ |
if (typeof style.cssFloat != "undefined") |
for (i = _prefixes.camelized.length; i--;) |
{ |
camelizedName = "cssFloat"; |
isStyleFloat = true; |
var prefix = _prefixes.camelized[i]; |
var prefixed_name = (prefix |
? prefix |
+ camelized_name.charAt(0).toUpperCase() |
+ camelized_name.substring(1) |
: camelized_name); |
if (typeof style[prefixed_name] != "undefined") |
{ |
return style[prefixed_name]; |
} |
} |
|
/* MSHTML DOM */ |
else if (typeof style.styleFloat != "undefined") |
return null; |
} |
|
if (typeof style[camelized_name] != "undefined") |
{ |
camelizedName = "styleFloat"; |
isStyleFloat = true; |
return style[camelized_name]; |
} |
} |
|
if (isStyleFloat || typeof style[camelizedName] != "undefined") |
/* If the quick, backwards-compatible method failed for some reason */ |
if (_isHostMethod(style, "getPropertyValue")) |
{ |
return style[camelizedName]; |
var uncamelized_name = _uncamelize(sPropertyName); |
|
/* NOTE: Works because of no dash-properties in _prefixedProperties */ |
if (_prefixedProperties[sPropertyName]) |
{ |
for (i = _prefixes.uncamelized.length; i--;) |
{ |
var value = style.getPropertyValue( |
_prefixes.uncamelized[i] + uncamelized_name); |
if (value) |
{ |
return value; |
} |
} |
|
return null; |
} |
|
return style.getPropertyValue(uncamelized_name); |
} |
} |
else |
{ |
if (camelizedName == "display") |
if (camelized_name == "display") |
{ |
camelizedName = "visibility"; |
camelized_name = "visibility"; |
} |
|
if (typeof oElement[camelizedName] != "undefined") |
if (typeof oElement[camelized_name] != "undefined") |
{ |
return oElement[camelizedName]; |
return oElement[camelized_name]; |
} |
} |
} |
409,7 → 525,7 |
}()); |
|
/** |
* Determines whether an HTMLElement object has a style property. |
* Determines whether an {@link Element} has a style property. |
* |
* @author |
* (C) 2006 Thomas Lahn <js@PointedEars.de> |
432,7 → 548,7 |
}; |
|
/** |
* Sets the value of a style property of an HTMLElement object. |
* Sets the value of a style property of an {@link Element}. |
* |
* @function |
* @author |
445,26 → 561,38 |
var _camelize = jsx.dom.css.camelize; |
var _uncamelize = jsx.dom.css.uncamelize; |
|
var _prefixedProperties = jsx.dom.css.prefixedProperties; |
var _prefixes = jsx.dom.css.prefixes; |
var _propertyInfo = jsx.dom.css.propertyInfo; |
|
/** |
* @param {HTMLElement} oElement |
* Reference to the element object which style is to be modified. |
* @param {Element} oElement |
* Reference to the element object whose style is to be modified. |
* @param {string} sPropertyName |
* Name of the style property of which the value should be set. |
* If "display" and there is no <code>style[<var>sPropertyName</var>]</code> |
* property and <code>altValue</code> was provided, "visibility" is used |
* instead (fallback for the NN4 DOM). |
* Name of the style property whose value should be set. |
* Both camelCased and dash-property names are supported. |
* Mapping to supported prefix properties is done automatically, |
* i. e. <code>"transition"</code> would cause only |
* <code>"-webkit-transition"</code> to be set if the former |
* but not <code>"transition"</code> was available. |
* If the <code>style</code> property is available on the element, |
* the faster property-accessor approach is attempted first, |
* then the slower setProperty() call. |
* If <code>"display"</code>, and there is no <code>style</code> |
* property, and <code>altValue</code> was provided, "visibility" |
* is used instead (fallback for the NN4 DOM). |
* @param propValue |
* Value of the style property to be set. |
* @param {_} altValue (optional) |
* Alternative value to be set if the the style property is a property of |
* the object itself instead of its `style' property. Fallback for the |
* NN4 DOM. |
* Alternative value to be set if the the style property is a |
* property of the object itself instead of its `style' property. |
* Fallback for the NN4 DOM. |
* @return {boolean} |
* <code>false</code> if no such object exists, the |
* DOM does not provide for setting the property value, |
* or if the assignment failed (invalid value). |
* CAVEAT: Some property values are normalized by the API when read; |
* test before using the return value as a discriminator. |
* CAVEAT: Some property values are normalized by the DOM API |
* when read; test before using the return value as a discriminator. |
*/ |
function _setStyleProperty (oElement, sPropertyName, propValue, altValue) |
{ |
471,56 → 599,84 |
if (oElement) |
{ |
/* TODO: Needed for NN4 DOM as well? */ |
var camelizedName = _camelize(sPropertyName); |
var camelized_name = _camelize(sPropertyName); |
|
if (typeof oElement.style != "undefined") |
{ |
var style = oElement.style; |
|
/* Prefer style.setProperty() over mapping to extension properties */ |
if (_isHostMethod(style, "setProperty")) |
var thisPropertyInfo = _propertyInfo[camelized_name]; |
var thisAliases = thisPropertyInfo && thisPropertyInfo.aliases; |
if (thisAliases) |
{ |
sPropertyName = _uncamelize(sPropertyName); |
for (var i = thisAliases.length; i--;) |
{ |
var alias = thisAliases[i]; |
if (typeof style[alias] != "undefined") |
{ |
style[alias] = propValue; |
return (String(style[alias]).toLowerCase() |
== String(propValue).toLowerCase()); |
} |
} |
|
style.setProperty(sPropertyName, propValue); |
return false; |
} |
|
if (!_isHostMethod(style, "getPropertyValue")) |
if (_prefixedProperties[sPropertyName]) |
{ |
return true; |
var len; |
for (i = 0, len = _prefixes.camelized.length; i < len; ++i) |
{ |
var prefix = _prefixes.camelized[i]; |
var prefixed_name = (prefix |
? prefix |
+ camelized_name.charAt(0).toUpperCase() |
+ camelized_name.substring(1) |
: camelized_name); |
if (typeof style[prefixed_name] != "undefined") |
{ |
style[prefixed_name] = propValue; |
} |
} |
|
return (String(style.getPropertyValue(sPropertyName)).toLowerCase() |
return (String(style[prefixed_name]).toLowerCase() |
== String(propValue).toLowerCase()); |
} |
|
/* handle the `float' property */ |
var isStyleFloat = false; |
if (typeof style[camelized_name] != "undefined") |
{ |
style[camelized_name] = propValue; |
return (String(style[camelized_name]).toLowerCase() |
== String(propValue).toLowerCase()); |
} |
|
if (camelizedName == "float") |
/* If the quick, backwards-compatible method failed for some reason */ |
if (_isHostMethod(style, "setProperty")) |
{ |
/* W3C DOM Level 2 CSS */ |
if (typeof style.cssFloat != "undefined") |
var uncamelized_name = _uncamelize(sPropertyName); |
|
/* NOTE: Works because of no dash-properties in _prefixedProperties */ |
if (_prefixedProperties[sPropertyName]) |
{ |
camelizedName = "cssFloat"; |
isStyleFloat = true; |
for (i = 0, len = _prefixes.uncamelized.length; i < len; ++i) |
{ |
style.setProperty( |
_prefixes.uncamelized[i] + uncamelized_name, |
propValue); |
} |
|
/* MSHTML DOM */ |
else if (typeof style.styleFloat != "undefined") |
if (!_isHostMethod(style, "getPropertyValue")) |
{ |
camelizedName = "styleFloat"; |
isStyleFloat = true; |
return true; |
} |
|
return (String(style.getPropertyValue(sPropertyName)).toLowerCase() |
== String(propValue).toLowerCase()); |
} |
|
if (isStyleFloat || typeof style[camelizedName] != "undefined") |
{ |
/* |
* NOTE: Shortcut evaluation changed behavior; |
* result of assignment is *right-hand side* operand |
*/ |
style[camelizedName] = propValue; |
return (String(style[camelizedName]).toLowerCase() |
style.setProperty(uncamelized_name, propValue); |
return (String(style.getPropertyValue(uncamelized_name)).toLowerCase() |
== String(propValue).toLowerCase()); |
} |
} |
527,16 → 683,16 |
else |
{ |
/* NN4 DOM */ |
if (camelizedName == "display" && altValue) |
if (camelized_name == "display" && altValue) |
{ |
camelizedName = "visibility"; |
camelized_name = "visibility"; |
} |
|
if (typeof oElement[camelizedName] != "undefined") |
if (typeof oElement[camelized_name] != "undefined") |
{ |
var newValue = (altValue || propValue); |
oElement[camelizedName] = newValue; |
return (String(oElement[camelizedName]).toLowerCase() |
oElement[camelized_name] = newValue; |
return (String(oElement[camelized_name]).toLowerCase() |
== String(newValue).toLowerCase()); |
} |
} |
1018,63 → 1174,6 |
}()); |
|
/** |
* Returns the computed style of an element or |
* the computed value of a style property of an element. |
*/ |
jsx.dom.css.getComputedStyle = (function () { |
var _isMethod = jsx.object.isMethod, |
_defaultView; |
|
/** |
* @param {Element} obj |
* @param {string} cssProperty |
* @return {CSSStyleDeclaration|string} |
* The return value depends on both the passed arguments |
* and the capabilities of the user agent: |
* |
* If the UA supports either ViewCSS::getComputedStyle() |
* from W3C DOM Level 2 CSS or MSHTML's currentStyle |
* property, then |
* a) if <var>cssProperty</var> was passed, the value of the |
* CSS property with name <var>cssProperty</vr> is returned; |
* it is a string if the property is supported; |
* b) if <var>cssProperty</var> was not passed, the corresponding |
* style object is returned |
* |
* If the UA supports neither of the above, `undefined' is |
* returned. |
* @type string|CSSStyleDeclaration|currentStyle |
*/ |
return function (obj, cssProperty) { |
var computedStyle; |
|
if (_isMethod(document, "defaultView", "getComputedStyle") |
&& (typeof _defaultView != "undefined" || (_defaultView = document.defaultView)) |
&& (computedStyle = _defaultView.getComputedStyle(obj, null))) |
{ |
if (cssProperty) |
{ |
if (_isMethod(computedStyle, "getPropertyValue")) |
{ |
return computedStyle.getPropertyValue(cssProperty); |
} |
|
return jsx.throwThis(null, "Unable to retrieve computed style property"); |
} |
} |
else if (typeof (computedStyle = obj.currentStyle) != "undefined") |
{ |
if (cssProperty) |
{ |
return computedStyle[cssProperty]; |
} |
} |
|
return computedStyle; |
}; |
}()); |
|
/** |
* Makes all non-default stylesheet declarations for an element inline |
*/ |
jsx.dom.css.makeInline = (function () { |