Refactored vendor methods to it's own module

lib/OpenLayers.js

@@ -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",

lib/OpenLayers/Control/PinchZoom.js

@@ -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;
         }

lib/OpenLayers/Util.js

@@ -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

lib/OpenLayers/Vendor.js

@@ -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;
+        }
+    };
+}());

tests/Util.html

@@ -1111,87 +1111,6 @@
         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
      * instance, we need to capture a real event.

tests/Vendor.html

@@ -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>

tests/list-tests.html

@@ -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>