@qooxdoo/framework
Version:
The JS Framework for Coders
210 lines (180 loc) • 5.45 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2008 1&1 Internet AG, Germany, http://www.1und1.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Sebastian Werner (wpbasti)
* Andreas Ecker (ecker)
************************************************************************ */
/**
* Radio buttons can be used in radio groups to allow to the user to select
* exactly one item from a list. Radio groups are established by adding
* radio buttons to a radio manager {@link qx.ui.form.RadioGroup}.
*
* Example:
* <pre class="javascript">
* var container = new qx.ui.container.Composite(new qx.ui.layout.VBox);
*
* var female = new qx.ui.form.RadioButton("female");
* var male = new qx.ui.form.RadioButton("male");
*
* var mgr = new qx.ui.form.RadioGroup();
* mgr.add(female, male);
*
* container.add(male);
* container.add(female);
* </pre>
*/
qx.Class.define("qx.ui.form.RadioButton", {
extend: qx.ui.form.Button,
include: [qx.ui.form.MForm, qx.ui.form.MModelProperty],
implement: [
qx.ui.form.IRadioItem,
qx.ui.form.IForm,
qx.ui.form.IBooleanForm,
qx.ui.form.IModel
],
/*
*****************************************************************************
CONSTRUCTOR
*****************************************************************************
*/
/**
* @param label {String?null} An optional label for the radio button.
*/
construct(label) {
if (qx.core.Environment.get("qx.debug")) {
this.assertArgumentsCount(arguments, 0, 1);
}
super(label);
// ARIA attrs
// Important: (Grouped) radio btns should be children of a div with role 'radiogroup'
const contentEl = this.getContentElement();
contentEl.setAttribute("role", "radio");
contentEl.setAttribute("aria-checked", false);
// Add listeners
this.addListener("execute", this._onExecute);
this.addListener("keypress", this._onKeyPress);
},
/*
*****************************************************************************
PROPERTIES
*****************************************************************************
*/
properties: {
/** The assigned qx.ui.form.RadioGroup which handles the switching between registered buttons */
group: {
check: "qx.ui.form.RadioGroup",
nullable: true,
apply: "_applyGroup"
},
/** The value of the widget. True, if the widget is checked. */
value: {
check: "Boolean",
nullable: true,
event: "changeValue",
apply: "_applyValue",
init: false
},
// overridden
appearance: {
refine: true,
init: "radiobutton"
},
// overridden
allowGrowX: {
refine: true,
init: false
}
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
/* eslint-disable @qooxdoo/qx/no-refs-in-members */
members: {
// overridden
/**
* @lint ignoreReferenceField(_forwardStates)
*/
_forwardStates: {
checked: true,
focused: true,
invalid: true,
hovered: true
},
// overridden (from MExecutable to keep the icon out of the binding)
/**
* @lint ignoreReferenceField(_bindableProperties)
*/
_bindableProperties: ["enabled", "label", "toolTipText", "value", "menu"],
/*
---------------------------------------------------------------------------
APPLY ROUTINES
---------------------------------------------------------------------------
*/
// property apply
_applyValue(value, old) {
value ? this.addState("checked") : this.removeState("checked");
this.getContentElement().setAttribute("aria-checked", Boolean(value));
},
/** The assigned {@link qx.ui.form.RadioGroup} which handles the switching between registered buttons */
_applyGroup(value, old) {
if (old) {
old.remove(this);
}
if (value) {
value.add(this);
}
},
/*
---------------------------------------------------------------------------
EVENT-HANDLER
---------------------------------------------------------------------------
*/
/**
* Event listener for the "execute" event.
*
* Sets the property "checked" to true.
*
* @param e {qx.event.type.Event} execute event
*/
_onExecute(e) {
var grp = this.getGroup();
if (grp && grp.getAllowEmptySelection()) {
this.toggleValue();
} else {
this.setValue(true);
}
},
/**
* Event listener for the "keyPress" event.
*
* Selects the previous RadioButton when pressing "Left" or "Up" and
* Selects the next RadioButton when pressing "Right" and "Down"
*
* @param e {qx.event.type.KeySequence} KeyPress event
*/
_onKeyPress(e) {
var grp = this.getGroup();
if (!grp) {
return;
}
switch (e.getKeyIdentifier()) {
case "Left":
case "Up":
grp.selectPrevious();
break;
case "Right":
case "Down":
grp.selectNext();
break;
}
}
}
});