loleaflet/Makefile.am | 2
loleaflet/build/deps.js | 4
loleaflet/css/loleaflet.css | 1
loleaflet/css/toolbar.css | 30 ++++
loleaflet/debug/document/loleaflet.html | 1
loleaflet/html/loleaflet.html.m4 | 9 +
loleaflet/src/control/Control.JSDialogBuilder.js | 148 +++++++++++++++++++++++
loleaflet/src/control/Control.MobileWizard.js | 70 ++++++++++
loleaflet/src/layer/tile/TileLayer.js | 26 +++-
loleaflet/src/main.js | 4
10 files changed, 291 insertions(+), 4 deletions(-)
New commits:
commit ab9962a9f2a37c21758c6e05c2304de38efbcdce
Author: Szymon Kłos <szymon.k...@collabora.com>
AuthorDate: Mon Sep 23 13:31:20 2019 +0200
Commit: Szymon Kłos <szymon.k...@collabora.com>
CommitDate: Fri Sep 27 17:03:16 2019 +0200
jsdialogs: UI Builder
Change-Id: I6cfcae90542eca84d45a99b15dc97ed3356a0626
Reviewed-on: https://gerrit.libreoffice.org/79724
Reviewed-by: Szymon Kłos <szymon.k...@collabora.com>
Tested-by: Szymon Kłos <szymon.k...@collabora.com>
diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index a83f58870..1a6e1c345 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -330,6 +330,7 @@ pot:
src/control/Control.ContextMenu.js \
src/control/Control.DocumentRepair.js \
src/control/Control.DownloadProgress.js \
+ src/control/Control.JSDialogBuilder.js \
src/control/Control.Menubar.js \
src/control/Control.MobileInput.js \
src/control/Control.MobileWizard.js \
diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index 8aa9ad6af..a112f9b53 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -400,6 +400,7 @@ var deps = {
'control/Control.LokDialog.js',
'control/Control.AlertDialog.js',
'control/Control.Infobar.js',
+ 'control/Control.JSDialogBuilder.js',
'control/Control.MobileWizard.js'],
heading: 'Controls',
desc: 'Handles vex dialogs for displaying alerts'
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js
b/loleaflet/src/control/Control.JSDialogBuilder.js
new file mode 100644
index 000000000..078eba3a6
--- /dev/null
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -0,0 +1,148 @@
+/* -*- js-indent-level: 8 -*- */
+/*
+ * L.Control.JSDialogBuilder used for building the native HTML components
+ * from the JSON description provided by the server.
+ */
+
+/* global $ */
+L.Control.JSDialogBuilder = L.Control.extend({
+
+ _controlHandlers: {},
+
+ _setup: function() {
+ this._controlHandlers['radiobutton'] = this._radiobuttonControl;
+ this._controlHandlers['checkbox'] = this._checkboxControl;
+ this._controlHandlers['spinfield'] = this._spinfieldControl;
+ this._controlHandlers['edit'] = this._editControl;
+ this._controlHandlers['pushbutton'] = this._pushbuttonControl;
+ this._controlHandlers['combobox'] = this._comboboxControl;
+ this._controlHandlers['listbox'] = this._comboboxControl;
+ this._controlHandlers['fixedtext'] = this._fixedtextControl;
+ this._controlHandlers['container'] = this._containerHandler;
+ this._controlHandlers['window'] = this._containerHandler;
+ this._controlHandlers['borderwindow'] = this._containerHandler;
+ this._controlHandlers['control'] = this._containerHandler;
+ this._controlHandlers['scrollbar'] = this._ignoreHandler;
+ this._controlHandlers['toolbox'] = this._ignoreHandler;
+ },
+
+ _containerHandler: function() {
+ return true;
+ },
+
+ _ignoreHandler: function() {
+ return false;
+ },
+
+ _radiobuttonControl: function(parentContainer, data) {
+ var radiobutton = L.DomUtil.create('input', '',
parentContainer);
+ radiobutton.type = 'radiobutton';
+ radiobutton.value = data.text;
+
+ return false;
+ },
+
+ _checkboxControl: function(parentContainer, data) {
+ var checkbox = L.DomUtil.createWithId('input', data.id,
parentContainer);
+ checkbox.type = 'checkbox';
+ var checkboxLabel = L.DomUtil.create('label', '',
parentContainer);
+ checkboxLabel.innerHTML = data.text;
+ checkboxLabel.for = data.id;
+
+ return false;
+ },
+
+ _spinfieldControl: function(parentContainer, data) {
+ var spinfield = L.DomUtil.create('input', '', parentContainer);
+ spinfield.type = 'number';
+ spinfield.value = data.text;
+
+ return false;
+ },
+
+ _editControl: function(parentContainer, data) {
+ var edit = L.DomUtil.create('input', '', parentContainer);
+ edit.value = data.text;
+
+ return false;
+ },
+
+ _pushbuttonControl: function(parentContainer, data) {
+ var pushbutton = L.DomUtil.create('button', '',
parentContainer);
+ pushbutton.innerHTML = data.text;
+
+ return false;
+ },
+
+ _comboboxControl: function(parentContainer, data) {
+ var listbox = L.DomUtil.create('select', '', parentContainer);
+ listbox.value = data.text;
+
+ return false;
+ },
+
+ _fixedtextControl: function(parentContainer, data) {
+ var fixedtext = L.DomUtil.create('p', '', parentContainer);
+ fixedtext.innerHTML = data.text;
+
+ return false;
+ },
+
+ build: function(parent, data, currentIsContainer, currentIsVertival,
columns) {
+ var currentInsertPlace = parent;
+ var currentHorizontalRow = parent;
+
+ if (currentIsContainer && !currentIsVertival)
+ currentHorizontalRow = L.DomUtil.create('tr', '',
parent);
+
+ for (var childIndex in data) {
+ var childData = data[childIndex];
+ var childType = childData.type;
+ var childIsEnabled = childData.enabled;
+ var processChildren = true;
+
+ if (childIsEnabled === false)
+ continue;
+
+ if (currentIsContainer) {
+ var horizontalOverflow = (childIndex > 0 &&
columns && (childIndex % columns == 0));
+ var newRow = currentIsVertival ||
horizontalOverflow;
+ if (newRow) {
+ currentHorizontalRow =
L.DomUtil.create('tr', '', parent);
+ currentInsertPlace =
L.DomUtil.create('td', '', currentHorizontalRow);
+ } else
+ currentInsertPlace =
L.DomUtil.create('td', '', currentHorizontalRow);
+ }
+
+ var childIsContainer = (childType == 'container' ||
childType == 'borderwindow');
+ var childIsVertical = childData.vertical === true;
+ var childColumns = childData.cols;
+
+ var childObject = null;
+ if (childIsContainer && childType != 'borderwindow')
+ childObject = L.DomUtil.create('table', '',
currentInsertPlace);
+ else
+ childObject = currentInsertPlace;
+
+ $(childObject).css('border-style', 'solid');
+ $(childObject).css('border-width', '1px');
+ $(childObject).css('border-color', 'black');
+
+ var handler = this._controlHandlers[childType];
+
+ if (handler)
+ processChildren = handler(childObject,
childData);
+ else
+ console.warn('Unsupported control type: \"' +
childType + '\"');
+
+ if (processChildren && childData.children != undefined)
+ this.build(childObject, childData.children,
childIsContainer, childIsVertical, childColumns);
+ }
+ }
+});
+
+L.control.jsDialogBuilder = function (options) {
+ var builder = new L.Control.JSDialogBuilder(options);
+ builder._setup();
+ return builder;
+};
diff --git a/loleaflet/src/control/Control.MobileWizard.js
b/loleaflet/src/control/Control.MobileWizard.js
index f98b366a9..93bf2bea6 100644
--- a/loleaflet/src/control/Control.MobileWizard.js
+++ b/loleaflet/src/control/Control.MobileWizard.js
@@ -51,14 +51,16 @@ L.Control.MobileWizard = L.Control.extend({
},
_onMobileWizard: function(data) {
- if (!this._isActive) {
+ if (data) {
this._isActive = true;
this._showWizard();
-
this._hideKeyboard();
- console.log(data);
+ var content = $('#mobile-wizard-content');
+ content.empty();
+
+ L.control.jsDialogBuilder().build(content.get(0),
[data]);
}
}
});
commit e3a01b75613c1488c97668e12370de82b67e5859
Author: Szymon Kłos <szymon.k...@collabora.com>
AuthorDate: Wed Aug 28 20:42:12 2019 +0200
Commit: Szymon Kłos <szymon.k...@collabora.com>
CommitDate: Fri Sep 27 17:03:06 2019 +0200
jsdialogs: Mobile Wizard
Change-Id: Ida2dc48d86ea4f28b08ec24a7638f27ad8633dbf
Reviewed-on: https://gerrit.libreoffice.org/79723
Reviewed-by: Szymon Kłos <szymon.k...@collabora.com>
Tested-by: Szymon Kłos <szymon.k...@collabora.com>
diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index c62f55949..a83f58870 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -332,6 +332,7 @@ pot:
src/control/Control.DownloadProgress.js \
src/control/Control.Menubar.js \
src/control/Control.MobileInput.js \
+ src/control/Control.MobileWizard.js \
src/control/Control.Scroll.Annotation.js \
src/control/Control.Tabs.js \
src/control/Control.Toolbar.js \
diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index 52a71fd24..8aa9ad6af 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -399,7 +399,8 @@ var deps = {
src: ['control/Control.js',
'control/Control.LokDialog.js',
'control/Control.AlertDialog.js',
- 'control/Control.Infobar.js'],
+ 'control/Control.Infobar.js',
+ 'control/Control.MobileWizard.js'],
heading: 'Controls',
desc: 'Handles vex dialogs for displaying alerts'
},
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 1941b78d5..30591d13d 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -613,6 +613,7 @@ body {
bottom: 40px !important;
right: 10px !important;
}
+
/* Vex dialogs */
.vex-open .vex-overlay {
/* TODO: remove specific z-index from our codebase
diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index 5e63e4140..9c6866718 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -736,3 +736,33 @@ tr.useritem > td > img {
text-decoration: none;
color: black;
}
+
+#mobile-wizard-back {
+ background-image: url('images/lc_closedocmobile.svg');
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 20px;
+ height: 20px;
+}
+
+#mobile-wizard {
+ height: 45%;
+ width: 100%;
+ position: fixed;
+ bottom: 37px;
+ z-index: 1000;
+ background-color: white;
+}
+
+#mobile-wizard-content {
+ overflow: scroll;
+ position: absolute;
+ top: 30px;
+ bottom: 0px;
+ width: 100%;
+}
+
+#mobile-wizard-titlebar {
+ background-color: #F6F6F6;
+ height: 30px;
+}
diff --git a/loleaflet/debug/document/loleaflet.html
b/loleaflet/debug/document/loleaflet.html
index 958a95c5b..89156fe20 100644
--- a/loleaflet/debug/document/loleaflet.html
+++ b/loleaflet/debug/document/loleaflet.html
@@ -128,6 +128,7 @@
////// Controls /////
map.addControl(L.control.scroll());
map.addControl(L.control.alertDialog());
+ map.addControl(L.control.mobileWizard());
map.addControl(L.control.partsPreview());
map.addControl(L.control.sidebar());
map.addControl(L.control.tabs());
diff --git a/loleaflet/html/loleaflet.html.m4 b/loleaflet/html/loleaflet.html.m4
index 0c7669edd..363e77991 100644
--- a/loleaflet/html/loleaflet.html.m4
+++ b/loleaflet/html/loleaflet.html.m4
@@ -178,6 +178,15 @@ ifelse(MOBILEAPP,[true],
</div>
<div id="toolbar-down" style="display: none"></div>
+ <div id="mobile-wizard" style="display: none">
+ <table id="mobile-wizard-titlebar" width="100%">
+ <tr>
+ <td id="mobile-wizard-back"></td>
+ <td id="mobile-wizard-title" class="ui-widget"></td>
+ </tr>
+ </table>
+ <div id="mobile-wizard-content">
+ </div>
<!-- Remove if you don't want the About dialog -->
<div id="about-dialog" style="display:none; text-align: center;
user-select: text">
diff --git a/loleaflet/src/control/Control.MobileWizard.js
b/loleaflet/src/control/Control.MobileWizard.js
new file mode 100644
index 000000000..f98b366a9
--- /dev/null
+++ b/loleaflet/src/control/Control.MobileWizard.js
@@ -0,0 +1,68 @@
+/* -*- js-indent-level: 8 -*- */
+/*
+ * L.Control.MobileWizard
+ */
+
+/* global $ */
+L.Control.MobileWizard = L.Control.extend({
+
+ _inMainMenu: true,
+ _isActive: false,
+
+ onAdd: function (map) {
+ map.on('mobilewizard', this._onMobileWizard, this);
+ map.on('closemobilewizard', this._hideWizard, this);
+
+ this._setupBackButton();
+ },
+
+ _setupBackButton: function() {
+ var that = this;
+ var backButton = $('#mobile-wizard-back');
+ backButton.click(function() {
+ if (that._inMainMenu) {
+ that._hideWizard();
+ } else {
+ $('.ui-content.mobile-wizard').hide('slide', {
direction: 'right' }, 'fast', function() {
+
$('.ui-header.mobile-wizard').show('slide', { direction: 'left' }, 'fast');
+ });
+ that._inMainMenu = true;
+ }
+ });
+ },
+
+ _showWizard: function() {
+ $('#mobile-wizard').show();
+ },
+
+ _hideWizard: function() {
+ $('#mobile-wizard').hide();
+ $('#mobile-wizard-content').empty();
+ this._isActive = false;
+ },
+
+ _hideKeyboard: function() {
+ document.activeElement.blur();
+ },
+
+ _setTitle: function(title) {
+ var right = $('#mobile-wizard-title');
+ right.text(title);
+ },
+
+ _onMobileWizard: function(data) {
+ if (!this._isActive) {
+ this._isActive = true;
+
+ this._showWizard();
+
+ this._hideKeyboard();
+
+ console.log(data);
+ }
+ }
+});
+
+L.control.mobileWizard = function (options) {
+ return new L.Control.MobileWizard(options);
+};
diff --git a/loleaflet/src/layer/tile/TileLayer.js
b/loleaflet/src/layer/tile/TileLayer.js
index f608dc11d..08a8abafc 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -545,6 +545,9 @@ L.TileLayer = L.GridLayer.extend({
}
}
}
+ else if (textMsg.startsWith('jsdialog:')) {
+ this._onJSDialogMsg(textMsg);
+ }
},
toggleTileDebugModeImpl: function() {
@@ -696,10 +699,29 @@ L.TileLayer = L.GridLayer.extend({
}
},
+ _resetSelectionRanges: function() {
+ this._graphicSelectionTwips = new L.Bounds(new L.Point(0, 0),
new L.Point(0, 0));
+ this._graphicSelection = new L.LatLngBounds(new L.LatLng(0, 0),
new L.LatLng(0, 0));
+ },
+
+ _openMobileWizard: function(data) {
+ this._map.fire('mobilewizard', data);
+ },
+
+ _closeMobileWizard: function() {
+ this._map.fire('closemobilewizard');
+ },
+
+ _onJSDialogMsg: function (textMsg) {
+ if (window.mode.isMobile()) {
+ var msgData =
JSON.parse(textMsg.substring('jsdialog:'.length + 1));
+ this._openMobileWizard(msgData);
+ }
+ },
+
_onGraphicSelectionMsg: function (textMsg) {
if (textMsg.match('EMPTY')) {
- this._graphicSelectionTwips = new L.Bounds(new
L.Point(0, 0), new L.Point(0, 0));
- this._graphicSelection = new L.LatLngBounds(new
L.LatLng(0, 0), new L.LatLng(0, 0));
+ this._resetSelectionRanges();
}
else {
textMsg = '[' +
textMsg.substr('graphicselection:'.length) + ']';
diff --git a/loleaflet/src/main.js b/loleaflet/src/main.js
index 1b847bb5e..dd9c10cec 100644
--- a/loleaflet/src/main.js
+++ b/loleaflet/src/main.js
@@ -78,7 +78,9 @@ map.addControl(menubar);
setupToolbar(map);
map.addControl(L.control.scroll());
map.addControl(L.control.alertDialog());
-map.addControl(L.control.lokDialog());
+map.addControl(L.control.mobileWizard());
+map.dialog = L.control.lokDialog();
+map.addControl(map.dialog);
map.addControl(L.control.contextMenu());
map.addControl(L.control.infobar());
map.loadDocument(global.socket);
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
