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

Add binoculars theme, auto reformat everything

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-09-09 00:05:51 +02:00
parent 38dea806c5
commit 78d6482c88
586 changed files with 115573 additions and 111842 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Base/Button.ts
View file

@ -13,7 +13,7 @@ export class Button extends BaseUIElement {
protected InnerConstructElement(): HTMLElement {
const el = this._text.ConstructElement();
if(el === undefined){
if (el === undefined) {
return undefined;
}
const form = document.createElement("form")

48
UI/Base/CenterFlexedElement.ts
View file

@ -1,32 +1,32 @@
import BaseUIElement from "../BaseUIElement";
export class CenterFlexedElement extends BaseUIElement {
private _html: string;
private _html: string;
constructor(html: string) {
super();
this._html = html ?? "";
}
constructor(html: string) {
super();
this._html = html ?? "";
}
InnerRender(): string {
return this._html;
}
InnerRender(): string {
return this._html;
}
protected InnerConstructElement(): HTMLElement {
const e = document.createElement("div");
e.innerHTML = this._html;
e.style.display = "flex";
e.style.height = "100%";
e.style.width = "100%";
e.style.flexDirection = "column";
e.style.flexWrap = "nowrap";
e.style.alignContent = "center";
e.style.justifyContent = "center";
e.style.alignItems = "center";
return e;
}
AsMarkdown(): string {
return this._html;
}
AsMarkdown(): string {
return this._html;
}
protected InnerConstructElement(): HTMLElement {
const e = document.createElement("div");
e.innerHTML = this._html;
e.style.display = "flex";
e.style.height = "100%";
e.style.width = "100%";
e.style.flexDirection = "column";
e.style.flexWrap = "nowrap";
e.style.alignContent = "center";
e.style.justifyContent = "center";
e.style.alignItems = "center";
return e;
}
}

48
UI/Base/Combine.ts
View file

@ -15,33 +15,33 @@ export default class Combine extends BaseUIElement {
return el;
});
}
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("span")
try{
for (const subEl of this.uiElements) {
if(subEl === undefined || subEl === null){
continue;
}
const subHtml = subEl.ConstructElement()
if(subHtml !== undefined){
el.appendChild(subHtml)
}
}
}catch(e){
const domExc = e as DOMException
console.error("DOMException: ", domExc.name)
el.appendChild(new FixedUiElement("Could not generate this combine!").SetClass("alert").ConstructElement())
}
return el;
}
AsMarkdown(): string {
return this.uiElements.map(el => el.AsMarkdown()).join(this.HasClass("flex-col") ? "\n\n" : " ");
}
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("span")
try {
for (const subEl of this.uiElements) {
if (subEl === undefined || subEl === null) {
continue;
}
const subHtml = subEl.ConstructElement()
if (subHtml !== undefined) {
el.appendChild(subHtml)
}
}
} catch (e) {
const domExc = e as DOMException
console.error("DOMException: ", domExc.name)
el.appendChild(new FixedUiElement("Could not generate this combine!").SetClass("alert").ConstructElement())
}
return el;
}
}

10
UI/Base/FixedUiElement.ts
View file

@ -7,19 +7,19 @@ export class FixedUiElement extends BaseUIElement {
super();
this._html = html ?? "";
}
InnerRender(): string {
return this._html;
}
AsMarkdown(): string {
return this._html;
}
protected InnerConstructElement(): HTMLElement {
const e = document.createElement("span")
e.innerHTML = this._html
return e;
}
AsMarkdown(): string {
return this._html;
}
}

20
UI/Base/Link.ts
View file

@ -10,22 +10,27 @@ export default class Link extends BaseUIElement {
constructor(embeddedShow: BaseUIElement | string, href: string | UIEventSource<string>, newTab: boolean = false) {
super();
this._embeddedShow =Translations.W(embeddedShow);
this._embeddedShow = Translations.W(embeddedShow);
this._href = href;
this._newTab = newTab;
}
AsMarkdown(): string {
// @ts-ignore
return `[${this._embeddedShow.AsMarkdown()}](${this._href.data ?? this._href})`;
}
protected InnerConstructElement(): HTMLElement {
const embeddedShow = this._embeddedShow?.ConstructElement();
if(embeddedShow === undefined){
if (embeddedShow === undefined) {
return undefined;
}
const el = document.createElement("a")
if(typeof this._href === "string"){
if (typeof this._href === "string") {
el.href = this._href
}else{
this._href.addCallbackAndRun(href => {
} else {
this._href.addCallbackAndRun(href => {
el.href = href;
})
}
@ -36,9 +41,4 @@ export default class Link extends BaseUIElement {
return el;
}
AsMarkdown(): string {
// @ts-ignore
return `[${this._embeddedShow.AsMarkdown()}](${this._href.data ?? this._href})`;
}
}

22
UI/Base/List.ts
View file

@ -13,15 +13,24 @@ export default class List extends BaseUIElement {
.map(Translations.W);
}
AsMarkdown(): string {
if (this._ordered) {
return "\n\n" + this.uiElements.map((el, i) => " " + i + ". " + el.AsMarkdown().replace(/\n/g, ' \n')).join("\n") + "\n"
} else {
return "\n\n" + this.uiElements.map(el => " - " + el.AsMarkdown().replace(/\n/g, ' \n')).join("\n") + "\n"
}
}
protected InnerConstructElement(): HTMLElement {
const el = document.createElement(this._ordered ? "ol" : "ul")
for (const subEl of this.uiElements) {
if(subEl === undefined || subEl === null){
if (subEl === undefined || subEl === null) {
continue;
}
const subHtml = subEl.ConstructElement()
if(subHtml !== undefined){
if (subHtml !== undefined) {
const item = document.createElement("li")
item.appendChild(subHtml)
el.appendChild(item)
@ -30,14 +39,5 @@ export default class List extends BaseUIElement {
return el;
}
AsMarkdown(): string {
if(this._ordered){
return "\n\n"+this.uiElements.map((el, i) => " "+i+". "+el.AsMarkdown().replace(/\n/g, ' \n') ).join("\n") + "\n"
}else{
return "\n\n"+this.uiElements.map(el => " - "+el.AsMarkdown().replace(/\n/g, ' \n') ).join("\n")+"\n"
}
}
}

10
UI/Base/Minimap.ts
View file

@ -122,11 +122,11 @@ export default class Minimap extends BaseUIElement {
);
if (this._attribution !== undefined) {
if(this._attribution === true){
map.attributionControl.setPrefix(false)
}else{
map.attributionControl.setPrefix(
"<span id='leaflet-attribution'></span>");
if (this._attribution === true) {
map.attributionControl.setPrefix(false)
} else {
map.attributionControl.setPrefix(
"<span id='leaflet-attribution'></span>");
}
}

52
UI/Base/ScrollableFullScreen.ts
View file

@ -8,27 +8,27 @@ import Hash from "../../Logic/Web/Hash";
import BaseUIElement from "../BaseUIElement";
/**
*
*
* The scrollableFullScreen is a bit of a peculiar component:
* - It shows a title and some contents, constructed from the respective functions passed into the constructor
* - When the element is 'activated', one clone of title+contents is attached to the fullscreen
* - The element itself will - upon rendering - also show the title and contents (allthough it'll be a different clone)
*
*
*
*
*/
export default class ScrollableFullScreen extends UIElement {
private static readonly empty = new FixedUiElement("");
private static readonly _actor = ScrollableFullScreen.InitActor();
private static _currentlyOpen: ScrollableFullScreen;
public isShown: UIEventSource<boolean>;
private _component: BaseUIElement;
private _fullscreencomponent: BaseUIElement;
private static readonly _actor = ScrollableFullScreen.InitActor();
private _hashToSet: string;
private static _currentlyOpen : ScrollableFullScreen;
private _hashToSet: string;
constructor(title: ((mode: string) => BaseUIElement), content: ((mode: string) => BaseUIElement),
hashToSet: string,
isShown: UIEventSource<boolean> = new UIEventSource<boolean>(false)
) {
) {
super();
this.isShown = isShown;
this._hashToSet = hashToSet;
@ -46,6 +46,23 @@ export default class ScrollableFullScreen extends UIElement {
})
}
private static clear() {
ScrollableFullScreen.empty.AttachTo("fullscreen")
const fs = document.getElementById("fullscreen");
ScrollableFullScreen._currentlyOpen?.isShown?.setData(false);
fs.classList.add("hidden")
Hash.hash.setData(undefined);
}
private static InitActor() {
Hash.hash.addCallback(hash => {
if (hash === undefined || hash === "") {
ScrollableFullScreen.clear()
}
});
return true;
}
InnerRender(): BaseUIElement {
return this._component;
}
@ -53,7 +70,7 @@ export default class ScrollableFullScreen extends UIElement {
Activate(): void {
this.isShown.setData(true)
this._fullscreencomponent.AttachTo("fullscreen");
if(this._hashToSet != undefined){
if (this._hashToSet != undefined) {
Hash.hash.setData(this._hashToSet)
}
const fs = document.getElementById("fullscreen");
@ -61,7 +78,7 @@ export default class ScrollableFullScreen extends UIElement {
fs.classList.remove("hidden")
}
private BuildComponent(title: BaseUIElement, content:BaseUIElement, isShown: UIEventSource<boolean>) {
private BuildComponent(title: BaseUIElement, content: BaseUIElement, isShown: UIEventSource<boolean>) {
const returnToTheMap =
new Combine([
Svg.back_svg().SetClass("block md:hidden"),
@ -86,21 +103,4 @@ export default class ScrollableFullScreen extends UIElement {
}
private static clear() {
ScrollableFullScreen.empty.AttachTo("fullscreen")
const fs = document.getElementById("fullscreen");
ScrollableFullScreen._currentlyOpen?.isShown?.setData(false);
fs.classList.add("hidden")
Hash.hash.setData(undefined);
}
private static InitActor(){
Hash.hash.addCallback(hash => {
if(hash === undefined || hash === ""){
ScrollableFullScreen.clear()
}
});
return true;
}
}

6
UI/Base/TabbedComponent.ts
View file

@ -9,17 +9,17 @@ export class TabbedComponent extends Combine {
constructor(elements: { header: BaseUIElement | string, content: BaseUIElement | string }[], openedTab: (UIEventSource<number> | number) = 0) {
const openedTabSrc = typeof (openedTab) === "number" ? new UIEventSource(openedTab) : (openedTab ?? new UIEventSource<number>(0))
const tabs: BaseUIElement[] = []
const contentElements: BaseUIElement[] = [];
for (let i = 0; i < elements.length; i++) {
let element = elements[i];
const header = Translations.W(element.header).onClick(() => openedTabSrc.setData(i))
openedTabSrc.addCallbackAndRun(selected => {
if(selected === i){
if (selected === i) {
header.SetClass("tab-active")
header.RemoveClass("tab-non-active")
}else{
} else {
header.SetClass("tab-non-active")
header.RemoveClass("tab-active")
}

39
UI/Base/Title.ts
View file

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

70
UI/Base/VariableUIElement.ts
View file

@ -1,43 +1,43 @@
import { UIEventSource } from "../../Logic/UIEventSource";
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
export class VariableUiElement extends BaseUIElement {
private _element: HTMLElement;
private _element: HTMLElement;
constructor(
contents: UIEventSource<string | BaseUIElement | BaseUIElement[]>
) {
super();
constructor(
contents: UIEventSource<string | BaseUIElement | BaseUIElement[]>
) {
super();
this._element = document.createElement("span");
const el = this._element;
contents.addCallbackAndRun((contents) => {
while (el.firstChild) {
el.removeChild(el.lastChild);
}
this._element = document.createElement("span");
const el = this._element;
contents.addCallbackAndRun((contents) => {
while (el.firstChild) {
el.removeChild(el.lastChild);
}
if (contents === undefined) {
return el;
}
if (typeof contents === "string") {
el.innerHTML = contents;
} else if (contents instanceof Array) {
for (const content of contents) {
const c = content?.ConstructElement();
if (c !== undefined && c !== null) {
el.appendChild(c);
}
}
} else {
const c = contents.ConstructElement();
if (c !== undefined && c !== null) {
el.appendChild(c);
}
}
});
}
if (contents === undefined) {
return el;
}
if (typeof contents === "string") {
el.innerHTML = contents;
} else if (contents instanceof Array) {
for (const content of contents) {
const c = content?.ConstructElement();
if (c !== undefined && c !== null) {
el.appendChild(c);
}
}
} else {
const c = contents.ConstructElement();
if (c !== undefined && c !== null) {
el.appendChild(c);
}
}
});
}
protected InnerConstructElement(): HTMLElement {
return this._element;
}
protected InnerConstructElement(): HTMLElement {
return this._element;
}
}