jsdialog: radiobutton updates private/eszkadev/radiobuttons

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 <szymon.klos@collabora.com>

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) {