Merge branch 'ie-compat' of git://github.com/Intermedix/ol3 into Intermedix-ie-compat

src/ol/renderer/dom/dommaprenderer.js

@@ -3,6 +3,7 @@ goog.provide('ol.renderer.dom.Map');
 goog.require('goog.asserts');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('goog.functions');
 goog.require('goog.style');
 goog.require('ol.css');
 goog.require('ol.layer.Image');
@@ -36,6 +37,14 @@ ol.renderer.dom.Map = function(container, map) {
   style.width = '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;
+  }
+
   goog.dom.insertChildAt(container, this.layersPane_, 0);
 
   /**
@@ -61,7 +70,6 @@ ol.renderer.dom.Map.prototype.createLayerRenderer = function(layer) {
     goog.asserts.fail();
     return null;
   }
-  goog.dom.appendChild(this.layersPane_, layerRenderer.getTarget());
   return layerRenderer;
 };
 
@@ -79,12 +87,45 @@ 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;
   for (i = 0, ii = layersArray.length; i < ii; ++i) {
     layer = layersArray[i];
-    layerRenderer = this.getLayerRenderer(layer);
+    layerRenderer = /** @type {ol.renderer.dom.Layer} */ (
+        this.getLayerRenderer(layer));
+    goog.asserts.assertInstanceof(layerRenderer, ol.renderer.dom.Layer);
+    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

@@ -17,6 +17,7 @@ goog.require('ol.TileRange');
 goog.require('ol.TileState');
 goog.require('ol.ViewHint');
 goog.require('ol.dom');
+goog.require('ol.dom.BrowserFeature');
 goog.require('ol.extent');
 goog.require('ol.layer.Tile');
 goog.require('ol.renderer.dom.Layer');
@@ -37,6 +38,12 @@ ol.renderer.dom.TileLayer = function(mapRenderer, tileLayer) {
   var target = goog.dom.createElement(goog.dom.TagName.DIV);
   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, mapRenderer, tileLayer, target);
 
   /**
@@ -229,7 +236,7 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame =
   }
 
   if (layerState.opacity != this.renderedOpacity_) {
-    goog.style.setOpacity(this.target, layerState.opacity);
+    ol.dom.setOpacity(this.target, layerState.opacity);
     this.renderedOpacity_ = layerState.opacity;
   }
 
@@ -261,6 +268,23 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) {
    */
   this.target = goog.dom.createElement(goog.dom.TagName.DIV);
   this.target.style.position = 'absolute';
+  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
+     * @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
@@ -364,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.target, 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;
   }
 };
@@ -418,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);
+    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);
   }
 };