forked from MapComplete/MapComplete
32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
import { max } from "moment";
|
|
import { Store, UIEventSource } from "./Logic/UIEventSource"
|
|
import Combine from "./UI/Base/Combine";
|
|
import { FixedUiElement } from "./UI/Base/FixedUiElement";
|
|
import { VariableUiElement } from "./UI/Base/VariableUIElement";
|
|
import { FixedInputElement } from "./UI/Input/FixedInputElement";
|
|
import Slider from "./UI/Input/Slider";
|
|
import Toggle, { ClickableToggle } from "./UI/Input/Toggle";
|
|
|
|
const testData = ["-1", "0", "0.5", "1", "1.5", "2"]
|
|
let slider = new Slider(0, testData.length - 1, {vertical: true});
|
|
|
|
const toggleClass = "flex border-2 border-blue-500 rounded-full w-10 h-10 place-content-center items-center"
|
|
|
|
const values = testData.map((data, i) => new ClickableToggle(
|
|
new FixedUiElement(data).SetClass("active bg-subtle " + toggleClass), new FixedUiElement(data).SetClass(toggleClass), slider.GetValue().sync(
|
|
(sliderVal) => {
|
|
return sliderVal === i
|
|
},
|
|
[],
|
|
(isSelected) => {
|
|
return isSelected ? i : slider.GetValue().data
|
|
}
|
|
))
|
|
.ToggleOnClick()
|
|
.SetClass("flex flex-column bg-slate-200 m-2 w-10 h-10"))
|
|
|
|
const valCombine = new Combine(values.reverse())
|
|
|
|
slider.SetClass("flex m-4 elevatorslider mb-0").SetStyle("height: "+3.25*testData.length+"rem")
|
|
|
|
new Combine([valCombine.SetClass("mt-8"), slider]).SetClass("flex flex-row h-14").AttachTo("extradiv")
|