weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added switch toggle

Browse Source
This commit is contained in:
Pax1601
2023-05-27 10:06:34 +02:00
parent 9586910f03
commit 45bb49cfe1
18 changed files with 449 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/controls/airbasecontextmenu.ts
View File

@@ -24,7 +24,7 @@ export class AirbaseContextMenu extends ContextMenu {
this.setProperties(airbase.getProperties());
this.setParkings(airbase.getParkings());
this.setCoalition(airbase.getCoalition());
this.enableLandButton(getUnitsManager().getSelectedUnitsType() === "Aircraft" && (getUnitsManager().getSelectedUnitsCoalition() === airbase.getCoalition() || airbase.getCoalition() === "neutral"))
this.enableLandButton(getUnitsManager().getSelectedUnitsTypes().length == 1 && getUnitsManager().getSelectedUnitsTypes()[0] === "Aircraft" && (getUnitsManager().getSelectedUnitsCoalition() === airbase.getCoalition() || airbase.getCoalition() === "neutral"))
}
setName(airbaseName: string) {

21
client/src/controls/control.ts Normal file
View File

@@ -0,0 +1,21 @@
export class Control {
#container: HTMLElement | null;
constructor(ID: string) {
this.#container = document.getElementById(ID);
}
show() {
if (this.#container != null)
this.#container.classList.remove("hide");
}
hide() {
if (this.#container != null)
this.#container.classList.add("hide");
}
getContainer() {
return this.#container;
}
}

57
client/src/controls/slider.ts
View File

@@ -1,50 +1,40 @@
export class Slider {
#container: HTMLElement | null;
import { zeroPad } from "../other/utils";
import { Control } from "./control";
export class Slider extends Control {
#callback: CallableFunction;
#slider: HTMLInputElement | null = null;
#valueText: HTMLElement | null = null;
#minValue: number;
#maxValue: number;
#increment: number;
#minValueDiv: HTMLElement | null = null;
#maxValueDiv: HTMLElement | null = null;
#minMaxValueDiv: HTMLElement | null = null;
#unit: string;
#display: string = "";
#dragged: boolean = false;
#value: number = 0;
constructor(ID: string, minValue: number, maxValue: number, unit: string, callback: CallableFunction) {
this.#container = document.getElementById(ID);
super(ID);
this.#callback = callback;
this.#minValue = minValue;
this.#maxValue = maxValue;
this.#increment = 1;
this.#unit = unit;
if (this.#container != null) {
this.#display = this.#container.style.display;
this.#slider = <HTMLInputElement>this.#container.querySelector("input");
if (this.#slider != null) {
this.#slider.addEventListener("input", (e: any) => this.#onInput());
this.#slider.addEventListener("mousedown", (e: any) => this.#onStart());
this.#slider.addEventListener("mouseup", (e: any) => this.#onFinalize());
}
this.#valueText = <HTMLElement>this.#container.querySelector("#value");
this.#slider = this.getContainer()?.querySelector("input") as HTMLInputElement;
if (this.#slider != null) {
this.#slider.addEventListener("input", (e: any) => this.#onInput());
this.#slider.addEventListener("mousedown", (e: any) => this.#onStart());
this.#slider.addEventListener("mouseup", (e: any) => this.#onFinalize());
}
}
show() {
if (this.#container != null)
this.#container.style.display = this.#display;
}
hide() {
if (this.#container != null)
this.#container.style.display = 'none';
this.#valueText = this.getContainer()?.querySelector(".ol-slider-value") as HTMLElement;
this.#minMaxValueDiv = this.getContainer()?.querySelector(".ol-slider-min-max") as HTMLElement;
}
setActive(newActive: boolean) {
if (this.#container && !this.#dragged) {
this.#container.classList.toggle("active", newActive);
if (!this.#dragged) {
this.getContainer()?.classList.toggle("active", newActive);
if (!newActive && this.#valueText != null)
this.#valueText.innerText = "Mixed values";
}
@@ -54,6 +44,10 @@ export class Slider {
this.#minValue = newMinValue;
this.#maxValue = newMaxValue;
this.#updateMax();
if (this.#minMaxValueDiv != null) {
this.#minMaxValueDiv.setAttribute('data-min-value', `${this.#minValue}${this.#unit}`);
this.#minMaxValueDiv.setAttribute('data-max-value', `${this.#maxValue}${this.#unit}`);
}
}
setIncrement(newIncrement: number) {
@@ -88,7 +82,16 @@ export class Slider {
#onValue() {
if (this.#valueText != null && this.#slider != null)
this.#valueText.innerText = this.#minValue + Math.round(parseFloat(this.#slider.value) / parseFloat(this.#slider.max) * (this.#maxValue - this.#minValue)) + this.#unit
{
var value = this.#minValue + Math.round(parseFloat(this.#slider.value) / parseFloat(this.#slider.max) * (this.#maxValue - this.#minValue));
var strValue = String(value);
if (value > 1000)
strValue = String(Math.floor(value / 1000)) + "," + zeroPad(value - Math.floor(value / 1000) * 1000, 3);
this.#valueText.innerText = strValue + " " + this.#unit.toUpperCase();
var percentValue = parseFloat(this.#slider.value) / parseFloat(this.#slider.max) * 90 + 5;
this.#slider.style.background = 'linear-gradient(to right, var(--accent-light-blue) 5%, var(--accent-light-blue) ' + percentValue + '%, var(--background-grey) ' + percentValue + '%, var(--background-grey) 100%)'
}
this.setActive(true);
}

34
client/src/controls/switch.ts Normal file
View File

@@ -0,0 +1,34 @@
import { Control } from "./control";
export class Switch extends Control {
#value: boolean = false;
constructor(ID: string, initialValue?: boolean) {
super(ID);
this.getContainer()?.addEventListener('click', (e) => this.#onToggle());
this.setValue(initialValue !== undefined? initialValue: true);
/* Add the toggle itself to the document */
const container = this.getContainer();
if (container != undefined){
const width = getComputedStyle(container).width;
const height = getComputedStyle(container).height;
var el = document.createElement("div");
el.classList.add("ol-switch-fill");
el.style.setProperty("--width", width? width: "0px");
el.style.setProperty("--height", height? height: "0px");
this.getContainer()?.appendChild(el);
}
}
setValue(value: boolean) {
this.#value = value;
this.getContainer()?.setAttribute("data-value", String(value));
}
getValue() {
return this.#value;
}
#onToggle() {
this.setValue(!this.getValue());
}
}