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

Merge pull request #546 from finn-no/vendor-prefixes

Browse Source 
Vendor prefix detection. Thanks @gregersrygg for this excellent contribution.
This commit is contained in:
ahocevar
2012-06-27 23:29:15 -07:00
parent 0834593f9f 2bd8b5c4ba
commit 0d8b76d2b2
7 changed files with 260 additions and 12 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/Util/vendorPrefix.js",
"OpenLayers/Animation.js",
"OpenLayers/BaseTypes.js",
"OpenLayers/BaseTypes/Bounds.js",

14
lib/OpenLayers/Animation.js
View File

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

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

@@ -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;
}
},
/**

131
lib/OpenLayers/Util/vendorPrefix.js Normal file
View File

@@ -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<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: style
* 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 style(property) {
return js(divStyle, property);
}
return {
css: css,
js: js,
style: style,
// used for testing
cssCache: cssCache,
jsCache: jsCache
};
}());