Add a compile-time flag to enable legacy IE support

src/ol/browserfeature.js

@@ -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`).

src/ol/dom/dom.js

@@ -81,11 +81,8 @@ ol.dom.BrowserFeature = {
         return (goog.isDefAndNotNull(has3d) && has3d.length > 0 &&
             has3d !== 'none');
       })(),
-  USE_MS_MATRIX_TRANSFORM:
+  USE_MS_MATRIX_TRANSFORM: ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE,
-      (goog.userAgent.IE && !goog.userAgent.isVersionOrHigher('9.0')),
+  USE_MS_ALPHA_FILTER: ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE
-  USE_MS_ALPHA_FILTER:
-      (goog.userAgent.IE && !goog.userAgent.isVersionOrHigher('9.0') &&
-      goog.userAgent.VERSION !== '')
 };
 
 
@@ -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') ||
+  if (goog.userAgent.IE && !ol.IS_LEGACY_IE) {
-      goog.userAgent.VERSION === '') {
     element.style.transformOrigin = '0 0';
   }
 };

src/ol/mapbrowserevent.js

@@ -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
+     * @type {goog.events.Key}
-   */
+     * @private
-  this.ieDblclickListenerKey_ = null;
+     */
+    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,
+        goog.events.EventType.DBLCLICK, this.emulateClick_, false, this);
-      this.emulateClick_, false, this);
   }
 };
 goog.inherits(ol.MapBrowserEventHandler, goog.events.EventTarget);
@@ -203,18 +204,27 @@ ol.MapBrowserEventHandler.prototype.emulateClick_ = function(browserEvent) {
   } else {
     // click
 
-    // In IE 7-8, referring to the original event object after the current
+    if (ol.LEGACY_IE_SUPPORT) {
-    // call stack causes "member not found" exceptions, such as in the timeout
+      // In IE 7-8, referring to the original event object after the current
-    // we use here.
+      // call stack causes "member not found" exceptions, such as in the timeout
-    var ev = /** @type {Event} */ (
+      // we use here.
-        goog.object.clone(browserEvent.getBrowserEvent()));
+      var ev = /** @type {Event} */ (
-    this.clickTimeoutId_ = goog.global.setTimeout(goog.bind(function() {
+          goog.object.clone(browserEvent.getBrowserEvent()));
-      this.clickTimeoutId_ = 0;
+      this.clickTimeoutId_ = goog.global.setTimeout(goog.bind(function() {
-      var newEvent = new ol.MapBrowserEvent(
+        this.clickTimeoutId_ = 0;
-          ol.MapBrowserEvent.EventType.SINGLECLICK, this.map_,
+        var newEvent = new ol.MapBrowserEvent(
-          new goog.events.BrowserEvent(ev, browserEvent.currentTarget));
+            ol.MapBrowserEvent.EventType.SINGLECLICK, this.map_,
-      this.dispatchEvent(newEvent);
+            new goog.events.BrowserEvent(ev, browserEvent.currentTarget));
-    }, this), 250);
+        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;
   }

src/ol/renderer/dom/dommaprenderer.js

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

src/ol/renderer/dom/domtilelayerrenderer.js

@@ -271,18 +271,20 @@ 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
+     * Needed due to issues with IE7-8 clipping of transformed elements
-   * @private
+     * Solution is to translate separately from the scaled/rotated elements
-   * @type {!Element}
+     * @private
-   */
+     * @type {!Element}
-  this.translateTarget_ = goog.dom.createElement(goog.dom.TagName.DIV);
+     */
-  this.translateTarget_.style.position = 'absolute';
+    this.translateTarget_ = goog.dom.createElement(goog.dom.TagName.DIV);
-  this.translateTarget_.style.width = '100%';
+    this.translateTarget_.style.position = 'absolute';
-  this.translateTarget_.style.height = '100%';
+    this.translateTarget_.style.width = '100%';
+    this.translateTarget_.style.height = '100%';
 
-  goog.dom.appendChild(this.target, this.translateTarget_);
+    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_)) {
-    goog.dom.appendChild(this.translateTarget_, 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);
   }
 };