midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Stuff more or less works

Browse source
This commit is contained in:
pietervdvn 2021-01-25 04:21:22 +01:00
parent 149e117887
commit e2e48344d6
6 changed files with 38 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
UI/Base/LazyElement.ts
View file

@ -28,9 +28,7 @@ export default class LazyElement<T extends UIElement> extends UIElement {
if (this._content === undefined) {
return this._loadingContent;
}
return this._content.InnerRender();
return this._content.Render();
}
}

23
UI/Base/ScrollableFullScreen.ts
View file

@ -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();
}
}

4
UI/BigComponents/UserBadge.ts
View file

@ -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;

29
UI/Popup/FeatureInfoBox.ts
View file

@ -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<any>,
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<any>,
layerConfig: LayerConfig): UIElement{
InnerRender(): string {
return this._component.Render();
}
private static GenerateTitleBar(tags: UIEventSource<any>,
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<any>,
layerConfig: LayerConfig): UIElement{
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")
}
}

12
UI/ShowDataLayer.ts
View file

@ -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<FeatureInfoBox> = new LazyElement(() => new FeatureInfoBox(tags, layer, () => {
const uiElement: LazyElement<UIElement> = new LazyElement(() =>new Combine([ new FeatureInfoBox(tags, layer, () => {
console.log("Closing the popup!")
State.state.selectedElement.setData(undefined);
popup.remove();
}),
})]),
"<div style='height: 90vh'>Rendering</div>");
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;

2
index.html
View file

@ -55,7 +55,7 @@
<div id="layer-selection" class="absolute bottom-3 left-3 rounded-3xl overflow-hidden clutter"></div>
<div id="centermessage" class="absolute rounded-3xl h-24 left-24 right-24 top-56 bg-white p-3 pt-5 sm:pt-8 text-xl font-bold text-center">
<div id="centermessage" class="clutter absolute rounded-3xl h-24 left-24 right-24 top-56 bg-white p-3 pt-5 sm:pt-8 text-xl font-bold text-center">
Loading MapComplete, hang on...
</div>