diff --git a/src/js/stendhal/ui/toolkit/Component.ts b/src/js/stendhal/ui/toolkit/Component.ts
index dad5071375..21440a9c48 100644
--- a/src/js/stendhal/ui/toolkit/Component.ts
+++ b/src/js/stendhal/ui/toolkit/Component.ts
@@ -27,10 +27,10 @@ export abstract class Component extends ComponentBase {
/**
* Creates a new component.
*
- * @param el
+ * @param {string|HTMLElement} el
* DOM element or ID of HTML element or template.
- * @param themable
- * Inherits theming visuals (default: `false`).
+ * @param {boolean} [themable=false]
+ * Inherits theming visuals.
*/
constructor(el: string|HTMLElement, themable=false) {
super();
diff --git a/src/js/stendhal/ui/toolkit/ComponentBase.ts b/src/js/stendhal/ui/toolkit/ComponentBase.ts
index f8979d8284..f1373f4258 100644
--- a/src/js/stendhal/ui/toolkit/ComponentBase.ts
+++ b/src/js/stendhal/ui/toolkit/ComponentBase.ts
@@ -29,7 +29,7 @@ export abstract class ComponentBase {
/**
* Instructions when component should be refreshed.
*/
- public refresh() {
+ refresh() {
// does nothing in the implementation
};
diff --git a/src/js/stendhal/ui/toolkit/SettingsComponent.ts b/src/js/stendhal/ui/toolkit/SettingsComponent.ts
index d3b543edb5..9372e40d37 100644
--- a/src/js/stendhal/ui/toolkit/SettingsComponent.ts
+++ b/src/js/stendhal/ui/toolkit/SettingsComponent.ts
@@ -39,20 +39,20 @@ export class SettingsComponent extends WidgetComponent {
* DOM element ID.
* @param {string} label
* Text label to display.
- * @param {WidgetType} [_type=WidgetType.CHECK]
+ * @param {WidgetType} [type=WidgetType.CHECK]
* The type of this component. E.g. check box, text input, etc.
* @param {OptionsEnum} [options={}]
* Options for multi-select enumeration.
* @param {boolean} [experimental=false]
* Marks this element to be hidden unless settings debugging is enabled.
*/
- constructor(id: string, label: string, _type=WidgetType.CHECK, options: OptionsEnum={},
+ constructor(id: string, label: string, type=WidgetType.CHECK, options: OptionsEnum={},
experimental=false) {
- super(_type);
+ super(type);
// create label first
this.labelElement = document.createElement("label") as HTMLLabelElement;
- if (WidgetType.SELECT === _type) {
+ if (WidgetType.SELECT === type) {
this.componentElement = this.initSelect(id, label, options);
} else {
this.componentElement = this.initInput(id, label);
@@ -77,10 +77,10 @@ export class SettingsComponent extends WidgetComponent {
*/
private initInput(id: string, label: string): HTMLElement {
let componentElement: HTMLElement;
- switch(this._type) {
+ switch(this.type) {
case WidgetType.CHECK:
this.labelElement.classList.add("checksetting");
- const inputHTML = "";
+ const inputHTML = "";
this.labelElement.innerHTML = inputHTML + label;
componentElement = this.labelElement.querySelector("#" + id)!;
break;
@@ -89,7 +89,7 @@ export class SettingsComponent extends WidgetComponent {
this.labelElement.innerText = label;
componentElement = document.createElement("input");
const inputElement = (componentElement as HTMLInputElement);
- inputElement.type = this._type;
+ inputElement.type = this.type;
inputElement.id = id;
}
return componentElement;
@@ -122,7 +122,7 @@ export class SettingsComponent extends WidgetComponent {
}
override refresh() {
- if (WidgetType.CHECK === this._type && this.tooltip) {
+ if (WidgetType.CHECK === this.type && this.tooltip) {
this.tooltip.setState(this.getValue() as boolean);
}
}
@@ -134,8 +134,8 @@ export class SettingsComponent extends WidgetComponent {
* Index to set as selected.
*/
setSelected(idx: number) {
- if (WidgetType.SELECT !== this._type) {
- throw new Error("Settings component of type \"" + this._type
+ if (WidgetType.SELECT !== this.type) {
+ throw new Error("Settings component of type \"" + this.type
+ "\" does not support index selection");
}
const selectElement = this.componentElement as HTMLSelectElement;
@@ -155,7 +155,7 @@ export class SettingsComponent extends WidgetComponent {
* New value to be used.
*/
setValue(value: string|number|boolean) {
- switch(this._type) {
+ switch(this.type) {
case WidgetType.SELECT:
const options = Array.from((this.componentElement as HTMLSelectElement).options)
.map(o => o.value);
@@ -184,7 +184,7 @@ export class SettingsComponent extends WidgetComponent {
* Component value.
*/
getValue(): string|number|boolean {
- switch(this._type) {
+ switch(this.type) {
case WidgetType.SELECT:
// selected number index
return (this.componentElement as HTMLSelectElement).selectedIndex;
@@ -208,8 +208,8 @@ export class SettingsComponent extends WidgetComponent {
* Value the option represents.
*/
addOption(label: string, value="") {
- if (WidgetType.SELECT !== this._type) {
- throw new Error("Settings component of type \"" + this._type
+ if (WidgetType.SELECT !== this.type) {
+ throw new Error("Settings component of type \"" + this.type
+ "\" does not support adding selection options");
}
if (!value) {
@@ -223,12 +223,24 @@ export class SettingsComponent extends WidgetComponent {
selectElement.appendChild(opt);
}
- override setTooltip(tooltip: string|Tooltip, second?: string, primary=true) {
+ /**
+ * Applies tooltip text to HTML element.
+ *
+ * @param {string|Tooltip} tooltip
+ * Tooltip object or primary text.
+ * @param {string=} second
+ * Optional secondary text.
+ */
+ override setTooltip(tooltip: string|Tooltip, second?: string) {
if (typeof(tooltip) === "string") {
let element = this.componentElement;
- if (WidgetType.SELECT !== this._type) {
+ if (WidgetType.SELECT !== this.type) {
element = this.labelElement;
}
+ let primary = true;
+ if (WidgetType.CHECK === this.type) {
+ primary = this.getValue() as boolean;
+ }
this.tooltip = new Tooltip(element, tooltip as string, second, primary);
} else {
this.tooltip = tooltip as Tooltip;
diff --git a/src/js/stendhal/ui/toolkit/SliderComponent.ts b/src/js/stendhal/ui/toolkit/SliderComponent.ts
index b562276e23..973314f970 100644
--- a/src/js/stendhal/ui/toolkit/SliderComponent.ts
+++ b/src/js/stendhal/ui/toolkit/SliderComponent.ts
@@ -47,7 +47,7 @@ export class SliderComponent extends WidgetComponent {
this.labelElement.htmlFor = id;
this.labelElement.innerText = label;
const componentElement = document.createElement("input") as HTMLInputElement;
- componentElement.type = this._type;
+ componentElement.type = this.type;
componentElement.id = id;
componentElement.min = ""+min;
componentElement.max = ""+max;
diff --git a/src/js/stendhal/ui/toolkit/WidgetComponent.ts b/src/js/stendhal/ui/toolkit/WidgetComponent.ts
index 16ce44e1bb..5444d3ec9e 100644
--- a/src/js/stendhal/ui/toolkit/WidgetComponent.ts
+++ b/src/js/stendhal/ui/toolkit/WidgetComponent.ts
@@ -23,7 +23,7 @@ export abstract class WidgetComponent extends ComponentBase {
/** Text description. */
abstract labelElement: HTMLLabelElement;
/** Setting type. */
- protected readonly _type: WidgetType;
+ protected readonly type: WidgetType;
/** Called when the settings state or value changes. */
public onchange?: Function;
@@ -33,12 +33,12 @@ export abstract class WidgetComponent extends ComponentBase {
/**
* Creates a widget component.
*
- * @param {WidgetType} _type
+ * @param {WidgetType} type
* Widget type.
*/
- constructor(_type: WidgetType) {
+ constructor(type: WidgetType) {
super();
- this._type = _type;
+ this.type = type;
}
/**
@@ -75,7 +75,7 @@ export abstract class WidgetComponent extends ComponentBase {
const parentElement = isComponent ? this.parentComponent!.componentElement
: parent as HTMLElement;
parentElement.appendChild(this.labelElement);
- if (WidgetType.CHECK !== this._type) {
+ if (WidgetType.CHECK !== this.type) {
// check box component element is already child of label
parentElement.appendChild(this.componentElement);
}