@bokeh/bokehjs
Version:
Interactive, novel data visualization
75 lines • 2.59 kB
JavaScript
import { ToggleInput, ToggleInputView } from "./toggle_input";
import { IconLike } from "../common/kinds";
import { apply_icon } from "../common/resolve";
import { div, undisplay } from "../../core/dom";
import * as icons_css from "../../styles/icons.css";
import * as switch_css from "../../styles/widgets/switch.css";
export class SwitchView extends ToggleInputView {
static __name__ = "SwitchView";
icon_el;
body_el;
bar_el;
knob_el;
stylesheets() {
return [...super.stylesheets(), icons_css.default, switch_css.default];
}
_intrinsic_display() {
return { inner: this.model.flow_mode, outer: "flex" }; // duplicates `display: flex`
}
render() {
super.render();
this.bar_el = div({ class: switch_css.bar });
this.knob_el = div({ class: switch_css.knob, tabIndex: 0 });
this.icon_el = div({ class: switch_css.icon });
this.body_el = div({ class: switch_css.body }, this.bar_el, this.knob_el);
this.shadow_el.append(this.label_el, this.icon_el, this.body_el);
this._update_label();
this._update_active();
this._update_disabled();
this.body_el.addEventListener("click", () => this._toggle_active());
this.knob_el.addEventListener("keydown", (event) => {
switch (event.key) {
case "Enter":
case " ": {
event.preventDefault();
this._toggle_active();
break;
}
default:
}
});
}
_apply_icon(icon) {
if (icon != null) {
const icon_el = div({ class: switch_css.icon });
this.icon_el.replaceWith(icon_el);
this.icon_el = icon_el;
apply_icon(this.icon_el, icon);
}
else {
undisplay(this.icon_el);
}
}
_update_active() {
const { active, on_icon, off_icon } = this.model;
this.el.classList.toggle(switch_css.active, active);
this._apply_icon(active ? on_icon : off_icon);
}
_update_disabled() {
this.el.classList.toggle(switch_css.disabled, this.model.disabled);
}
}
export class Switch extends ToggleInput {
static __name__ = "Switch";
constructor(attrs) {
super(attrs);
}
static {
this.prototype.default_view = SwitchView;
this.define(({ Nullable }) => ({
on_icon: [Nullable(IconLike), null],
off_icon: [Nullable(IconLike), null],
}));
}
}
//# sourceMappingURL=switch.js.map