50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
|
import { html, LitElement } from "./lib/lit.min.js";
|
||
|
|
import "./upload-form.js";
|
||
|
|
import "./list-blobs.js";
|
||
|
|
import "./mirror-blobs.js";
|
||
|
|
|
||
|
|
export class BlossomApp extends LitElement {
|
||
|
|
static properties = {
|
||
|
|
selected: { state: true },
|
||
|
|
status: { state: true, type: String },
|
||
|
|
};
|
||
|
|
|
||
|
|
createRenderRoot() {
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
connectedCallback() {
|
||
|
|
super.connectedCallback();
|
||
|
|
window.addEventListener("hashchange", () => {
|
||
|
|
this.requestUpdate();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const hash = location.hash;
|
||
|
|
|
||
|
|
let content = "";
|
||
|
|
switch (hash) {
|
||
|
|
case "#list":
|
||
|
|
content = html`<list-blobs class="z-10 sm:max-w-4xl w-full"></list-blobs>`;
|
||
|
|
break;
|
||
|
|
case "#mirror":
|
||
|
|
content = html`<mirror-blobs class="z-10 sm:max-w-4xl w-full"></mirror-blobs>`;
|
||
|
|
break;
|
||
|
|
case "#upload":
|
||
|
|
default:
|
||
|
|
content = html`<upload-form class="z-10 sm:max-w-lg w-full"></upload-form>`;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
return html` <div
|
||
|
|
class="relative min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 bg-gray-500 bg-no-repeat bg-cover relative items-center"
|
||
|
|
>
|
||
|
|
<div class="absolute bg-black opacity-60 inset-0 z-0"></div>
|
||
|
|
${content}
|
||
|
|
</div>`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define("blossom-app", BlossomApp);
|