diff --git a/UI/Base/LazyElement.ts b/UI/Base/LazyElement.ts index 005ce7a..6979104 100644 --- a/UI/Base/LazyElement.ts +++ b/UI/Base/LazyElement.ts @@ -28,9 +28,7 @@ export default class LazyElement extends UIElement { if (this._content === undefined) { return this._loadingContent; } - return this._content.InnerRender(); + return this._content.Render(); } - - } \ No newline at end of file diff --git a/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts index e4f50fb..fac6813 100644 --- a/UI/Base/ScrollableFullScreen.ts +++ b/UI/Base/ScrollableFullScreen.ts @@ -8,21 +8,13 @@ import Ornament from "./Ornament"; */ export default class ScrollableFullScreen extends UIElement { private static _isInited = false; - private title: UIElement; - private content: UIElement; private _component: UIElement; constructor(title: UIElement, content: UIElement, onClose: (() => void)) { super(); - this.content = content; - this.title = title; if (!ScrollableFullScreen._isInited) { ScrollableFullScreen._isInited = ScrollableFullScreen.PreparePatchesForFullscreen(); } - if (onClose === undefined) { - console.error("ScrollableFullScreen initialized without onClose!") - } - this.dumbMode = false; const returnToTheMap = new Combine([ Svg.back_svg().SetClass("block sm:hidden"), @@ -54,6 +46,7 @@ export default class ScrollableFullScreen extends UIElement { ]).SetClass("block flex flex-col relative bg-white") ]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen sm:max-h-65vh sm:w-auto sm:relative"); + this.dumbMode = false; } private static HideClutter(htmlElement: HTMLElement) { @@ -113,7 +106,7 @@ export default class ScrollableFullScreen extends UIElement { } - private static RestoreLeaflet() { + public static RestoreLeaflet() { console.log("Restoring") const noTransf = document.getElementsByClassName("scrollable-fullscreen-no-transform"); for (let i = 0; i < noTransf.length; ++i) { @@ -134,12 +127,6 @@ export default class ScrollableFullScreen extends UIElement { return this._component.Render(); } - Update() { - console.log("Updating the scrollableFullScreen") - super.Update(); - this._component.Update(); - } - public PrepFullscreen(htmlElement = undefined) { ScrollableFullScreen.PatchLeaflet(htmlElement); @@ -149,9 +136,15 @@ export default class ScrollableFullScreen extends UIElement { } protected InnerUpdate(htmlElement: HTMLElement) { + console.log("Inner updating scrollale", this.id) this.PrepFullscreen(htmlElement) super.InnerUpdate(htmlElement); } + + Update() { + console.log("Updating scrollable", this.id) + super.Update(); + } } \ No newline at end of file diff --git a/UI/BigComponents/UserBadge.ts b/UI/BigComponents/UserBadge.ts index f2abd8c..d96ec00 100644 --- a/UI/BigComponents/UserBadge.ts +++ b/UI/BigComponents/UserBadge.ts @@ -50,9 +50,9 @@ export default class UserBadge extends UIElement { this._homeButton = new VariableUiElement( this._userDetails.map((userinfo) => { if (userinfo.home) { - return Svg.home_svg().Render(); + return Svg.home_ui().Render(); } - return ""; + return " "; }) ).onClick(() => { const home = State.state.osmConnection.userDetails.data?.home; diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts index 202d1db..b99b4f0 100644 --- a/UI/Popup/FeatureInfoBox.ts +++ b/UI/Popup/FeatureInfoBox.ts @@ -9,25 +9,29 @@ import State from "../../State"; import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig"; import ScrollableFullScreen from "../Base/ScrollableFullScreen"; -export default class FeatureInfoBox extends ScrollableFullScreen { +export default class FeatureInfoBox extends UIElement { + private _component: ScrollableFullScreen; constructor( tags: UIEventSource, layerConfig: LayerConfig, onClose: () => void ) { - super( - FeatureInfoBox.GenerateTitleBar(tags, layerConfig), - FeatureInfoBox.GenerateContent(tags, layerConfig), - onClose - ); + super(); if (layerConfig === undefined) { throw "Undefined layerconfig" } + const title = FeatureInfoBox.GenerateTitleBar(tags, layerConfig); + const contents = FeatureInfoBox.GenerateContent(tags, layerConfig); + this._component = new ScrollableFullScreen(title, contents, onClose) } - private static GenerateTitleBar( tags: UIEventSource, - layerConfig: LayerConfig): UIElement{ + InnerRender(): string { + return this._component.Render(); + } + + private static GenerateTitleBar(tags: UIEventSource, + layerConfig: LayerConfig): UIElement { const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined)) .SetClass("text-2xl break-words font-bold p-2"); const titleIcons = new Combine( @@ -35,14 +39,13 @@ export default class FeatureInfoBox extends ScrollableFullScreen { .SetClass("block w-8 h-8 align-baseline box-content p-0.5"))) .SetClass("flex flex-row flex-wrap pt-1 items-center mr-2"); - return new Combine([ + return new Combine([ new Combine([title, titleIcons]).SetClass("flex flex-grow justify-between") ]) } - - private static GenerateContent(tags: UIEventSource, - layerConfig: LayerConfig): UIElement{ + private static GenerateContent(tags: UIEventSource, + layerConfig: LayerConfig): UIElement { let questionBox: UIElement = undefined; @@ -69,8 +72,10 @@ export default class FeatureInfoBox extends ScrollableFullScreen { ...renderings, tail.SetClass("featureinfobox-tail") ] - ) + ).SetClass("block sm:max-h-65vh") } + + } diff --git a/UI/ShowDataLayer.ts b/UI/ShowDataLayer.ts index 8a36331..73c5435 100644 --- a/UI/ShowDataLayer.ts +++ b/UI/ShowDataLayer.ts @@ -11,6 +11,9 @@ import Hash from "../Logic/Web/Hash"; import {GeoOperations} from "../Logic/GeoOperations"; import FeatureInfoBox from "./Popup/FeatureInfoBox"; import LayoutConfig from "../Customizations/JSON/LayoutConfig"; +import {UIElement} from "./UIElement"; +import Combine from "./Base/Combine"; +import ScrollableFullScreen from "./Base/ScrollableFullScreen"; export default class ShowDataLayer { @@ -126,15 +129,16 @@ export default class ShowDataLayer { const tags = State.state.allElements.getEventSourceFor(feature); - const uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer, () => { + const uiElement: LazyElement = new LazyElement(() =>new Combine([ new FeatureInfoBox(tags, layer, () => { console.log("Closing the popup!") State.state.selectedElement.setData(undefined); popup.remove(); - }), + })]), "
Rendering
"); popup.setContent(uiElement.Render()); popup.on('remove', () => { + ScrollableFullScreen.RestoreLeaflet(); // Just in case... if (!popup.isOpen()) { return; } @@ -159,7 +163,7 @@ export default class ShowDataLayer { return; } leafletLayer.openPopup(); - uiElement.Activate(e => e.PrepFullscreen()); + uiElement.Activate(); State.state.selectedElement.setData(feature); } this._onSelectedTrigger[feature.properties.id.replace("/", "_")] = this._onSelectedTrigger[id]; @@ -167,7 +171,7 @@ export default class ShowDataLayer { // This element is in the URL, so this is a share link // We open the relevant popup straight away console.log("Opening the popup due to sharelink") - uiElement.Activate(e => e.PrepFullscreen()); + uiElement.Activate( ); popup.setContent(uiElement.Render()); const center = GeoOperations.centerpoint(feature).geometry.coordinates; diff --git a/index.html b/index.html index 3dd9684..3f61e84 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,7 @@
-
+
Loading MapComplete, hang on...