SWAMPy

✎ CARVE FLESH

EDITING: d89695009d4cef27cd8e3b5e9f717c842aab5157

/**
 * RadioGroup widget
 *
 * @param {H5P.jQuery} $
 */
H5PEditor.RadioGroup = H5PEditor.widgets.radioGroup = (function ($) {

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

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 d89695009d4cef27cd8e3b5e9f717c842aab5157	?	2.9 KB	2023-08-03 13:28	EDIT