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

Refactored vendor methods to it's own module

Browse Source
This commit is contained in:
Gregers Gram Rygg
2012-06-25 13:44:35 +02:00
parent b394b93723
commit 58a83b0d17
7 changed files with 257 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/OpenLayers.js
View File

@@ -132,6 +132,7 @@
jsFiles = [
"OpenLayers/BaseTypes/Class.js",
"OpenLayers/Util.js",
"OpenLayers/Vendor.js",
"OpenLayers/Animation.js",
"OpenLayers/BaseTypes.js",
"OpenLayers/BaseTypes/Bounds.js",

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

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

92
lib/OpenLayers/Util.js
View File

@@ -1501,98 +1501,6 @@ OpenLayers.Util.getBrowserName = function() {
return OpenLayers.BROWSER_NAME;
};
/**
* Constant: VENDOR_PREFIXES
* {Array} A list of prefixes to test support for vendor-prefixed properties
*/
OpenLayers.Util.VENDOR_PREFIXES = ["", "O", "ms", "Moz", "Webkit"];
/**
* Method: getVendorPrefixedCss
*
* Parameters:
* property - {String} The standard CSS property name
*
* Returns:
* {String} The CSS property name supported by the browser or null if
* unsupported
*/
OpenLayers.Util.getVendorPrefixedCss = (function() {
var cache = {};
function domToCss(prefixedDom) {
return prefixedDom.
replace(/([A-Z])/g, function(c) { return "-" + c.toLowerCase(); }).
replace(/^ms-/, "-ms-");
}
return function(property) {
// clear cache for tests
if (property === "clear cache") { cache = {}; return; }
if (cache[property] === undefined) {
var domProperty = property.
replace(/(-.)/g, function(c) { return c.charAt(1).toUpperCase(); });
var prefixedDom = OpenLayers.Util.getVendorPrefixedObj(domProperty);
cache[property] = domToCss(prefixedDom);
}
return cache[property];
};
})();
/**
* Method: getVendorPrefixedObj
*
* 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
*
* Returns:
* {String} The DOM style property name supported by the browser or null if
* unsupported
*/
OpenLayers.Util.getVendorPrefixedObj = (function() {
var cache = {};
return function getVendorPrefixedObj(obj, property) {
// emulate method overloading
if (typeof obj === "string") {
return getVendorPrefixedObj(document.createElement("div").style, obj);
}
// clear cache for tests
if (property === "clear cache") { cache = {}; return; }
if (cache[property] === undefined) {
var tmpProp,
i = 0,
l = OpenLayers.Util.VENDOR_PREFIXES.length,
prefix,
isStyleObj = (typeof obj.cssText !== "undefined");
cache[property] = null;
for(var i=0,l=OpenLayers.Util.VENDOR_PREFIXES.length; i<l; i++) {
prefix = OpenLayers.Util.VENDOR_PREFIXES[i];
if(prefix) {
if (!isStyleObj) {
// js properties should be lower-case
prefix = prefix.toLowerCase();
}
tmpProp = prefix + property.charAt(0).toUpperCase() + property.slice(1);
} else {
tmpProp = property;
}
if(obj[tmpProp] !== undefined) {
cache[property] = tmpProp;
break;
}
}
}
return cache[property];
};
})();
/**
* Method: getRenderedDimensions
* Renders the contentHTML offscreen to determine actual dimensions for

136
lib/OpenLayers/Vendor.js Normal file
View File

@@ -0,0 +1,136 @@
/**
* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for
* full list of contributors). Published under the 2-clause BSD license.
* See license.txt in the OpenLayers distribution or repository for the
* full text of the license.
*
* @requires OpenLayers/SingleFile.js
*/
/**
* Namespace: OpenLayers.Vendor
* A collection of utility functions to detect vendor prefixed features
*/
var OpenLayers = OpenLayers || {};
OpenLayers.Vendor = (function() {
"use strict";
var VENDOR_PREFIXES = ["", "O", "ms", "Moz", "Webkit"],
divStyle = document.createElement("div").style,
cssCache = {},
jsCache = {};
/**
* Function: domToCss
* Converts a upper camel case DOM style property name to a CSS property
* i.e. transformOrigin -> transform-origin
* or WebkitTransformOrigin -> -webkit-transform-origin
*
* Parameters:
* prefixedDom - {String} The property to convert
*
* Returns:
* {String} The CSS property
*/
function domToCss(prefixedDom) {
if (!prefixedDom) { return null; }
return prefixedDom.
replace(/([A-Z])/g, function(c) { return "-" + c.toLowerCase(); }).
replace(/^ms-/, "-ms-");
}
/**
* APIMethod: cssPrefix
* Detect which property is used for a CSS property
*
* Parameters:
* property - {String} The standard (unprefixed) CSS property name
*
* Returns:
* {String} The standard CSS property, prefixed property or null if not
* supported
*/
function cssPrefix(property) {
if (cssCache[property] === undefined) {
var domProperty = property.
replace(/(-[\s\S])/g, function(c) { return c.charAt(1).toUpperCase(); });
var prefixedDom = stylePrefix(domProperty);
cssCache[property] = domToCss(prefixedDom);
}
return cssCache[property];
}
/**
* APIMethod: jsPrefix
* Detect which property is used for a JS property/method
*
* Parameters:
* obj - {Object} The object to test on
* property - {String} The standard (unprefixed) JS property name
*
* Returns:
* {String} The standard JS property, prefixed property or null if not
* supported
*/
function jsPrefix(obj, property) {
if (jsCache[property] === undefined) {
var tmpProp,
i = 0,
l = VENDOR_PREFIXES.length,
prefix,
isStyleObj = (typeof obj.cssText !== "undefined");
jsCache[property] = null;
for(var i=0,l=VENDOR_PREFIXES.length; i<l; i++) {
prefix = VENDOR_PREFIXES[i];
if(prefix) {
if (!isStyleObj) {
// js prefix should be lower-case, while style
// properties have upper case on first character
prefix = prefix.toLowerCase();
}
tmpProp = prefix + property.charAt(0).toUpperCase() + property.slice(1);
} else {
tmpProp = property;
}
if(obj[tmpProp] !== undefined) {
jsCache[property] = tmpProp;
break;
}
}
}
return jsCache[property];
}
/**
* APIMethod: stylePrefix
* Detect which property is used for a DOM style property
*
* Parameters:
* property - {String} The standard (unprefixed) style property name
*
* Returns:
* {String} The standard style property, prefixed property or null if not
* supported
*/
function stylePrefix(property) {
return jsPrefix(divStyle, property);
}
return {
cssPrefix: cssPrefix,
jsPrefix: jsPrefix,
stylePrefix: stylePrefix,
// used for testing
_clearCache: function() {
cssCache = {};
jsCache = {};
},
_mockStyle: function(mock) {
divStyle = mock;
}
};
}());

81
tests/Util.html
View File

@@ -1110,87 +1110,6 @@
t.eq(OpenLayers.Util.getFormattedLonLat(-181, "lon"), "179°00'00\"E", "crossing dateline from the west results in correct east coordinate");
t.eq(OpenLayers.Util.getFormattedLonLat(181, "lon"), "179°00'00\"W", "crossing dateline from the east results in correct west coordinate");
}
/**
* Test vendor prefixing
*/
function test_vendor_prefixes(t) {
t.plan(17);
var o = {}, err;
var orgCreateElement = document.createElement;
// wrap document.createElement to control property values
document.createElement = function(type) {
var el = orgCreateElement.call(document, type);
// Since o is an object we can change prop for each test
if(o.prop) {
el.style[o.prop] = o.val;
}
return el;
};
function curryTestPrefix(type) {
return function(standardProp, expectedPrefix, msg) {
var prefixedProp, err, method = "getVendorPrefixed" + type;
try {
OpenLayers.Util[method]("clear cache");
prefixedProp = OpenLayers.Util[method](standardProp);
} catch(e) {
err = e;
}
if(!err) {
t.eq(prefixedProp, expectedPrefix, msg);
} else {
t.fail("Error when testing " + type.toUpperCase() + " vendor prefix: " + err.message);
}
};
}
var testDomPrefix = curryTestPrefix("Obj"),
testCssPrefix = curryTestPrefix("Css");
o.prop = "test";
o.val = "";
testDomPrefix("test", "test", "DOM vendor prefix - single word");
testCssPrefix("test", "test", "CSS vendor prefix - single word");
o.prop = "testMultiWord";
testDomPrefix("testMultiWord", "testMultiWord", "DOM vendor prefix - multiple words");
testCssPrefix("test-multi-word", "test-multi-word", "CSS vendor prefix - multiple words");
o.prop = "WebkitMultiWord";
testDomPrefix("multiWord", "WebkitMultiWord", "DOM vendor prefix - multiple words for WebKit");
testCssPrefix("multi-word", "-webkit-multi-word", "CSS vendor prefix - multiple words for WebKit");
o.prop = "MozMultiWord";
testDomPrefix("multiWord", "MozMultiWord", "DOM vendor prefix - multiple words for Mozilla");
testCssPrefix("multi-word", "-moz-multi-word", "CSS vendor prefix - multiple words for Mozilla");
o.prop = "OMultiWord";
testDomPrefix("multiWord", "OMultiWord", "DOM vendor prefix - multiple words for Opera");
testCssPrefix("multi-word", "-o-multi-word", "CSS vendor prefix - multiple words for Opera");
o.prop = "msMultiWord";
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");
// 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
document.createElement = orgCreateElement;
}
/**
* To test that we can safely call OpenLayers.Util.extend with an Event

118
tests/Vendor.html Normal file
View File

@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html>
<head>
<title>Vendor.js Tests</title>
<script>
// dependencies for tests
var OpenLayers = [
"OpenLayers/Vendor.js"
];
</script>
<script src="OLLoader.js"></script>
<script>
/**
* Test vendor prefixing
*/
function test_vendor_prefixes(t) {
t.plan(20);
var o = {
prop: null,
val: null
}, err;
/*var orgCreateElement = document.createElement;
// wrap document.createElement to control property values
document.createElement = function(type) {
var el = orgCreateElement.call(document, type);
// Since o is an object we can change prop for each test
if(o.prop) {
el.style[o.prop] = o.val;
}
return el;
};*/
function curryTestPrefix(type) {
return function(standardProp, expectedPrefix, msg) {
var prefixedProp, err, method = type + "Prefix";
try {
OpenLayers.Vendor._clearCache();
var fakeStyle = { cssText: "" };
if (o.prop != null) {
fakeStyle[o.prop] = o.val;
}
OpenLayers.Vendor._mockStyle(fakeStyle);
prefixedProp = OpenLayers.Vendor[method](standardProp);
} catch(e) {
err = e;
}
if(!err) {
t.eq(prefixedProp, expectedPrefix, msg);
} else {
t.fail("Error when testing " + type.toUpperCase() + " vendor prefix: " + err.message);
}
};
}
var testDomPrefix = curryTestPrefix("style"),
testCssPrefix = curryTestPrefix("css");
o.prop = undefined;
o.val = undefined;
testDomPrefix("unsupported", null, "DOM vendor prefix - unsupported");
testCssPrefix("unsupported", null, "CSS vendor prefix - unsupported");
o.prop = "test";
o.val = "";
testDomPrefix("test", "test", "DOM vendor prefix - single word");
testCssPrefix("test", "test", "CSS vendor prefix - single word");
o.prop = "testMultiWord";
testDomPrefix("testMultiWord", "testMultiWord", "DOM vendor prefix - multiple words");
testCssPrefix("test-multi-word", "test-multi-word", "CSS vendor prefix - multiple words");
o.prop = "WebkitMultiWord";
testDomPrefix("multiWord", "WebkitMultiWord", "DOM vendor prefix - multiple words for WebKit");
testCssPrefix("multi-word", "-webkit-multi-word", "CSS vendor prefix - multiple words for WebKit");
o.prop = "MozMultiWord";
testDomPrefix("multiWord", "MozMultiWord", "DOM vendor prefix - multiple words for Mozilla");
testCssPrefix("multi-word", "-moz-multi-word", "CSS vendor prefix - multiple words for Mozilla");
o.prop = "OMultiWord";
testDomPrefix("multiWord", "OMultiWord", "DOM vendor prefix - multiple words for Opera");
testCssPrefix("multi-word", "-o-multi-word", "CSS vendor prefix - multiple words for Opera");
o.prop = "msMultiWord";
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");
// test vendor prefix on object
OpenLayers.Vendor._clearCache();
t.eq( OpenLayers.Vendor.jsPrefix( {}, "unsupported" ), null, "Standard object property - unsupported");
OpenLayers.Vendor._clearCache();
t.eq( OpenLayers.Vendor.jsPrefix( { "test": true }, "test" ), "test", "Standard object property");
OpenLayers.Vendor._clearCache();
t.eq( OpenLayers.Vendor.jsPrefix( { "oTest": true }, "test" ), "oTest", "Standard object property");
OpenLayers.Vendor._clearCache();
t.eq( OpenLayers.Vendor.jsPrefix( { "msTest": true }, "test" ), "msTest", "Standard object property");
OpenLayers.Vendor._clearCache();
t.eq( OpenLayers.Vendor.jsPrefix( { "mozTest": true }, "test" ), "mozTest", "Standard object property");
OpenLayers.Vendor._clearCache();
t.eq( OpenLayers.Vendor.jsPrefix( { "webkitTest": true }, "test" ), "webkitTest", "Standard object property");
// unwrap document.createElement
//document.createElement = orgCreateElement;
}
</script>
</head>
<body></body>
</html>

1
tests/list-tests.html
View File

@@ -231,6 +231,7 @@
<li>Tween.html</li>
<li>Kinetic.html</li>
<li>Util.html</li>
<li>Vendor.html</li>
<li>deprecated/Ajax.html</li>
<li>deprecated/Util.html</li>
<li>deprecated/BaseTypes/Class.html</li>