summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSzymon Kłos <szymon.klos@collabora.com>2020-12-08 16:49:25 +0100
committerSzymon Kłos <eszkadev@gmail.com>2020-12-09 13:24:02 +0100
commite5df7bc40165857f4da69b54222abdf2ac9d2bbb (patch)
treebf837c957640a190437df42515c039bc3a369b83
parentjsdialog: handle collapsed state of dialog (diff)
downloadonline-e5df7bc40165857f4da69b54222abdf2ac9d2bbb.tar.gz
online-e5df7bc40165857f4da69b54222abdf2ac9d2bbb.zip
jsdialog: split spinfield implementation for mobile and desktop
also move it from statics as we will use inheritance to get correct implementation Change-Id: Iefc2e37f31e10dfa890f11a8aa621353fbc188df Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
-rw-r--r--loleaflet/css/mobilewizard.css2
-rw-r--r--loleaflet/src/control/Control.JSDialogBuilder.js183
-rw-r--r--loleaflet/src/control/Control.MobileWizardBuilder.js78
3 files changed, 157 insertions, 106 deletions
diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index 24566fd50a..1110aeaf02 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -561,7 +561,7 @@ p.mobile-wizard.ui-combobox-text.selected {
.spinfieldcontainer input.spinfield {
padding-top: 0px;
}
-input.spinfield:disabled {
+.mobile-wizard input.spinfield:disabled {
background: linear-gradient(to right, white 0%, #ebebe4 15%, #ebebe4 40%, white 100%);
color: #bbb !important;
}
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 952076c31d..e783d7c99a 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -40,106 +40,6 @@ L.Control.JSDialogBuilder = L.Control.extend({
_currentDepth: 0,
- statics: {
- baseSpinField: function(parentContainer, data, builder, customCallback) {
- var controls = {};
- if (data.label) {
- var fixedTextData = { text: data.label };
- builder._fixedtextControl(parentContainer, fixedTextData, builder);
- }
-
- console.debug('baseSpinField: ' + data.id);
-
- var div = L.DomUtil.create('div', 'spinfieldcontainer', parentContainer);
- div.id = data.id;
- controls['container'] = div;
-
- var commandName = data.id ? data.id.substring('.uno:'.length) : data.id;
- if (commandName && commandName.length && L.LOUtil.existsIconForCommand(commandName, builder.map.getDocType())) {
- var image = L.DomUtil.create('img', 'spinfieldimage', div);
- var icon = (data.id === 'Transparency') ? builder._createIconURL('settransparency') : builder._createIconURL(data.id);
- image.src = icon;
- icon.alt = '';
- }
-
- var spinfield = L.DomUtil.create('input', 'spinfield', div);
- spinfield.type = 'number';
- controls['spinfield'] = spinfield;
-
- if (data.unit) {
- var unit = L.DomUtil.create('span', 'spinfieldunit', div);
- unit.innerHTML = builder._unitToVisibleString(data.unit);
- }
-
- var controlsContainer = L.DomUtil.create('div', 'spinfieldcontrols', div);
- var minus = L.DomUtil.create('div', 'minus', controlsContainer);
- minus.innerHTML = '-';
-
- var plus = L.DomUtil.create('div', 'plus', controlsContainer);
- plus.innerHTML = '+';
-
- if (data.min != undefined)
- $(spinfield).attr('min', data.min);
-
- if (data.max != undefined)
- $(spinfield).attr('max', data.max);
-
- if (data.enabled == 'false') {
- $(spinfield).attr('disabled', 'disabled');
- $(image).addClass('disabled');
- }
-
- if (data.readOnly === true)
- $(spinfield).attr('readOnly', 'true');
-
- if (data.hidden)
- $(spinfield).hide();
-
- plus.addEventListener('click', function() {
- var attrdisabled = $(spinfield).attr('disabled');
- if (attrdisabled !== 'disabled') {
- if (customCallback)
- customCallback('spinfield', 'plus', div, this.value, builder);
- else
- builder.callback('spinfield', 'plus', div, this.value, builder);
- }
- });
-
- minus.addEventListener('click', function() {
- var attrdisabled = $(spinfield).attr('disabled');
- if (attrdisabled !== 'disabled') {
- if (customCallback)
- customCallback('spinfield', 'minus', div, this.value, builder);
- else
- builder.callback('spinfield', 'minus', div, this.value, builder);
- }
- });
-
- return controls;
- },
-
- listenNumericChanges: function (data, builder, controls, customCallback) {
- // It listens server state changes using GetControlState
- // to avoid unit conversion
- builder.map.on('commandstatechanged', function(e) {
- var value = e.state[builder._getFieldFromId(data.id)];
- if (value) {
- if (customCallback)
- customCallback();
- else
- builder.callback('spinfield', 'value', controls.container, this.value, builder);
- }
- }, this);
-
- controls.spinfield.addEventListener('change', function() {
- if (customCallback)
- customCallback();
- else
- builder.callback('spinfield', 'value', controls.container, this.value, builder);
- });
- }
- },
-
_setup: function(options) {
this._clearColorPickers();
this.wizard = options.mobileWizard;
@@ -148,6 +48,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
this._controlHandlers['radiobutton'] = this._radiobuttonControl;
this._controlHandlers['checkbox'] = this._checkboxControl;
+ this._controlHandlers['basespinfield'] = this.baseSpinField;
this._controlHandlers['spinfield'] = this._spinfieldControl;
this._controlHandlers['metricfield'] = this._metricfieldControl;
this._controlHandlers['formattedfield'] = this._formattedfieldControl;
@@ -256,6 +157,78 @@ L.Control.JSDialogBuilder = L.Control.extend({
}
},
+ baseSpinField: function(parentContainer, data, builder, customCallback) {
+ var controls = {};
+ if (data.label) {
+ var fixedTextData = { text: data.label };
+ builder._fixedtextControl(parentContainer, fixedTextData, builder);
+ }
+
+ console.debug('baseSpinField: ' + data.id);
+
+ var div = L.DomUtil.create('div', 'spinfieldcontainer', parentContainer);
+ div.id = data.id;
+ controls['container'] = div;
+
+ var spinfield = L.DomUtil.create('input', 'spinfield', div);
+ spinfield.type = 'number';
+ controls['spinfield'] = spinfield;
+
+ if (data.unit) {
+ var unit = L.DomUtil.create('span', 'spinfieldunit', div);
+ unit.innerHTML = builder._unitToVisibleString(data.unit);
+ }
+
+ if (data.min != undefined)
+ $(spinfield).attr('min', data.min);
+
+ if (data.max != undefined)
+ $(spinfield).attr('max', data.max);
+
+ if (data.enabled == 'false') {
+ $(spinfield).attr('disabled', 'disabled');
+ }
+
+ if (data.readOnly === true)
+ $(spinfield).attr('readOnly', 'true');
+
+ if (data.hidden)
+ $(spinfield).hide();
+
+ spinfield.addEventListener('change', function() {
+ var attrdisabled = $(spinfield).attr('disabled');
+ if (attrdisabled !== 'disabled') {
+ if (customCallback)
+ customCallback('spinfield', 'change', div, this.value, builder);
+ else
+ builder.callback('spinfield', 'change', div, this.value, builder);
+ }
+ });
+
+ return controls;
+ },
+
+ listenNumericChanges: function (data, builder, controls, customCallback) {
+ // It listens server state changes using GetControlState
+ // to avoid unit conversion
+ builder.map.on('commandstatechanged', function(e) {
+ var value = e.state[builder._getFieldFromId(data.id)];
+ if (value) {
+ if (customCallback)
+ customCallback();
+ else
+ builder.callback('spinfield', 'value', controls.container, this.value, builder);
+ }
+ }, this);
+
+ controls.spinfield.addEventListener('change', function() {
+ if (customCallback)
+ customCallback();
+ else
+ builder.callback('spinfield', 'value', controls.container, this.value, builder);
+ });
+ },
+
_setupHandlers: function (controlElement, handlers) {
if (handlers) {
for (var i = 0; i < handlers.length; ++i) {
@@ -1282,7 +1255,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
},
_spinfieldControl: function(parentContainer, data, builder, customCallback) {
- var controls = L.Control.JSDialogBuilder.baseSpinField(parentContainer, data, builder, customCallback);
+ var controls = builder._controlHandlers['basespinfield'](parentContainer, data, builder, customCallback);
var updateFunction = function() {
var value = builder._getUnoStateForItemId(data.id, builder);
@@ -1321,9 +1294,9 @@ L.Control.JSDialogBuilder = L.Control.extend({
data.unit = units[1];
}
- controls = L.Control.JSDialogBuilder.baseSpinField(parentContainer, data, builder, customCallback);
+ controls = builder._controlHandlers['basespinfield'](parentContainer, data, builder, customCallback);
- L.Control.JSDialogBuilder.listenNumericChanges(data, builder, controls, customCallback);
+ builder.listenNumericChanges(data, builder, controls, customCallback);
value = parseFloat(data.value);
$(controls.spinfield).attr('value', value);
@@ -1334,8 +1307,8 @@ L.Control.JSDialogBuilder = L.Control.extend({
_metricfieldControl: function(parentContainer, data, builder, customCallback) {
var value;
- var controls = L.Control.JSDialogBuilder.baseSpinField(parentContainer, data, builder, customCallback);
- L.Control.JSDialogBuilder.listenNumericChanges(data, builder, controls, customCallback);
+ var controls = builder._controlHandlers['basespinfield'](parentContainer, data, builder, customCallback);
+ builder.listenNumericChanges(data, builder, controls, customCallback);
value = parseFloat(data.value);
$(controls.spinfield).attr('value', value);
diff --git a/loleaflet/src/control/Control.MobileWizardBuilder.js b/loleaflet/src/control/Control.MobileWizardBuilder.js
index 63becd7be2..9f7aecead8 100644
--- a/loleaflet/src/control/Control.MobileWizardBuilder.js
+++ b/loleaflet/src/control/Control.MobileWizardBuilder.js
@@ -18,6 +18,84 @@ L.Control.MobileWizardBuilder = L.Control.JSDialogBuilder.extend({
this._controlHandlers['frame'] = this._frameHandler;
this._controlHandlers['listbox'] = this._listboxControl;
this._controlHandlers['checkbox'] = this._checkboxControl;
+ this._controlHandlers['basespinfield'] = this.baseSpinField;
+ },
+
+ baseSpinField: function(parentContainer, data, builder, customCallback) {
+ var controls = {};
+ if (data.label) {
+ var fixedTextData = { text: data.label };
+ builder._fixedtextControl(parentContainer, fixedTextData, builder);
+ }
+
+ console.debug('baseSpinField: ' + data.id);
+
+ var div = L.DomUtil.create('div', 'spinfieldcontainer', parentContainer);
+ div.id = data.id;
+ controls['container'] = div;
+
+ var commandName = data.id ? data.id.substring('.uno:'.length) : data.id;
+ if (commandName && commandName.length && L.LOUtil.existsIconForCommand(commandName, builder.map.getDocType())) {
+ var image = L.DomUtil.create('img', 'spinfieldimage', div);
+ var icon = (data.id === 'Transparency') ? builder._createIconURL('settransparency') : builder._createIconURL(data.id);
+ image.src = icon;
+ icon.alt = '';
+ }
+
+ var spinfield = L.DomUtil.create('input', 'spinfield', div);
+ spinfield.type = 'number';
+ controls['spinfield'] = spinfield;
+
+ if (data.unit) {
+ var unit = L.DomUtil.create('span', 'spinfieldunit', div);
+ unit.innerHTML = builder._unitToVisibleString(data.unit);
+ }
+
+ var controlsContainer = L.DomUtil.create('div', 'spinfieldcontrols', div);
+ var minus = L.DomUtil.create('div', 'minus', controlsContainer);
+ minus.innerHTML = '-';
+
+ var plus = L.DomUtil.create('div', 'plus', controlsContainer);
+ plus.innerHTML = '+';
+
+ if (data.min != undefined)
+ $(spinfield).attr('min', data.min);
+
+ if (data.max != undefined)
+ $(spinfield).attr('max', data.max);
+
+ if (data.enabled == 'false') {
+ $(spinfield).attr('disabled', 'disabled');
+ $(image).addClass('disabled');
+ }
+
+ if (data.readOnly === true)
+ $(spinfield).attr('readOnly', 'true');
+
+ if (data.hidden)
+ $(spinfield).hide();
+
+ plus.addEventListener('click', function() {
+ var attrdisabled = $(spinfield).attr('disabled');
+ if (attrdisabled !== 'disabled') {
+ if (customCallback)
+ customCallback('spinfield', 'plus', div, this.value, builder);
+ else
+ builder.callback('spinfield', 'plus', div, this.value, builder);
+ }
+ });
+
+ minus.addEventListener('click', function() {
+ var attrdisabled = $(spinfield).attr('disabled');
+ if (attrdisabled !== 'disabled') {
+ if (customCallback)
+ customCallback('spinfield', 'minus', div, this.value, builder);
+ else
+ builder.callback('spinfield', 'minus', div, this.value, builder);
+ }
+ });
+
+ return controls;
},
_swapControls: function(controls, indexA, indexB) {