testing code for slider to change levels
This commit is contained in:
AlexanderRebai
parent
284951f5f7
commit
28f1dc3d33
10 changed files with 601 additions and 448 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import {Utils} from "../Utils";
|
||||
import { Utils } from "../Utils";
|
||||
|
||||
/**
|
||||
* A thin wrapper around a html element, which allows to generate a HTML-element.
|
||||
|
|
@ -39,9 +39,9 @@ export default abstract class BaseUIElement {
|
|||
|
||||
return this;
|
||||
}
|
||||
|
||||
public ScrollToTop(){
|
||||
this._constructedHtmlElement?.scrollTo(0,0)
|
||||
|
||||
public ScrollToTop() {
|
||||
this._constructedHtmlElement?.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -70,10 +70,13 @@ export default abstract class BaseUIElement {
|
|||
return this;
|
||||
}
|
||||
|
||||
public RemoveClass(clss: string): BaseUIElement {
|
||||
if (this.clss.has(clss)) {
|
||||
this.clss.delete(clss);
|
||||
this._constructedHtmlElement?.classList.remove(clss)
|
||||
public RemoveClass(classes: string): BaseUIElement {
|
||||
const all = classes.split(" ").map(clsName => clsName.trim());
|
||||
for (let clss of all) {
|
||||
if (this.clss.has(clss)) {
|
||||
this.clss.delete(clss);
|
||||
this._constructedHtmlElement?.classList.remove(clss)
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
|
|
|||
3
assets/layers/governments/government.svg
Normal file
3
assets/layers/governments/government.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<circle cx="8" cy="8" r="3" fill="#4863A0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 136 B |
59
assets/layers/governments/governments.json
Normal file
59
assets/layers/governments/governments.json
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
{
|
||||
"id": "governments",
|
||||
"name": {
|
||||
"en": "governments"
|
||||
},
|
||||
"source": {
|
||||
"osmTags": {
|
||||
"or": [
|
||||
"office=government"
|
||||
]
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"render": {
|
||||
"en": "Governmental Office {name}"
|
||||
}
|
||||
},
|
||||
"minzoom": 13,
|
||||
"tagRenderings": [
|
||||
"images",
|
||||
"phone",
|
||||
"email",
|
||||
"website",
|
||||
{
|
||||
"question": {
|
||||
"en": "What is the name of this Governmental Office?"
|
||||
},
|
||||
"render": {
|
||||
"en": "This Governmental Office is called {name}"
|
||||
},
|
||||
"freeform": {
|
||||
"key": "name"
|
||||
},
|
||||
"id": "name"
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"title": {
|
||||
"en": "a Governmental Office"
|
||||
},
|
||||
"tags": [
|
||||
"office=government"
|
||||
]
|
||||
}
|
||||
],
|
||||
"mapRendering": [
|
||||
{
|
||||
"icon": {
|
||||
"render": "circle:white;./assets/layers/governments/government.svg"
|
||||
},
|
||||
"iconSize": "40,40,center",
|
||||
"location": [
|
||||
"point",
|
||||
"centroid"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
12
assets/layers/governments/license_info.json
Normal file
12
assets/layers/governments/license_info.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
[
|
||||
{
|
||||
"path": "government.svg",
|
||||
"license": "CC0",
|
||||
"authors": [
|
||||
"OSM Carto"
|
||||
],
|
||||
"sources": [
|
||||
"https://wiki.openstreetmap.org/wiki/File:Office-16.svg"
|
||||
]
|
||||
}
|
||||
]
|
||||
11
assets/themes/governments/crest.svg
Normal file
11
assets/themes/governments/crest.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M397 200C397 308.8 308.8 397 200 397C91.1999 397 3 308.8 3 200C3 91.1999 91.1999 3 200 3C308.8 3 397 91.1999 397 200Z" fill="#22CA60" stroke="#E62222" stroke-width="6"/>
|
||||
<path d="M242.105 240.241L137.282 291.429L155.338 312.97L167.374 327.329L185.428 348.868L254.141 254.6L242.105 240.241Z" fill="#ECF0F1"/>
|
||||
<path d="M138.93 283.603L122.535 283.627L190.077 364.206L192.964 348.067L138.93 283.603Z" fill="#FE5757"/>
|
||||
<path d="M242.105 240.241L224.633 248.772L242.689 270.312L254.141 254.6L242.105 240.241ZM201.309 260.11L177.983 271.447L212.214 312.285L227.45 291.296L201.309 260.11ZM154.752 282.898L137.282 291.429L155.338 312.97L167.374 327.329L185.428 348.868L196.88 333.157L154.754 282.9L154.752 282.898Z" fill="#E62222"/>
|
||||
<path d="M122.535 283.627L190.077 364.206L185.257 368.246L117.714 287.667L122.535 283.627Z" fill="#E62222"/>
|
||||
<path d="M243.871 187.187C241.2 193.219 236.746 198.533 230.685 202.228C214.87 211.87 194.229 206.866 184.586 191.05C180.892 184.991 179.363 178.227 179.755 171.642L162.087 167.358C160.538 178.79 162.721 190.803 169.195 201.422C184.17 225.982 216.219 233.753 240.777 218.78C251.396 212.306 258.87 202.636 262.73 191.761L243.871 187.187Z" fill="#FCFCFF"/>
|
||||
<path d="M220.03 69.1601C228.136 64.2175 230.701 53.639 225.759 45.5323C220.816 37.4256 210.237 34.8606 202.131 39.8032C194.024 44.7458 191.459 55.3243 196.402 63.431C201.344 71.5377 211.923 74.1027 220.03 69.1601Z" fill="#FCFCFF"/>
|
||||
<path d="M250.824 98.9454L218.518 118.642L225.708 88.9832C225.995 88.2028 226.192 87.3988 226.294 86.5735L226.353 86.3324L226.329 86.3268C226.556 84.0714 226.115 81.7309 224.844 79.6478C222.814 76.3168 219.268 74.5145 215.635 74.5114L215.635 74.5081L159.854 75.8435L159.857 75.9264C158.38 76.1088 156.92 76.5767 155.568 77.4013C153.203 78.8428 151.63 81.0604 150.891 83.5185L150.871 83.5137L150.823 83.7119C150.755 83.956 150.696 84.1972 150.645 84.4453L143.544 113.732L143.57 113.739C143.012 116.342 143.389 119.153 144.885 121.608C147.987 126.696 154.623 128.303 159.709 125.202C162.164 123.706 163.786 121.379 164.482 118.809L164.509 118.816L164.574 118.548L164.58 118.522L169.753 97.19L185.053 96.8249L174.632 139.811C170.442 144.547 167.246 149.967 165.048 155.739L182.58 159.99C185.251 153.959 189.705 148.644 195.764 144.951C211.581 135.307 232.221 140.313 241.863 156.128C245.557 162.187 247.086 168.952 246.694 175.536L265.414 180.077C266.655 169.003 264.383 157.449 258.132 147.197C253.744 140 247.883 134.257 241.182 130.094L252.845 122.983L275.833 160.687C278.935 165.775 285.572 167.384 290.66 164.282C295.748 161.18 297.356 154.541 294.255 149.455L265.65 102.538C262.549 97.4527 255.91 95.8446 250.824 98.9454Z" fill="#FCFCFF"/>
|
||||
<path d="M104.007 155.511C105.121 154.899 105.528 153.5 104.917 152.386C104.305 151.272 102.905 150.865 101.791 151.476L95.7395 154.8C91.283 157.248 89.6546 162.845 92.1022 167.301C94.5498 171.758 100.147 173.386 104.603 170.938L130.828 156.535C131.942 155.923 132.349 154.524 131.737 153.41C131.125 152.296 129.726 151.889 128.612 152.501L102.387 166.904C100.159 168.128 97.3605 167.313 96.1367 165.085C94.9129 162.857 95.7272 160.059 97.9554 158.835L104.007 155.511ZM79.7999 168.806C80.914 168.194 81.3211 166.795 80.7092 165.681C80.0973 164.567 78.6981 164.16 77.584 164.772L73.5495 166.988C65.7507 171.271 62.9009 181.066 67.1842 188.864C71.4675 196.663 81.262 199.513 89.0608 195.23L145.544 164.207C146.659 163.595 147.066 162.196 146.454 161.082C145.842 159.968 144.443 159.56 143.329 160.172L86.8449 191.195C81.2743 194.255 74.2783 192.219 71.2187 186.648C68.1592 181.078 70.1948 174.082 75.7654 171.022L79.7999 168.806ZM136.054 185.174C137.168 184.562 137.575 183.163 136.963 182.049C136.351 180.935 134.952 180.528 133.838 181.14L103.579 197.759C99.1225 200.207 97.494 205.803 99.9417 210.26C102.389 214.716 107.986 216.345 112.443 213.897L118.494 210.573C119.608 209.961 120.016 208.562 119.404 207.448C118.792 206.334 117.393 205.927 116.278 206.539L110.227 209.863C107.998 211.086 105.2 210.272 103.976 208.044C102.752 205.816 103.567 203.017 105.795 201.793L136.054 185.174Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
20
assets/themes/governments/governments.json
Normal file
20
assets/themes/governments/governments.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"id": "governments",
|
||||
"title": {
|
||||
"en": "Governmental Offices"
|
||||
},
|
||||
"description": {
|
||||
"en": "On this map, Governmental offices are shown and can be easily added"
|
||||
},
|
||||
"maintainer": "MapComplete",
|
||||
"icon": "./assets/themes/onwheels/crest.svg",
|
||||
"version": "0",
|
||||
"startLat": 50.8465573,
|
||||
"defaultBackgroundId": "CartoDB.Voyager",
|
||||
"startLon": 4.351697,
|
||||
"startZoom": 16,
|
||||
"widenFactor": 2,
|
||||
"layers": [
|
||||
"governments"
|
||||
]
|
||||
}
|
||||
10
assets/themes/governments/license_info.json
Normal file
10
assets/themes/governments/license_info.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
[
|
||||
{
|
||||
"path": "crest.svg",
|
||||
"license": "CC0",
|
||||
"authors": [
|
||||
"Free Wheelies"
|
||||
],
|
||||
"sources": []
|
||||
}
|
||||
]
|
||||
|
|
@ -1042,22 +1042,22 @@ video {
|
|||
height: 6rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-1\/2 {
|
||||
height: 50%;
|
||||
}
|
||||
|
|
@ -1126,12 +1126,8 @@ video {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-1 {
|
||||
width: 0.25rem;
|
||||
.w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-24 {
|
||||
|
|
@ -1142,14 +1138,14 @@ video {
|
|||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-0 {
|
||||
width: 0px;
|
||||
}
|
||||
|
|
@ -1290,6 +1286,10 @@ video {
|
|||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.place-content-center {
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.content-start {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
|
@ -1412,14 +1412,14 @@ video {
|
|||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-4 {
|
||||
border-width: 4px;
|
||||
}
|
||||
|
|
@ -1432,6 +1432,15 @@ video {
|
|||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-solid {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.border-blue-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(59, 130, 246, var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-gray-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(107, 114, 128, var(--tw-border-opacity));
|
||||
|
|
@ -1466,6 +1475,11 @@ video {
|
|||
--tw-border-opacity: 0.5;
|
||||
}
|
||||
|
||||
.bg-blue-200 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
|
||||
|
|
@ -1550,10 +1564,6 @@ video {
|
|||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.pb-12 {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
|
@ -1622,6 +1632,10 @@ video {
|
|||
padding-top: 0.125rem;
|
||||
}
|
||||
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.pl-6 {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
|
@ -1693,10 +1707,6 @@ video {
|
|||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -1837,11 +1847,11 @@ video {
|
|||
}
|
||||
|
||||
.z-above-map {
|
||||
z-index: 10000
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.z-above-controls {
|
||||
z-index: 10001
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
.bg-subtle {
|
||||
|
|
@ -1863,14 +1873,14 @@ video {
|
|||
* Base colour of interactive elements, mainly the 'subtle button'
|
||||
*
|
||||
*/
|
||||
--subtle-detail-color: #DBEAFE;
|
||||
--subtle-detail-color: #dbeafe;
|
||||
--subtle-detail-color-contrast: black;
|
||||
--subtle-detail-color-light-contrast: lightgrey;
|
||||
/**
|
||||
* A stronger variant of the 'subtle-detail-colour'
|
||||
* Used as subtle button hover
|
||||
*/
|
||||
--unsubtle-detail-color: #BFDBFE;
|
||||
--unsubtle-detail-color: #bfdbfe;
|
||||
--unsubtle-detail-color-contrast: black;
|
||||
--catch-detail-color: #3a3aeb;
|
||||
--catch-detail-color-contrast: white;
|
||||
|
|
@ -1884,7 +1894,8 @@ video {
|
|||
--variable-title-height: 0px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
|
|
@ -1892,7 +1903,7 @@ html, body {
|
|||
padding: 0;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-family: "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.leaflet-overlay-pane .leaflet-zoom-animated {
|
||||
|
|
@ -1915,7 +1926,8 @@ html, body {
|
|||
height: 100% !important;
|
||||
}
|
||||
|
||||
svg, img {
|
||||
svg,
|
||||
img {
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -2019,6 +2031,39 @@ a {
|
|||
height: min-content;
|
||||
}
|
||||
|
||||
/* alex */
|
||||
|
||||
input[type="range"].vertical {
|
||||
-webkit-writing-mode: bt-lr;
|
||||
-ms-writing-mode: bt-lr;
|
||||
writing-mode: bt-lr;
|
||||
/* IE */
|
||||
-webkit-appearance: slider-vertical;
|
||||
/* Chromium */
|
||||
width: 8px;
|
||||
height: 310px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
.elevatorslider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 23px;
|
||||
height: 24px;
|
||||
border: 0;
|
||||
background: url("../MapComplete/assets/svg/bug.svg");
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.elevatorslider::-moz-range-thumb {
|
||||
width: 23px;
|
||||
height: 25px;
|
||||
border: 0;
|
||||
background: url("../MapComplete/assets/svg/bug.svg");
|
||||
cursor: pointer;
|
||||
} */
|
||||
|
||||
.border-detail {
|
||||
border-color: var(--foreground-color);
|
||||
}
|
||||
|
|
@ -2088,7 +2133,7 @@ p {
|
|||
}
|
||||
|
||||
li::marker {
|
||||
content: "•"
|
||||
content: "•";
|
||||
}
|
||||
|
||||
.subtle-background {
|
||||
|
|
@ -2098,7 +2143,7 @@ li::marker {
|
|||
|
||||
.normal-background {
|
||||
background: var(--background-color);
|
||||
color: var(--foreground-color)
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.subtle-lighter {
|
||||
|
|
@ -2176,7 +2221,8 @@ li::marker {
|
|||
color: unset !important;
|
||||
}
|
||||
|
||||
.disable-links a.must-link, .disable-links .must-link a {
|
||||
.disable-links a.must-link,
|
||||
.disable-links .must-link a {
|
||||
/* Hide links if they are disabled */
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -2395,7 +2441,7 @@ li::marker {
|
|||
/***************** Info box (box containing features and questions ******************/
|
||||
|
||||
input {
|
||||
color: var(--foreground-color)
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
|
|
@ -2447,7 +2493,7 @@ input {
|
|||
}
|
||||
|
||||
.animate-height {
|
||||
transition: max-height .5s ease-in-out;
|
||||
transition: max-height 0.5s ease-in-out;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -2477,7 +2523,7 @@ input {
|
|||
|
||||
.mapping-icon-small-height {
|
||||
/* A mapping icon type */
|
||||
height: 2rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.5rem;
|
||||
width: unset;
|
||||
}
|
||||
|
|
@ -2511,7 +2557,7 @@ input {
|
|||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.mapping-icon-large{
|
||||
.mapping-icon-large {
|
||||
/* A mapping icon type */
|
||||
width: 6rem;
|
||||
max-height: 5rem;
|
||||
|
|
@ -2809,4 +2855,3 @@ input {
|
|||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
70
test.ts
70
test.ts
|
|
@ -1,52 +1,36 @@
|
|||
import * as shops from "./assets/generated/layers/shops.json"
|
||||
import { max } from "moment";
|
||||
import { Store, UIEventSource } from "./Logic/UIEventSource"
|
||||
import Combine from "./UI/Base/Combine";
|
||||
import Img from "./UI/Base/Img";
|
||||
import BaseUIElement from "./UI/BaseUIElement";
|
||||
import {VariableUiElement} from "./UI/Base/VariableUIElement";
|
||||
import LanguagePicker from "./UI/LanguagePicker";
|
||||
import TagRenderingConfig, {Mapping} from "./Models/ThemeConfig/TagRenderingConfig";
|
||||
import {MappingConfigJson} from "./Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson";
|
||||
import {FixedUiElement} from "./UI/Base/FixedUiElement";
|
||||
import {TagsFilter} from "./Logic/Tags/TagsFilter";
|
||||
import {SearchablePillsSelector} from "./UI/Input/SearchableMappingsSelector";
|
||||
import {UIEventSource} from "./Logic/UIEventSource";
|
||||
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";
|
||||
|
||||
const mappingsRaw: MappingConfigJson[] = <any>shops.tagRenderings.find(tr => tr.id == "shop_types").mappings
|
||||
const mappings = mappingsRaw.map((m, i) => TagRenderingConfig.ExtractMapping(m, i, "test", "test"))
|
||||
const testData = ["-1", "0", "0.5", "1", "1.5", "2"]
|
||||
|
||||
function fromMapping(m: Mapping): { show: BaseUIElement, value: TagsFilter, mainTerm: Record<string, string>, searchTerms?: Record<string, string[]> } {
|
||||
const el: BaseUIElement = m.then
|
||||
let icon: BaseUIElement
|
||||
if (m.icon !== undefined) {
|
||||
icon = new Img(m.icon).SetClass("h-8 w-8 pr-2")
|
||||
} else {
|
||||
icon = new FixedUiElement("").SetClass("h-8 w-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 show = new Combine([
|
||||
icon,
|
||||
el.SetClass("block-ruby")
|
||||
]).SetClass("flex items-center")
|
||||
})
|
||||
}).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"))
|
||||
|
||||
return {show, mainTerm: m.then.translations, searchTerms: m.searchTerms, value: m.if};
|
||||
const valCombine = new Combine(values.reverse())
|
||||
// valCombine.AttachTo("maindiv")
|
||||
|
||||
}
|
||||
const search = new UIEventSource("")
|
||||
const sp = new SearchablePillsSelector(
|
||||
mappings.map(m => fromMapping(m)),
|
||||
{
|
||||
noMatchFound: new VariableUiElement(search.map(s => "Mark this a `"+s+"`")),
|
||||
onNoSearch: new FixedUiElement("Search in "+mappingsRaw.length+" categories"),
|
||||
selectIfSingle: true,
|
||||
searchValue: search
|
||||
}
|
||||
)
|
||||
const slider = new Slider(0, testData.length-1);
|
||||
|
||||
sp.AttachTo("maindiv")
|
||||
slider.SetClass("flex vertical m-4 elevatorslider")
|
||||
|
||||
const lp = new LanguagePicker(["en", "nl"], "")
|
||||
new Combine([valCombine, slider]).SetClass("flex flex-row h-10").AttachTo("extradiv")
|
||||
|
||||
new Combine([
|
||||
new VariableUiElement(sp.GetValue().map(tf => new FixedUiElement("Selected tags: " + tf.map(tf => tf.asHumanString(false, false, {})).join(", ")))),
|
||||
lp
|
||||
]).SetClass("flex flex-col")
|
||||
.AttachTo("extradiv")
|
||||
console.log(slider)
|
||||
|
|
|
|||
Loading…
Reference in a new issue