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

Refactoring fullscreenhandling

Browse source
This commit is contained in:
pietervdvn 2021-01-25 03:12:09 +01:00
parent e1a4c75391
commit 00f610c589
23 changed files with 346 additions and 245 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
InitUiElements.ts
View file

@ -12,7 +12,6 @@ import CenterMessageBox from "./UI/CenterMessageBox";
import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
import UserBadge from "./UI/BigComponents/UserBadge";
import SearchAndGo from "./UI/BigComponents/SearchAndGo";
import FullScreenMessageBox from "./UI/FullScreenMessageBoxHandler";
import GeoLocationHandler from "./Logic/Actors/GeoLocationHandler";
import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
import {Utils} from "./Utils";
@ -33,7 +32,6 @@ import FeatureSwitched from "./UI/Base/FeatureSwitched";
import LayerConfig from "./Customizations/JSON/LayerConfig";
import ShowDataLayer from "./UI/ShowDataLayer";
import Hash from "./Logic/Web/Hash";
import HistoryHandling from "./Logic/Actors/HistoryHandling";
import FeaturePipeline from "./Logic/FeatureSource/FeaturePipeline";
export class InitUiElements {
@ -118,8 +116,6 @@ export class InitUiElements {
}
new HistoryHandling(Hash.hash, State.state.fullScreenMessage);
InitUiElements.OnlyIf(State.state.featureSwitchUserbadge, () => {
new UserBadge().AttachTo('userbadge');
});
@ -129,9 +125,6 @@ export class InitUiElements {
});
new FullScreenMessageBox().AttachTo("messagesboxmobile");
InitUiElements.OnlyIf(State.state.featureSwitchWelcomeMessage, () => {
InitUiElements.InitWelcomeMessage()
});
@ -214,18 +207,18 @@ export class InitUiElements {
private static InitWelcomeMessage() {
const isOpened = new UIEventSource<boolean>(true);
const fullOptions = new FullWelcomePaneWithTabs(() => isOpened.setData(false));
const fullOptions = new FullWelcomePaneWithTabs(() => {
console.log("Closing the welcome message...")
isOpened.setData(false);
});
// ?-Button on Desktop, opens panel with close-X.
const help = Svg.help_svg().SetClass("open-welcome-button block");
const close = Svg.close_svg().SetClass("close-welcome-button");
const checkbox = new CheckBox(
new Combine([
close,
fullOptions
.SetClass("welcomeMessage")
.onClick(() => {/*Catch the click*/
})]),
}),
help
, isOpened
).AttachTo("messagesbox");
@ -252,15 +245,8 @@ export class InitUiElements {
const layerControlPanel = new LayerControlPanel(
() => State.state.layerControlIsOpened.setData(false))
.SetClass("block p-1 rounded-full");
const closeButton = Svg.close_svg()
.SetClass("layer-selection-toggle")
.SetStyle(" background: var(--subtle-detail-color);")
const checkbox = new CheckBox(
new Combine([
closeButton,
layerControlPanel])
.SetClass("flex flex-row")
,
const checkbox = new CheckBox(
layerControlPanel,
Svg.layers_svg().SetClass("layer-selection-toggle"),
State.state.layerControlIsOpened
).AttachTo("layer-selection");
@ -388,7 +374,6 @@ export class InitUiElements {
State.state.selectedElement,
State.state.filteredLayers,
State.state.leafletMap,
State.state.fullScreenMessage,
() => {
return new SimpleAddUI(
() => State.state.LastClickLocation.setData(undefined)

1
Logic/Actors/StrayClickHandler.ts
View file

@ -17,7 +17,6 @@ export default class StrayClickHandler {
selectedElement: UIEventSource<string>,
filteredLayers: UIEventSource<{ readonly isDisplayed: UIEventSource<boolean> }[]>,
leafletMap: UIEventSource<L.Map>,
fullscreenMessage: UIEventSource<{content: UIElement, hashText: string}>,
uiToShow: (() => UIElement)) {
this._uiToShow = uiToShow;
const self = this;

77
Logic/Actors/TitleHandler.ts
View file

@ -3,31 +3,70 @@ import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
import Translations from "../../UI/i18n/Translations";
import Locale from "../../UI/i18n/Locale";
import {UIElement} from "../../UI/UIElement";
import TagRenderingAnswer from "../../UI/Popup/TagRenderingAnswer";
import {ElementStorage} from "../ElementStorage";
import Combine from "../../UI/Base/Combine";
export default class TitleHandler{
constructor(layoutToUse: UIEventSource<LayoutConfig>, fullScreenMessage: UIEventSource<{ content: UIElement, hashText: string, titleText?: UIElement }>) {
class TitleElement extends UIElement {
private readonly _layoutToUse: UIEventSource<LayoutConfig>;
private readonly _selectedFeature: UIEventSource<any>;
private readonly _allElementsStorage: ElementStorage;
constructor(layoutToUse: UIEventSource<LayoutConfig>,
selectedFeature: UIEventSource<any>,
allElementsStorage : ElementStorage) {
super(layoutToUse);
this._layoutToUse = layoutToUse;
this._selectedFeature = selectedFeature;
this._allElementsStorage = allElementsStorage;
this.ListenTo(Locale.language);
this.dumbMode = false;
}
InnerRender(): string {
const defaultTitle = Translations.WT(this._layoutToUse.data?.title)?.txt ?? "MapComplete"
const feature = this._selectedFeature.data;
if(feature === undefined){
return defaultTitle;
}
layoutToUse.map((layoutToUse) => {
return Translations.WT(layoutToUse?.title)?.txt ?? "MapComplete"
}, [Locale.language]
).addCallbackAndRun((title) => {
document.title = title
});
const layout = this._layoutToUse.data;
const properties = this._selectedFeature.data.properties;
for (const layer of layout.layers) {
if(layer.title === undefined){
continue;
}
if (layer.overpassTags.matchesProperties(properties)) {
fullScreenMessage.addCallbackAndRun(selected => {
const title = Translations.WT(layoutToUse.data?.title)?.txt ?? "MapComplete"
if(selected?.titleText?.data === undefined){
document.title = title
}else{
selected.titleText.Update();
var d = document.createElement('div');
d.innerHTML = selected.titleText.InnerRender();
const poi = (d.textContent || d.innerText)
document.title = title + " | " + poi;
const title = new TagRenderingAnswer(
this._allElementsStorage.getEventSourceFor(feature),
layer.title
)
return new Combine([defaultTitle," | ", title]).Render();
}
})
}
return defaultTitle;
}
}
export default class TitleHandler {
constructor(layoutToUse: UIEventSource<LayoutConfig>,
selectedFeature: UIEventSource<any>,
allElementsStorage : ElementStorage) {
new TitleElement(layoutToUse, selectedFeature, allElementsStorage)
.addCallbackAndRun(contents => {
const d = document.createElement('div');
d.innerHTML = contents;
// We pass everything into a div to strip out images etc...
document.title = (d.textContent || d.innerText);
});
}
}

2
Logic/MetaTagging.ts
View file

@ -74,7 +74,7 @@ export default class MetaTagging {
const tagsSource = State.state.allElements.getEventSourceFor(feature);
tagsSource.ping();
} catch (e) {
console.error(e)
console.warn(e)
}
});
}

6
Logic/Osm/OsmPreferences.ts
View file

@ -4,7 +4,7 @@ import {Utils} from "../../Utils";
export class OsmPreferences {
public preferences = new UIEventSource<any>({});
public preferences = new UIEventSource<any>({}, "all-osm-preferences");
public preferenceSources: any = {}
private auth: any;
private userDetails: UIEventSource<UserDetails>;
@ -29,7 +29,7 @@ export class OsmPreferences {
return this.longPreferences[prefix + key];
}
const source = new UIEventSource<string>(undefined);
const source = new UIEventSource<string>(undefined, "long-osm-preference:"+prefix+key);
this.longPreferences[prefix + key] = source;
const allStartWith = prefix + key + "-combined";
@ -106,7 +106,7 @@ export class OsmPreferences {
if (this.userDetails.data.loggedIn && this.preferences.data[key] === undefined) {
this.UpdatePreferences();
}
const pref = new UIEventSource<string>(this.preferences.data[key]);
const pref = new UIEventSource<string>(this.preferences.data[key],"osm-preference:"+key);
pref.addCallback((v) => {
this.SetPreference(key, v);
});

96
Logic/UIEventSource.ts
View file

@ -1,14 +1,64 @@
export class UIEventSource<T>{
export class UIEventSource<T> {
public data: T;
private readonly tag: string;
private _callbacks = [];
private static allSources : UIEventSource<any>[] = UIEventSource.PrepPerf();
static PrepPerf(){
// @ts-ignore
window.mcperf = () => {
console.log(UIEventSource.allSources.length, "uieventsources created");
const copy = [...UIEventSource.allSources];
copy.sort((a,b) => b._callbacks.length - a._callbacks.length);
console.log("Topten is:")
for (let i = 0; i < 10; i++) {
console.log(copy[i].tag, copy[i]);
}
}
return [];
}
constructor(data: T) {
constructor(data: T, tag: string = "") {
this.tag = tag;
this.data = data;
UIEventSource.allSources.push(this);
}
public static flatten<X>(source: UIEventSource<UIEventSource<X>>, possibleSources: UIEventSource<any>[]): UIEventSource<X> {
const sink = new UIEventSource<X>(source.data?.data);
source.addCallback((latestData) => {
sink.setData(latestData?.data);
});
for (const possibleSource of possibleSources) {
possibleSource?.addCallback(() => {
sink.setData(source.data?.data);
})
}
return sink;
}
public static Chronic(millis: number, asLong: () => boolean = undefined): UIEventSource<Date> {
const source = new UIEventSource<Date>(undefined);
function run() {
source.setData(new Date());
if (asLong === undefined || asLong()) {
window.setTimeout(run, millis);
}
}
run();
return source;
}
public addCallback(callback: ((latestData: T) => void)): UIEventSource<T> {
if(callback === console.log){
if (callback === console.log) {
// This ^^^ actually works!
throw "Don't add console.log directly as a callback - you'll won't be able to find it afterwards. Wrap it in a lambda instead."
}
@ -36,25 +86,9 @@ export class UIEventSource<T>{
}
}
public static flatten<X>(source: UIEventSource<UIEventSource<X>>, possibleSources: UIEventSource<any>[]): UIEventSource<X> {
const sink = new UIEventSource<X>(source.data?.data);
source.addCallback((latestData) => {
sink.setData(latestData?.data);
});
for (const possibleSource of possibleSources) {
possibleSource?.addCallback(() => {
sink.setData(source.data?.data);
})
}
return sink;
}
public map<J>(f: ((T) => J),
extraSources: UIEventSource<any>[] = [],
g: ((J) => T) = undefined ): UIEventSource<J> {
g: ((J) => T) = undefined): UIEventSource<J> {
const self = this;
const newSource = new UIEventSource<J>(
@ -70,7 +104,7 @@ export class UIEventSource<T>{
extraSource?.addCallback(update);
}
if(g !== undefined) {
if (g !== undefined) {
newSource.addCallback((latest) => {
self.setData(g(latest));
})
@ -79,7 +113,6 @@ export class UIEventSource<T>{
return newSource;
}
public syncWith(otherSource: UIEventSource<T>, reverseOverride = false): UIEventSource<T> {
this.addCallback((latest) => otherSource.setData(latest));
const self = this;
@ -94,7 +127,7 @@ export class UIEventSource<T>{
return this;
}
public stabilized(millisToStabilize) : UIEventSource<T>{
public stabilized(millisToStabilize): UIEventSource<T> {
const newSource = new UIEventSource<T>(this.data);
@ -103,7 +136,7 @@ export class UIEventSource<T>{
currentCallback++;
const thisCallback = currentCallback;
window.setTimeout(() => {
if(thisCallback === currentCallback){
if (thisCallback === currentCallback) {
newSource.setData(latestData);
}
}, millisToStabilize)
@ -112,19 +145,4 @@ export class UIEventSource<T>{
return newSource;
}
public static Chronic(millis: number, asLong: () => boolean = undefined): UIEventSource<Date> {
const source = new UIEventSource<Date>(undefined);
function run() {
source.setData(new Date());
if (asLong === undefined || asLong()) {
window.setTimeout(run, millis);
}
}
run();
return source;
}
}

2
Logic/Web/LocalStorageSource.ts
View file

@ -5,7 +5,7 @@ export class LocalStorageSource {
static Get(key: string, defaultValue: string = undefined): UIEventSource<string> {
try {
const saved = localStorage.getItem(key);
const source = new UIEventSource<string>(saved ?? defaultValue);
const source = new UIEventSource<string>(saved ?? defaultValue, "localstorage:"+key);
source.addCallback((data) => {
localStorage.setItem(key, data);

6
State.ts
View file

@ -72,10 +72,6 @@ export default class State {
* The message that should be shown at the center of the screen
*/
public readonly centerMessage = new UIEventSource<string>("");
/**
This message is shown full screen on mobile devices
*/
public readonly fullScreenMessage = new UIEventSource<{ content: UIElement, hashText: string, titleText?: UIElement }>(undefined)
/**
The latest element that was selected - used to generate the right UI at the right place
@ -244,7 +240,7 @@ export default class State {
}
}).ping()
new TitleHandler(this.layoutToUse, this.fullScreenMessage);
new TitleHandler(this.layoutToUse, this.selectedElement, this.allElements);
this.allElements = new ElementStorage();

19
UI/Base/LazyElement.ts
View file

@ -1,22 +1,25 @@
import {UIElement} from "../UIElement";
export default class LazyElement extends UIElement {
export default class LazyElement<T extends UIElement> extends UIElement {
private _content: UIElement = undefined;
public Activate: (onElement?: (element: T) => void) => void;
private _content: T = undefined;
private readonly _loadingContent: string;
public Activate: () => void;
private _loadingContent: string;
constructor(content: (() => UIElement), loadingContent = "Rendering...") {
constructor(content: (() => T), loadingContent = "Rendering...") {
super();
this._loadingContent = loadingContent;
this.dumbMode = false;
const self = this;
this.Activate = () => {
this.Activate = (onElement?: (element: T) => void) => {
console.log("ACTIVATED")
if (this._content === undefined) {
self._content = content();
}
if (onElement) {
onElement(self._content)
}
self.Update();
}
}
@ -27,5 +30,7 @@ export default class LazyElement extends UIElement {
}
return this._content.InnerRender();
}
}

156
UI/Base/ScrollableFullScreen.ts
View file

@ -1,6 +1,5 @@
import {UIElement} from "../UIElement";
import Svg from "../../Svg";
import State from "../../State";
import Combine from "./Combine";
import Ornament from "./Ornament";
@ -8,63 +7,150 @@ import Ornament from "./Ornament";
* Wraps some contents into a panel that scrolls the content _under_ the title
*/
export default class ScrollableFullScreen extends UIElement {
private static _isInited = false;
private title: UIElement;
private content: UIElement;
private _component: UIElement;
private elementsToRestore: Set<HTMLElement> = new Set<HTMLElement>();
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 = Svg.back_svg().onClick(() => {
console.log("Clicked back!");
this.RestoreLeaflet();
if (onClose() !== undefined) {
console.error("WARNING: onClose is not defined")
onClose();
}
}).SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
const returnToTheMap =
new Combine([
Svg.back_svg().SetClass("block sm:hidden"),
Svg.close_svg().SetClass("hidden sm:block")
])
.onClick(() => {
console.log("Clicked back!");
ScrollableFullScreen.RestoreLeaflet();
if (onClose !== undefined) {
onClose();
} else {
console.error("WARNING: onClose is not defined")
}
}).SetClass("mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
title.SetClass("block w-full")
title.SetClass("block w-full text-2xl font-bold p-2 pl-4")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
.SetClass("block sm:hidden h-5")
this._component =
new Combine([
new Combine([
new Combine([returnToTheMap, title])
.AddClass("border-b-2 border-black shadow sm:shadow-none bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
new Combine(["<span>", content, "</span>", ornament])
.SetClass("block p-2 sm:pt-4 w-full h-screen landscape:h-screen sm:h-full sm:w-full overflow-y-auto overflow-x-hidden"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]).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");
new Combine([
new Combine([returnToTheMap, title])
.SetClass("border-b-2 border-black shadow sm:shadow-none bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
new Combine(["<span>", content, "</span>", ornament])
.SetClass("block p-2 sm:pt-4 w-full h-screen landscape:h-screen sm:h-full sm:w-full overflow-y-auto overflow-x-hidden"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]).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");
}
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");
}
}
/**
* 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 === null){
return;
}
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)
}
private static RestoreLeaflet() {
console.log("Restoring")
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();
}
protected InnerUpdate(htmlElement: HTMLElement) {
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 !== "") {
this.elementsToRestore.add(htmlElement);
htmlElement.classList.add("no-transform")
}
htmlElement = htmlElement.parentElement;
} while (htmlElement != null)
super.InnerUpdate(htmlElement);
Update() {
console.log("Updating the scrollableFullScreen")
super.Update();
this._component.Update();
}
private RestoreLeaflet() {
this.elementsToRestore.forEach(
el => el.classList.remove("no-transform")
);
public PrepFullscreen(htmlElement = undefined) {
htmlElement = htmlElement ?? document.getElementById(this.id);
ScrollableFullScreen.PatchLeaflet(htmlElement);
ScrollableFullScreen.HideClutter(htmlElement);
}
protected InnerUpdate(htmlElement: HTMLElement) {
this.PrepFullscreen(htmlElement)
super.InnerUpdate(htmlElement);
}
}

6
UI/Base/SubtleButton.ts
View file

@ -24,9 +24,9 @@ export class SubtleButton extends UIElement{
} else {
img = imageUrl;
}
img.AddClass("block flex items-center justify-center h-11 w-11 flex-shrink0")
img.SetClass("block flex items-center justify-center h-11 w-11 flex-shrink0")
this.image = new Combine([img])
.AddClass("flex-shrink-0");
.SetClass("flex-shrink-0");
}
@ -53,7 +53,7 @@ export class SubtleButton extends UIElement{
return new Combine([
this.image,
this.message,
]).AddClass("block flex p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200")
]).SetClass("block flex p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200")
.Render();
}

12
UI/BigComponents/IndexText.ts
View file

@ -7,22 +7,22 @@ export default class IndexText extends Combine {
constructor() {
super([
new FixedUiElement(`<img class="w-12 h-12 sm:h-24 sm:w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`)
.AddClass("flex-none m-3"),
.SetClass("flex-none m-3"),
new Combine([
Translations.t.index.title
.AddClass("text-2xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl block text-gray-800 xl:inline"),
.SetClass("text-2xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl block text-gray-800 xl:inline"),
Translations.t.index.intro.AddClass(
Translations.t.index.intro.SetClass(
"mt-3 text-base font-semibold text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"),
Translations.t.index.pickTheme.AddClass("mt-3 text-base text-green-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0")
Translations.t.index.pickTheme.SetClass("mt-3 text-base text-green-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0")
]).AddClass("flex flex-col sm:text-center lg:text-left m-1 mt-2 md:m-2 md:mt-4")
]).SetClass("flex flex-col sm:text-center lg:text-left m-1 mt-2 md:m-2 md:mt-4")
]);
this.AddClass("flex flex-row");
this.SetClass("flex flex-row");
}
}

2
UI/BigComponents/SearchAndGo.ts
View file

@ -22,7 +22,7 @@ export default class SearchAndGo extends UIElement {
);
private _foundEntries = new UIEventSource([]);
private _goButton = Svg.search_ui().AddClass('w-8 h-8 full-rounded border-black float-right');
private _goButton = Svg.search_ui().SetClass('w-8 h-8 full-rounded border-black float-right');
constructor() {
super(undefined);

32
UI/FullScreenMessageBoxHandler.ts
View file

@ -1,32 +0,0 @@
import {UIElement} from "./UIElement";
import State from "../State";
import Combine from "./Base/Combine";
/**
* Handles the full screen popup on mobile
*/
export default class FullScreenMessageBox extends UIElement {
private _content: UIElement;
constructor() {
super(State.state.fullScreenMessage);
this.HideOnEmpty(true);
}
InnerRender(): string {
if (State.state.fullScreenMessage.data === undefined) {
return "";
}
this._content = State.state.fullScreenMessage.data.content;
return new Combine([this._content])
.SetClass("block max-h-screen h-screen overflow-x-hidden overflow-y-auto bg-white p-0").Render();
}
protected InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
}
}

46
UI/Popup/FeatureInfoBox.ts
View file

@ -9,29 +9,41 @@ import State from "../../State";
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
export default class FeatureInfoBox extends UIElement {
private _component: UIElement;
public title: UIElement ;
export default class FeatureInfoBox extends ScrollableFullScreen {
constructor(
tags: UIEventSource<any>,
layerConfig: LayerConfig,
onClose: () => {}
onClose: () => void
) {
super();
super(
FeatureInfoBox.GenerateTitleBar(tags, layerConfig),
FeatureInfoBox.GenerateContent(tags, layerConfig),
onClose
);
if (layerConfig === undefined) {
throw "Undefined layerconfig"
}
}
private static GenerateTitleBar( tags: UIEventSource<any>,
layerConfig: LayerConfig): UIElement{
const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined))
.AddClass("text-2xl break-words font-bold p-2");
this.title = title;
.SetClass("text-2xl break-words font-bold p-2");
const titleIcons = new Combine(
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)
.AddClass("block w-8 h-8 align-baseline box-content p-0.5")))
.AddClass("flex flex-row flex-wrap pt-1 items-center mr-2");
.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([
new Combine([title, titleIcons]).SetClass("flex flex-grow justify-between")
])
}
private static GenerateContent(tags: UIEventSource<any>,
layerConfig: LayerConfig): UIElement{
let questionBox: UIElement = undefined;
if (State.state.featureSwitchUserbadge.data) {
@ -53,20 +65,12 @@ export default class FeatureInfoBox extends UIElement {
}
const tail = new Combine([]).SetClass("only-on-mobile");
const content = new Combine([
return new Combine([
...renderings,
tail.SetClass("featureinfobox-tail")
]
)
const titleBar = new Combine([
new Combine([title, titleIcons]).SetClass("flex flex-grow justify-between")
])
this._component = new ScrollableFullScreen(titleBar, content, onClose)
}
InnerRender(): string {
return this._component.Render();
}
}

2
UI/Popup/TagRenderingAnswer.ts
View file

@ -21,7 +21,7 @@ export default class TagRenderingAnswer extends UIElement {
if (configuration === undefined) {
throw "Trying to generate a tagRenderingAnswer without configuration..."
}
this.AddClass("flex items-center flex-row text-lg")
this.SetClass("flex items-center flex-row text-lg")
}
InnerRender(): string {

2
UI/Popup/TagRenderingQuestion.ts
View file

@ -88,7 +88,7 @@ export default class TagRenderingQuestion extends UIElement {
return tags.asHumanString(true, true);
}
)
).AddClass("block")
).SetClass("block")
}
private GenerateInputElement(): InputElement<TagsFilter> {

51
UI/ShowDataLayer.ts
View file

@ -44,10 +44,10 @@ export default class ShowDataLayer {
let geoLayer = self.CreateGeojsonLayer(feats)
if (layoutToUse.clustering.minNeededElements <= features.data.length) {
const cl = window["L"]; // This is a dirty workaround, the clustering plugin binds to the L of the window, not of the namespace or something
const cluster = cl.markerClusterGroup({ disableClusteringAtZoom: layoutToUse.clustering.maxZoom });
cluster.addLayer(geoLayer);
geoLayer = cluster;
const cl = window["L"]; // This is a dirty workaround, the clustering plugin binds to the L of the window, not of the namespace or something
const cluster = cl.markerClusterGroup({disableClusteringAtZoom: layoutToUse.clustering.maxZoom});
cluster.addLayer(geoLayer);
geoLayer = cluster;
}
if (oldGeoLayer) {
@ -60,22 +60,22 @@ export default class ShowDataLayer {
features.addCallbackAndRun(() => update());
leafletMap.addCallback(() => update());
State.state.selectedElement.addCallback(feature => {
if(feature === undefined){
if (feature === undefined) {
return;
}
const id = feature.properties.id+feature.geometry.type+feature._matching_layer_id;
const id = feature.properties.id + feature.geometry.type + feature._matching_layer_id;
const action = self._onSelectedTrigger[id];
if(action){
if (action) {
action();
}
});
Hash.hash.addCallbackAndRun(id => {
// This is a bit of an edge case: if the hash becomes an id to search, we have to show the corresponding popup
if(State.state.selectedElement !== undefined){
if (State.state.selectedElement !== undefined) {
return; // Something is already selected, we don't have to apply this fix
}
const action = self._onSelectedTrigger[id];
if(action){
if (action) {
action();
}
})
@ -126,41 +126,48 @@ export default class ShowDataLayer {
const tags = State.state.allElements.getEventSourceFor(feature);
const uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer, () => popup.closePopup()),
const uiElement: LazyElement<FeatureInfoBox> = new LazyElement(() => 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', () => {
if(!popup.isOpen()){
if (!popup.isOpen()) {
return;
}
State.state.selectedElement.setData(undefined);
State.state.selectedElement.setData(undefined);
});
leafletLayer.bindPopup(popup);
// We first render the UIelement (which'll still need an update later on...)
// But at least it'll be visible already
leafletLayer.on("click", (e) => {
leafletLayer.on("click", () => {
// We set the element as selected...
uiElement.Activate();
uiElement.Activate(e => e.PrepFullscreen());
State.state.selectedElement.setData(feature);
});
const id = feature.properties.id+feature.geometry.type+feature._matching_layer_id;
const id = feature.properties.id + feature.geometry.type + feature._matching_layer_id;
this._onSelectedTrigger[id]
= () => {
if(popup.isOpen()){
= () => {
if (popup.isOpen()) {
return;
}
leafletLayer.openPopup();
uiElement.Activate();
uiElement.Activate(e => e.PrepFullscreen());
State.state.selectedElement.setData(feature);
}
this._onSelectedTrigger[feature.properties.id.replace("/","_")] = this._onSelectedTrigger[id];
if (feature.properties.id.replace(/\//g, "_") === Hash.hash.data) {
this._onSelectedTrigger[feature.properties.id.replace("/", "_")] = this._onSelectedTrigger[id];
if (feature.properties.id.replace(/\//g, "_") === Hash.hash.data && State.state.selectedElement.data === undefined) {
// This element is in the URL, so this is a share link
// We open the relevant popup straight away
uiElement.Activate();
console.log("Opening the popup due to sharelink")
uiElement.Activate(e => e.PrepFullscreen());
popup.setContent(uiElement.Render());
const center = GeoOperations.centerpoint(feature).geometry.coordinates;

6
UI/UIElement.ts
View file

@ -149,16 +149,12 @@ export abstract class UIElement extends UIEventSource<string> {
return this.InnerRender() === "";
}
public SetClass(clss: string): UIElement {
return this.AddClass(clss);
}
/**
* Adds all the relevant classes, space seperated
* @param clss
* @constructor
*/
public AddClass(clss: string) {
public SetClass(clss: string) {
this.dumbMode = false;
const all = clss.split(" ");
let recordedChange = false;

9
css/slideshow.css
View file

@ -78,11 +78,4 @@
max-width: 100%;
max-height: 30vh;
border-radius: 1em;
}
.hidden {
/* This is used by the slideshow, to hide non-active slides*/
display: none !important;
}
}

16
index.css
View file

@ -32,15 +32,21 @@
}
@media only screen and (max-width: 640px), only screen and (max-height: 640px) {
@media only screen and (max-width: 640px) {
.no-transform {
/*This is a workaround to let popup contents escape the popup on mobile*/
/*This is a workaround to let popup contents escape the popup on mobile - see scrollableFullScreen.ts*/
transform: none !important;
}
.clutter-hidden {
/*This is a workaround to let popup contents escape the popup on mobile - see scrollableFullScreen.ts*/
visibility: hidden !important;
}
}
:root {
--subtle-detail-color: #e5f5ff;
--subtle-detail-color-contrast: black;
@ -57,6 +63,11 @@
--return-to-the-map-height: 2em;
}
.hide-when-fullscreen-is-shown {
/*Clutter is actually a class indicating that the element should be hidden when a scrollableFullScreen is opened
It doesn't actually define any rules*/
}
html, body {
height: 100%;
min-height: 100vh;
@ -333,7 +344,6 @@ a {
.welcomeMessage {
display: block;
margin-left: 4em;
max-width: calc(100vw - 5em);
width: 40em;
max-height: calc(100vh - 15em);

10
index.html
View file

@ -44,11 +44,7 @@
<!-- DECORATION 0 END -->
</div>
<div class="only-on-mobile">
<div id="messagesboxmobile"></div>
</div>
<div id="topleft-tools" class="z-index-above-map">
<div id="topleft-tools" class="z-index-above-map clutter">
<div id="userbadge-and-search" class="p-3">
<div id="userbadge" class="shadow rounded-3xl overflow-hidden"></div>
<div id="searchbox" class="shadow rounded-3xl overflow-hidden"></div>
@ -57,13 +53,13 @@
<div id="help-button-mobile"></div>
</div>
<div id="layer-selection" class="absolute bottom-3 left-3 rounded-3xl overflow-hidden"></div>
<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">
Loading MapComplete, hang on...
</div>
<div id="geolocate-button"></div>
<div id="geolocate-button" class="clutter"></div>
<div id="leafletDiv"></div>
<script src="./index.ts"></script>

3
index.ts
View file

@ -119,11 +119,10 @@ if (layoutFromBase64.startsWith("wiki:")) {
} else {
// We fall through: no theme loaded: just show a few buttons
State.state = new State(undefined);
document.getElementById("messagesboxmobile").remove();
new Combine([new MoreScreen(true)
.SetStyle("pointer-events: all;"),
Translations.t.general.openStreetMapIntro
]).AddClass("block m-5 lg:w-3/4 lg:ml-40")
]).SetClass("block m-5 lg:w-3/4 lg:ml-40")
.AttachTo("topleft-tools");
}
window.addEventListener('contextmenu', function (e) { // Not compatible with IE < 9