mapcomplete/UI/Base/SubtleButton.ts

63 lines
2.1 KiB
TypeScript
Raw Normal View History

import {UIElement} from "../UIElement";
import Translations from "../i18n/Translations";
import Combine from "./Combine";
2020-09-15 02:29:31 +02:00
import {FixedUiElement} from "./FixedUiElement";
export class SubtleButton extends UIElement{
2020-09-15 02:29:31 +02:00
private readonly image: UIElement;
2020-09-02 11:37:34 +02:00
private readonly message: UIElement;
private readonly linkTo: { url: string, newTab?: boolean } = undefined;
2020-09-15 02:29:31 +02:00
constructor(imageUrl: string | UIElement, message: string | UIElement, linkTo: { url: string, newTab?: boolean } = undefined) {
super(undefined);
2020-07-29 19:02:36 +02:00
this.linkTo = linkTo;
this.message = Translations.W(message);
2020-09-15 02:29:31 +02:00
if(this.message !== null){
this.message.dumbMode = false;
2020-09-15 02:29:31 +02:00
}
if ((imageUrl ?? "") === "") {
this.image = new FixedUiElement("");
} else if (typeof (imageUrl) === "string") {
this.image = new FixedUiElement(`<img class="" src="${imageUrl}" alt="">`);
2020-09-15 02:29:31 +02:00
} else {
this.image = imageUrl;
}
// Reset the loading message once things are loaded
document.getElementById('centermessage').innerText = '';
}
InnerRender(): string {
2020-09-02 11:37:34 +02:00
if(this.message !== null && this.message.IsEmpty()){
2020-09-15 02:29:31 +02:00
// Message == null: special case to force empty text
return "";
}
2020-07-29 19:02:36 +02:00
if(this.linkTo != undefined){
return new Combine([
`<a class='block flex group p-3 my-2 bg-white rounded-lg ring-2 ring-white hover:ring-2 hover:ring-white hover:shadow-xl shadow-inner hover:bg-blue-100' href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
`<div class='flex-shrink-0'>`,
`<div class='flex items-center justify-center h-11 w-11'>`,
2020-09-15 02:29:31 +02:00
this.image,
`</div>`,
`</div>`,
`<div class='ml-4'>`,
2020-09-15 02:29:31 +02:00
this.message,
`</div>`,
`</a>`
2020-07-29 19:02:36 +02:00
]).Render();
}
// Styling todo
return new Combine([
'<span class="">',
2020-09-15 02:29:31 +02:00
this.image,
this.message,
'</span>'
]).Render();
}
}