From f610b956dc7365d58993c695c1c7acaa203ff688 Mon Sep 17 00:00:00 2001 From: Bavo Vanderghote Date: Wed, 22 Jul 2020 11:01:25 +0200 Subject: [PATCH] base checkbox; start filter toggle --- Customizations/LayerDefinition.ts | 5 +--- Logic/FilteredLayer.ts | 22 +++++++--------- UI/Base/CheckBox.ts | 22 +++++++++++++--- index.css | 44 ++++++++++++++++++++++++------- index.html | 17 ++++++++++-- index.ts | 16 +++++------ 6 files changed, 86 insertions(+), 40 deletions(-) diff --git a/Customizations/LayerDefinition.ts b/Customizations/LayerDefinition.ts index 1065f43fb..41ef0095e 100644 --- a/Customizations/LayerDefinition.ts +++ b/Customizations/LayerDefinition.ts @@ -107,11 +107,8 @@ export class LayerDefinition { showOnPopup: (tags: UIEventSource<(any)>) => UIElement): FilteredLayer { return new FilteredLayer( - this.name, + this, basemap, allElements, changes, - this.overpassFilter, - this.maxAllowedOverlapPercentage, - this.style, selectedElement, showOnPopup); diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index 76a9d9c2f..2bf8e1ac5 100644 --- a/Logic/FilteredLayer.ts +++ b/Logic/FilteredLayer.ts @@ -6,6 +6,7 @@ import { Changes } from "./Changes"; import L from "leaflet" import { GeoOperations } from "./GeoOperations"; import { UIElement } from "../UI/UIElement"; +import { LayerDefinition } from "../Customizations/LayerDefinition"; /*** * A filtered layer is a layer which offers a 'set-data' function @@ -21,7 +22,7 @@ export class FilteredLayer { public readonly name: string; public readonly filters: TagsFilter; public readonly isDisplayed: UIEventSource = new UIEventSource(true); - + public readonly layerDef: LayerDefinition; private readonly _map: Basemap; private readonly _maxAllowedOverlap: number; @@ -43,29 +44,26 @@ export class FilteredLayer { private _showOnPopup: (tags: UIEventSource) => UIElement; constructor( - name: string, + layerDef: LayerDefinition, map: Basemap, storage: ElementStorage, changes: Changes, - filters: TagsFilter, - maxAllowedOverlap: number, - style: ((properties) => any), selectedElement: UIEventSource, showOnPopup: ((tags: UIEventSource) => UIElement) ) { + this.layerDef = layerDef; this._selectedElement = selectedElement; this._showOnPopup = showOnPopup; - - if (style === undefined) { - style = function () { - return {}; + this._style = layerDef.style; + if (this._style === undefined) { + this._style = function () { + return {icon: "", color: "#000000"}; } } this.name = name; this._map = map; - this.filters = filters; - this._style = style; + this.filters = layerDef.overpassFilter; this._storage = storage; - this._maxAllowedOverlap = maxAllowedOverlap; + this._maxAllowedOverlap = layerDef.maxAllowedOverlapPercentage; const self = this; this.isDisplayed.addCallback(function (isDisplayed) { if (self._geolayer !== undefined && self._geolayer !== null) { diff --git a/UI/Base/CheckBox.ts b/UI/Base/CheckBox.ts index db98ec3ec..ccc3759d8 100644 --- a/UI/Base/CheckBox.ts +++ b/UI/Base/CheckBox.ts @@ -5,14 +5,28 @@ import { FilteredLayer } from "../../Logic/FilteredLayer"; export class CheckBox extends UIElement{ - constructor(data: UIEventSource, name: String) { + private readonly _data: UIEventSource; + private readonly _showEnabled: string|UIElement; + private readonly _showDisabled: string|UIElement; + + constructor(data: UIEventSource, showEnabled: string|UIElement, showDisabled: string|UIElement) { super(data); - this.data = data; - this.name = name + this._data = data; + this._showEnabled = showEnabled; + this._showDisabled = showDisabled; + this.onClick(() => { + data.setData(!data.data); + + }) + } protected InnerRender(): string { - return `${this.data.data? `

${this.name}

`: `

${this.name}

`}`; + if (this._data.data) { + return this._showEnabled; + } else { + return this._showDisabled; + } } } \ No newline at end of file diff --git a/index.css b/index.css index 2e4333824..0dae28ff8 100644 --- a/index.css +++ b/index.css @@ -254,18 +254,42 @@ form { pointer-events: all; } -#filterui { - padding: 2em; - padding-top: 1em; - padding-bottom: 1em; - z-index: 5000; - background-color: white; - border-radius: 2em; - pointer-events: all; - list-style: none; +/* filter ui */ + +.filter__popup { + display: none; + position: absolute; + bottom: 0; + z-index: 500; + padding-left: 10px; + padding-bottom: 10px; + display: flex; + flex-flow: column-reverse; + align-items: start; } -#filterui li span { +.filter__button { + outline: none; + border: none; + padding: 1rem; + border-radius: 50%; + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); + background-color: white; +} + +.filter__content { + background-color: white; + border-radius: 15px; + padding: 0 15px; +} + +#filter__layers { + pointer-events: all; + list-style: none; + padding-left: 0; +} + +#filter__layers li span { display: flex; align-items: center; } diff --git a/index.html b/index.html index 0a03567da..aec8f1169 100644 --- a/index.html +++ b/index.html @@ -36,10 +36,23 @@
-
    -
+
+ + +
+

Maplayers

+
    +
    + +
    diff --git a/index.ts b/index.ts index 4412997a9..efdf09c00 100644 --- a/index.ts +++ b/index.ts @@ -288,13 +288,13 @@ messageBox.update(); for (let i = 0; i < flayers.length; i++) { const listItem = document.createElement(`li`); listItem.setAttribute(`id`,`${flayers[i].name}`) - document.querySelector(`#filterui`).appendChild(listItem); - const eventSource = new UIEventSource(flayers[i].isDisplayed.data); - new CheckBox(eventSource, flayers[i].name) - .onClick(() => { - eventSource.setData(!eventSource.data); - flayers[i].isDisplayed.setData(eventSource.data); - }) + document.querySelector(`#filter__layers`).appendChild(listItem); + new CheckBox(flayers[i].isDisplayed, flayers[i]) .AttachTo(flayers[i].name); } - \ No newline at end of file + +// --------------- Setting up toggle button for filter ui -------- + +document.querySelector(`#filter__button`).addEventListener(`click`, e => { + document.querySelector(`#filter__popup`).classList.toggle(`filter__popup--show`) +}); \ No newline at end of file