From 16b0e736667b954fd0f74eda92a62f7b59c6ef9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 16 Nov 2013 23:22:41 +0100 Subject: [PATCH 1/7] Better use of good.dom.createDom in zoom slider --- src/ol/control/zoomslidercontrol.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 2d7bbbad80..2523812039 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -76,21 +76,21 @@ ol.control.ZoomSlider = function(opt_options) { var className = goog.isDef(options.className) ? options.className : 'ol-zoomslider'; - var sliderCssCls = className + ' ' + ol.css.CLASS_UNSELECTABLE; - var thumbCssCls = className + '-thumb' + ' ' + ol.css.CLASS_UNSELECTABLE; - var element = goog.dom.createDom(goog.dom.TagName.DIV, sliderCssCls, - goog.dom.createDom(goog.dom.TagName.DIV, thumbCssCls)); + var thumbElement = goog.dom.createDom(goog.dom.TagName.DIV, + [className + '-thumb', ol.css.CLASS_UNSELECTABLE]); + var sliderElement = goog.dom.createDom(goog.dom.TagName.DIV, + [className, ol.css.CLASS_UNSELECTABLE], thumbElement); - this.dragger_ = this.createDraggable_(element); + this.dragger_ = this.createDraggable_(sliderElement); // FIXME currently only a do nothing function is bound. - goog.events.listen(element, [ + goog.events.listen(sliderElement, [ goog.events.EventType.TOUCHEND, goog.events.EventType.CLICK ], this.handleContainerClick_, false, this); goog.base(this, { - element: element + element: sliderElement }); }; goog.inherits(ol.control.ZoomSlider, ol.control.Control); From 559cad4cf355164b19dc2c59a6e7837521f38b63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 16 Nov 2013 23:29:22 +0100 Subject: [PATCH 2/7] Simplify zoom slider code --- src/ol/control/zoomslidercontrol.js | 42 ++++++++--------------------- 1 file changed, 11 insertions(+), 31 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 2523812039..c55cd51cfb 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -68,12 +68,6 @@ ol.control.ZoomSlider = function(opt_options) { */ this.sliderInitialized_ = false; - /** - * @private - * @type {Array.} - */ - this.draggerListenerKeys_ = null; - var className = goog.isDef(options.className) ? options.className : 'ol-zoomslider'; var thumbElement = goog.dom.createDom(goog.dom.TagName.DIV, @@ -81,7 +75,17 @@ ol.control.ZoomSlider = function(opt_options) { var sliderElement = goog.dom.createDom(goog.dom.TagName.DIV, [className, ol.css.CLASS_UNSELECTABLE], thumbElement); - this.dragger_ = this.createDraggable_(sliderElement); + /** + * @type {goog.fx.Dragger} + * @private + */ + this.dragger_ = new goog.fx.Dragger(thumbElement); + this.registerDisposable(this.dragger_); + + goog.events.listen(this.dragger_, [ + goog.fx.Dragger.EventType.DRAG, + goog.fx.Dragger.EventType.END + ], this.handleSliderChange_, undefined, this); // FIXME currently only a do nothing function is bound. goog.events.listen(sliderElement, [ @@ -285,27 +289,3 @@ ol.control.ZoomSlider.prototype.handleSliderChange_ = function(e) { view.setResolution(resolution); } }; - - -/** - * Actually enable draggable behaviour for the thumb of the zoomslider and bind - * relvant event listeners. - * - * @param {Element} elem The element for the slider. - * @return {goog.fx.Dragger} The actual goog.fx.Dragger instance. - * @private - */ -ol.control.ZoomSlider.prototype.createDraggable_ = function(elem) { - if (!goog.isNull(this.draggerListenerKeys_)) { - goog.array.forEach(this.draggerListenerKeys_, goog.events.unlistenByKey); - this.draggerListenerKeys_ = null; - } - var dragger = new goog.fx.Dragger(elem.childNodes[0]); - this.draggerListenerKeys_ = [ - goog.events.listen(dragger, [ - goog.fx.Dragger.EventType.DRAG, - goog.fx.Dragger.EventType.END - ], this.handleSliderChange_, undefined, this) - ]; - return dragger; -}; From 2a20693ffb4344c830513fd2db4d57ccab05f48e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 16 Nov 2013 23:41:48 +0100 Subject: [PATCH 3/7] Fix issue where map is stuck in drag mode If the control container stops "up" events the map browser event handler won't see these events and will keep triggering "drag" events. --- src/ol/map.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/ol/map.js b/src/ol/map.js index 6dabae87e5..c6d2f2fcf8 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -245,11 +245,8 @@ ol.Map = function(options) { goog.events.EventType.CLICK, goog.events.EventType.DBLCLICK, goog.events.EventType.MOUSEDOWN, - goog.events.EventType.MOUSEUP, goog.events.EventType.TOUCHSTART, - goog.events.EventType.TOUCHEND, - goog.events.EventType.MSPOINTERDOWN, - goog.events.EventType.MSPOINTERUP + goog.events.EventType.MSPOINTERDOWN ], goog.events.Event.stopPropagation); goog.dom.appendChild(this.viewport_, this.overlayContainerStopEvent_); From 14f5e5aedc80516b7e10daa36845f89f110d502c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 16 Nov 2013 23:47:19 +0100 Subject: [PATCH 4/7] Do not pretend the zoom slider supports touch --- src/ol/control/zoomslidercontrol.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index c55cd51cfb..27516911e7 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -88,10 +88,8 @@ ol.control.ZoomSlider = function(opt_options) { ], this.handleSliderChange_, undefined, this); // FIXME currently only a do nothing function is bound. - goog.events.listen(sliderElement, [ - goog.events.EventType.TOUCHEND, - goog.events.EventType.CLICK - ], this.handleContainerClick_, false, this); + goog.events.listen(sliderElement, goog.events.EventType.CLICK, + this.handleContainerClick_, false, this); goog.base(this, { element: sliderElement From 9ff7470f657089f9536ea6aaa97d5e3e4c924da3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 16 Nov 2013 23:51:53 +0100 Subject: [PATCH 5/7] Change ol.control.ZoomSlider#amountDragged_ signature --- src/ol/control/zoomslidercontrol.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 27516911e7..f1bee5d6ce 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -209,17 +209,18 @@ ol.control.ZoomSlider.prototype.positionThumbForResolution_ = function(res) { * Calculates the amount the thumb has been dragged to allow for calculation * of the corresponding resolution. * - * @param {goog.fx.DragDropEvent} e The dragdropevent. + * @param {number} x Pixel position relative to the left of the slider. + * @param {number} y Pixel position relative to the top of the slider. * @return {number} The amount the thumb has been dragged. * @private */ -ol.control.ZoomSlider.prototype.amountDragged_ = function(e) { +ol.control.ZoomSlider.prototype.amountDragged_ = function(x, y) { var draggerLimits = this.dragger_.limits, amount = 0; if (this.direction_ === ol.control.ZoomSlider.direction.HORIZONTAL) { - amount = (e.left - draggerLimits.left) / draggerLimits.width; + amount = (x - draggerLimits.left) / draggerLimits.width; } else { - amount = (e.top - draggerLimits.top) / draggerLimits.height; + amount = (y - draggerLimits.top) / draggerLimits.height; } return amount; }; @@ -270,7 +271,7 @@ ol.control.ZoomSlider.prototype.handleSliderChange_ = function(e) { var view = map.getView().getView2D(); var resolution; if (e.type === goog.fx.Dragger.EventType.DRAG) { - var amountDragged = this.amountDragged_(e); + var amountDragged = this.amountDragged_(e.left, e.top); resolution = this.resolutionForAmount_(amountDragged); if (resolution !== this.currentResolution_) { this.currentResolution_ = resolution; From a898b9588e087ff79f0daaabdc31a10ac416ef96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 16 Nov 2013 23:56:15 +0100 Subject: [PATCH 6/7] Handle click on zoom slider --- src/ol/control/zoomslidercontrol.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index f1bee5d6ce..75cf39800e 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -1,6 +1,5 @@ // FIXME works for View2D only // FIXME should possibly show tooltip when dragging? -// FIXME should possibly be adjustable by clicking on container goog.provide('ol.control.ZoomSlider'); @@ -87,7 +86,6 @@ ol.control.ZoomSlider = function(opt_options) { goog.fx.Dragger.EventType.END ], this.handleSliderChange_, undefined, this); - // FIXME currently only a do nothing function is bound. goog.events.listen(sliderElement, goog.events.EventType.CLICK, this.handleContainerClick_, false, this); @@ -180,7 +178,20 @@ ol.control.ZoomSlider.prototype.handleMapPostrender = function(mapEvent) { * @private */ ol.control.ZoomSlider.prototype.handleContainerClick_ = function(browserEvent) { - // TODO implement proper resolution calculation according to browserEvent + var map = this.getMap(); + var view = map.getView().getView2D(); + var resolution; + var amountDragged = this.amountDragged_(browserEvent.offsetX, + browserEvent.offsetY); + resolution = this.resolutionForAmount_(amountDragged); + goog.asserts.assert(goog.isDef(resolution)); + map.beforeRender(ol.animation.zoom({ + resolution: resolution, + duration: ol.control.ZOOMSLIDER_ANIMATION_DURATION, + easing: ol.easing.easeOut + })); + resolution = view.constrainResolution(resolution); + view.setResolution(resolution); }; From 8d57f0c78b8b26d34fe99afc5b44684b3958378e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sun, 17 Nov 2013 00:05:02 +0100 Subject: [PATCH 7/7] Stop clicks on zoom slider thumb --- src/ol/control/zoomslidercontrol.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 75cf39800e..52b9e1f2d4 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -8,6 +8,7 @@ goog.require('goog.asserts'); goog.require('goog.dom'); goog.require('goog.dom.TagName'); goog.require('goog.events'); +goog.require('goog.events.Event'); goog.require('goog.events.EventType'); goog.require('goog.fx.Dragger'); goog.require('goog.fx.Dragger.EventType'); @@ -88,6 +89,8 @@ ol.control.ZoomSlider = function(opt_options) { goog.events.listen(sliderElement, goog.events.EventType.CLICK, this.handleContainerClick_, false, this); + goog.events.listen(thumbElement, goog.events.EventType.CLICK, + goog.events.Event.stopPropagation); goog.base(this, { element: sliderElement