118 lines
2.9 KiB
JavaScript
118 lines
2.9 KiB
JavaScript
/**
|
|
* RadioGroup widget
|
|
*
|
|
* @param {H5P.jQuery} $
|
|
*/
|
|
H5PEditor.RadioGroup = H5PEditor.widgets.radioGroup = (function ($) {
|
|
|
|
var groupCounter = 0;
|
|
/**
|
|
* Creates an radio button group.
|
|
*
|
|
* @class H5PEditor.ImageRadioButtonGroup
|
|
* @param {Object} parent
|
|
* @param {Object} field
|
|
* @param {Object} params
|
|
* @param {function} setValue
|
|
*/
|
|
function RadioGroup(parent, field, params, setValue) {
|
|
this.parent = parent;
|
|
this.field = field;
|
|
this.value = params;
|
|
this.setValue = setValue;
|
|
|
|
this.alignment = this.field.alignment || 'vertical';
|
|
|
|
// Setup event dispatching on change
|
|
this.changes = [];
|
|
this.triggerListeners = function () {
|
|
// Run callbacks
|
|
for (var i = 0; i < this.changes.length; i++) {
|
|
this.changes[i](this.value);
|
|
}
|
|
};
|
|
|
|
groupCounter++;
|
|
}
|
|
|
|
/**
|
|
* Append the field to the wrapper.
|
|
* @public
|
|
* @param {H5P.jQuery} $wrapper
|
|
*/
|
|
RadioGroup.prototype.appendTo = function ($wrapper) {
|
|
var self = this;
|
|
|
|
var buttons = [];
|
|
|
|
var toggleSelected = function ($selectedInput) {
|
|
buttons.forEach(function ($button) {
|
|
$button.removeClass('checked');
|
|
});
|
|
|
|
$selectedInput.parent().addClass('checked');
|
|
};
|
|
|
|
self.$container = $(H5PEditor.createFieldMarkup(
|
|
self.field,
|
|
'<div class="h5p-editor-radio-group-container ' + self.alignment + '" role="radiogroup"></div>'
|
|
));
|
|
|
|
var $buttonGroup = self.$container.find('.h5p-editor-radio-group-container');
|
|
|
|
for (var i = 0; i < self.field.options.length; i++) {
|
|
var option = self.field.options[i];
|
|
var inputId = 'h5p-editor-radio-group-button-' + groupCounter + '-' + i;
|
|
var isChecked = (self.value === option.value) ||
|
|
(self.value === undefined && this.field.default === option.value);
|
|
|
|
var $button = $('<div>', {
|
|
'class': 'h5p-editor-radio-group-button ' + option.value + (isChecked ? ' checked' : '')
|
|
}).appendTo($buttonGroup);
|
|
buttons.push($button);
|
|
|
|
$('<input>', {
|
|
type: 'radio',
|
|
name: self.field.name + groupCounter,
|
|
value: option.value,
|
|
role: 'radio',
|
|
id: inputId,
|
|
checked: isChecked,
|
|
change: function () {
|
|
toggleSelected($(this));
|
|
self.value = $('input:checked', $buttonGroup).val();
|
|
self.setValue(self.field, self.value);
|
|
self.triggerListeners();
|
|
}
|
|
}).appendTo($button);
|
|
|
|
$('<label>', {
|
|
'for': inputId
|
|
}).append($('<span>', {
|
|
html: option.label
|
|
})).appendTo($button);
|
|
|
|
if (option.description) {
|
|
$('<div>', {
|
|
'class': 'h5p-option-description',
|
|
html: option.description
|
|
}).appendTo($button);
|
|
}
|
|
}
|
|
|
|
self.$container.appendTo($wrapper);
|
|
};
|
|
|
|
|
|
/**
|
|
* Validate the current values.
|
|
*/
|
|
RadioGroup.prototype.validate = function () {
|
|
return true;
|
|
};
|
|
|
|
RadioGroup.prototype.remove = function () {};
|
|
|
|
return RadioGroup;
|
|
})(H5P.jQuery);
|