Code cleanup

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();

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
 	};
 

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 = "<input type=\"" + this._type + "\" id=\"" + id + "\">";
+				const inputHTML = "<input type=\"" + this.type + "\" id=\"" + id + "\">";
 				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;

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;

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);
 		}