ilja_space/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Fixes to popup handling and to broken styles

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-02-25 02:23:26 +01:00
parent 29a0a3ee81
commit a0b909e8a6
16 changed files with 188 additions and 247 deletions
Download patch file Download diff file Expand all files Collapse all files

6
UI/Base/LazyElement.ts
View file

@ -17,6 +17,12 @@ export default class LazyElement extends UIElement {
self._content = content();
}
self.Update();
// @ts-ignore
if(this._content.Activate){
// THis is ugly - I know
// @ts-ignore
this._content.Activate();
}
}
}

175
UI/Base/ScrollableFullScreen.ts
View file

@ -2,157 +2,76 @@ import {UIElement} from "../UIElement";
import Svg from "../../Svg";
import Combine from "./Combine";
import Ornament from "./Ornament";
import {FixedUiElement} from "./FixedUiElement";
import {UIEventSource} from "../../Logic/UIEventSource";
/**
* Wraps some contents into a panel that scrolls the content _under_ the title
*/
export default class ScrollableFullScreen extends UIElement {
private static _isInited = false;
private static readonly empty = new FixedUiElement("");
public isShown: UIEventSource<boolean>;
private _component: UIElement;
private _fullscreencomponent: UIElement;
constructor(title: UIElement, content: UIElement, onClose: (() => void)) {
constructor(title: (() => UIElement), content: (() => UIElement), isShown: UIEventSource<boolean> = new UIEventSource<boolean>(false)) {
super();
if (!ScrollableFullScreen._isInited) {
ScrollableFullScreen._isInited = ScrollableFullScreen.PreparePatchesForFullscreen();
}
this.isShown = isShown;
this._component = this.BuildComponent(title(), content(), isShown);
this._fullscreencomponent = this.BuildComponent(title(), content(), isShown);
this.dumbMode = false;
const self = this;
isShown.addCallback(isShown => {
if (isShown) {
self.Activate();
} else {
self.clear();
}
})
}
InnerRender(): string {
return this._component.Render();
}
Activate(): void {
this.isShown.setData(true)
this._fullscreencomponent.AttachTo("fullscreen");
const fs = document.getElementById("fullscreen");
fs.classList.remove("hidden")
}
private BuildComponent(title: UIElement, content: UIElement, isShown: UIEventSource<boolean>) {
const returnToTheMap =
new Combine([
Svg.back_svg().SetClass("block md:hidden"),
Svg.close_svg().SetClass("hidden md:block")
])
.onClick(() => {
ScrollableFullScreen.RestoreLeaflet();
if (onClose !== undefined) {
onClose();
} else {
console.error("WARNING: onClose is not defined")
}
isShown.setData(false)
}).SetClass("mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5 flex-shrink-0")
title.SetClass("block text-l sm:text-xl md:text-2xl w-full font-bold p-2 pl-4 max-h-20vh overflow-y-auto")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
.SetClass("md:hidden h-5")
this._component =
return new Combine([
new Combine([
new Combine([
new Combine([returnToTheMap, title])
.SetClass("border-b-2 border-black shadow md:shadow-none bg-white p-2 pb-0 md:p-0 flex flex-shrink-0"),
new Combine([content, ornament])
.SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto md:max-h-65vh"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]).SetClass("flex flex-col h-full relative bg-white")
]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative z-above-controls");
this.dumbMode = false;
}
private static HideClutter(htmlElement: HTMLElement) {
const whiteList = new Set<Element>();
do {
if(htmlElement === null){
break;
}
if (htmlElement.classList.contains("clutter")) {
// Don't hide the parent element
whiteList.add(htmlElement)
}
htmlElement = htmlElement.parentElement;
} while (htmlElement != null)
const clutter = document.getElementsByClassName("clutter");
for (let i = 0; i < clutter.length; ++i) {
if (whiteList.has(clutter[i])) {
continue;
}
const classlist = clutter[i].classList;
if (classlist.contains("clutter-hidden")) {
continue;
}
classlist.add("clutter-hidden");
}
new Combine([returnToTheMap, title])
.SetClass("border-b-2 border-black shadow md:shadow-none bg-white p-2 pb-0 md:p-0 flex flex-shrink-0"),
new Combine([content, ornament])
.SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto md:max-h-65vh"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]).SetClass("flex flex-col h-full relative bg-white")
]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative z-above-controls");
}
/**
* Adds the 'clutter' class (which merely acts as a tag) onto some elements, e.g. the leaflet attributions
* @constructor
*/
private static PreparePatchesForFullscreen(): boolean {
const toHide = document.getElementsByClassName("leaflet-control-container");
for (let i = 0; i < toHide.length; ++i) {
toHide[i].classList.add("clutter");
}
return true;
}
private static PatchLeaflet(htmlElement) {
if(htmlElement === undefined || htmlElement === null){
return;
}
let toHide = document.getElementsByClassName("leaflet-pane");
for (let i = 0; i < toHide.length; ++i) {
toHide[i].classList.add("no-transform");
toHide[i].classList.add("scrollable-fullscreen-no-transform");
}
toHide = document.getElementsByClassName("leaflet-popup");
for (let i = 0; i < toHide.length; ++i) {
toHide[i].classList.add("no-transform");
toHide[i].classList.add("scrollable-fullscreen-no-transform");
}
do {
// A leaflet workaround: in order for fullscreen to work, we need to get the parent element which does a transform3d and remove/read the transform
if (htmlElement.style.transform !== "") {
if (!htmlElement.classList.contains("no-transform")) {
htmlElement.classList.add("no-transform");
htmlElement.classList.add("scrollable-fullscreen-no-transform")
}
}
htmlElement = htmlElement.parentElement;
} while (htmlElement != null)
}
public static RestoreLeaflet() {
const noTransf = document.getElementsByClassName("scrollable-fullscreen-no-transform");
for (let i = 0; i < noTransf.length; ++i) {
noTransf[i].classList.remove("no-transform");
noTransf[i].classList.remove("scrollable-fullscreen-no-transform");
}
let clutter = document.getElementsByClassName("clutter-hidden");
do {
for (let i = 0; i < clutter.length; ++i) {
clutter[i].classList.remove("clutter-hidden");
}
clutter = document.getElementsByClassName("clutter-hidden");
} while (clutter.length > 0)
}
InnerRender(): string {
return this._component.Render();
}
public PrepFullscreen(htmlElement = undefined) {
ScrollableFullScreen.PatchLeaflet(htmlElement);
htmlElement = htmlElement ?? document.getElementById(this.id);
ScrollableFullScreen.HideClutter(htmlElement);
}
protected InnerUpdate(htmlElement: HTMLElement) {
this.PrepFullscreen(htmlElement)
super.InnerUpdate(htmlElement);
}
Update() {
super.Update();
private clear() {
ScrollableFullScreen.empty.AttachTo("fullscreen")
const fs = document.getElementById("fullscreen");
fs.classList.add("hidden")
}

28
UI/BigComponents/FullWelcomePaneWithTabs.ts
View file

@ -23,13 +23,22 @@ export default class FullWelcomePaneWithTabs extends UIElement {
private readonly _component: UIElement;
constructor(onClose: () => void) {
constructor(isShown: UIEventSource<boolean>) {
super(State.state.layoutToUse);
this._layoutToUse = State.state.layoutToUse;
this._userDetails = State.state.osmConnection.userDetails;
const layoutToUse = this._layoutToUse.data;
this._component = new ScrollableFullScreen(
() => layoutToUse.title.Clone(),
() => FullWelcomePaneWithTabs.GenerateContents(layoutToUse, State.state.osmConnection.userDetails),
isShown
)
}
private static GenerateContents(layoutToUse: LayoutConfig, userDetails: UIEventSource<UserDetails>) {
let welcome: UIElement = new ThemeIntroductionPanel();
if (layoutToUse.id === personal.id) {
welcome = new PersonalLayersPanel();
@ -58,7 +67,7 @@ export default class FullWelcomePaneWithTabs extends UIElement {
tabs.push({
header: Svg.help,
content: new VariableUiElement(this._userDetails.map(userdetails => {
content: new VariableUiElement(userDetails.map(userdetails => {
if (userdetails.csCount < Constants.userJourney.mapCompleteHelpUnlock) {
return ""
}
@ -67,15 +76,8 @@ export default class FullWelcomePaneWithTabs extends UIElement {
}
);
const tabbedPart = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab)
.ListenTo(this._userDetails);
this._component = new ScrollableFullScreen(
layoutToUse.title,
tabbedPart,
onClose
)
return new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab)
.ListenTo(userDetails);
}
InnerRender(): string {

24
UI/BigComponents/LayerControlPanel.ts
View file

@ -6,13 +6,20 @@ import Combine from "../Base/Combine";
import {FixedUiElement} from "../Base/FixedUiElement";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
import Translations from "../i18n/Translations";
import {UIEventSource} from "../../Logic/UIEventSource";
export default class LayerControlPanel extends UIElement {
private readonly _panel: UIElement;
export default class LayerControlPanel extends ScrollableFullScreen {
constructor(isShown: UIEventSource<boolean>) {
super(LayerControlPanel.GenTitle, LayerControlPanel.GeneratePanel, isShown);
}
constructor(onClose: () => void) {
super();
private static GenTitle(): UIElement {
const title = Translations.t.general.layerSelection.title.SetClass("text-2xl break-words font-bold p-2")
return title.Clone();
}
private static GeneratePanel() {
let layerControlPanel: UIElement = new FixedUiElement("");
if (State.state.layoutToUse.data.enableBackgroundLayerSelection) {
layerControlPanel = new BackgroundSelector();
@ -28,14 +35,7 @@ export default class LayerControlPanel extends UIElement {
layerControlPanel = new Combine([layerSelection, "<br/>", layerControlPanel]);
}
const title = Translations.t.general.layerSelection.title.SetClass("text-2xl break-words font-bold p-2")
this._panel = new ScrollableFullScreen(title, layerControlPanel, onClose);
}
InnerRender(): string {
return this._panel.Render();
return layerControlPanel;
}
}

2
UI/OpeningHours/OhVisualization.ts
View file

@ -314,7 +314,7 @@ export default class OpeningHoursVisualization extends UIElement {
return new Combine([
"<table class='ohviz' style='width:100%; word-break: normal;'>",
"<table class='ohviz' style='width:100%; word-break: normal; word-wrap: normal'>",
rows.map(el => "<tr>" + el.Render() + "</tr>").join(""),
"</table>"
]).SetClass("ohviz-container").Render();

1
UI/OpeningHours/OpeningHoursPickerTable.ts
View file

@ -63,7 +63,6 @@ export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]>
protected InnerUpdate() {
const self = this;
const table = (document.getElementById(`oh-table-${this.id}`) as HTMLTableElement);
console.log("Inner update!")
if (table === undefined || table === null) {
return;
}

22
UI/Popup/FeatureInfoBox.ts
View file

@ -9,26 +9,21 @@ import State from "../../State";
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
export default class FeatureInfoBox extends UIElement {
export default class FeatureInfoBox extends ScrollableFullScreen {
private static featureInfoboxCache: Map<LayerConfig, Map<UIEventSource<any>, FeatureInfoBox>> = new Map<LayerConfig, Map<UIEventSource<any>, FeatureInfoBox>>();
private _component: ScrollableFullScreen;
private constructor(
tags: UIEventSource<any>,
layerConfig: LayerConfig,
onClose: () => void
layerConfig: LayerConfig
) {
super();
super(() => FeatureInfoBox.GenerateTitleBar(tags, layerConfig),() => FeatureInfoBox.GenerateContent(tags, layerConfig));
if (layerConfig === undefined) {
throw "Undefined layerconfig"
throw "Undefined layerconfig";
}
const title = FeatureInfoBox.GenerateTitleBar(tags, layerConfig);
const contents = FeatureInfoBox.GenerateContent(tags, layerConfig);
this._component = new ScrollableFullScreen(title, contents, onClose);
}
static construct(tags: UIEventSource<any>, layer: LayerConfig, onClose: () => void) {
static construct(tags: UIEventSource<any>, layer: LayerConfig): FeatureInfoBox {
let innerMap = FeatureInfoBox.featureInfoboxCache.get(layer);
if (innerMap === undefined) {
innerMap = new Map<UIEventSource<any>, FeatureInfoBox>();
@ -37,7 +32,7 @@ export default class FeatureInfoBox extends UIElement {
let featureInfoBox = innerMap.get(tags);
if (featureInfoBox === undefined) {
featureInfoBox = new FeatureInfoBox(tags, layer, onClose);
featureInfoBox = new FeatureInfoBox(tags, layer);
innerMap.set(tags, featureInfoBox);
}
return featureInfoBox;
@ -48,7 +43,7 @@ export default class FeatureInfoBox extends UIElement {
const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined))
.SetClass("break-words font-bold sm:p-0.5 md:p-1 sm:p-1.5 md:p-2");
const titleIcons = new Combine(
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon,
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon,
"block w-8 h-8 align-baseline box-content sm:p-0.5", "width: 2rem !important;")
.HideOnEmpty(true)
))
@ -90,7 +85,4 @@ export default class FeatureInfoBox extends UIElement {
}
InnerRender(): string {
return this._component.Render();
}
}

2
UI/Reviews/ReviewElement.ts
View file

@ -33,7 +33,7 @@ export default class ReviewElement extends UIElement {
const avg = (revs.map(review => review.rating).reduce((a, b) => a + b, 0) / revs.length);
elements.push(
new Combine([
SingleReview.GenStars(avg).SetClass("stars"),
SingleReview.GenStars(avg).SetClass("stars flex"),
`<a target="_blank" href='https://mangrove.reviews/search?sub=${encodeURIComponent(this._subject)}'>`,
revs.length === 1 ? Translations.t.reviews.title_singular :
Translations.t.reviews.title

25
UI/ShowDataLayer.ts
View file

@ -9,7 +9,6 @@ import State from "../State";
import LazyElement from "./Base/LazyElement";
import FeatureInfoBox from "./Popup/FeatureInfoBox";
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
import ScrollableFullScreen from "./Base/ScrollableFullScreen";
import {GeoOperations} from "../Logic/GeoOperations";
@ -125,18 +124,19 @@ export default class ShowDataLayer {
}, leafletLayer);
const tags = State.state.allElements.getEventSourceFor(feature);
const uiElement = new LazyElement(() =>
FeatureInfoBox.construct(tags, layer, () => {
State.state.selectedElement.setData(undefined);
leafletLayer.closePopup();
popup.remove();
ScrollableFullScreen.RestoreLeaflet();
}),
"<div style='height: 90vh'>Rendering</div>"); // By setting 90vh, leaflet will attempt to fit the entire screen and move the feature down
const uiElement = new LazyElement(() => {
const infoBox = FeatureInfoBox.construct(tags, layer);
infoBox.isShown.addCallback(isShown => {
if(!isShown){
State.state.selectedElement.setData(undefined);
leafletLayer.closePopup();
popup.remove();
}
});
return infoBox;
},
"<div style='height: 50vh'>Rendering</div>"); // By setting 50vh, leaflet will attempt to fit the entire screen and move the feature down
popup.setContent(uiElement.Render());
popup.on('remove', () => {
ScrollableFullScreen.RestoreLeaflet(); // Just in case...
});
leafletLayer.bindPopup(popup);
// We first render the UIelement (which'll still need an update later on...)
// But at least it'll be visible already
@ -145,7 +145,6 @@ export default class ShowDataLayer {
leafletLayer.on("popupopen", () => {
State.state.selectedElement.setData(feature);
uiElement.Activate();
uiElement.Update();
})
State.state.selectedElement.addCallbackAndRun(selected => {