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

[Henry Castro]

 loleaflet/dist/loleaflet.css             |    5 ++
 loleaflet/src/layer/AnnotationManager.js |   64 +++++++++++++++++++++++--------
 loleaflet/src/layer/marker/Annotation.js |   21 +++++-----
 3 files changed, 64 insertions(+), 26 deletions(-)

New commits:
commit aa751efbeef7a5ed6207452bcc646a4cbac62135
Author: Henry Castro <hcastro at collabora.com>
Date:   Tue Feb 14 16:37:16 2017 -0400

    loleaflet: modify and remove annotations

diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index eac27ef..cc9c355 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -126,6 +126,11 @@ body {
 	line-height: 1.4;
 }
 
+.loleaflet-annotation-edit {
+	margin: 3px 3px;
+	line-height: 1.4;
+}
+
 .loleaflet-annotation-textarea {
 	border: 1px solid #c8c8c8;
 	resize: none;
diff --git a/loleaflet/src/layer/AnnotationManager.js b/loleaflet/src/layer/AnnotationManager.js
index 56147e9..3fef9d1 100644
--- a/loleaflet/src/layer/AnnotationManager.js
+++ b/loleaflet/src/layer/AnnotationManager.js
@@ -18,6 +18,25 @@ L.AnnotationManager = L.Class.extend({
 		this._map.on('AnnotationCancel', this._onAnnotationCancel, this);
 		this._map.on('AnnotationClick', this._onAnnotationClick, this);
 		this._map.on('AnnotationSave', this._onAnnotationSave, this);
+		var that = this;
+		$.contextMenu({
+			selector: '.loleaflet-annotation-content',
+			className: 'loleaflet-font',
+			items: {
+				modify: {
+					name: _('Modify'),
+					callback: function (key, options) {
+						that._onAnnotationModify.call(that, options.$trigger.attr('id'));
+					}
+				},
+				remove: {
+					name: _('Remove'),
+					callback: function (key, options) {
+						that._onAnnotationRemove.call(that, options.$trigger.attr('id'));
+					}
+				}
+			}
+		});
 	},
 
 	clear: function () {
@@ -55,7 +74,7 @@ L.AnnotationManager = L.Class.extend({
 		var topRight = this._map.project(this._map.options.maxBounds.getNorthEast());
 		var annotation = this._items[id];
 		var point0, point1, point2, point3;
-		if (annotation) {
+		if (annotation.id !== id) {
 			this._selected.annotation = annotation;
 			this.layout();
 			point0 = this._map._docLayer._twipsToPixels(annotation._data.anchorPos);
@@ -141,21 +160,17 @@ L.AnnotationManager = L.Class.extend({
 		this._items[comment.id].focus();
 	},
 
-	remove: function (annotation) {
+	remove: function (id) {
+		this._removeAnchor(id);
+		this.unselect();
+		this._map.removeLayer(this._items[id]);
+		delete this._items[id];
+		this._map.focus();
 	},
 
 	_onAnnotationCancel: function (e) {
-		if (e.id === -1) {
-			for (var index in this._anchors) {
-				if (this._anchors[index].id === e.id) {
-					this._anchors.splice(index, 1);
-					break;
-				}
-			}
-			this._map.removeLayer(this._items[e.id]);
-			this.unselect();
-			delete this._items[e.id];
-			this._map.focus();
+		if (e.id === 'new') {
+			this.remove(e.id);
 		}
 	},
 
@@ -163,10 +178,27 @@ L.AnnotationManager = L.Class.extend({
 		this.select(e.id);
 	},
 
+	_onAnnotationModify: function (id) {
+		this._items[id].edit();
+		this.select(id);
+		this._items[id].focus();
+	},
+
+	_onAnnotationRemove: function (id) {
+		this.remove(id);
+	},
+
 	_onAnnotationSave: function (e) {
-		this._items[e.id].updateEdit();
-		this._items[e.id].show();
 		this.layout();
+	},
+
+	_removeAnchor: function (id) {
+		for (var index in this._anchors) {
+			if (this._anchors[index].id === id) {
+				this._anchors.splice(index, 1);
+				break;
+			}
+		}
 	}
 });
 
@@ -178,7 +210,7 @@ L.Map.include({
 			textrange: '',
 			author: _('You'),
 			dateTime: new Date().toDateString(),
-			id: -1,
+			id: 'new',
 			anchorPos:  this._docLayer._latLngToTwips(this._docLayer._visibleCursor.getNorthWest())
 		});
 	}
diff --git a/loleaflet/src/layer/marker/Annotation.js b/loleaflet/src/layer/marker/Annotation.js
index 142c73e..ca6afd4 100644
--- a/loleaflet/src/layer/marker/Annotation.js
+++ b/loleaflet/src/layer/marker/Annotation.js
@@ -68,10 +68,6 @@ L.Annotation = L.Layer.extend({
 		return this;
 	},
 
-	updateEdit: function () {
-		this._contentText.innerHTML = this._editText.value;
-	},
-
 	focus: function () {
 		this._editText.focus();
 	},
@@ -84,8 +80,9 @@ L.Annotation = L.Layer.extend({
 
 		L.DomEvent.disableScrollPropagation(this._container);
 		this._contentNode = L.DomUtil.create('div', 'loleaflet-annotation-content', wrapper);
-		this._editNode = L.DomUtil.create('div', 'loleaflet-annotation-content', wrapper);
+		this._editNode = L.DomUtil.create('div', 'loleaflet-annotation-edit', wrapper);
 
+		this._contentNode.setAttribute('id', this._data.id);
 		this._contentText = L.DomUtil.create('div', '', this._contentNode);
 		this._contentAuthor = L.DomUtil.create('div', '', this._contentNode);
 		this._contentDate = L.DomUtil.create('div', '', this._contentNode);
@@ -107,7 +104,7 @@ L.Annotation = L.Layer.extend({
 		this._container.style.visibility = 'hidden';
 		this._editNode.style.display = 'none';
 
-		var events = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'keydown', 'keypress', 'keyup', 'contextmenu'];
+		var events = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'keydown', 'keypress', 'keyup'];
 		L.DomEvent.on(container, 'click', this._onMouseClick, this);
 		for (var it = 0; it < events.length; it++) {
 			L.DomEvent.on(container, events[it], L.DomEvent.stopPropagation, this);
@@ -115,17 +112,21 @@ L.Annotation = L.Layer.extend({
 	},
 
 	_onCancelClick: function (e) {
+		this._editText.value = this._contentText.innerHTML;
+		this.show();
 		this._map.fire('AnnotationCancel', {id: this._data.id});
 	},
 
-	_onSaveClick: function (e) {
-		this._map.fire('AnnotationSave', {id: this._data.id});
-	},
-
 	_onMouseClick: function (e) {
 		this._map.fire('AnnotationClick', {id: this._data.id});
 	},
 
+	_onSaveClick: function (e) {
+		this._contentText.innerHTML = this._editText.value;
+		this.show();
+		this._map.fire('AnnotationSave', {id: this._data.id});
+	},
+
 	_updateLayout: function () {
 		var style = this._contentNode.style;
 		var width = Math.max(this._contentNode.offsetWidth, this.options.minWidth);