midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

laatste versie levels

Browse source
This commit is contained in:
AlexanderRebai 2022-07-18 09:51:49 +00:00
parent 28f1dc3d33
commit 92bd6414e4
2 changed files with 21 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
index.css
View file

@ -228,7 +228,7 @@ a {
height: min-content; height: min-content;
} }
/* alex */ /* slider */
input[type="range"].vertical { input[type="range"].vertical {
writing-mode: bt-lr; /* IE */ writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Chromium */ -webkit-appearance: slider-vertical; /* Chromium */
@ -236,14 +236,13 @@ input[type="range"].vertical {
height: 310px; height: 310px;
padding: 0 5px; padding: 0 5px;
} }
/*
.elevatorslider::-webkit-slider-thumb { /* .elevatorslider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none; appearance: none;
width: 23px; width: 23px;
height: 24px; height: 24px;
border: 0; border: 0;
background: url("../MapComplete/assets/svg/bug.svg"); background: url("/assets/svg/bug.svg") !important;
cursor: pointer; cursor: pointer;
} }
@ -251,9 +250,9 @@ input[type="range"].vertical {
width: 23px; width: 23px;
height: 25px; height: 25px;
border: 0; border: 0;
background: url("../MapComplete/assets/svg/bug.svg"); background: url("/assets/svg/bug.svg") !important;
cursor: pointer; cursor: pointer;
} */ } */
.border-detail { .border-detail {
border-color: var(--foreground-color); border-color: var(--foreground-color);

33
test.ts
View file

@ -5,32 +5,29 @@ import { FixedUiElement } from "./UI/Base/FixedUiElement";
import { VariableUiElement } from "./UI/Base/VariableUIElement"; import { VariableUiElement } from "./UI/Base/VariableUIElement";
import { FixedInputElement } from "./UI/Input/FixedInputElement"; import { FixedInputElement } from "./UI/Input/FixedInputElement";
import Slider from "./UI/Input/Slider"; import Slider from "./UI/Input/Slider";
import Toggle from "./UI/Input/Toggle"; import Toggle, { ClickableToggle } from "./UI/Input/Toggle";
const testData = ["-1", "0", "0.5", "1", "1.5", "2"] const testData = ["-1", "0", "0.5", "1", "1.5", "2"]
let slider = new Slider(0, testData.length - 1);
const values = testData.map((data) => new FixedUiElement(data).onClick(() => { const toggleClass = "flex border-2 border-blue-500 rounded-full w-10 h-10 place-content-center items-center"
values.map((val) => {
val.RemoveClass("active bg-blue-200") const values = testData.map((data, i) => new ClickableToggle(
if (val.content === data) { new FixedUiElement(data).SetClass("active bg-subtle " + toggleClass), new FixedUiElement(data).SetClass(toggleClass), slider.GetValue().sync(
const options = { (sliderVal) => {
value : new UIEventSource<number>(testData.indexOf(val.content)), return sliderVal === i
} },
val.SetClass("active bg-blue-200") [],
const newSlider = new Slider(0, testData.length-1, options).SetClass("flex vertical m-4 elevatorslider"); (isSelected) => {
new Combine([valCombine, newSlider]).SetClass("flex flex-row h-10").AttachTo("extradiv") return isSelected ? i : slider.GetValue().data
console.log(slider.GetValue())
} }
}) ))
}).SetClass("flex flex-column bg-slate-200 w-10 h-10 border-2 border-blue-500 border-solid rounded-full place-content-center items-center m-4")) .ToggleOnClick()
.SetClass("flex flex-column bg-slate-200 m-4 w-10 h-10"))
const valCombine = new Combine(values.reverse()) const valCombine = new Combine(values.reverse())
// valCombine.AttachTo("maindiv")
const slider = new Slider(0, testData.length-1);
slider.SetClass("flex vertical m-4 elevatorslider") slider.SetClass("flex vertical m-4 elevatorslider")
new Combine([valCombine, slider]).SetClass("flex flex-row h-10").AttachTo("extradiv") new Combine([valCombine, slider]).SetClass("flex flex-row h-10").AttachTo("extradiv")
console.log(slider)