134 lines
3.1 KiB
JavaScript
Executable File
134 lines
3.1 KiB
JavaScript
Executable File
class WallPanelPanel extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this._hass = null;
|
|
this._panel = null;
|
|
this._narrow = false;
|
|
this.attachShadow({ mode: 'open' });
|
|
}
|
|
|
|
set hass(hass) {
|
|
this._hass = hass;
|
|
this._render();
|
|
}
|
|
|
|
set panel(panel) {
|
|
this._panel = panel;
|
|
this._render();
|
|
}
|
|
|
|
set narrow(narrow) {
|
|
this._narrow = Boolean(narrow);
|
|
this._render();
|
|
}
|
|
|
|
connectedCallback() {
|
|
this._render();
|
|
}
|
|
|
|
_resolveUrl(rawUrl) {
|
|
const value = String(rawUrl || '').trim();
|
|
if (!value) {
|
|
return '';
|
|
}
|
|
|
|
try {
|
|
const url = new URL(value, window.location.href);
|
|
if (!url.searchParams.has('embed')) {
|
|
url.searchParams.set('embed', '1');
|
|
}
|
|
if (!url.searchParams.has('mode')) {
|
|
url.searchParams.set('mode', 'ha');
|
|
}
|
|
return url.toString();
|
|
} catch (error) {
|
|
return value;
|
|
}
|
|
}
|
|
|
|
_render() {
|
|
if (!this.shadowRoot) {
|
|
return;
|
|
}
|
|
|
|
const config = this._panel?.config || {};
|
|
const customConfig = config._panel_custom || {};
|
|
const payload = customConfig.config || customConfig || config;
|
|
const panelUrl = this._resolveUrl(
|
|
payload.panel_url || config.panel_url || customConfig.panel_url || ''
|
|
);
|
|
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100vh;
|
|
background: var(--primary-background-color, #0d0f14);
|
|
color: var(--primary-text-color, #fff);
|
|
}
|
|
.wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: var(--primary-background-color, #0d0f14);
|
|
}
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
display: block;
|
|
background: transparent;
|
|
}
|
|
.empty {
|
|
display: grid;
|
|
place-items: center;
|
|
height: 100%;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
font-family: var(--primary-font-family, sans-serif);
|
|
color: var(--secondary-text-color, #b3b8c2);
|
|
}
|
|
.empty strong {
|
|
display: block;
|
|
color: var(--primary-text-color, #fff);
|
|
margin-bottom: 8px;
|
|
font-size: 1.1rem;
|
|
}
|
|
</style>
|
|
<div class="wrap"></div>
|
|
`;
|
|
|
|
const wrap = this.shadowRoot.querySelector('.wrap');
|
|
if (!wrap) {
|
|
return;
|
|
}
|
|
|
|
if (!panelUrl) {
|
|
wrap.innerHTML = `
|
|
<div class="empty">
|
|
<div>
|
|
<strong>Wall Panel is not configured</strong>
|
|
<div>Set the PHP panel URL in the integration options.</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const iframe = document.createElement('iframe');
|
|
iframe.src = panelUrl;
|
|
iframe.loading = 'eager';
|
|
iframe.referrerPolicy = 'no-referrer';
|
|
iframe.allow = 'autoplay; fullscreen; picture-in-picture';
|
|
wrap.replaceChildren(iframe);
|
|
}
|
|
}
|
|
|
|
if (!customElements.get('wall-panel-panel')) {
|
|
customElements.define('wall-panel-panel', WallPanelPanel);
|
|
}
|