MSForms: build drop down list for drop-down field.

Change-Id: I42a68ebf8b0201d97779f2bfc43a8dabbad9e1c0
(cherry picked from commit 3bce2d45ab344b5c7e3a20ac79ebd42620a95448)
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/93884
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Andras Timar <andras.timar@collabora.com>

2 files changed, 65 insertions, 18 deletions

diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 7f874c222b..8639f504d1 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -544,9 +544,22 @@ body {
 }
 
 .form-field-button:hover, .form-field-button:focus {
-  background: #DDDDDD;
+	background: #DDDDDD;
 }
 
 .form-field-button-image {
 	margin: 3px;
 }
+
+.drop-down-field-list {
+	position: absolute;
+	border: 1px solid;
+}
+
+.drop-down-field-list-item {
+	width: 100%;
+}
+
+.drop-down-field-list-item.selected {
+	background: #99CCFF;
+}
diff --git a/loleaflet/src/layer/FormFieldButtonLayer.js b/loleaflet/src/layer/FormFieldButtonLayer.js
index 169f030e01..cfd91a605a 100644
--- a/loleaflet/src/layer/FormFieldButtonLayer.js
+++ b/loleaflet/src/layer/FormFieldButtonLayer.js
@@ -2,7 +2,7 @@
 /*
  * L.FormFieldButton is used to interact with text based form fields.
  */
-
+/* global $ */
 L.FormFieldButton = L.Layer.extend({
 
 	options: {
@@ -16,6 +16,7 @@ L.FormFieldButton = L.Layer.extend({
 			var offset = new L.Point(parseInt(strTwips[2]), parseInt(strTwips[3]));
 			var bottomRightTwips = topLeftTwips.add(offset);
 			this._buttonAreaTwips = [topLeftTwips, bottomRightTwips];
+			this._buttonData = data;
 		}
 	},
 
@@ -26,8 +27,10 @@ L.FormFieldButton = L.Layer.extend({
 	},
 
 	_buildFormButton: function(map) {
+		this._container = L.DomUtil.create('div', 'form-field-button-container', this.getPane('formfieldPane'));
+
 		// Create a frame around the text area
-		this._frame = L.DomUtil.create('div', 'form-field-frame', this.getPane('formfieldPane'));
+		this._frame = L.DomUtil.create('div', 'form-field-frame', this._container);
 		var buttonAreaLatLng = new L.LatLngBounds(
 				map._docLayer._twipsToLatLng(this._buttonAreaTwips[0], this._map.getZoom()),
 				map._docLayer._twipsToLatLng(this._buttonAreaTwips[1], this._map.getZoom()));
@@ -39,37 +42,68 @@ L.FormFieldButton = L.Layer.extend({
 		// Use a small padding between the text and the frame
 		var extraPadding = 2;
 		var size = buttonAreaLayer.getSize();
-		this._frame.style.width = (size.x + 1.5 * extraPadding) + 'px';
+		this.frameWidth = size.x + 1.5 * extraPadding;
+		this.frameHeight = size.y + 1.5 * extraPadding;
+		this._frame.style.width = this.frameWidth + 'px';
+		this._container.style.height = this.frameHeight + 'px';
 
-		this.getPane('formfieldPane').style.height = (size.y + 1.5 * extraPadding) + 'px';
-
-		var framePos = new L.Point(buttonAreaLayer.min.x - extraPadding, buttonAreaLayer.min.y - extraPadding);
-		L.DomUtil.setPosition(this._frame, framePos);
+		this.framePos = new L.Point(buttonAreaLayer.min.x - extraPadding, buttonAreaLayer.min.y - extraPadding);
+		L.DomUtil.setPosition(this._frame, this.framePos);
 
 		// Add a drop down button to open the list
-		this._button = L.DomUtil.create('button', 'form-field-button', this.getPane('formfieldPane'));
+		this._button = L.DomUtil.create('button', 'form-field-button', this._container);
 		var buttonPos = new L.Point(buttonAreaLayer.max.x + extraPadding, buttonAreaLayer.min.y - extraPadding);
 		L.DomUtil.setPosition(this._button, buttonPos);
-		this._button.style.width = this.getPane('formfieldPane').style.height;
+		this._button.style.width = this._container.style.height;
 
 		var image = L.DomUtil.create('img', 'form-field-button-image', this._button);
 		image.src = 'images/unfold.svg';
+
+		this._button.addEventListener('click', this._onClickDropDown);
+
+		// Build list of items
+		this._dropDownList = L.DomUtil.create('div', 'drop-down-field-list', this.getPane('formfieldPane'));
+		$('.drop-down-field-list').hide();
+		var listPos = this.framePos;
+		L.DomUtil.setPosition(this._dropDownList, listPos);
+		this._dropDownList.style.minWidth = (this.frameWidth + this.frameHeight) + 'px';
+
+		// TODO: use the actual list here
+		var stringList = ['text1', 'text2', 'string', 'selected_item'];
+		var selected = 'selected_item';
+		for (var i = 0; i < stringList.length; ++i) {
+			var option = L.DomUtil.create('div', 'drop-down-field-list-item', this._dropDownList);
+			option.innerHTML = stringList[i];
+			option.addEventListener('click', this._onListItemSelect);
+			// Stop propagation to the main document
+			option.addEventListener('mouseup', function(event) {event.stopPropagation();});
+			option.addEventListener('mousedown', function(event) {event.stopPropagation();});
+			if (stringList[i] === selected)
+				option.classList.add('selected');
+		}
 	},
 
 	onRemove: function () {
 		this._clearButton();
 	},
 
+	_onClickDropDown: function() {
+		$('.drop-down-field-list').show();
+	},
+
+	_onListItemSelect: function(event) {
+		$('.drop-down-field-list-item.selected').removeClass('selected');
+		event.target.classList.add('selected');
+		// TODO: send back
+		$('.drop-down-field-list').hide();
+		event.stopPropagation();
+		console.warn(event.target.textContent);
+	},
+
 	_clearButton: function() {
 		this.getPane('formfieldPane').innerHTML = '';
-		if (this._frame) {
-			L.DomUtil.remove(this._frame);
-			this._frame = undefined;
-		}
-		if (this._button) {
-			L.DomUtil.remove(this._button);
-			this._button = undefined;
-		}
+		this._frame = undefined;
+		this._button = undefined;
 	}
 
 });