[Libreoffice-commits] online.git: 4 commits - loleaflet/build loleaflet/src

Pranav Kant pranavk at collabora.co.uk
Fri Mar 30 07:19:44 UTC 2018


 loleaflet/build/deps.js                          |    5 +
 loleaflet/src/layer/marker/ClipboardContainer.js |   84 +++++++++++++++++++++++
 loleaflet/src/layer/tile/TileLayer.js            |   35 ++-------
 loleaflet/src/map/Map.js                         |   32 +++-----
 loleaflet/src/map/handler/Map.Keyboard.js        |    8 +-
 loleaflet/src/map/handler/Map.Mouse.js           |    2 
 6 files changed, 117 insertions(+), 49 deletions(-)

New commits:
commit 2f92e1da9c5681c93dd33848b3afaf0a843e4a81
Author: Pranav Kant <pranavk at collabora.co.uk>
Date:   Fri Mar 23 19:40:53 2018 +0530

    New home for hidden input field
    
    Change-Id: I534b8d3dc9ac9ec4f37aa0ec929a9cd6a98558b4

diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index 59f4cde34..4b66adeea 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -80,6 +80,11 @@ var deps = {
 		desc: 'Used to display a progress image over rectangular are of the map.'
 	},
 
+	ClipboardContainer: {
+		src: ['layer/marker/ClipboardContainer.js'],
+		desc: 'Container for hidden input field.'
+	},
+
 	Marker: {
 		src: ['layer/marker/Icon.js',
 		      'layer/marker/Icon.Default.js',
diff --git a/loleaflet/src/layer/marker/ClipboardContainer.js b/loleaflet/src/layer/marker/ClipboardContainer.js
new file mode 100644
index 000000000..4dc7792a7
--- /dev/null
+++ b/loleaflet/src/layer/marker/ClipboardContainer.js
@@ -0,0 +1,84 @@
+/*
+ * L.ClipboardContainer is used to overlay the hidden clipbaord container on the map
+ */
+
+L.ClipboardContainer = L.Layer.extend({
+
+	initialize: function () {
+		this._initLayout();
+	},
+
+	onAdd: function () {
+		if (this._container) {
+			this.getPane().appendChild(this._container);
+			this.update();
+		}
+
+		L.DomEvent.on(this._textArea, 'copy cut paste ' +
+		              'keydown keypress keyup ' +
+		              'compositionstart compositionupdate compositionend textInput',
+		              this._map._handleDOMEvent, this._map);
+	},
+
+	onRemove: function () {
+		if (this._container) {
+			this.getPane().removeChild(this._container);
+		}
+
+		L.DomEvent.off(this._textArea, 'copy cut paste ' +
+		               'keydown keypress keyup ' +
+		               'compositionstart compositionupdate compositionend textInput',
+		               this._map._handleDOMEvent, this._map);
+	},
+
+	focus: function(focus) {
+		if (focus) {
+			this._textArea.focus();
+		} else {
+			this._textArea.blur();
+		}
+	},
+
+	select: function() {
+		this._textArea.select();
+	},
+
+	getValue: function() {
+		return this._textArea.value;
+	},
+
+	setValue: function(val) {
+		this._textArea.value = val;
+	},
+
+	setLatLng: function (latlng) {
+		this._latlng = L.latLng(latlng);
+		this.update();
+	},
+
+	update: function () {
+		if (this._container && this._map && this._latlng) {
+			var position = this._map.latLngToLayerPoint(this._latlng).round();
+			this._setPos(position);
+		}
+	},
+
+	_initLayout: function () {
+		this._container = L.DomUtil.create('div', 'clipboard-container');
+		this._container.id = 'doc-clipboard-container';
+		this._textArea = L.DomUtil.create('input', 'clipboard', this._container);
+		this._textArea.setAttribute('type', 'text');
+		this._textArea.setAttribute('autocorrect', 'off');
+		this._textArea.setAttribute('autocapitalize', 'off');
+		this._textArea.setAttribute('autocomplete', 'off');
+		this._textArea.setAttribute('spellcheck', 'false');
+	},
+
+	_setPos: function (pos) {
+		L.DomUtil.setPosition(this._container, pos);
+	}
+});
+
+L.clipboardContainer = function () {
+	return new L.ClipboardContainer();
+};
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index b05658b17..59ce81d2c 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -290,8 +290,7 @@ L.TileLayer = L.GridLayer.extend({
 		for (var key in this._selectionHandles) {
 			this._selectionHandles[key].on('drag dragend', this._onSelectionHandleDrag, this);
 		}
-		this._textArea = map._textArea;
-		this._textArea.focus();
+		this._map._clipboardContainer.focus(true);
 
 		map.setPermission(this.options.permission);
 
@@ -1548,11 +1547,7 @@ L.TileLayer = L.GridLayer.extend({
 				this._cursorMarker.setLatLng(cursorPos, pixBounds.getSize().multiplyBy(this._map.getZoomScale(this._map.getZoom())));
 			}
 			this._map.addLayer(this._cursorMarker);
-
-			// move the hidden input field with the cursor
-			var clipContainer = L.DomUtil.get('doc-clipboard-container');
-			var pos = this._map.latLngToContainerPoint(L.latLng(cursorPos)).round();
-			L.DomUtil.setPosition(clipContainer, pos);
+			this._map._clipboardContainer.setLatLng(this._visibleCursor.getNorthWest());
 		}
 		else if (this._cursorMarker) {
 			this._map.removeLayer(this._cursorMarker);
@@ -1736,7 +1731,7 @@ L.TileLayer = L.GridLayer.extend({
 		}
 		if (e.type === 'dragend') {
 			e.target.isDragged = false;
-			this._textArea.focus();
+			this._map._clipboardContainer.focus(true);
 			this._map.fire('scrollvelocity', {vx: 0, vy: 0});
 		}
 
@@ -1920,9 +1915,9 @@ L.TileLayer = L.GridLayer.extend({
 	_onCopy: function (e) {
 		e = e.originalEvent;
 		e.preventDefault();
-		if (this._map._docLayer._textArea.value !== '') {
-			L.Compatibility.clipboardSet(e, this._map._docLayer._textArea.value);
-			this._map._docLayer._textArea.value = '';
+		if (this._map._clipboardContainer.getValue() !== '') {
+			L.Compatibility.clipboardSet(e, this._map._clipboardContainer.getValue());
+			this._map._clipboardContainer.setValue('');
 		} else if (this._selectionTextContent) {
 			L.Compatibility.clipboardSet(e, this._selectionTextContent);
 
@@ -1936,9 +1931,9 @@ L.TileLayer = L.GridLayer.extend({
 	_onCut: function (e) {
 		e = e.originalEvent;
 		e.preventDefault();
-		if (this._map._docLayer._textArea.value !== '') {
-			L.Compatibility.clipboardSet(e, this._map._docLayer._textArea.value);
-			this._map._docLayer._textArea.value = '';
+		if (this._map._clipboardContainer.getValue() !== '') {
+			L.Compatibility.clipboardSet(e, this._map._clipboardContainer.getValue());
+			this._map._clipboardContainer.setValue('');
 		} else if (this._selectionTextContent) {
 			L.Compatibility.clipboardSet(e, this._selectionTextContent);
 
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index 1a3c3e6a2..b513b8138 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -86,6 +86,9 @@ L.Map = L.Evented.extend({
 		this._socket = L.socket(this);
 		this._progressBar = L.progressOverlay(this.getCenter(), L.point(150, 25));
 
+		this._clipboardContainer = L.clipboardContainer();
+		this.addLayer(this._clipboardContainer);
+
 		// Inhibit the context menu - the browser thinks that the document
 		// is just a bunch of images, hence the context menu is useless (tdf#94599)
 		this.on('contextmenu', function() {});
@@ -669,9 +672,9 @@ L.Map = L.Evented.extend({
 
 	focus: function () {
 		console.debug('focus:');
-		if (this._docLayer && document.activeElement !== this._docLayer._textArea) {
+		if (this._docLayer) {
 			console.debug('focus: focussing');
-			this._docLayer._textArea.focus();
+			this._clipboardContainer.focus(true);
 		}
 	},
 
@@ -699,14 +702,6 @@ L.Map = L.Evented.extend({
 			throw new Error('Map container is already initialized.');
 		}
 
-		var textAreaContainer = L.DomUtil.create('div', 'clipboard-container', container.parentElement);
-		textAreaContainer.id = 'doc-clipboard-container';
-		this._textArea = L.DomUtil.create('input', 'clipboard', textAreaContainer);
-		this._textArea.setAttribute('type', 'text');
-		this._textArea.setAttribute('autocorrect', 'off');
-		this._textArea.setAttribute('autocapitalize', 'off');
-		this._textArea.setAttribute('autocomplete', 'off');
-		this._textArea.setAttribute('spellcheck', 'false');
 		this._resizeDetector = L.DomUtil.create('iframe', 'resize-detector', container);
 		this._fileDownloader = L.DomUtil.create('iframe', '', container);
 		L.DomUtil.setStyle(this._fileDownloader, 'display', 'none');
@@ -836,8 +831,7 @@ L.Map = L.Evented.extend({
 
 		L.DomEvent[onOff](this._container, 'click dblclick mousedown mouseup ' +
 			'mouseover mouseout mousemove contextmenu dragover drop ' +
-			'keydown keypress keyup trplclick qdrplclick', this._handleDOMEvent, this);
-		L.DomEvent[onOff](this._textArea, 'copy cut paste keydown keypress keyup compositionstart compositionupdate compositionend textInput', this._handleDOMEvent, this);
+			'trplclick qdrplclick', this._handleDOMEvent, this);
 
 		if (this.options.trackResize && this._resizeDetector.contentWindow) {
 			L.DomEvent[onOff](this._resizeDetector.contentWindow, 'resize', this._onResize, this);
@@ -1079,8 +1073,8 @@ L.Map = L.Evented.extend({
 		// Calling from some other place with no real 'click' event doesn't work
 		if (type === 'click') {
 			if (this._permission === 'edit') {
-				this._textArea.blur();
-				this._textArea.focus();
+				this._clipboardContainer.focus(false);
+				this._clipboardContainer.focus(true);
 			}
 
 			// unselect if anything is selected already
diff --git a/loleaflet/src/map/handler/Map.Keyboard.js b/loleaflet/src/map/handler/Map.Keyboard.js
index aade802a0..4c7df4806 100644
--- a/loleaflet/src/map/handler/Map.Keyboard.js
+++ b/loleaflet/src/map/handler/Map.Keyboard.js
@@ -252,7 +252,7 @@ L.Map.Keyboard = L.Handler.extend({
 			compEventFn = L.bind(docLayer._postCompositionEvent, docLayer, 0 /* winid */);
 		}
 		if (!inputEle) {
-			inputEle = this._map._textArea;
+			inputEle = this._map._clipboardContainer._textArea;
 		}
 		this.modifier = 0;
 		var shift = e.originalEvent.shiftKey ? this.keyModifier.shift : 0;
@@ -523,9 +523,9 @@ L.Map.Keyboard = L.Handler.extend({
 		case 91: // Left Cmd (Safari)
 		case 93: // Right Cmd (Safari)
 			// we prepare for a copy or cut event
-			this._map._docLayer._textArea.value = window.getSelection().toString();
-			this._map._docLayer._textArea.focus();
-			this._map._docLayer._textArea.select();
+			this._map._clipboardContainer.setValue(window.getSelection().toString());
+			this._map._clipboardContainer.focus(true);
+			this._map._clipboardContainer.select();
 			return true;
 		case 80: // p
 			this._map.print();
diff --git a/loleaflet/src/map/handler/Map.Mouse.js b/loleaflet/src/map/handler/Map.Mouse.js
index f196adbef..d5b280a0c 100644
--- a/loleaflet/src/map/handler/Map.Mouse.js
+++ b/loleaflet/src/map/handler/Map.Mouse.js
@@ -150,7 +150,7 @@ L.Map.Mouse = L.Handler.extend({
 					var docLayer = this._map._docLayer;
 					this._mouseEventsQueue = [];
 					docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 1, buttons, modifier);
-					docLayer._textArea.focus();
+					this._map._clipboardContainer.focus(true);
 				}, this));
 				this._holdMouseEvent = setTimeout(L.bind(this._executeMouseEvents, this), timeOut);
 
commit 54272b274da3e19aafe9986e8c51c363d24c9013
Author: Pranav Kant <pranavk at collabora.co.uk>
Date:   Wed Mar 21 17:19:15 2018 +0530

    loleaflet: don't allow scrollbars to popup
    
    Change-Id: Id018a91dac21ea7b81c57a1628b6e3c61f9c1ec4
    Reviewed-on: https://gerrit.libreoffice.org/52069
    Reviewed-by: Jan Holesovsky <kendy at collabora.com>
    Tested-by: Jan Holesovsky <kendy at collabora.com>

diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index 36df3e052..8f67261c0 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -44,6 +44,7 @@
 
 body {
     margin: 0;
+    overflow: hidden;
 }
 
 #presentation-controls-wrapper {
commit 16590158b896800a39e37a948076e34f7419cc70
Author: Pranav Kant <pranavk at collabora.co.uk>
Date:   Fri Mar 30 00:10:15 2018 +0530

    Ignore 'scroll' event on map container
    
    Cherry-picked from:
    
    commit 558f8c3a065e8fafa2d8912fd9c88625a8c3de97
    Author: Iván Sánchez Ortega <ivan at mazemap.no>
    Date:   Mon Mar 30 14:34:39 2015 +0200
    
        Fix #3333 by catching the onScroll event on the map container
    
    from upstream Leaflet.
    
    Thanks a lot to Kendy and Aron for extensive debugging.
    
    Change-Id: I940cdf43b5d7d8f8368b4a01dcfc3417085eb4c7

diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index bb9109a88..1a3c3e6a2 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -711,9 +711,15 @@ L.Map = L.Evented.extend({
 		this._fileDownloader = L.DomUtil.create('iframe', '', container);
 		L.DomUtil.setStyle(this._fileDownloader, 'display', 'none');
 
+		L.DomEvent.addListener(container, 'scroll', this._onScroll, this);
 		container._leaflet = true;
 	},
 
+	_onScroll: function() {
+		this._container.scrollTop = 0;
+		this._container.scrollLeft = 0;
+	},
+
 	_initLayout: function () {
 		var container = this._container;
 
commit 2210fd63e5d406b75e7582bb94eec19ad7b6ab93
Author: Pranav Kant <pranavk at collabora.co.uk>
Date:   Wed Mar 28 22:09:09 2018 +0530

    Revert "loleaflet: avoid getting browser scrollbar"
    
    This reverts commit 5437eee548b3406d2d993cd83669c1b90ea46155.

diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index 8f67261c0..36df3e052 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -44,7 +44,6 @@
 
 body {
     margin: 0;
-    overflow: hidden;
 }
 
 #presentation-controls-wrapper {
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index 74a9f2266..b05658b17 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -1549,7 +1549,10 @@ L.TileLayer = L.GridLayer.extend({
 			}
 			this._map.addLayer(this._cursorMarker);
 
-			this._updateContainerElements();
+			// move the hidden input field with the cursor
+			var clipContainer = L.DomUtil.get('doc-clipboard-container');
+			var pos = this._map.latLngToContainerPoint(L.latLng(cursorPos)).round();
+			L.DomUtil.setPosition(clipContainer, pos);
 		}
 		else if (this._cursorMarker) {
 			this._map.removeLayer(this._cursorMarker);
@@ -1557,21 +1560,6 @@ L.TileLayer = L.GridLayer.extend({
 		}
 	},
 
-	_updateContainerElements: function() {
-		var clipContainer = L.DomUtil.get('doc-clipboard-container');
-		if (!this._visibleCursor ||
-		    !clipContainer)
-			return;
-
-		var oldPos = L.DomUtil.getPosition(clipContainer);
-		var newPos = this._map.latLngToContainerPoint(L.latLng(this._visibleCursor.getNorthWest())).round();
-		if (!oldPos || oldPos.x !== newPos.x || oldPos.y !== newPos.y) {
-			// move the hidden input field with the cursor
-			console.log('_updateContainerElements: ' + newPos);
-			L.DomUtil.setPosition(clipContainer, newPos);
-		}
-	},
-
 	// Update colored non-blinking view cursor
 	_onUpdateViewCursor: function (viewId) {
 		if (typeof this._viewCursors[viewId] !== 'object' ||
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index f9d397b7e..bb9109a88 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -801,10 +801,6 @@ L.Map = L.Evented.extend({
 
 	_rawPanBy: function (offset) {
 		L.DomUtil.setPosition(this._mapPane, this._getMapPanePos().subtract(offset));
-
-		if (this._docLayer) {
-			this._docLayer._updateContainerElements();
-		}
 	},
 
 	_getZoomSpan: function () {


More information about the Libreoffice-commits mailing list