tdf#97020 Adding find&replace functionality

Change-Id: I4d8d22368e6f8ee85873c86f9e80fbdffc2ad17a
Reviewed-on: https://gerrit.libreoffice.org/38287
Reviewed-by: pranavk <pranavk@collabora.co.uk>
Tested-by: pranavk <pranavk@collabora.co.uk>

4 files changed, 168 insertions, 13 deletions

diff --git a/loleaflet/dist/searchControl.css b/loleaflet/dist/searchControl.css
index 85928da6b..1bd0c1c66 100644
--- a/loleaflet/dist/searchControl.css
+++ b/loleaflet/dist/searchControl.css
@@ -1,3 +1,29 @@
+.findReplaceVex .findreplacetable {
+	width: 100%;
+}
+.findReplaceVex .findreplacetable label, .findReplaceVex .findreplacetable input {
+	font-size: .9em;
+	width: 95%;
+}
+.findReplaceVex .vex-content{
+	width: 650px !important;
+	position: absolute !important;
+	z-index: 1100;
+	left: calc(50vw - 325px);
+	box-shadow: 0 4px 16px rgba(0,0,0,.2);
+	border: 1px solid rgba(0,0,0,.333);
+}
+.vex-dialog-message {
+	font-size: 1.2em;
+}
+.findReplaceVex .btnArrow {
+	float: left !important;
+	margin: 0px !important;
+	margin-right: 6px !important;
+}
+.findReplaceVex .vex-dialog-button {
+	text-transform: initial !important;
+}
 .search-not-found {
 	background-color: red;
 	-webkit-transition: background-color 0.8s linear;
@@ -5,4 +31,4 @@
 	     -o-transition: background-color 0.8s linear;
 	        transition: background-color 0.8s linear;
 
-}
+}
\ No newline at end of file
diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js
index ea3ab1d21..e1a2d0197 100644
--- a/loleaflet/dist/toolbar/toolbar.js
+++ b/loleaflet/dist/toolbar/toolbar.js
@@ -753,7 +753,7 @@ function selectItem(item, func)
 }
 function onSearch(e) {
 	var toolbar = w2ui['toolbar-down'];
-	map.search(L.DomUtil.get('search-input').value, false, 0, true /* expand search */);
+	map.search(L.DomUtil.get('search-input').value, false, '', 0, true /* expand search */);
 	toolbar.enable('searchprev');
 	toolbar.enable('searchnext');
 	toolbar.show('cancelsearch');
@@ -1251,8 +1251,10 @@ map.on('search', function (e) {
 		toolbar.disable('searchnext');
 		toolbar.hide('cancelsearch');
 		L.DomUtil.addClass(searchInput, 'search-not-found');
+		$('#findthis').addClass('search-not-found');
 		map.resetSelection();
 		setTimeout(function () {
+			$('#findthis').removeClass('search-not-found');
 			L.DomUtil.removeClass(searchInput, 'search-not-found');
 		}, 500);
 	}
diff --git a/loleaflet/src/control/Control.Menubar.js b/loleaflet/src/control/Control.Menubar.js
index 0b7866154..87d224e7c 100644
--- a/loleaflet/src/control/Control.Menubar.js
+++ b/loleaflet/src/control/Control.Menubar.js
@@ -28,6 +28,8 @@ L.Control.Menubar = L.Control.extend({
 				{type: 'separator'},
 				{name: _('Select all'), type: 'unocommand', uno: '.uno:SelectAll'},
 				{type: 'separator'},
+				{name: _('Find & Replace'), id: 'findandreplace', type: 'action'},
+				{type: 'separator'},
 				{name: _('Track Changes'), type: 'menu', menu: [
 					{name: _('Record'), type: 'unocommand', uno: '.uno:TrackChanges'},
 					{name: _('Show'), type: 'unocommand', uno: '.uno:ShowTrackedChanges'},
@@ -428,6 +430,121 @@ L.Control.Menubar = L.Control.extend({
 			// check if it is empty
 			fileName = fileName === '' ? 'document' : fileName;
 			map.downloadAs(fileName + '.' + format, format);
+		} else if (id === 'findandreplace') {
+			findReplaceContent =
+			'\
+			<table class="findreplacetable">\
+				<tr>\
+					<td>\
+						<label for="findthis">Find</label>\
+					</td>\
+					<td>\
+						<input id="findthis" name="findthis">\
+					</td>\
+				</tr>\
+				<tr>\
+					<td>\
+						<label for="replacewith">Replace with</label>\
+					</td>\
+					<td>\
+						<input name="replacewith">\
+					</td>\
+				</tr>\
+			</table>\
+			';
+			vex.dialog.open({
+				showCloseButton: true,
+				escapeButtonCloses: true,
+				className: 'vex-theme-plain findReplaceVex',
+				message: _('Find & Replace'),
+				input: findReplaceContent,
+				buttons: [
+					$.extend({}, vex.dialog.buttons.replace, {
+						text: _('Replace'),
+						click: function($vexContent, e) {
+							$vexContent.data().vex.option = 'replace'
+						}}),
+					$.extend({}, vex.dialog.buttons.replaceAll, {
+						text: _('Replace All'),
+						click: function($vexContent, e) {
+							$vexContent.data().vex.option = 'replaceAll';
+						}}),
+					$.extend({}, vex.dialog.buttons.findPrev, {
+						text: '⯇ ' + _('Prev'),
+						className: 'btnArrow',
+						click: function($vexContent, e) {
+							$vexContent.data().vex.option = 'previous';
+						}}),
+					$.extend({}, vex.dialog.buttons.findNext, {
+						text: _('Next') + ' ⯈',
+						className: 'btnArrow',
+						click: function($vexContent, e) {
+							$vexContent.data().vex.option = 'next';
+						}})
+				],
+				afterOpen: function(e) {
+					$('.vex-overlay').remove();
+					$('.vex').css('position', 'static');
+					var selected = null;
+					var xPos = 0, yPos = 0;
+					var xElem = 0, yElem = 0;
+					var maxH = window.innerHeight, maxW = window.innerWidth;
+
+					$('#findthis').on('input', function() {
+						if (this.value.length != 0) {
+							map.search(this.value, false, '', 0, true);
+						}
+					});
+					$('.vex-content').on('mousedown', function(e) {
+						selected = this;
+						selected.style.cursor = 'move';
+						xElem = xPos - selected.offsetLeft;
+						yElem = yPos - selected.offsetTop;
+					});
+					$('.vex-content').on('mouseup', function(e) {
+						selected.style.cursor = 'default';
+						selected = null;
+					});
+					$('.vex').on('mousemove', function(e) {
+						xPos = e.pageX;
+						yPos = e.pageY;
+						if (selected !== null) {
+							isOutVert = (yPos - yElem >= 0 && (yPos - yElem + selected.offsetHeight) <= maxH);
+							isOutHor = (xPos - xElem >= 0 && (xPos - xElem + selected.offsetWidth) <= maxW);
+							if (isOutHor) {
+								selected.style.left = (xPos - xElem) + 'px';
+							}
+							if (isOutVert) {
+								selected.style.top = (yPos - yElem) + 'px';
+							}
+						}
+					});
+				},
+				onSubmit: function(event) {
+					$vexContent = $(this).parent();
+					event.preventDefault();
+					event.stopPropagation();
+
+					opt = $vexContent.data().vex.option;
+					findText = this.findthis.value;
+					replaceText = this.replacewith.value;
+
+					if (findText.length != 0) {
+						if (opt === 'next') {
+							map.search(findText);
+						}
+						else if (opt === 'previous') {
+							map.search(findText, true);
+						}
+						else if (opt === 'replace') {
+							map.search(findText, false, replaceText, 2);
+						}
+						else if (opt === 'replaceAll') {
+							map.search(findText, false, replaceText, 3);
+						}
+					}
+				}
+			}, this);
 		} else if (id === 'insertcomment') {
 			map.insertComment();
 		} else if (id === 'insertgraphic') {
@@ -559,7 +676,7 @@ L.Control.Menubar = L.Control.extend({
 
 			if (menu[i].type === 'action') {
 				if ((menu[i].id === 'rev-history' && !revHistoryEnabled) ||
-				    (menu[i].id === 'closedocument' && !closebutton)) {
+					(menu[i].id === 'closedocument' && !closebutton)) {
 					continue;
 				}
 			}
diff --git a/loleaflet/src/control/Search.js b/loleaflet/src/control/Search.js
index f030a7bae..cd7974b17 100644
--- a/loleaflet/src/control/Search.js
+++ b/loleaflet/src/control/Search.js
@@ -1,10 +1,13 @@
 L.Map.include({
-	search: function (text, backward, all, expand) {
+	search: function (text, backward, replaceString,  command, expand) {
 		if (backward === undefined) {
 			backward = false;
 		}
-		if (all === undefined) {
-			all = 0;
+		if (command === undefined) {
+			command = 0;
+		}
+		if (replaceString === undefined) {
+			replaceString = '';
 		}
 		if (this._docLayer._searchResults && text !== this._docLayer._searchTerm)
 		{
@@ -15,8 +18,20 @@ L.Map.include({
 			'SearchItem.SearchString': {
 				'type': 'string'
 			},
+			'SearchItem.ReplaceString': {
+				'type': 'string'
+			},
 			'SearchItem.Backward': {
 				'type': 'boolean'
+			},
+			'SearchItem.SearchStartPointX': {
+				'type': 'long'
+			},
+			'SearchItem.SearchStartPointY': {
+				'type': 'long'
+			},
+			'SearchItem.Command': {
+				'type': 'long'
 			}
 		};
 
@@ -41,15 +56,10 @@ L.Map.include({
 
 		searchCmd['SearchItem.SearchString'].value = text;
 		searchCmd['SearchItem.Backward'].value = backward;
-		searchCmd['SearchItem.SearchStartPointX'] = {};
-		searchCmd['SearchItem.SearchStartPointX'].type = 'long';
+		searchCmd['SearchItem.ReplaceString'].value = replaceString;
 		searchCmd['SearchItem.SearchStartPointX'].value = searchStartPointX;
-		searchCmd['SearchItem.SearchStartPointY'] = {};
-		searchCmd['SearchItem.SearchStartPointY'].type = 'long';
 		searchCmd['SearchItem.SearchStartPointY'].value = searchStartPointY;
-		searchCmd['SearchItem.Command'] = {};
-		searchCmd['SearchItem.Command'].type = 'long';
-		searchCmd['SearchItem.Command'].value = all;
+		searchCmd['SearchItem.Command'].value = command;
 		this._searchRequested = true;
 		this._socket.sendMessage('uno .uno:ExecuteSearch ' + JSON.stringify(searchCmd));
 	},