loleaflet/css/loleaflet.css | 15 +++++-
loleaflet/src/layer/FormFieldButtonLayer.js | 68 +++++++++++++++++++++-------
2 files changed, 65 insertions(+), 18 deletions(-)
New commits:
commit e79d065037ab5ab678dac2e9a851374405041a5e
Author: Tamás Zolnai <tamas.zol...@collabora.com>
AuthorDate: Fri May 1 17:57:38 2020 +0200
Commit: Andras Timar <andras.ti...@collabora.com>
CommitDate: Sun May 10 17:16:34 2020 +0200
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 <jenkinscollaboraoff...@gmail.com>
Reviewed-by: Andras Timar <andras.ti...@collabora.com>
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 7f874c222..8639f504d 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 169f030e0..cfd91a605 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;
}
});
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
