Convert iframe panel to Lit (#10216)

This commit is contained in:
Paulus Schoutsen 2021-10-09 03:39:37 -07:00 committed by GitHub
parent aaa3964bb3
commit 774f22b7e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 44 deletions

View File

@ -1,44 +0,0 @@
import "@polymer/app-layout/app-toolbar/app-toolbar";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../components/ha-menu-button";
import "../../styles/polymer-ha-style";
class HaPanelIframe extends PolymerElement {
static get template() {
return html`
<style include="ha-style">
iframe {
border: 0;
width: 100%;
position: absolute;
height: calc(100% - var(--header-height));
background-color: var(--primary-background-color);
}
</style>
<app-toolbar>
<ha-menu-button hass="[[hass]]" narrow="[[narrow]]"></ha-menu-button>
<div main-title>[[panel.title]]</div>
</app-toolbar>
<iframe
src="[[panel.config.url]]"
sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts allow-modals allow-download"
allowfullscreen="true"
webkitallowfullscreen="true"
mozallowfullscreen="true"
></iframe>
`;
}
static get properties() {
return {
hass: Object,
narrow: Boolean,
panel: Object,
};
}
}
customElements.define("ha-panel-iframe", HaPanelIframe);

View File

@ -0,0 +1,63 @@
import { html, css, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import "../../layouts/hass-error-screen";
import "../../layouts/hass-subpage";
import { HomeAssistant, PanelInfo } from "../../types";
@customElement("ha-panel-iframe")
class HaPanelIframe extends LitElement {
@property() hass!: HomeAssistant;
@property({ type: Boolean }) narrow!: boolean;
@property() panel!: PanelInfo<{ url: string }>;
render() {
if (
location.protocol === "https:" &&
new URL(this.panel.config.url, location.toString()).protocol !== "https:"
) {
return html`
<hass-error-screen
.hass=${this.hass}
.narrow=${this.narrow}
error="Unable to load iframes that load websites over http:// if Home Assistant is served over https://."
rootnav
></hass-error-screen>
`;
}
return html`
<hass-subpage
.hass=${this.hass}
.narrow=${this.narrow}
.header=${this.panel.title}
main-page
>
<iframe
src=${this.panel.config.url}
sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts allow-modals allow-download"
allowfullscreen="true"
webkitallowfullscreen="true"
mozallowfullscreen="true"
></iframe>
</hass-subpage>
`;
}
static styles = css`
iframe {
border: 0;
width: 100%;
position: absolute;
height: 100%;
background-color: var(--primary-background-color);
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-panel-iframe": HaPanelIframe;
}
}