Remove legacy IE support

This commit is contained in:
Frederic Junod
2015-09-28 15:36:43 +02:00
parent 6c5775e6f6
commit e877a21b8e
6 changed files with 18 additions and 271 deletions

View File

@@ -29,15 +29,6 @@ ol.dom.createCanvasContext2D = function(opt_width, opt_height) {
}; };
/**
* @enum {boolean}
*/
ol.dom.BrowserFeature = {
USE_MS_MATRIX_TRANSFORM: ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE,
USE_MS_ALPHA_FILTER: ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE
};
/** /**
* Detect 2d transform. * Detect 2d transform.
* Adapted from http://stackoverflow.com/q/5661671/130442 * Adapted from http://stackoverflow.com/q/5661671/130442
@@ -137,87 +128,18 @@ ol.dom.setTransform = function(element, value) {
style.transform = value; style.transform = value;
// IE 9+ seems to assume transform-origin: 100% 100%; for some unknown reason // IE 9+ seems to assume transform-origin: 100% 100%; for some unknown reason
if (goog.userAgent.IE && !ol.IS_LEGACY_IE) { if (goog.userAgent.IE && goog.userAgent.isVersionOrHigher('9.0')) {
element.style.transformOrigin = '0 0'; element.style.transformOrigin = '0 0';
} }
}; };
/**
* Sets the opacity of an element, in an IE-compatible way
* @param {!Element} element Element
* @param {number} value Opacity, [0..1]
*/
ol.dom.setOpacity = function(element, value) {
if (ol.dom.BrowserFeature.USE_MS_ALPHA_FILTER) {
/** @type {string} */
var filter = element.currentStyle.filter;
/** @type {RegExp} */
var regex;
/** @type {string} */
var alpha;
if (goog.userAgent.VERSION == '8.0') {
regex = /progid:DXImageTransform\.Microsoft\.Alpha\(.*?\)/i;
alpha = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' +
(value * 100) + ')';
} else {
regex = /alpha\(.*?\)/i;
alpha = 'alpha(opacity=' + (value * 100) + ')';
}
var newFilter = filter.replace(regex, alpha);
if (newFilter === filter) {
// no replace was made? just append the new alpha filter instead
newFilter += ' ' + alpha;
}
element.style.filter = newFilter;
// Fix to apply filter to absolutely-positioned children element
if (element.currentStyle.zIndex === 'auto') {
element.style.zIndex = 0;
}
} else {
element.style.opacity = value;
}
};
/**
* Sets the IE matrix transform without replacing other filters
* @private
* @param {!Element} element Element
* @param {string} value The new progid string
*/
ol.dom.setIEMatrix_ = function(element, value) {
var filter = element.currentStyle.filter;
var newFilter =
filter.replace(/progid:DXImageTransform.Microsoft.Matrix\(.*?\)/i, value);
if (newFilter === filter) {
newFilter = ' ' + value;
}
element.style.filter = newFilter;
// Fix to apply filter to absolutely-positioned children element
if (element.currentStyle.zIndex === 'auto') {
element.style.zIndex = 0;
}
};
/** /**
* @param {!Element} element Element. * @param {!Element} element Element.
* @param {goog.vec.Mat4.Number} transform Matrix. * @param {goog.vec.Mat4.Number} transform Matrix.
* @param {number=} opt_precision Precision. * @param {number=} opt_precision Precision.
* @param {Element=} opt_translationElement Required for IE7-8
*/ */
ol.dom.transformElement2D = ol.dom.transformElement2D = function(element, transform, opt_precision) {
function(element, transform, opt_precision, opt_translationElement) {
// using matrix() causes gaps in Chrome and Firefox on Mac OS X, so prefer // using matrix() causes gaps in Chrome and Firefox on Mac OS X, so prefer
// matrix3d() // matrix3d()
var i; var i;
@@ -257,38 +179,6 @@ ol.dom.transformElement2D =
value2D = transform2D.join(','); value2D = transform2D.join(',');
} }
ol.dom.setTransform(element, 'matrix(' + value2D + ')'); ol.dom.setTransform(element, 'matrix(' + value2D + ')');
} else if (ol.dom.BrowserFeature.USE_MS_MATRIX_TRANSFORM) {
var m11 = goog.vec.Mat4.getElement(transform, 0, 0),
m12 = goog.vec.Mat4.getElement(transform, 0, 1),
m21 = goog.vec.Mat4.getElement(transform, 1, 0),
m22 = goog.vec.Mat4.getElement(transform, 1, 1),
dx = goog.vec.Mat4.getElement(transform, 0, 3),
dy = goog.vec.Mat4.getElement(transform, 1, 3);
// See: http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx
// and: http://extremelysatisfactorytotalitarianism.com/blog/?p=1002
// @TODO: fix terrible IE bbox rotation issue.
var s = 'progid:DXImageTransform.Microsoft.Matrix(';
s += 'sizingMethod="auto expand"';
s += ',M11=' + m11.toFixed(opt_precision || 20);
s += ',M12=' + m12.toFixed(opt_precision || 20);
s += ',M21=' + m21.toFixed(opt_precision || 20);
s += ',M22=' + m22.toFixed(opt_precision || 20);
s += ')';
ol.dom.setIEMatrix_(element, s);
// scale = m11 = m22 = target resolution [m/px] / current res [m/px]
// dx = (viewport width [px] / 2) * scale
// + (layer.x [m] - view.x [m]) / target resolution [m / px]
// except that we're positioning the child element relative to the
// viewport, not the map.
// dividing by the scale factor isn't the exact correction, but it's
// close enough that you can barely tell unless you're looking for it
dx /= m11;
dy /= m22;
opt_translationElement.style.left = Math.round(dx) + 'px';
opt_translationElement.style.top = Math.round(dy) + 'px';
} else { } else {
element.style.left = element.style.left =
Math.round(goog.vec.Mat4.getElement(transform, 0, 3)) + 'px'; Math.round(goog.vec.Mat4.getElement(transform, 0, 3)) + 'px';

View File

@@ -125,13 +125,6 @@ ol.ImageTile.prototype.handleImageError_ = function() {
* @private * @private
*/ */
ol.ImageTile.prototype.handleImageLoad_ = function() { ol.ImageTile.prototype.handleImageLoad_ = function() {
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
if (this.image_.naturalWidth === undefined) {
this.image_.naturalWidth = this.image_.width;
this.image_.naturalHeight = this.image_.height;
}
}
if (this.image_.naturalWidth && this.image_.naturalHeight) { if (this.image_.naturalWidth && this.image_.naturalHeight) {
this.state = ol.TileState.LOADED; this.state = ol.TileState.LOADED;
} else { } else {

View File

@@ -170,14 +170,6 @@ ol.MapBrowserEventHandler = function(map) {
*/ */
this.pointerdownListenerKey_ = null; this.pointerdownListenerKey_ = null;
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
/**
* @type {goog.events.Key}
* @private
*/
this.ieDblclickListenerKey_ = null;
}
/** /**
* The most recent "down" type event (or null if none have occurred). * The most recent "down" type event (or null if none have occurred).
* Set on pointerdown. * Set on pointerdown.
@@ -226,35 +218,10 @@ ol.MapBrowserEventHandler = function(map) {
ol.pointer.EventType.POINTERMOVE, ol.pointer.EventType.POINTERMOVE,
this.relayEvent_, false, this); this.relayEvent_, false, this);
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
/*
* On legacy IE, double clicks do not produce two mousedown and
* mouseup events. That is why a separate DBLCLICK event listener
* is used.
*/
this.ieDblclickListenerKey_ = goog.events.listen(element,
goog.events.EventType.DBLCLICK,
this.emulateClickLegacyIE_, false, this);
}
}; };
goog.inherits(ol.MapBrowserEventHandler, goog.events.EventTarget); goog.inherits(ol.MapBrowserEventHandler, goog.events.EventTarget);
/**
* @param {goog.events.BrowserEvent} browserEvent Pointer event.
* @private
*/
ol.MapBrowserEventHandler.prototype.emulateClickLegacyIE_ =
function(browserEvent) {
var pointerEvent = this.pointerEventHandler_.wrapMouseEvent(
ol.MapBrowserEvent.EventType.POINTERUP,
browserEvent
);
this.emulateClick_(pointerEvent);
};
/** /**
* @param {ol.pointer.PointerEvent} pointerEvent Pointer event. * @param {ol.pointer.PointerEvent} pointerEvent Pointer event.
* @private * @private
@@ -343,11 +310,7 @@ ol.MapBrowserEventHandler.prototype.handlePointerUp_ = function(pointerEvent) {
*/ */
ol.MapBrowserEventHandler.prototype.isMouseActionButton_ = ol.MapBrowserEventHandler.prototype.isMouseActionButton_ =
function(pointerEvent) { function(pointerEvent) {
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) { return pointerEvent.button === 0;
return pointerEvent.button == 1;
} else {
return pointerEvent.button === 0;
}
}; };
@@ -475,11 +438,6 @@ ol.MapBrowserEventHandler.prototype.disposeInternal = function() {
goog.dispose(this.pointerEventHandler_); goog.dispose(this.pointerEventHandler_);
this.pointerEventHandler_ = null; this.pointerEventHandler_ = null;
} }
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE &&
!goog.isNull(this.ieDblclickListenerKey_)) {
goog.events.unlistenByKey(this.ieDblclickListenerKey_);
this.ieDblclickListenerKey_ = null;
}
goog.base(this, 'disposeInternal'); goog.base(this, 'disposeInternal');
}; };

View File

@@ -1,5 +1,3 @@
goog.require('goog.userAgent');
goog.provide('ol'); goog.provide('ol');
@@ -120,14 +118,6 @@ ol.ENABLE_VECTOR = true;
ol.ENABLE_WEBGL = true; ol.ENABLE_WEBGL = true;
/**
* @define {boolean} Support legacy IE (7-8). Default is `false`.
* If set to `true`, `goog.array.ASSUME_NATIVE_FUNCTIONS` must be set
* to `false` because legacy IE do not support ECMAScript 5 array functions.
*/
ol.LEGACY_IE_SUPPORT = false;
/** /**
* @define {number} The size in pixels of the first atlas image. Default is * @define {number} The size in pixels of the first atlas image. Default is
* `256`. * `256`.
@@ -135,15 +125,6 @@ ol.LEGACY_IE_SUPPORT = false;
ol.INITIAL_ATLAS_SIZE = 256; ol.INITIAL_ATLAS_SIZE = 256;
/**
* 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 !== '';
/** /**
* @define {number} The maximum size in pixels of atlas images. Default is * @define {number} The maximum size in pixels of atlas images. Default is
* `-1`, meaning it is not used (and `ol.WEBGL_MAX_TEXTURE_SIZE` is * `-1`, meaning it is not used (and `ol.WEBGL_MAX_TEXTURE_SIZE` is

View File

@@ -7,7 +7,6 @@ goog.require('goog.dom.TagName');
goog.require('goog.events'); goog.require('goog.events');
goog.require('goog.events.Event'); goog.require('goog.events.Event');
goog.require('goog.events.EventType'); goog.require('goog.events.EventType');
goog.require('goog.functions');
goog.require('goog.style'); goog.require('goog.style');
goog.require('goog.vec.Mat4'); goog.require('goog.vec.Mat4');
goog.require('ol'); goog.require('ol');
@@ -45,16 +44,13 @@ ol.renderer.dom.Map = function(container, map) {
* @private * @private
* @type {CanvasRenderingContext2D} * @type {CanvasRenderingContext2D}
*/ */
this.context_ = null; this.context_ = ol.dom.createCanvasContext2D();
if (!(ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE)) { var canvas = this.context_.canvas;
this.context_ = ol.dom.createCanvasContext2D(); canvas.style.position = 'absolute';
var canvas = this.context_.canvas; canvas.style.width = '100%';
canvas.style.position = 'absolute'; canvas.style.height = '100%';
canvas.style.width = '100%'; canvas.className = ol.css.CLASS_UNSELECTABLE;
canvas.style.height = '100%'; goog.dom.insertChildAt(container, canvas, 0);
canvas.className = ol.css.CLASS_UNSELECTABLE;
goog.dom.insertChildAt(container, canvas, 0);
}
/** /**
* @private * @private
@@ -73,14 +69,6 @@ ol.renderer.dom.Map = function(container, map) {
style.width = '100%'; style.width = '100%';
style.height = '100%'; style.height = '100%';
// 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 (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
this.layersPane_.ondragstart = goog.functions.FALSE;
this.layersPane_.onselectstart = goog.functions.FALSE;
}
// prevent the img context menu on mobile devices // prevent the img context menu on mobile devices
goog.events.listen(this.layersPane_, goog.events.EventType.TOUCHSTART, goog.events.listen(this.layersPane_, goog.events.EventType.TOUCHSTART,
goog.events.Event.preventDefault); goog.events.Event.preventDefault);
@@ -115,8 +103,7 @@ ol.renderer.dom.Map.prototype.createLayerRenderer = function(layer) {
layerRenderer = new ol.renderer.dom.ImageLayer(layer); layerRenderer = new ol.renderer.dom.ImageLayer(layer);
} else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) { } else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) {
layerRenderer = new ol.renderer.dom.TileLayer(layer); layerRenderer = new ol.renderer.dom.TileLayer(layer);
} else if (!(ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) && } else if (ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) {
ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) {
layerRenderer = new ol.renderer.dom.VectorLayer(layer); layerRenderer = new ol.renderer.dom.VectorLayer(layer);
} else { } else {
goog.asserts.fail('unexpected layer configuration'); goog.asserts.fail('unexpected layer configuration');
@@ -134,7 +121,7 @@ ol.renderer.dom.Map.prototype.createLayerRenderer = function(layer) {
ol.renderer.dom.Map.prototype.dispatchComposeEvent_ = ol.renderer.dom.Map.prototype.dispatchComposeEvent_ =
function(type, frameState) { function(type, frameState) {
var map = this.getMap(); var map = this.getMap();
if (!(ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) && map.hasListener(type)) { if (map.hasListener(type)) {
var extent = frameState.extent; var extent = frameState.extent;
var pixelRatio = frameState.pixelRatio; var pixelRatio = frameState.pixelRatio;
var viewState = frameState.viewState; var viewState = frameState.viewState;
@@ -180,40 +167,9 @@ ol.renderer.dom.Map.prototype.renderFrame = function(frameState) {
return; 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 map = this.getMap(); var map = this.getMap();
if (!(ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) && if (map.hasListener(ol.render.EventType.PRECOMPOSE) ||
(map.hasListener(ol.render.EventType.PRECOMPOSE) || map.hasListener(ol.render.EventType.POSTCOMPOSE)) {
map.hasListener(ol.render.EventType.POSTCOMPOSE))) {
var canvas = this.context_.canvas; var canvas = this.context_.canvas;
var pixelRatio = frameState.pixelRatio; var pixelRatio = frameState.pixelRatio;
canvas.width = frameState.size[0] * pixelRatio; canvas.width = frameState.size[0] * pixelRatio;
@@ -234,7 +190,7 @@ ol.renderer.dom.Map.prototype.renderFrame = function(frameState) {
this.getLayerRenderer(layer)); this.getLayerRenderer(layer));
goog.asserts.assertInstanceof(layerRenderer, ol.renderer.dom.Layer, goog.asserts.assertInstanceof(layerRenderer, ol.renderer.dom.Layer,
'renderer is an instance of ol.renderer.dom.Layer'); 'renderer is an instance of ol.renderer.dom.Layer');
addChild.call(this, layerRenderer.getTarget(), i); goog.dom.insertChildAt(this.layersPane_, layerRenderer.getTarget(), i);
if (ol.layer.Layer.visibleAtResolution(layerState, viewResolution) && if (ol.layer.Layer.visibleAtResolution(layerState, viewResolution) &&
layerState.sourceState == ol.source.State.READY) { layerState.sourceState == ol.source.State.READY) {
if (layerRenderer.prepareFrame(frameState, layerState)) { if (layerRenderer.prepareFrame(frameState, layerState)) {

View File

@@ -17,7 +17,6 @@ goog.require('ol.TileRange');
goog.require('ol.TileState'); goog.require('ol.TileState');
goog.require('ol.ViewHint'); goog.require('ol.ViewHint');
goog.require('ol.dom'); goog.require('ol.dom');
goog.require('ol.dom.BrowserFeature');
goog.require('ol.extent'); goog.require('ol.extent');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.renderer.dom.Layer'); goog.require('ol.renderer.dom.Layer');
@@ -38,12 +37,6 @@ ol.renderer.dom.TileLayer = function(tileLayer) {
var target = goog.dom.createElement(goog.dom.TagName.DIV); var target = goog.dom.createElement(goog.dom.TagName.DIV);
target.style.position = 'absolute'; target.style.position = 'absolute';
// Needed for IE7-8 to render a transformed element correctly
if (ol.dom.BrowserFeature.USE_MS_MATRIX_TRANSFORM) {
target.style.width = '100%';
target.style.height = '100%';
}
goog.base(this, tileLayer, target); goog.base(this, tileLayer, target);
/** /**
@@ -249,7 +242,7 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame =
} }
if (layerState.opacity != this.renderedOpacity_) { if (layerState.opacity != this.renderedOpacity_) {
ol.dom.setOpacity(this.target, layerState.opacity); this.target.style.opacity = layerState.opacity;
this.renderedOpacity_ = layerState.opacity; this.renderedOpacity_ = layerState.opacity;
} }
@@ -285,21 +278,6 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) {
this.target.style.width = '100%'; this.target.style.width = '100%';
this.target.style.height = '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
* @private
* @type {!Element}
*/
this.translateTarget_ = goog.dom.createElement(goog.dom.TagName.DIV);
this.translateTarget_.style.position = 'absolute';
this.translateTarget_.style.width = '100%';
this.translateTarget_.style.height = '100%';
goog.dom.appendChild(this.target, this.translateTarget_);
}
/** /**
* @private * @private
* @type {ol.tilegrid.TileGrid} * @type {ol.tilegrid.TileGrid}
@@ -413,11 +391,7 @@ ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile, tileGutter) {
*/ */
ol.renderer.dom.TileLayerZ_.prototype.finalizeAddTiles = function() { ol.renderer.dom.TileLayerZ_.prototype.finalizeAddTiles = function() {
if (!goog.isNull(this.documentFragment_)) { if (!goog.isNull(this.documentFragment_)) {
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) { goog.dom.appendChild(this.target, this.documentFragment_);
goog.dom.appendChild(this.translateTarget_, this.documentFragment_);
} else {
goog.dom.appendChild(this.target, this.documentFragment_);
}
this.documentFragment_ = null; this.documentFragment_ = null;
} }
}; };
@@ -471,12 +445,7 @@ ol.renderer.dom.TileLayerZ_.prototype.removeTilesOutsideExtent =
*/ */
ol.renderer.dom.TileLayerZ_.prototype.setTransform = function(transform) { ol.renderer.dom.TileLayerZ_.prototype.setTransform = function(transform) {
if (!ol.vec.Mat4.equals2D(transform, this.transform_)) { if (!ol.vec.Mat4.equals2D(transform, this.transform_)) {
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) { ol.dom.transformElement2D(this.target, transform, 6);
ol.dom.transformElement2D(this.target, transform, 6,
this.translateTarget_);
} else {
ol.dom.transformElement2D(this.target, transform, 6);
}
goog.vec.Mat4.setFromArray(this.transform_, transform); goog.vec.Mat4.setFromArray(this.transform_, transform);
} }
}; };