ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added support to detect vendor-prefixes for non-style objects

Browse Source
This commit is contained in:
Gregers Gram Rygg
2012-06-23 21:48:44 +02:00
parent a18ce5adf6
commit b9670a292b
3 changed files with 40 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/OpenLayers/Control/PinchZoom.js
View File

@@ -162,7 +162,7 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
*/ */
applyTransform: function(transform) { applyTransform: function(transform) {
var style = this.map.layerContainerDiv.style; var style = this.map.layerContainerDiv.style;
var transformProperty = OpenLayers.Util.getVendorPrefixedDom("transform"); var transformProperty = OpenLayers.Util.getVendorPrefixedObj("transform");
if (transformProperty) { if (transformProperty) {
style[transformProperty] = transform; style[transformProperty] = transform;
} }

32
lib/OpenLayers/Util.js
View File

@@ -1509,10 +1509,10 @@ OpenLayers.Util.getBrowserName = function() {
}; };
/** /**
* Constant: VENDOR_DOM_PREFIXES * Constant: VENDOR_PREFIXES
* {Array} A list of prefixes to test support for vendor-prefixed properties * {Array} A list of prefixes to test support for vendor-prefixed properties
*/ */
OpenLayers.Util.VENDOR_DOM_PREFIXES = ["", "O", "ms", "Moz", "Webkit"]; OpenLayers.Util.VENDOR_PREFIXES = ["", "O", "ms", "Moz", "webkit"];
/** /**
* Method: getVendorPrefixedCss * Method: getVendorPrefixedCss
@@ -1530,7 +1530,8 @@ OpenLayers.Util.getVendorPrefixedCss = (function() {
function domToCss(prefixedDom) { function domToCss(prefixedDom) {
return prefixedDom. return prefixedDom.
replace(/([A-Z])/g, function(char) { return "-" + char.toLowerCase(); }). replace(/([A-Z])/g, function(char) { return "-" + char.toLowerCase(); }).
replace(/^ms-/, "-ms-"); replace(/^ms-/, "-ms-").
replace(/^webkit-/, "-webkit-");
} }
return function(property) { return function(property) {
@@ -1540,7 +1541,7 @@ OpenLayers.Util.getVendorPrefixedCss = (function() {
if (cache[property] === undefined) { if (cache[property] === undefined) {
var domProperty = property. var domProperty = property.
replace(/(-.)/g, function(c) { return c.charAt(1).toUpperCase(); }); replace(/(-.)/g, function(c) { return c.charAt(1).toUpperCase(); });
var prefixedDom = OpenLayers.Util.getVendorPrefixedDom(domProperty); var prefixedDom = OpenLayers.Util.getVendorPrefixedObj(domProperty);
cache[property] = domToCss(prefixedDom); cache[property] = domToCss(prefixedDom);
} }
return cache[property]; return cache[property];
@@ -1548,39 +1549,44 @@ OpenLayers.Util.getVendorPrefixedCss = (function() {
})(); })();
/** /**
* Method: getVendorPrefixedDom * Method: getVendorPrefixedObj
* *
* Parameters: * Parameters:
* object - {Object} Optional object to test for vendor-prefixed properties. Defaults to a DIV's style object.
* property - {String} The standard DOM style property name * property - {String} The standard DOM style property name
* *
* Returns: * Returns:
* {String} The DOM style property name supported by the browser or null if * {String} The DOM style property name supported by the browser or null if
* unsupported * unsupported
*/ */
OpenLayers.Util.getVendorPrefixedDom = (function() { OpenLayers.Util.getVendorPrefixedObj = (function() {
var cache = {}; var cache = {};
return function(property) { return function getVendorPrefixedObj(obj, property) {
// emulate method overloading
if (typeof obj === "string") {
return getVendorPrefixedObj(document.createElement("div").style, obj);
}
// clear cache for tests // clear cache for tests
if (property === "clear cache") { cache = {}; return; } if (property === "clear cache") { cache = {}; return; }
if (cache[property] === undefined) { if (cache[property] === undefined) {
var el = document.createElement("div"), var tmpProp,
tmpProp,
i = 0, i = 0,
l = OpenLayers.Util.VENDOR_DOM_PREFIXES.length, l = OpenLayers.Util.VENDOR_PREFIXES.length,
prefix; prefix;
cache[property] = null; cache[property] = null;
for(var i=0,l=OpenLayers.Util.VENDOR_DOM_PREFIXES.length; i<l; i++) { for(var i=0,l=OpenLayers.Util.VENDOR_PREFIXES.length; i<l; i++) {
prefix = OpenLayers.Util.VENDOR_DOM_PREFIXES[i]; prefix = OpenLayers.Util.VENDOR_PREFIXES[i];
if(prefix) { if(prefix) {
tmpProp = prefix + property.charAt(0).toUpperCase() + property.slice(1); tmpProp = prefix + property.charAt(0).toUpperCase() + property.slice(1);
} else { } else {
tmpProp = property; tmpProp = property;
} }
if(el.style[tmpProp] !== undefined) { if(obj[tmpProp] !== undefined) {
cache[property] = tmpProp; cache[property] = tmpProp;
break; break;
} }

24
tests/Util.html
View File

@@ -1124,7 +1124,7 @@
* Test vendor prefixing * Test vendor prefixing
*/ */
function test_vendor_prefixes(t) { function test_vendor_prefixes(t) {
t.plan(12); t.plan(17);
var o = {}, err; var o = {}, err;
var orgCreateElement = document.createElement; var orgCreateElement = document.createElement;
// wrap document.createElement to control property values // wrap document.createElement to control property values
@@ -1153,7 +1153,7 @@
} }
}; };
} }
var testDomPrefix = curryTestPrefix("Dom"), var testDomPrefix = curryTestPrefix("Obj"),
testCssPrefix = curryTestPrefix("Css"); testCssPrefix = curryTestPrefix("Css");
o.prop = "test"; o.prop = "test";
@@ -1165,8 +1165,8 @@
testDomPrefix("testMultiWord", "testMultiWord", "DOM vendor prefix - multiple words"); testDomPrefix("testMultiWord", "testMultiWord", "DOM vendor prefix - multiple words");
testCssPrefix("test-multi-word", "test-multi-word", "CSS vendor prefix - multiple words"); testCssPrefix("test-multi-word", "test-multi-word", "CSS vendor prefix - multiple words");
o.prop = "WebkitMultiWord"; o.prop = "webkitMultiWord";
testDomPrefix("multiWord", "WebkitMultiWord", "DOM vendor prefix - multiple words for WebKit"); testDomPrefix("multiWord", "webkitMultiWord", "DOM vendor prefix - multiple words for WebKit");
testCssPrefix("multi-word", "-webkit-multi-word", "CSS vendor prefix - multiple words for WebKit"); testCssPrefix("multi-word", "-webkit-multi-word", "CSS vendor prefix - multiple words for WebKit");
o.prop = "MozMultiWord"; o.prop = "MozMultiWord";
@@ -1181,6 +1181,22 @@
testDomPrefix("multiWord", "msMultiWord", "DOM vendor prefix - multiple words for Internet Explorer"); testDomPrefix("multiWord", "msMultiWord", "DOM vendor prefix - multiple words for Internet Explorer");
testCssPrefix("multi-word", "-ms-multi-word", "CSS vendor prefix - multiple words for Internet Explorer"); testCssPrefix("multi-word", "-ms-multi-word", "CSS vendor prefix - multiple words for Internet Explorer");
// test vendor prefix on object
OpenLayers.Util.getVendorPrefixedObj({}, "clear cache");
t.eq( OpenLayers.Util.getVendorPrefixedObj( { "test": true }, "test" ), "test", "Standard object property");
OpenLayers.Util.getVendorPrefixedObj({}, "clear cache");
t.eq( OpenLayers.Util.getVendorPrefixedObj( { "OTest": true }, "test" ), "OTest", "Standard object property");
OpenLayers.Util.getVendorPrefixedObj({}, "clear cache");
t.eq( OpenLayers.Util.getVendorPrefixedObj( { "msTest": true }, "test" ), "msTest", "Standard object property");
OpenLayers.Util.getVendorPrefixedObj({}, "clear cache");
t.eq( OpenLayers.Util.getVendorPrefixedObj( { "MozTest": true }, "test" ), "MozTest", "Standard object property");
OpenLayers.Util.getVendorPrefixedObj({}, "clear cache");
t.eq( OpenLayers.Util.getVendorPrefixedObj( { "webkitTest": true }, "test" ), "webkitTest", "Standard object property");
// unwrap document.createElement // unwrap document.createElement
document.createElement = orgCreateElement; document.createElement = orgCreateElement;
} }