2020-11-21 23:06:25 +00:00
|
|
|
import { css, customElement, html, LitElement, property } from "lit-element";
|
2020-11-21 10:28:11 +00:00
|
|
|
// @ts-ignore
|
|
|
|
import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
|
|
|
|
// @ts-ignore
|
|
|
|
import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
|
2020-11-21 23:06:25 +00:00
|
|
|
// @ts-ignore
|
|
|
|
import BackdropStyle from "@patternfly/patternfly/components/Backdrop/backdrop.css";
|
2020-11-20 21:46:05 +00:00
|
|
|
|
2020-11-21 23:06:25 +00:00
|
|
|
@customElement("pb-site-shell")
|
|
|
|
export class SiteShell extends LitElement {
|
2020-11-20 21:46:05 +00:00
|
|
|
@property()
|
2020-11-21 23:06:25 +00:00
|
|
|
set url(value: string) {
|
2020-11-22 18:58:20 +00:00
|
|
|
this._url = value;
|
|
|
|
this.loadContent();
|
2020-11-20 21:46:05 +00:00
|
|
|
}
|
|
|
|
|
2020-11-22 18:58:20 +00:00
|
|
|
_url?: string;
|
|
|
|
|
2020-11-21 10:28:11 +00:00
|
|
|
@property()
|
|
|
|
loading: boolean = false;
|
|
|
|
|
|
|
|
static get styles() {
|
2020-11-21 19:48:49 +00:00
|
|
|
return [
|
|
|
|
css`
|
2020-11-25 11:41:13 +00:00
|
|
|
:host,
|
|
|
|
::slotted(*) {
|
|
|
|
height: 100%;
|
2020-11-21 19:48:49 +00:00
|
|
|
}
|
|
|
|
:host .pf-l-bullseye {
|
|
|
|
position: absolute;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
2020-11-21 20:04:32 +00:00
|
|
|
z-index: 2000;
|
2020-11-21 19:48:49 +00:00
|
|
|
}
|
2020-11-22 19:36:13 +00:00
|
|
|
.pf-c-backdrop {
|
|
|
|
--pf-c-backdrop--BackgroundColor: rgba(
|
|
|
|
0,
|
|
|
|
0,
|
|
|
|
0,
|
|
|
|
0
|
|
|
|
) !important;
|
|
|
|
}
|
2020-11-21 19:48:49 +00:00
|
|
|
`,
|
2020-11-21 23:06:25 +00:00
|
|
|
BackdropStyle,
|
2020-11-21 19:48:49 +00:00
|
|
|
BullseyeStyle,
|
|
|
|
SpinnerStyle,
|
|
|
|
];
|
2020-11-20 21:46:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
loadContent() {
|
2020-11-22 18:58:20 +00:00
|
|
|
if (!this._url) {
|
2020-11-21 19:48:49 +00:00
|
|
|
return;
|
2020-11-20 21:46:05 +00:00
|
|
|
}
|
2020-11-21 10:28:11 +00:00
|
|
|
this.loading = true;
|
2020-11-22 18:58:20 +00:00
|
|
|
fetch(this._url)
|
2020-11-24 22:06:20 +00:00
|
|
|
.then((r) => {
|
|
|
|
if (r.ok) {
|
|
|
|
return r;
|
|
|
|
}
|
|
|
|
console.log(`passbook/site-shell: Request failed ${this._url}`);
|
|
|
|
window.location.hash = "#/";
|
|
|
|
throw new Error("Request failed");
|
|
|
|
})
|
2020-11-21 19:48:49 +00:00
|
|
|
.then((r) => r.text())
|
|
|
|
.then((t) => {
|
|
|
|
this.querySelector("[slot=body]")!.innerHTML = t;
|
|
|
|
})
|
|
|
|
.then(() => {
|
|
|
|
// Ensure anchors only change the hash
|
|
|
|
this.querySelectorAll<HTMLAnchorElement>(
|
|
|
|
"a:not(.pb-root-link)"
|
|
|
|
).forEach((a) => {
|
|
|
|
if (a.href === "") {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
try {
|
|
|
|
const url = new URL(a.href);
|
|
|
|
const qs = url.search || "";
|
|
|
|
a.href = `#${url.pathname}${qs}`;
|
|
|
|
} catch (e) {
|
|
|
|
a.href = `#${a.href}`;
|
|
|
|
}
|
2020-11-21 11:27:19 +00:00
|
|
|
});
|
2020-11-21 19:48:49 +00:00
|
|
|
// Create refresh buttons
|
|
|
|
this.querySelectorAll("[role=pb-refresh]").forEach((rt) => {
|
|
|
|
rt.addEventListener("click", (e) => {
|
|
|
|
this.loadContent();
|
|
|
|
});
|
|
|
|
});
|
2020-11-21 20:22:25 +00:00
|
|
|
// Make get forms (search bar) notify us on submit so we can change the hash
|
|
|
|
this.querySelectorAll("form").forEach((f) => {
|
|
|
|
f.addEventListener("submit", (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(f);
|
|
|
|
const qs = new URLSearchParams(
|
|
|
|
<any>(<unknown>formData)
|
|
|
|
).toString();
|
2020-11-22 18:58:20 +00:00
|
|
|
window.location.hash = `#${this._url}?${qs}`;
|
2020-11-21 20:22:25 +00:00
|
|
|
});
|
|
|
|
});
|
2020-11-21 20:04:32 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
this.loading = false;
|
|
|
|
}, 100);
|
2020-11-21 11:27:19 +00:00
|
|
|
});
|
2020-11-20 21:46:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2020-11-21 19:48:49 +00:00
|
|
|
return html` ${this.loading
|
2020-11-22 12:48:39 +00:00
|
|
|
? html`<div class="pf-c-backdrop">
|
|
|
|
<div class="pf-l-bullseye">
|
|
|
|
<div class="pf-l-bullseye__item">
|
|
|
|
<span
|
|
|
|
class="pf-c-spinner pf-m-xl"
|
|
|
|
role="progressbar"
|
|
|
|
aria-valuetext="Loading..."
|
|
|
|
>
|
|
|
|
<span class="pf-c-spinner__clipper"></span>
|
|
|
|
<span class="pf-c-spinner__lead-ball"></span>
|
|
|
|
<span class="pf-c-spinner__tail-ball"></span>
|
|
|
|
</span>
|
|
|
|
</div>
|
2020-11-21 19:48:49 +00:00
|
|
|
</div>
|
|
|
|
</div>`
|
|
|
|
: ""}
|
|
|
|
<slot name="body"> </slot>`;
|
2020-11-20 21:46:05 +00:00
|
|
|
}
|
|
|
|
}
|