mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Convert iframe panel to Lit (#10216)
This commit is contained in:
parent
aaa3964bb3
commit
774f22b7e7
@ -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);
|
63
src/panels/iframe/ha-panel-iframe.ts
Normal file
63
src/panels/iframe/ha-panel-iframe.ts
Normal 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;
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user