form-js
Version:
Create better ui form elements. Supports IE9+, all modern browsers, and mobile.
121 lines (108 loc) • 4.37 kB
JavaScript
'use strict';
import _ from 'underscore';
import FormElementGroup from './form-element-group';
/**
* A callback function that fires when one of the radio button elements are selected
* @callback Radios~onChange
* @param {string} value - The value of the input element that was changed
* @param {HTMLInputElement} input - The input element that was changed
* @param {HTMLElement} UIElement - The container of the input element that was changed
*/
/**
* Groups radio buttons elements.
* @class Radios
* @extends FormElement
*/
class Radios extends FormElementGroup {
/**
* Initialization.
* @param {object} options - Options passed into instance
* @param {Array|HTMLInputElement} options.inputs - The collection of radio input elements
* @param {Radios~onChange} [options.onChange] - A callback function that fires when one of the toggle elements are selected
* @param {string} [options.containerClass] - The css class that will be applied to each toggle item's container
* @param {string} [options.inputClass] - The css class that will be applied to each toggle item (input element)
* @param {string} [options.selectedClass] - The css class that will be applied to a radio button item (UI-version) when it is selected
* @param {string} [options.disabledClass] - The css class that will be applied to a radio button item (UI-version) when it is disabled
* @param {string|Array} [options.value] - The string matching the name attribute of the toggle button to have selected initially (or an array of such strings)
*/
constructor (options) {
options = _.extend({
inputs: [],
onChange: null,
containerClass: 'ui-radio',
inputClass: 'ui-radio-input',
selectedClass: 'ui-radio-selected',
disabledClass: 'ui-radio-disabled',
value: null
}, options);
super(options);
this.options = options;
}
/**
* When one of the radio input elements are clicked.
* @param {HTMLInputElement} formElement - The radio button element
* @param {HTMLElement} UIElement - The ui element
* @private
*/
_onFormElementClick (formElement, UIElement) {
if (this._lastRadioClicked !== formElement) {
this.triggerAll((formEl, UIEl) => {
if (!formEl.checked) {
UIEl.classList.remove(this.options.selectedClass);
} else {
UIEl.classList.add(this.options.selectedClass);
}
});
this._lastRadioClicked = formElement;
this.triggerChange(formElement, UIElement);
}
}
/**
* When one of the radio UI elements are clicked.
* @param {HTMLInputElement} formElement - The radio button element
* @param {HTMLElement} UIElement - The ui element
* @private
*/
_onUIElementClick (formElement, UIElement) {
if (this._lastRadioClicked !== formElement) {
this.triggerAll((formEl, UIEl) => {
if (formEl !== formElement) {
UIEl.classList.remove(this.options.selectedClass);
formEl.checked = false;
} else {
UIEl.classList.add(this.options.selectedClass);
formEl.checked = true;
}
});
this._lastRadioClicked = formElement;
this.triggerChange(formElement, UIElement);
}
}
/**
* Selects the toggle item.
* @param {Number} index - The index of the toggle item
*/
select (index) {
var input = this.getFormElement(index),
toggle = this.getUIElement(index);
if (!input.checked) {
input.checked = true;
toggle.classList.add(this.options.selectedClass);
this.triggerChange(input, toggle);
}
this.triggerAll(function (formElement, UIElement, idx) {
if (!formElement.checked) {
// deselect all other toggles if they are radio buttons
this.deselect(idx);
}
}.bind(this));
}
/**
* Gets the unique identifier for radio buttons.
* @returns {string}
*/
getElementKey () {
return 'radios';
}
}
module.exports = Radios;