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

Fixes to popup handling and to broken styles

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

53
InitUiElements.ts
View file

@ -31,11 +31,9 @@ import FeatureSwitched from "./UI/Base/FeatureSwitched";
import ShowDataLayer from "./UI/ShowDataLayer";
import Hash from "./Logic/Web/Hash";
import FeaturePipeline from "./Logic/FeatureSource/FeaturePipeline";
import SelectedFeatureHandler from "./Logic/Actors/SelectedFeatureHandler";
import ScrollableFullScreen from "./UI/Base/ScrollableFullScreen";
import Translations from "./UI/i18n/Translations";
import MapControlButton from "./UI/MapControlButton";
import {Map} from "leaflet";
import Combine from "./UI/Base/Combine";
export class InitUiElements {
@ -230,15 +228,13 @@ export class InitUiElements {
private static InitWelcomeMessage() {
const isOpened = new UIEventSource<boolean>(true);
const fullOptions = new FullWelcomePaneWithTabs(() => {
isOpened.setData(false);
});
const isOpened = new UIEventSource<boolean>(false);
const fullOptions = new FullWelcomePaneWithTabs(isOpened);
// ?-Button on Desktop, opens panel with close-X.
const help = new MapControlButton(Svg.help_svg());
// .SetClass("open-welcome-button block");
const checkbox = new CheckBox(
// .SetClass("open-welcome-button block");
new CheckBox(
fullOptions
.SetClass("welcomeMessage")
.onClick(() => {/*Catch the click*/
@ -252,14 +248,15 @@ export class InitUiElements {
// Don't autoclose the first 15 secs when the map is moving
return;
}
checkbox.isEnabled.setData(false);
isOpened.setData(false);
})
State.state.selectedElement.addCallbackAndRun(selected => {
if (selected !== undefined) {
checkbox.isEnabled.setData(false);
isOpened.setData(false);
}
})
isOpened.setData(true)
}
@ -267,36 +264,32 @@ export class InitUiElements {
InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => {
const layerControlPanel = new LayerControlPanel(
() => State.state.layerControlIsOpened.setData(false))
State.state.layerControlIsOpened)
.SetClass("block p-1 rounded-full");
const checkbox = new CheckBox(
layerControlPanel,
new MapControlButton(Svg.layers_svg()),
State.state.layerControlIsOpened
)
const copyrightState = new UIEventSource<boolean>(false);
const copyrightNotice =
new ScrollableFullScreen(
Translations.t.general.attribution.attributionTitle,
new Combine([
() => Translations.t.general.attribution.attributionTitle.Clone(),
() => new Combine([
Translations.t.general.attribution.attributionContent,
"<br/>",
new Attribution(undefined, undefined, State.state.layoutToUse, undefined)
]),
() => {
copyrightState.setData(false)
}
])
)
;
const copyrightButton = new CheckBox(
copyrightNotice,
new MapControlButton(Svg.osm_copyright_svg()),
copyrightState
copyrightNotice.isShown
).SetClass("p-0.5 md:hidden")
new Combine([copyrightButton, checkbox])
.AttachTo("bottom-left");
new Combine([copyrightButton, checkbox])
.AttachTo("bottom-left");
State.state.locationControl
@ -394,7 +387,7 @@ export class InitUiElements {
new ShowDataLayer(source.features, State.state.leafletMap,
State.state.layoutToUse);
// TOO reenable new SelectedFeatureHandler(Hash.hash, State.state.selectedElement, source);
// TOO reenable new SelectedFeatureHandler(Hash.hash, State.state.selectedElement, source);
}
@ -423,16 +416,22 @@ export class InitUiElements {
}
const addNewPoint = new ScrollableFullScreen(
() => Translations.t.general.add.title.Clone(),
() => new SimpleAddUI());
addNewPoint.isShown.addCallback(isShown => {
if (!isShown) {
State.state.LastClickLocation.setData(undefined)
}
})
new StrayClickHandler(
State.state.LastClickLocation,
State.state.selectedElement,
State.state.filteredLayers,
State.state.leafletMap,
() =>
new ScrollableFullScreen(
Translations.t.general.add.title,
new SimpleAddUI(),
() => State.state.LastClickLocation.setData(undefined))
addNewPoint
);
});

54
Logic/Actors/GeoLocationHandler.ts
View file

@ -8,13 +8,46 @@ import {LocalStorageSource} from "../Web/LocalStorageSource";
export default class GeoLocationHandler extends UIElement {
/**
* Wether or not the geolocation is active, aka the user requested the current location
* @private
*/
private readonly _isActive: UIEventSource<boolean> = new UIEventSource<boolean>(false);
/**
* The callback over the permission API
* @private
*/
private readonly _permission: UIEventSource<string> = new UIEventSource<string>("");
/***
* The marker on the map, in order to update it
* @private
*/
private _marker: L.Marker;
/**
* Literally: _currentGPSLocation.data != undefined
* @private
*/
private readonly _hasLocation: UIEventSource<boolean>;
private readonly _currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>;
/**
* Kept in order to update the marker
* @private
*/
private readonly _leafletMap: UIEventSource<L.Map>;
/**
* The date when the user requested the geolocation. If we have a location, it'll autozoom to it the first 30 secs
* @private
*/
private _lastUserRequest: Date;
/**
* A small flag on localstorage. If the user previously granted the geolocation, it will be set.
* On firefox, the permissions api is broken (probably fingerprint resistiance) and "granted + don't ask again" doesn't stick between sessions.
*
* Instead, we set this flag. If this flag is set upon loading the page, we start geolocating immediately.
* If the user denies the geolocation this time, we unset this flag
* @private
*/
private readonly _previousLocationGrant : UIEventSource<string> = LocalStorageSource.Get("geolocation-permissions");
constructor(currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>,
@ -28,17 +61,26 @@ export default class GeoLocationHandler extends UIElement {
import("../../vendor/Leaflet.AccuratePosition.js").then(() => {
self.init();
})
const currentPointer = this._isActive.map(isActive => {
if(isActive && !self._hasLocation.data){
return "cursor-wait"
}
return "cursor-pointer"
}, [this._hasLocation])
currentPointer.addCallbackAndRun(pointerClass => {
self.SetClass(pointerClass);
self.Update()
})
}
public init() {
private init() {
this.ListenTo(this._hasLocation);
this.ListenTo(this._isActive);
this.ListenTo(this._permission);
const self = this;
function onAccuratePositionProgress(e) {
self._currentGPSLocation.setData({latlng: e.latlng, accuracy: e.accuracy});
}
@ -90,7 +132,7 @@ export default class GeoLocationHandler extends UIElement {
?.then(function (status) {
console.log("Geolocation is already", status)
if (status.state === "granted") {
self.StartGeolocating();
self.StartGeolocating(19, false);
}
self._permission.setData(status.state);
status.onchange = function () {
@ -134,10 +176,10 @@ export default class GeoLocationHandler extends UIElement {
}
private StartGeolocating(zoomlevel = 19) {
private StartGeolocating(zoomlevel = 19, zoomToGPS=true) {
const self = this;
console.log("Starting geolocation")
this._lastUserRequest = new Date();
this._lastUserRequest = zoomToGPS ? new Date() : new Date(0);
const map: any = this._leafletMap.data;
if (self._permission.data === "denied") {
self._previousLocationGrant.setData("");

12
Logic/Actors/StrayClickHandler.ts
View file

@ -1,8 +1,8 @@
import * as L from "leaflet";
import {UIElement} from "../../UI/UIElement";
import Svg from "../../Svg";
import {UIEventSource} from "../UIEventSource";
import Img from "../../UI/Base/Img";
import ScrollableFullScreen from "../../UI/Base/ScrollableFullScreen";
/**
* The stray-click-hanlders adds a marker to the map if no feature was clicked.
@ -10,15 +10,13 @@ import Img from "../../UI/Base/Img";
*/
export default class StrayClickHandler {
private _lastMarker;
private _uiToShow: (() => UIElement);
constructor(
lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
selectedElement: UIEventSource<string>,
filteredLayers: UIEventSource<{ readonly isDisplayed: UIEventSource<boolean> }[]>,
leafletMap: UIEventSource<L.Map>,
uiToShow: (() => UIElement)) {
this._uiToShow = uiToShow;
uiToShow: ScrollableFullScreen) {
const self = this;
filteredLayers.data.forEach((filteredLayer) => {
filteredLayer.isDisplayed.addCallback(isEnabled => {
@ -49,13 +47,13 @@ export default class StrayClickHandler {
popupAnchor: [0, -45]
})
});
const uiElement = uiToShow();
const popup = L.popup().setContent(uiElement.Render());
const popup = L.popup().setContent(uiToShow.Render());
self._lastMarker.addTo(leafletMap.data);
self._lastMarker.bindPopup(popup);
self._lastMarker.on("click", () => {
uiElement.Update();
uiToShow.Activate();
uiToShow.Update();
});
});

2
Models/Constants.ts
View file

@ -2,7 +2,7 @@ import { Utils } from "../Utils";
export default class Constants {
public static vNumber = "0.5.2a";
public static vNumber = "0.5.2b";
// The user journey states thresholds when a new feature gets unlocked
public static userJourney = {

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

177
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();
}
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")
}
}).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 =
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.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();
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 === 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);
Activate(): void {
this.isShown.setData(true)
this._fullscreencomponent.AttachTo("fullscreen");
const fs = document.getElementById("fullscreen");
fs.classList.remove("hidden")
}
htmlElement = htmlElement ?? document.getElementById(this.id);
ScrollableFullScreen.HideClutter(htmlElement);
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(() => {
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")
return 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");
}
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;
}

20
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;
@ -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 => {

2
css/openinghourstable.css
View file

@ -4,6 +4,7 @@
height: 100%;
text-align: center;
word-break: normal;
word-wrap: normal;
}
.oh-table th {
padding: 0;
@ -170,6 +171,7 @@
.ohviz-table {
word-break: normal;
word-wrap: normal;
}
.ohviz-range {

18
index.css
View file

@ -46,20 +46,6 @@
}
}
@media only screen and (max-width: 768px) {
.no-transform {
/*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;
@ -79,10 +65,6 @@
--image-carousel-height: 400px;
}
.clutter {
/*Clutter is actually a class indicating that the element should be hidden when a scrollableFullScreen is opened
It doesn't actually define any rules*/
}
.slick-carousel-content {
width: 300px;
max-height: var(--image-carousel-height);

7
index.html
View file

@ -47,7 +47,8 @@
<!-- DECORATION 0 END -->
</div>
<div id="topleft-tools" class="z-index-above-map clutter">
<div id="fullscreen" class="hidden md:hidden fixed inset-0 block z-above-controls"></div>
<div id="topleft-tools" class="z-index-above-map">
<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>
@ -55,8 +56,8 @@
<div id="messagesbox" class="rounded-3xl overflow-hidden ml-3"></div>
</div>
<div id="bottom-left" class="absolute bottom-3 left-3 rounded-3xl clutter z-above-map"></div>
<div id="bottom-right" class="absolute bottom-3 right-2 rounded-3xl clutter z-above-map"></div>
<div id="bottom-left" class="absolute bottom-3 left-3 rounded-3xl z-above-map"></div>
<div id="bottom-right" class="absolute bottom-3 right-2 rounded-3xl z-above-map"></div>
<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...