diff --git a/lib/OpenLayers.js b/lib/OpenLayers.js index acd1abd2d4..a3dbb63ae2 100644 --- a/lib/OpenLayers.js +++ b/lib/OpenLayers.js @@ -132,6 +132,7 @@ jsFiles = [ "OpenLayers/BaseTypes/Class.js", "OpenLayers/Util.js", + "OpenLayers/Util/vendorPrefix.js", "OpenLayers/Animation.js", "OpenLayers/BaseTypes.js", "OpenLayers/BaseTypes/Bounds.js", diff --git a/lib/OpenLayers/Animation.js b/lib/OpenLayers/Animation.js index cadc14dedb..a19a03909f 100644 --- a/lib/OpenLayers/Animation.js +++ b/lib/OpenLayers/Animation.js @@ -5,6 +5,7 @@ * full text of the license. * * @requires OpenLayers/SingleFile.js + * @requires OpenLayers/Util/vendorPrefix.js */ /** @@ -19,11 +20,8 @@ OpenLayers.Animation = (function(window) { * Property: isNative * {Boolean} true if a native requestAnimationFrame function is available */ - var isNative = !!(window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame); + var requestAnimationFrame = OpenLayers.Util.vendorPrefix.js(window, "requestAnimationFrame"); + var isNative = !!(requestAnimationFrame); /** * Function: requestFrame @@ -36,11 +34,7 @@ OpenLayers.Animation = (function(window) { * element - {DOMElement} Optional element that visually bounds the animation. */ var requestFrame = (function() { - var request = window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame || + var request = window[requestAnimationFrame] || function(callback, element) { window.setTimeout(callback, 16); }; diff --git a/lib/OpenLayers/Control/PinchZoom.js b/lib/OpenLayers/Control/PinchZoom.js index 89240190a9..6652b601e8 100644 --- a/lib/OpenLayers/Control/PinchZoom.js +++ b/lib/OpenLayers/Control/PinchZoom.js @@ -4,6 +4,7 @@ * full text of the license. */ /** + * @requires OpenLayers/Util/vendorPrefix.js * @requires OpenLayers/Handler/Pinch.js */ @@ -162,8 +163,10 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, { */ applyTransform: function(transform) { var style = this.map.layerContainerDiv.style; - style['-webkit-transform'] = transform; - style['-moz-transform'] = transform; + var transformProperty = OpenLayers.Util.vendorPrefix.style("transform"); + if (transformProperty) { + style[transformProperty] = transform; + } }, /** diff --git a/lib/OpenLayers/Util/vendorPrefix.js b/lib/OpenLayers/Util/vendorPrefix.js new file mode 100644 index 0000000000..c6bf3fe72b --- /dev/null +++ b/lib/OpenLayers/Util/vendorPrefix.js @@ -0,0 +1,131 @@ +/** + * 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 + */ + +OpenLayers.Util = OpenLayers.Util || {}; +/** + * Namespace: OpenLayers.Util.vendorPrefix + * A collection of utility functions to detect vendor prefixed features + */ +OpenLayers.Util.vendorPrefix = (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: css + * 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 css(property) { + if (cssCache[property] === undefined) { + var domProperty = property. + replace(/(-[\s\S])/g, function(c) { return c.charAt(1).toUpperCase(); }); + var prefixedDom = style(domProperty); + cssCache[property] = domToCss(prefixedDom); + } + return cssCache[property]; + } + + /** + * APIMethod: js + * 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 js(obj, property) { + if (jsCache[property] === undefined) { + var tmpProp, + i = 0, + l = VENDOR_PREFIXES.length, + prefix, + isStyleObj = (typeof obj.cssText !== "undefined"); + + jsCache[property] = null; + for(; i + + + vendorPrefix.js Tests + + + + + + + \ No newline at end of file diff --git a/tests/list-tests.html b/tests/list-tests.html index c883ed34d7..44b0db2b90 100644 --- a/tests/list-tests.html +++ b/tests/list-tests.html @@ -231,6 +231,7 @@
  • Tween.html
  • Kinetic.html
  • Util.html
  • +
  • Util/vendorPrefix.html
  • deprecated/Ajax.html
  • deprecated/Util.html
  • deprecated/BaseTypes/Class.html