diff options
author | Szymon Kłos <szymon.klos@collabora.com> | 2020-12-08 16:49:25 +0100 |
---|---|---|
committer | Szymon Kłos <eszkadev@gmail.com> | 2020-12-09 13:24:02 +0100 |
commit | e5df7bc40165857f4da69b54222abdf2ac9d2bbb (patch) | |
tree | bf837c957640a190437df42515c039bc3a369b83 | |
parent | jsdialog: handle collapsed state of dialog (diff) | |
download | online-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.css | 2 | ||||
-rw-r--r-- | loleaflet/src/control/Control.JSDialogBuilder.js | 183 | ||||
-rw-r--r-- | loleaflet/src/control/Control.MobileWizardBuilder.js | 78 |
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) { |