From 3286197a5f5610497ccfc2f17c17fff115e21916 Mon Sep 17 00:00:00 2001 From: Szymon Kłos Date: Wed, 30 Dec 2020 14:45:52 +0100 Subject: jsdialog: radiobutton updates MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit jsdialog updates require main container for control to have id equal to the widget id. In case of radiobutton it wasn't true. Fix it for desktop for now and leave for mobile as is (used in cypress tests - so needs reworking) Change-Id: I9220b289185ff6a72ea08360f0fa0570db40f95b Signed-off-by: Szymon Kłos --- loleaflet/src/control/Control.JSDialogBuilder.js | 7 +++-- .../src/control/Control.MobileWizardBuilder.js | 33 ++++++++++++++++++++++ 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js index 938045cdc0..7869e4473e 100644 --- a/loleaflet/src/control/Control.JSDialogBuilder.js +++ b/loleaflet/src/control/Control.JSDialogBuilder.js @@ -902,10 +902,11 @@ L.Control.JSDialogBuilder = L.Control.extend({ }, _radiobuttonControl: function(parentContainer, data, builder) { - var container = L.DomUtil.createWithId('div', data.id + '-container', parentContainer); + var container = L.DomUtil.createWithId('div', data.id, parentContainer); L.DomUtil.addClass(container, 'radiobutton'); + L.DomUtil.addClass(container, builder.options.cssClass); - var radiobutton = L.DomUtil.createWithId('input', data.id, container); + var radiobutton = L.DomUtil.create('input', '', container); radiobutton.type = 'radio'; if (data.group) @@ -922,7 +923,7 @@ L.Control.JSDialogBuilder = L.Control.extend({ $(radiobutton).prop('checked', true); radiobutton.addEventListener('change', function() { - builder.callback('radiobutton', 'change', radiobutton, this.checked, builder); + builder.callback('radiobutton', 'change', container, this.checked, builder); }); if (data.hidden) diff --git a/loleaflet/src/control/Control.MobileWizardBuilder.js b/loleaflet/src/control/Control.MobileWizardBuilder.js index c3509bb894..186f48396e 100644 --- a/loleaflet/src/control/Control.MobileWizardBuilder.js +++ b/loleaflet/src/control/Control.MobileWizardBuilder.js @@ -19,6 +19,7 @@ L.Control.MobileWizardBuilder = L.Control.JSDialogBuilder.extend({ this._controlHandlers['listbox'] = this._listboxControl; this._controlHandlers['checkbox'] = this._checkboxControl; this._controlHandlers['basespinfield'] = this.baseSpinField; + this._controlHandlers['radiobutton'] = this._radiobuttonControl; }, baseSpinField: function(parentContainer, data, builder, customCallback) { @@ -237,6 +238,38 @@ L.Control.MobileWizardBuilder = L.Control.JSDialogBuilder.extend({ return false; }, + // TODO: use the same handler as desktop one + _radiobuttonControl: function(parentContainer, data, builder) { + var container = L.DomUtil.createWithId('div', data.id + '-container', parentContainer); + L.DomUtil.addClass(container, 'radiobutton'); + L.DomUtil.addClass(container, builder.options.cssClass); + + var radiobutton = L.DomUtil.createWithId('input', data.id, container); + radiobutton.type = 'radio'; + + if (data.group) + radiobutton.name = data.group; + + var radiobuttonLabel = L.DomUtil.create('label', '', container); + radiobuttonLabel.innerHTML = builder._cleanText(data.text); + radiobuttonLabel.for = data.id; + + if (data.enabled === 'false' || data.enabled === false) + $(radiobutton).attr('disabled', 'disabled'); + + if (data.checked === 'true' || data.checked === true) + $(radiobutton).prop('checked', true); + + radiobutton.addEventListener('change', function() { + builder.callback('radiobutton', 'change', radiobutton, this.checked, builder); + }); + + if (data.hidden) + $(radiobutton).hide(); + + return false; + }, + build: function(parent, data) { this._amendJSDialogData(data); for (var childIndex in data) { -- cgit