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

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

Browse Source
This commit is contained in:
Tom Payne
2014-02-11 16:54:39 +01:00
parent b0698443ab 03b7d6ee92
commit e0765240a2
63 changed files with 490 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/objectliterals.jsdoc
View File

@@ -245,6 +245,8 @@
* @typedef {Object} olx.control.ZoomOptions
* @property {number|undefined} duration Animation duration in milliseconds. Default is `250`.
* @property {string|undefined} className CSS class name. Default is `ol-zoom`.
* @property {string|undefined} zoomInLabel Text label to use for the zoom-in button. Default is `+`
* @property {string|undefined} zoomOutLabel Text label to use for the zoom-out button. Default is `-`
* @property {number|undefined} delta The zoom delta applied on each click.
* @property {Element|undefined} target Target.
* @todo stability experimental

16
src/ol/browserfeature.js
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`).

8
src/ol/control/zoomcontrol.js
View File

@@ -32,10 +32,14 @@ ol.control.Zoom = function(opt_options) {
var delta = goog.isDef(options.delta) ? options.delta : 1;
var zoomInLabel = goog.isDef(options.zoomInLabel) ? options.zoomInLabel : '+',
zoomOutLabel =
goog.isDef(options.zoomOutLabel) ? options.zoomOutLabel : '-';
var inElement = goog.dom.createDom(goog.dom.TagName.A, {
'href': '#zoomIn',
'class': className + '-in'
});
}, zoomInLabel);
goog.events.listen(inElement, [
goog.events.EventType.TOUCHEND,
goog.events.EventType.CLICK
@@ -44,7 +48,7 @@ ol.control.Zoom = function(opt_options) {
var outElement = goog.dom.createDom(goog.dom.TagName.A, {
'href': '#zoomOut',
'class': className + '-out'
});
}, zoomOutLabel);
goog.events.listen(outElement, [
goog.events.EventType.TOUCHEND,
goog.events.EventType.CLICK

198
src/ol/dom/dom.js
View File

@@ -4,15 +4,85 @@ goog.provide('ol.dom');
goog.provide('ol.dom.BrowserFeature');
goog.require('goog.asserts');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.style');
goog.require('goog.userAgent');
goog.require('goog.vec.Mat4');
/**
* http://caniuse.com/#feat=transforms2d
* http://caniuse.com/#feat=transforms3d
* @enum {boolean}
*/
ol.dom.BrowserFeature = {
CAN_USE_CSS_TRANSFORM: false,
CAN_USE_CSS_TRANSFORM3D: true
CAN_USE_CSS_TRANSFORM: (
/**
* Detect 2d transform.
* Adapted from http://stackoverflow.com/q/5661671/130442
* @return {boolean}
*/
function() {
if (!window.getComputedStyle) {
// this browser is ancient
return false;
}
var el = goog.dom.createElement(goog.dom.TagName.P),
has2d,
transforms = {
'webkitTransform': '-webkit-transform',
'OTransform': '-o-transform',
'msTransform': '-ms-transform',
'MozTransform': '-moz-transform',
'transform': 'transform'
};
goog.dom.appendChild(document.body, el);
for (var t in transforms) {
if (t in el.style) {
el.style[t] = 'translate(1px,1px)';
has2d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
}
}
goog.dom.removeNode(el);
return (goog.isDefAndNotNull(has2d) && has2d.length > 0 &&
has2d !== 'none');
})(),
CAN_USE_CSS_TRANSFORM3D: (
/**
* Detect 3d transform.
* Adapted from http://stackoverflow.com/q/5661671/130442
* @return {boolean}
*/
function() {
if (!window.getComputedStyle) {
// this browser is ancient
return false;
}
var el = goog.dom.createElement(goog.dom.TagName.P),
has3d,
transforms = {
'webkitTransform': '-webkit-transform',
'OTransform': '-o-transform',
'msTransform': '-ms-transform',
'MozTransform': '-moz-transform',
'transform': 'transform'
};
goog.dom.appendChild(document.body, el);
for (var t in transforms) {
if (t in el.style) {
el.style[t] = 'translate3d(1px,1px,1px)';
has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
}
}
goog.dom.removeNode(el);
return (goog.isDefAndNotNull(has3d) && has3d.length > 0 &&
has3d !== 'none');
})(),
USE_MS_MATRIX_TRANSFORM: ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE,
USE_MS_ALPHA_FILTER: ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE
};
@@ -25,21 +95,97 @@ ol.dom.setTransform = function(element, value) {
style.WebkitTransform = value;
style.MozTransform = value;
style.OTransform = value;
style.msTransform = value;
style.transform = value;
// IE 9+ seems to assume transform-origin: 100% 100%; for some unknown reason
if (goog.userAgent.IE && !ol.IS_LEGACY_IE) {
element.style.transformOrigin = '0 0';
}
};
/**
* @param {Element} element Element.
* 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 {
goog.style.setOpacity(element, 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 {goog.vec.Mat4.Number} transform Matrix.
* @param {number=} opt_precision Precision.
* @param {Element=} opt_translationElement Required for IE7-8
*/
ol.dom.transformElement2D = function(element, transform, opt_precision) {
ol.dom.transformElement2D =
function(element, transform, opt_precision, opt_translationElement) {
// using matrix() causes gaps in Chrome and Firefox on Mac OS X, so prefer
// matrix3d()
var i;
if (ol.dom.BrowserFeature.CAN_USE_CSS_TRANSFORM3D) {
var value3D;
if (goog.isDef(opt_precision)) {
/** @type {Array.<string>} */
var strings3D = new Array(16);
@@ -73,10 +219,46 @@ ol.dom.transformElement2D = function(element, transform, opt_precision) {
value2D = transform2D.join(',');
}
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 {
// FIXME check this code!
var style = element.style;
style.left = Math.round(goog.vec.Mat4.getElement(transform, 0, 3)) + 'px';
style.top = Math.round(goog.vec.Mat4.getElement(transform, 1, 3)) + 'px';
element.style.left =
Math.round(goog.vec.Mat4.getElement(transform, 0, 3)) + 'px';
element.style.top =
Math.round(goog.vec.Mat4.getElement(transform, 1, 3)) + 'px';
// TODO: Add scaling here. This isn't quite as simple as multiplying
// width/height, because that only changes the container size, not the
// content size.
}
};

5
src/ol/imagetile.js
View File

@@ -115,6 +115,11 @@ ol.ImageTile.prototype.handleImageError_ = function() {
* @private
*/
ol.ImageTile.prototype.handleImageLoad_ = function() {
if (!goog.isDef(this.image_.naturalWidth)) {
this.image_.naturalWidth = this.image_.width;
this.image_.naturalHeight = this.image_.height;
}
if (this.image_.naturalWidth && this.image_.naturalHeight) {
this.state = ol.TileState.LOADED;
} else {

11
src/ol/interaction/drawinteraction.js
View File

@@ -148,18 +148,15 @@ ol.interaction.Draw = function(options) {
*/
this.overlay_ = new ol.FeatureOverlay();
this.overlay_.setStyleFunction(goog.isDef(options.styleFunction) ?
options.styleFunction : ol.interaction.Draw.defaultStyleFunction
);
options.styleFunction : ol.interaction.Draw.getDefaultStyleFunction());
};
goog.inherits(ol.interaction.Draw, ol.interaction.Interaction);
/**
* @param {ol.Feature} feature Feature.
* @param {number} resolution Resolution.
* @return {Array.<ol.style.Style>} Styles.
* @return {ol.feature.StyleFunction} Styles.
*/
ol.interaction.Draw.defaultStyleFunction = (function() {
ol.interaction.Draw.getDefaultStyleFunction = function() {
/** @type {Object.<ol.geom.GeometryType, Array.<ol.style.Style>>} */
var styles = {};
styles[ol.geom.GeometryType.POLYGON] = [
@@ -210,7 +207,7 @@ ol.interaction.Draw.defaultStyleFunction = (function() {
return function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
})();
};
/**

46
src/ol/mapbrowserevent.js
View File

@@ -8,6 +8,7 @@ goog.require('goog.events');
goog.require('goog.events.BrowserEvent');
goog.require('goog.events.EventTarget');
goog.require('goog.events.EventType');
goog.require('goog.object');
goog.require('ol.Coordinate');
goog.require('ol.FrameState');
goog.require('ol.MapEvent');
@@ -132,6 +133,14 @@ 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}
* @private
@@ -161,6 +170,10 @@ ol.MapBrowserEventHandler = function(map) {
goog.events.EventType.TOUCHSTART,
this.handleTouchStart_, false, this);
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
this.ieDblclickListenerKey_ = goog.events.listen(element,
goog.events.EventType.DBLCLICK, this.emulateClick_, false, this);
}
};
goog.inherits(ol.MapBrowserEventHandler, goog.events.EventTarget);
@@ -190,12 +203,28 @@ ol.MapBrowserEventHandler.prototype.emulateClick_ = function(browserEvent) {
this.dispatchEvent(newEvent);
} else {
// click
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);
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) {
// 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.
var ev = /** @type {Event} */ (
goog.object.clone(browserEvent.getBrowserEvent()));
this.clickTimeoutId_ = goog.global.setTimeout(goog.bind(function() {
this.clickTimeoutId_ = 0;
var newEvent = new ol.MapBrowserEvent(
ol.MapBrowserEvent.EventType.SINGLECLICK, this.map_,
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);
}
}
};
@@ -446,6 +475,11 @@ ol.MapBrowserEventHandler.prototype.disposeInternal = function() {
goog.array.forEach(this.dragListenerKeys_, goog.events.unlistenByKey);
this.dragListenerKeys_ = 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');
};

45
src/ol/renderer/dom/dommaprenderer.js
View File

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

39
src/ol/renderer/dom/domtilelayerrenderer.js
View File

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