[Libreoffice-commits] online.git: Branch 'distro/collabora/collabora-online-4' - loleaflet/src

[Tor Lillqvist (via logerrit)]

 loleaflet/src/control/Ruler.js |   59 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 49 insertions(+), 10 deletions(-)

New commits:
commit caf37fb293a666b0a82ac8bd31df35b18b45fc01
Author:     Tor Lillqvist <tml at collabora.com>
AuthorDate: Tue Nov 26 18:44:26 2019 +0200
Commit:     Tor Lillqvist <tml at collabora.com>
CommitDate: Tue Nov 26 18:30:09 2019 +0100

    Make dragging the margin handles in the ruler work better in the iOS app
    
    Several changes:
    
    On iOS, use touch events instead of mouse ones. One difference between
    touch and mouse events is that the touchend event naturally does not
    carry any position information (as the finger has been lifted from the
    screen). So we need to keep track of where the last touchmove event
    happened separately in _lastPosition.
    
    Letting go of a margin handle after dragging it did not actually move
    the coresponding margin in the document. The fix for this was to catch
    the touchend event for the this._rFace element instead of for the
    this._map element.
    
    Once a margin had been moved, it could not be moved another time. The
    reason for this was that because the document initially is readonly,
    the this.options.interactive was set to false (see the
    L.control.ruler() call in loleaflet/src/map/Map.js) and never changed
    after that. This caused _updateBreakPoints() to pass {perm:'readonly'}
    in the call to this._changeInteractions(). The fix was to set
    this.options.interactive to true when turning on the interaction.
    
    In theory this same problem probably would happen also in web-based
    Online on "mobile" (i.e. phones), but we don't show the ruler there at
    all, so the sitaution where a document would be initially read-only
    and the ruler would show up doesn't happen.
    
    Change-Id: I0393704d02a2989b4ea3358dc4bee17e48c16ae6
    Reviewed-on: https://gerrit.libreoffice.org/83807
    Reviewed-by: Tor Lillqvist <tml at collabora.com>
    Tested-by: Tor Lillqvist <tml at collabora.com>

diff --git a/loleaflet/src/control/Ruler.js b/loleaflet/src/control/Ruler.js
index a48dacb6f..7855ae11d 100644
--- a/loleaflet/src/control/Ruler.js
+++ b/loleaflet/src/control/Ruler.js
@@ -44,15 +44,28 @@ L.Control.Ruler = L.Control.extend({
 				this._lMarginDrag.style.cursor = 'e-resize';
 				this._rMarginDrag.style.cursor = 'w-resize';
 
-				L.DomEvent.on(this._rMarginDrag, 'mousedown', this._initiateDrag, this);
-				L.DomEvent.on(this._lMarginDrag, 'mousedown', this._initiateDrag, this);
+				if (window.ThisIsTheiOSApp) {
+					this.options.interactive = true;
+					L.DomEvent.on(this._rMarginDrag, 'touchstart', this._initiateDrag, this);
+					L.DomEvent.on(this._lMarginDrag, 'touchstart', this._initiateDrag, this);
+				}
+				else {
+					L.DomEvent.on(this._rMarginDrag, 'mousedown', this._initiateDrag, this);
+					L.DomEvent.on(this._lMarginDrag, 'mousedown', this._initiateDrag, this);
+				}
 			}
 			else {
 				this._lMarginDrag.style.cursor = 'default';
 				this._rMarginDrag.style.cursor = 'default';
 
-				L.DomEvent.off(this._rMarginDrag, 'mousedown', this._initiateDrag, this);
-				L.DomEvent.off(this._lMarginDrag, 'mousedown', this._initiateDrag, this);
+				if (window.ThisIsTheiOSApp) {
+					L.DomEvent.off(this._rMarginDrag, 'touchstart', this._initiateDrag, this);
+					L.DomEvent.off(this._lMarginDrag, 'touchstart', this._initiateDrag, this);
+				}
+				else {
+					L.DomEvent.off(this._rMarginDrag, 'mousedown', this._initiateDrag, this);
+					L.DomEvent.off(this._lMarginDrag, 'mousedown', this._initiateDrag, this);
+				}
 			}
 		}
 	},
@@ -176,12 +189,25 @@ L.Control.Ruler = L.Control.extend({
 	},
 
 	_initiateDrag: function(e) {
+		if (e.type === 'touchstart') {
+			if (e.touches.length !== 1)
+				return;
+			e.clientX = e.touches[0].clientX;
+		}
+
 		this._map.rulerActive = true;
 
 		var dragableElem = e.srcElement || e.target;
-		L.DomEvent.on(this._rFace, 'mousemove', this._moveMargin, this);
-		L.DomEvent.on(this._map, 'mouseup', this._endDrag, this);
+		if (window.ThisIsTheiOSApp) {
+			L.DomEvent.on(this._rFace, 'touchmove', this._moveMargin, this);
+			L.DomEvent.on(this._rFace, 'touchend', this._endDrag, this);
+		}
+		else {
+			L.DomEvent.on(this._rFace, 'mousemove', this._moveMargin, this);
+			L.DomEvent.on(this._map, 'mouseup', this._endDrag, this);
+		}
 		this._initialposition = e.clientX;
+		this._lastposition = this._initialposition;
 
 		if (L.DomUtil.hasClass(dragableElem, 'loleaflet-ruler-right')) {
 			L.DomUtil.addClass(this._rMarginDrag, 'leaflet-drag-moving');
@@ -194,6 +220,10 @@ L.Control.Ruler = L.Control.extend({
 	},
 
 	_moveMargin: function(e) {
+		if (e.type === 'touchmove')
+			e.clientX = e.touches[0].clientX;
+
+		this._lastposition = e.clientX;
 		var posChange = e.clientX - this._initialposition;
 		var unit = this.options.unit ? this.options.unit : ' cm';
 		if (L.DomUtil.hasClass(this._rMarginDrag, 'leaflet-drag-moving')) {
@@ -217,12 +247,21 @@ L.Control.Ruler = L.Control.extend({
 	_endDrag: function(e) {
 		this._map.rulerActive = false;
 
-		var posChange = e.originalEvent.clientX - this._initialposition;
+		var posChange;
+		if (e.type === 'touchend')
+			posChange = this._lastposition - this._initialposition;
+		else
+			posChange = e.originalEvent.clientX - this._initialposition;
 		var unoObj = {}, marginType, fact;
 
-		L.DomEvent.off(this._rFace, 'mousemove', this._moveMargin, this);
-		L.DomEvent.off(this._map, 'mouseup', this._endDrag, this);
-
+		if (window.ThisIsTheiOSApp) {
+			L.DomEvent.off(this._rFace, 'touchmove', this._moveMargin, this);
+			L.DomEvent.off(this._rFace, 'touchend', this._endDrag, this);
+		}
+		else {
+			L.DomEvent.off(this._rFace, 'mousemove', this._moveMargin, this);
+			L.DomEvent.off(this._map, 'mouseup', this._endDrag, this);
+		}
 		if (L.DomUtil.hasClass(this._rMarginDrag, 'leaflet-drag-moving')) {
 			marginType = 'Margin2';
 			fact = -1;