@qooxdoo/framework
Version:
The JS Framework for Coders
143 lines (118 loc) • 3.67 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)
* Fabian Jakobs (fjakobs)
************************************************************************ */
/**
* Renders a special radio button inside a menu. The button behaves like
* a normal {@link qx.ui.form.RadioButton} and shows a radio icon when
* checked; normally shows no icon when not checked (depends on the theme).
*/
qx.Class.define("qx.ui.menu.RadioButton", {
extend: qx.ui.menu.AbstractButton,
include: [qx.ui.form.MModelProperty],
implement: [
qx.ui.form.IRadioItem,
qx.ui.form.IBooleanForm,
qx.ui.form.IModel
],
/*
*****************************************************************************
CONSTRUCTOR
*****************************************************************************
*/
/**
* @param label {String} Initial label
* @param menu {qx.ui.menu.Menu} Initial sub menu
*/
construct(label, menu) {
super();
// 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);
// Initialize with incoming arguments
if (label != null) {
this.setLabel(label);
}
if (menu != null) {
this.setMenu(menu);
}
this.addListener("execute", this._onExecute, this);
},
/*
*****************************************************************************
PROPERTIES
*****************************************************************************
*/
properties: {
// overridden
appearance: {
refine: true,
init: "menu-radiobutton"
},
/** The value of the widget. True, if the widget is checked. */
value: {
check: "Boolean",
nullable: true,
event: "changeValue",
apply: "_applyValue",
init: false
},
/** The assigned qx.ui.form.RadioGroup which handles the switching between registered buttons */
group: {
check: "qx.ui.form.RadioGroup",
nullable: true,
apply: "_applyGroup"
}
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
/* eslint-disable @qooxdoo/qx/no-refs-in-members */
members: {
// overridden (from MExecutable to keep the icon out of the binding)
/**
* @lint ignoreReferenceField(_bindableProperties)
*/
_bindableProperties: ["enabled", "label", "toolTipText", "value", "menu"],
// property apply
_applyValue(value, old) {
value ? this.addState("checked") : this.removeState("checked");
// ARIA attrs
this.getContentElement().setAttribute("aria-checked", Boolean(value));
},
// property apply
_applyGroup(value, old) {
if (old) {
old.remove(this);
}
if (value) {
value.add(this);
}
},
/**
* Handler for the execute event.
*
* @param e {qx.event.type.Event} The execute event.
*/
_onExecute(e) {
var grp = this.getGroup();
if (grp && grp.getAllowEmptySelection()) {
this.toggleValue();
} else {
this.setValue(true);
}
}
}
});