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

First nearly-finished draft of project page

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-11-26 02:45:39 +01:00
parent e8fb457596
commit adf4eb18c0
6 changed files with 216 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

4
UI/Base/Title.ts
View file

@ -1,9 +1,11 @@
import BaseUIElement from "../BaseUIElement";
import {FixedUiElement} from "./FixedUiElement";
import Hash from "../../Logic/Web/Hash";
export default class Title extends BaseUIElement {
public readonly title: BaseUIElement;
public readonly level: number;
public readonly id : string
constructor(embedded: string | BaseUIElement, level: number = 3) {
super()
@ -13,6 +15,7 @@ export default class Title extends BaseUIElement {
this.title = embedded
}
this.level = level;
this.id = this.title.ConstructElement().innerText.replace(/ /g, '_')
}
AsMarkdown(): string {
@ -36,6 +39,7 @@ export default class Title extends BaseUIElement {
}
const h = document.createElement("h" + this.level)
h.appendChild(el)
el.id = this.id
return h;
}
}

24
UI/Base/Toggleable.ts
View file

@ -1,6 +1,8 @@
import BaseUIElement from "../BaseUIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import Combine from "./Combine";
import Title from "./Title";
import Hash from "../../Logic/Web/Hash";
export class Accordeon extends Combine {
@ -23,14 +25,32 @@ export class Accordeon extends Combine {
export default class Toggleable extends Combine {
public readonly isVisible = new UIEventSource(false)
constructor(title: BaseUIElement, content: BaseUIElement) {
constructor(title: Title | BaseUIElement, content: BaseUIElement) {
super([title, content])
content.SetClass("animate-height border-l-4 border-gray-300 pl-2")
content.SetClass("animate-height border-l-4 pl-2")
title.SetClass("background-subtle rounded-lg")
const self = this
this.onClick(() => self.isVisible.setData(!self.isVisible.data))
const contentElement = content.ConstructElement()
if(title instanceof Title){
Hash.hash.addCallbackAndRun(h => {
if(h === title.id){
self.isVisible.setData(true)
content.RemoveClass("border-gray-300")
content.SetClass("border-red-300")
}else{
content.SetClass("border-gray-300")
content.RemoveClass("border-red-300")
}
})
this.isVisible.addCallbackAndRun(isVis => {
if(isVis){
Hash.hash.setData(title.id)
}
})
}
this.isVisible.addCallbackAndRun(isVisible => {
if (isVisible) {
contentElement.style.maxHeight = "100vh"