Add a compile-time flag to enable legacy IE support

This commit is contained in:
Austin Hyde
2014-01-31 10:46:16 -05:00
parent 74a9a155b1
commit 9ffed5bf5f
5 changed files with 109 additions and 43 deletions

View File

@@ -2,6 +2,7 @@ goog.provide('ol.BrowserFeature');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.userAgent');
goog.require('ol.webgl');
@@ -47,6 +48,21 @@ ol.ENABLE_VECTOR = true;
ol.ENABLE_WEBGL = true;
/**
* @define {boolean} Whether to support legacy IE (7-8).
*/
ol.LEGACY_IE_SUPPORT = false;
/**
* Whether the current browser is legacy IE
* @const
* @type {boolean}
*/
ol.IS_LEGACY_IE = goog.userAgent.IE &&
goog.userAgent.isVersionOrHigher('9.0') && goog.userAgent.VERSION !== '';
/**
* The ratio between physical pixels and device-independent pixels
* (dips) on the device (`window.devicePixelRatio`).

View File

@@ -81,11 +81,8 @@ ol.dom.BrowserFeature = {
return (goog.isDefAndNotNull(has3d) && has3d.length > 0 &&
has3d !== 'none');
})(),
USE_MS_MATRIX_TRANSFORM:
(goog.userAgent.IE && !goog.userAgent.isVersionOrHigher('9.0')),
USE_MS_ALPHA_FILTER:
(goog.userAgent.IE && !goog.userAgent.isVersionOrHigher('9.0') &&
goog.userAgent.VERSION !== '')
USE_MS_MATRIX_TRANSFORM: ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE,
USE_MS_ALPHA_FILTER: ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE
};
@@ -102,8 +99,7 @@ ol.dom.setTransform = function(element, value) {
style.transform = value;
// IE 9+ seems to assume transform-origin: 100% 100%; for some unknown reason
if (goog.userAgent.IE && goog.userAgent.isVersionOrHigher('9.0') ||
goog.userAgent.VERSION === '') {
if (goog.userAgent.IE && !ol.IS_LEGACY_IE) {
element.style.transformOrigin = '0 0';
}
};

View File

@@ -133,11 +133,13 @@ ol.MapBrowserEventHandler = function(map) {
*/
this.touchstartListenerKey_ = null;
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
/**
* @type {goog.events.Key}
* @private
*/
this.ieDblclickListenerKey_ = null;
}
/**
* @type {goog.events.BrowserEvent}
@@ -168,10 +170,9 @@ ol.MapBrowserEventHandler = function(map) {
goog.events.EventType.TOUCHSTART,
this.handleTouchStart_, false, this);
if (goog.userAgent.IE && !goog.userAgent.isVersionOrHigher('9.0')) {
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
this.ieDblclickListenerKey_ = goog.events.listen(element,
goog.events.EventType.DBLCLICK,
this.emulateClick_, false, this);
goog.events.EventType.DBLCLICK, this.emulateClick_, false, this);
}
};
goog.inherits(ol.MapBrowserEventHandler, goog.events.EventTarget);
@@ -203,6 +204,7 @@ ol.MapBrowserEventHandler.prototype.emulateClick_ = function(browserEvent) {
} else {
// click
if (ol.LEGACY_IE_SUPPORT) {
// In IE 7-8, referring to the original event object after the current
// call stack causes "member not found" exceptions, such as in the timeout
// we use here.
@@ -215,6 +217,14 @@ ol.MapBrowserEventHandler.prototype.emulateClick_ = function(browserEvent) {
new goog.events.BrowserEvent(ev, browserEvent.currentTarget));
this.dispatchEvent(newEvent);
}, this), 250);
} else {
this.clickTimeoutId_ = goog.global.setTimeout(goog.bind(function() {
this.clickTimeoutId_ = 0;
var newEvent = new ol.MapBrowserEvent(
ol.MapBrowserEvent.EventType.SINGLECLICK, this.map_, browserEvent);
this.dispatchEvent(newEvent);
}, this), 250);
}
}
};
@@ -465,7 +475,8 @@ ol.MapBrowserEventHandler.prototype.disposeInternal = function() {
goog.array.forEach(this.dragListenerKeys_, goog.events.unlistenByKey);
this.dragListenerKeys_ = null;
}
if (!goog.isNull(this.ieDblclickListenerKey_)) {
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE &&
!goog.isNull(this.ieDblclickListenerKey_)) {
goog.events.unlistenByKey(this.ieDblclickListenerKey_);
this.ieDblclickListenerKey_ = null;
}

View File

@@ -41,7 +41,9 @@ ol.renderer.dom.Map = function(container, map) {
// in IE < 9, we need to return false from ondragstart to cancel the default
// behavior of dragging images, which is interfering with the custom handler
// in the Drag interaction subclasses
if (goog.userAgent.IE && !goog.userAgent.isVersionOrHigher('9.0')) {
if (ol.LEGACY_IE_SUPPORT && goog.userAgent.IE &&
!goog.userAgent.isVersionOrHigher('9.0') &&
goog.userAgent.VERSION !== '') {
this.layersPane_.ondragstart = goog.functions.FALSE;
this.layersPane_.onselectstart = goog.functions.FALSE;
}
@@ -88,6 +90,36 @@ ol.renderer.dom.Map.prototype.renderFrame = function(frameState) {
return;
}
/**
* @this {ol.renderer.dom.Map}
* @param {Element} elem
* @param {number} i
*/
var addChild;
// appendChild is actually more performant than insertBefore
// in IE 7 and 8. http://jsperf.com/reattaching-dom-nodes
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
addChild =
/**
* @this {ol.renderer.dom.Map}
* @param {Element} elem
*/ (
function(elem) {
goog.dom.appendChild(this.layersPane_, elem);
});
} else {
addChild =
/**
* @this {ol.renderer.dom.Map}
* @param {Element} elem
* @param {number} i
*/ (
function(elem, i) {
goog.dom.insertChildAt(this.layersPane_, elem, i);
});
}
var layerStates = frameState.layerStates;
var layersArray = frameState.layersArray;
var i, ii, layer, layerRenderer, layerState;
@@ -96,7 +128,7 @@ ol.renderer.dom.Map.prototype.renderFrame = function(frameState) {
layerRenderer = /** @type {ol.renderer.dom.Layer} */ (
this.getLayerRenderer(layer));
goog.asserts.assertInstanceof(layerRenderer, ol.renderer.dom.Layer);
goog.dom.insertChildAt(this.layersPane_, layerRenderer.getTarget(), i);
addChild.call(this, layerRenderer.getTarget(), i);
layerState = frameState.layerStates[goog.getUid(layer)];
if (layerState.sourceState == ol.source.State.READY) {
layerRenderer.prepareFrame(frameState, layerState);

View File

@@ -271,6 +271,7 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) {
this.target.style.width = '100%';
this.target.style.height = '100%';
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
/**
* Needed due to issues with IE7-8 clipping of transformed elements
* Solution is to translate separately from the scaled/rotated elements
@@ -283,6 +284,7 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) {
this.translateTarget_.style.height = '100%';
goog.dom.appendChild(this.target, this.translateTarget_);
}
/**
* @private
@@ -386,7 +388,11 @@ ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile, tileGutter) {
*/
ol.renderer.dom.TileLayerZ_.prototype.finalizeAddTiles = function() {
if (!goog.isNull(this.documentFragment_)) {
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
goog.dom.appendChild(this.translateTarget_, this.documentFragment_);
} else {
goog.dom.appendChild(this.target, this.documentFragment_);
}
this.documentFragment_ = null;
}
};
@@ -440,7 +446,12 @@ ol.renderer.dom.TileLayerZ_.prototype.removeTilesOutsideExtent =
*/
ol.renderer.dom.TileLayerZ_.prototype.setTransform = function(transform) {
if (!ol.vec.Mat4.equals2D(transform, this.transform_)) {
ol.dom.transformElement2D(this.target, transform, 6, this.translateTarget_);
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
ol.dom.transformElement2D(this.target, transform, 6,
this.translateTarget_);
} else {
ol.dom.transformElement2D(this.target, transform, 6);
}
goog.vec.Mat4.setFromArray(this.transform_, transform);
}
};