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;
}
/* alex */
/* slider */
input[type="range"].vertical {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Chromium */
@ -236,14 +236,13 @@ input[type="range"].vertical {
height: 310px;
padding: 0 5px;
}
/*
.elevatorslider::-webkit-slider-thumb {
-webkit-appearance: none;
/* .elevatorslider::-webkit-slider-thumb {
appearance: none;
width: 23px;
height: 24px;
border: 0;
background: url("../MapComplete/assets/svg/bug.svg");
background: url("/assets/svg/bug.svg") !important;
cursor: pointer;
}
@ -251,9 +250,9 @@ input[type="range"].vertical {
width: 23px;
height: 25px;
border: 0;
background: url("../MapComplete/assets/svg/bug.svg");
background: url("/assets/svg/bug.svg") !important;
cursor: pointer;
} */
} */
.border-detail {
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 { FixedInputElement } from "./UI/Input/FixedInputElement";
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"]
let slider = new Slider(0, testData.length - 1);
const values = testData.map((data) => new FixedUiElement(data).onClick(() => {
values.map((val) => {
val.RemoveClass("active bg-blue-200")
if (val.content === data) {
const options = {
value : new UIEventSource<number>(testData.indexOf(val.content)),
}
val.SetClass("active bg-blue-200")
const newSlider = new Slider(0, testData.length-1, options).SetClass("flex vertical m-4 elevatorslider");
new Combine([valCombine, newSlider]).SetClass("flex flex-row h-10").AttachTo("extradiv")
console.log(slider.GetValue())
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
}
})
}).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())
// valCombine.AttachTo("maindiv")
const slider = new Slider(0, testData.length-1);
slider.SetClass("flex vertical m-4 elevatorslider")
new Combine([valCombine, slider]).SetClass("flex flex-row h-10").AttachTo("extradiv")
console.log(slider)