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

Add professional html page

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-11-25 22:16:00 +01:00
parent 537966f282
commit e8fb457596
4 changed files with 81 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

18
UI/Base/Combine.ts
View file

@ -1,6 +1,7 @@
import {FixedUiElement} from "./FixedUiElement";
import {Utils} from "../../Utils";
import BaseUIElement from "../BaseUIElement";
import Title from "./Title";
export default class Combine extends BaseUIElement {
private readonly uiElements: BaseUIElement[];
@ -22,10 +23,7 @@ export default class Combine extends BaseUIElement {
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("span")
try {
for (const subEl of this.uiElements) {
if (subEl === undefined || subEl === null) {
continue;
@ -48,5 +46,19 @@ export default class Combine extends BaseUIElement {
return el;
}
public getToC(): Title[]{
const titles = []
for (const uiElement of this.uiElements) {
if(uiElement instanceof Combine){
titles.push(...uiElement.getToC())
}else if(uiElement instanceof Title){
titles.push(uiElement)
}
}
return titles
}
}

22
UI/Base/Title.ts
View file

@ -2,39 +2,39 @@ import BaseUIElement from "../BaseUIElement";
import {FixedUiElement} from "./FixedUiElement";
export default class Title extends BaseUIElement {
private readonly _embedded: BaseUIElement;
private readonly _level: number;
public readonly title: BaseUIElement;
public readonly level: number;
constructor(embedded: string | BaseUIElement, level: number = 3) {
super()
if (typeof embedded === "string") {
this._embedded = new FixedUiElement(embedded)
this.title = new FixedUiElement(embedded)
} else {
this._embedded = embedded
this.title = embedded
}
this._level = level;
this.level = level;
}
AsMarkdown(): string {
const embedded = " " + this._embedded.AsMarkdown() + " ";
const embedded = " " + this.title.AsMarkdown() + " ";
if (this._level == 1) {
if (this.level == 1) {
return "\n\n" + embedded + "\n" + "=".repeat(embedded.length) + "\n\n"
}
if (this._level == 2) {
if (this.level == 2) {
return "\n\n" + embedded + "\n" + "-".repeat(embedded.length) + "\n\n"
}
return "\n\n" + "#".repeat(this._level) + embedded + "\n\n";
return "\n\n" + "#".repeat(this.level) + embedded + "\n\n";
}
protected InnerConstructElement(): HTMLElement {
const el = this._embedded.ConstructElement()
const el = this.title.ConstructElement()
if (el === undefined) {
return undefined;
}
const h = document.createElement("h" + this._level)
const h = document.createElement("h" + this.level)
h.appendChild(el)
return h;
}

34
UI/Base/Toggleable.ts
View file

@ -20,42 +20,26 @@ export class Accordeon extends Combine {
}
export default class Toggleable extends BaseUIElement {
export default class Toggleable extends Combine {
public readonly isVisible = new UIEventSource(false)
private readonly title: BaseUIElement;
private readonly content: BaseUIElement;
constructor(title: BaseUIElement, content: BaseUIElement) {
super()
this.title = title;
this.content = content;
this.content.SetClass("animate-height border-l-4 border-gray-300 pl-2")
this.title.SetClass("background-subtle rounded-lg")
super([title, content])
content.SetClass("animate-height border-l-4 border-gray-300 pl-2")
title.SetClass("background-subtle rounded-lg")
const self = this
this.onClick(() => self.isVisible.setData(!self.isVisible.data))
}
protected InnerConstructElement(): HTMLElement {
const title = this.title.ConstructElement()
const content = this.content.ConstructElement()
const contentElement = content.ConstructElement()
this.isVisible.addCallbackAndRun(isVisible => {
if (isVisible) {
content.style.maxHeight = "100vh"
content.style["-webkit-mask-image"] = "unset"
contentElement.style.maxHeight = "100vh"
contentElement.style["-webkit-mask-image"] = "unset"
} else {
content.style["-webkit-mask-image"] = "-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))"
content.style.maxHeight = "2rem"
contentElement.style["-webkit-mask-image"] = "-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))"
contentElement.style.maxHeight = "2rem"
}
})
const div = document.createElement("div")
div.appendChild(title)
div.appendChild(content)
return div;
}
}