loleaflet: Allow accepting/rejecting a change from sidebar object

Change-Id: I309b33c4569bc74c69200298566734e16d08b305

loleaflet/dist/loleaflet.css

@@ -228,3 +228,18 @@ body {
 .loleaflet-annotation-menu:hover {
 	border: 1px solid darkgrey;
 }
+
+.loleaflet-annotation-menu-redline {
+	background: url(../images/submenu.png) no-repeat;
+	margin: 0;
+	padding: 0;
+	min-width: 15px;
+	height: 21px;
+	text-align: right;
+	border: 1px solid transparent;
+	display: inline-block;
+}
+
+.loleaflet-annotation-menu-redline:hover {
+	border: 1px solid darkgrey;
+}

loleaflet/src/layer/AnnotationManager.js

@@ -215,6 +215,32 @@ L.AnnotationManager = L.Class.extend({
 		this._map.focus();
 	},
 
+	acceptChange: function(id) {
+		var command = {
+			AcceptTrackedChange: {
+				type: 'unsigned short',
+				value: id.substring('change-'.length)
+			}
+		};
+		this._map.sendUnoCommand('.uno:AcceptTrackedChange', command);
+		this._map.removeLayer(this.removeItem(id));
+		this.unselect();
+		this._map.focus();
+	},
+
+	rejectChange: function(id) {
+		var command = {
+			RejectTrackedChange: {
+				type: 'unsigned short',
+				value: id.substring('change-'.length)
+			}
+		};
+		this._map.sendUnoCommand('.uno:RejectTrackedChange', command);
+		this._map.removeLayer(this.removeItem(id));
+		this.unselect();
+		this._map.focus();
+	},
+
 	onACKComment: function (obj) {
 		var changetrack = obj.redline ? true : false;
 		var action = changetrack ? obj.redline.action : obj.comment.action;
@@ -224,6 +250,7 @@ L.AnnotationManager = L.Class.extend({
 				// transform change tracking index into an id
 				obj.redline.id = 'change-' + obj.redline.index;
 				obj.redline.anchorPos = L.LOUtil.stringToPoint(obj.redline.textRange);
+				obj.redline.trackchange = true;
 				obj.redline.text = obj.redline.comment;
 				this.add(obj.redline, false);
 				this._map.focus();
@@ -253,7 +280,6 @@ L.AnnotationManager = L.Class.extend({
 				this.unselect();
 			}
 		} else if (action === 'Modify') {
-			console.log(action);
 			id = changetrack ? 'change-' + obj.redline.index : obj.comment.id;
 			var modified = this.getItem(id);
 			if (modified) {
@@ -261,6 +287,7 @@ L.AnnotationManager = L.Class.extend({
 				if (changetrack) {
 					obj.redline.anchorPos = obj.redline.anchorPos ? L.LOUtil.stringToPoing(obj.redline.anchorPos) : modified._data.anchorPos;
 					obj.redline.text = obj.redline.comment;
+					obj.redline.id = id;
 					modifiedObj = obj.redline;
 				} else {
 					obj.comment.anchorPos = obj.comment.anchorPos ? L.LOUtil.stringToPoint(obj.comment.anchorPos) :

loleaflet/src/layer/marker/Annotation.js

@@ -92,7 +92,7 @@ L.Annotation = L.Layer.extend({
 		L.DomUtil.create('div', 'loleaflet-annotation-userline', tdImg);
 		this._contentAuthor = L.DomUtil.create('div', 'loleaflet-annotation-content-author', tdAuthor);
 		this._contentDate = L.DomUtil.create('div', 'loleaflet-annotation-date', tdAuthor);
-		var divMenu = L.DomUtil.create('div', 'loleaflet-annotation-menu', tdMenu);
+		var divMenu = L.DomUtil.create('div', this._data.trackchange ? 'loleaflet-annotation-menu-redline' : 'loleaflet-annotation-menu', tdMenu);
 		divMenu.annotation = this;
 		this._contentNode = L.DomUtil.create('div', 'loleaflet-annotation-content', wrapper);
 		this._editNode = L.DomUtil.create('div', 'loleaflet-annotation-edit', wrapper);
@@ -131,7 +131,7 @@ L.Annotation = L.Layer.extend({
 	_onMouseClick: function (e) {
 		var target = e.target || e.srcElement;
 		L.DomEvent.stopPropagation(e);
-		if (L.DomUtil.hasClass(target, 'loleaflet-annotation-menu')) {
+		if (L.DomUtil.hasClass(target, 'loleaflet-annotation-menu') || L.DomUtil.hasClass(target, 'loleaflet-annotation-menu-redline')) {
 			$(target).contextMenu();
 			return;
 		}

loleaflet/src/layer/tile/TileLayer.js

@@ -198,6 +198,39 @@ L.TileLayer = L.GridLayer.extend({
 				}
 			}
 		});
+		$.contextMenu({
+			selector: '.loleaflet-annotation-menu-redline',
+			trigger: 'none',
+			className: 'loleaflet-font',
+			items: {
+				modify: {
+					name: _('Comment'),
+					callback: function (key, options) {
+						that.onAnnotationModify.call(that, options.$trigger.get(0).annotation);
+					}
+				},
+				accept: {
+					name: _('Accept'),
+					callback: function (key, options) {
+						that.onChangeAccept.call(that, options.$trigger.get(0).annotation._data.id);
+					}
+				},
+				reject: {
+					name: _('Reject'),
+					callback: function (key, options) {
+						that.onChangeReject.call(that, options.$tigger.get(0).annotation._data.id);
+					}
+				}
+			},
+			events: {
+				show: function (options) {
+					options.$trigger.get(0).annotation._contextMenu = true;
+				},
+				hide: function (options) {
+					options.$trigger.get(0).annotation._contextMenu = false;
+				}
+			}
+		});
 		this._map._socket.sendMessage('commandvalues command=.uno:AcceptTrackedChanges');
 
 		map._fadeAnimated = false;

loleaflet/src/layer/tile/WriterTileLayer.js

@@ -27,6 +27,14 @@ L.WriterTileLayer = L.TileLayer.extend({
 		this._annotations.remove(id);
 	},
 
+	onChangeAccept: function(id) {
+		this._annotations.acceptChange(id);
+	},
+
+	onChangeReject: function(id) {
+		this._annotations.rejectChange(id);
+	},
+
 	_onCommandValuesMsg: function (textMsg) {
 		var values = JSON.parse(textMsg.substring(textMsg.indexOf('{')));
 		if (!values) {