mapcomplete/UI/Base/ScrollableFullScreen.ts

146 lines
5.2 KiB
TypeScript
Raw Normal View History

2021-01-08 02:13:44 +01:00
import {UIElement} from "../UIElement";
import Svg from "../../Svg";
import Combine from "./Combine";
2021-01-08 16:49:42 +01:00
import Ornament from "./Ornament";
2021-01-08 02:13:44 +01:00
/**
* Wraps some contents into a panel that scrolls the content _under_ the title
*/
2021-01-09 00:03:21 +01:00
export default class ScrollableFullScreen extends UIElement {
2021-01-25 03:12:09 +01:00
private static _isInited = false;
2021-01-21 23:39:31 +01:00
private _component: UIElement;
2021-01-08 02:13:44 +01:00
2021-01-22 00:40:15 +01:00
constructor(title: UIElement, content: UIElement, onClose: (() => void)) {
2021-01-08 02:13:44 +01:00
super();
2021-01-25 03:12:09 +01:00
if (!ScrollableFullScreen._isInited) {
ScrollableFullScreen._isInited = ScrollableFullScreen.PreparePatchesForFullscreen();
}
const returnToTheMap =
new Combine([
2021-01-27 02:26:57 +01:00
Svg.back_svg().SetClass("block md:hidden"),
Svg.close_svg().SetClass("hidden md:block")
2021-01-25 03:12:09 +01:00
])
.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")
2021-01-25 03:12:09 +01:00
title.SetClass("block w-full text-2xl font-bold p-2 pl-4")
2021-01-22 00:40:15 +01:00
const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
2021-01-27 02:26:57 +01:00
.SetClass("md:hidden h-5")
2021-01-09 00:03:21 +01:00
2021-01-24 18:33:16 +01:00
this._component =
new Combine([
2021-01-25 03:12:09 +01:00
new Combine([
new Combine([returnToTheMap, title])
2021-01-27 02:26:57 +01:00
.SetClass("border-b-2 border-black shadow md:shadow-none bg-white p-2 pb-0 md:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
new Combine([content, ornament])
2021-01-27 02:58:11 +01:00
.SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto overflow-x-hidden md:max-h-65vh"),
2021-01-25 03:12:09 +01:00
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
2021-01-27 02:26:57 +01:00
]).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");
2021-01-09 00:03:21 +01:00
2021-01-25 04:21:22 +01:00
this.dumbMode = false;
2021-01-08 02:13:44 +01:00
}
2021-01-09 00:03:21 +01:00
2021-01-25 03:12:09 +01:00
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");
}
2021-01-08 02:13:44 +01:00
}
2021-01-24 18:33:16 +01:00
2021-01-25 03:12:09 +01:00
/**
* 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) {
2021-01-25 03:23:00 +01:00
if(htmlElement === undefined || htmlElement === null){
2021-01-25 03:12:09 +01:00
return;
}
2021-01-24 18:33:16 +01:00
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 !== "") {
2021-01-25 03:12:09 +01:00
if (!htmlElement.classList.contains("no-transform")) {
htmlElement.classList.add("no-transform");
htmlElement.classList.add("scrollable-fullscreen-no-transform")
}
2021-01-24 18:33:16 +01:00
}
htmlElement = htmlElement.parentElement;
} while (htmlElement != null)
}
2021-01-25 04:21:22 +01:00
public static RestoreLeaflet() {
2021-01-25 03:12:09 +01:00
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");
2021-01-24 18:33:16 +01:00
2021-01-25 03:12:09 +01:00
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);
2021-01-25 03:23:00 +01:00
htmlElement = htmlElement ?? document.getElementById(this.id);
2021-01-25 03:12:09 +01:00
ScrollableFullScreen.HideClutter(htmlElement);
}
protected InnerUpdate(htmlElement: HTMLElement) {
this.PrepFullscreen(htmlElement)
super.InnerUpdate(htmlElement);
2021-01-24 18:33:16 +01:00
}
2021-01-25 04:21:22 +01:00
Update() {
super.Update();
}
2021-01-08 02:13:44 +01:00
}