mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 14:56:37 +00:00
Convert hui-iframe-card to LitElement/TypeScript (#1801)
* Convert hui-iframe-card to LitElement/TypeScript * style cleanup * Address review comments * Addressed review comments
This commit is contained in:
parent
5578580d78
commit
3a196203c3
@ -1,58 +0,0 @@
|
|||||||
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
|
|
||||||
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
|
|
||||||
|
|
||||||
class HuiIframeCard extends PolymerElement {
|
|
||||||
static get template() {
|
|
||||||
return html`
|
|
||||||
<style>
|
|
||||||
ha-card {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
#root {
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
iframe {
|
|
||||||
border: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<ha-card header="[[_config.title]]">
|
|
||||||
<div id="root">
|
|
||||||
<iframe src="[[_config.url]]"></iframe>
|
|
||||||
</div>
|
|
||||||
</ha-card>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
_config: Object,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
ready() {
|
|
||||||
super.ready();
|
|
||||||
if (this._config) this._buildConfig();
|
|
||||||
}
|
|
||||||
|
|
||||||
setConfig(config) {
|
|
||||||
this._config = config;
|
|
||||||
if (this.$) this._buildConfig();
|
|
||||||
}
|
|
||||||
|
|
||||||
_buildConfig() {
|
|
||||||
const config = this._config;
|
|
||||||
|
|
||||||
this.$.root.style.paddingTop = config.aspect_ratio || "50%";
|
|
||||||
}
|
|
||||||
|
|
||||||
getCardSize() {
|
|
||||||
return 1 + this.offsetHeight / 50;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
customElements.define("hui-iframe-card", HuiIframeCard);
|
|
81
src/panels/lovelace/cards/hui-iframe-card.ts
Normal file
81
src/panels/lovelace/cards/hui-iframe-card.ts
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
import { html, LitElement } from "@polymer/lit-element";
|
||||||
|
|
||||||
|
import "../../../components/ha-card.js";
|
||||||
|
|
||||||
|
import { HassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
|
||||||
|
import { LovelaceCard, LovelaceConfig } from "../types.js";
|
||||||
|
|
||||||
|
interface Config extends LovelaceConfig {
|
||||||
|
aspect_ratio?: string;
|
||||||
|
title?: string;
|
||||||
|
url: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class HuiIframeCard extends HassLocalizeLitMixin(LitElement)
|
||||||
|
implements LovelaceCard {
|
||||||
|
protected config?: Config;
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
config: {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public getCardSize() {
|
||||||
|
return 1 + this.offsetHeight / 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
public setConfig(config: Config) {
|
||||||
|
if (!config.url) {
|
||||||
|
throw new Error("URL required");
|
||||||
|
}
|
||||||
|
|
||||||
|
this.config = config;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected render() {
|
||||||
|
if (!this.config) {
|
||||||
|
return html``;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
${this.renderStyle()}
|
||||||
|
<ha-card .header="${this.config.title}">
|
||||||
|
<div id="root">
|
||||||
|
<iframe src="${this.config.url}"></iframe>
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderStyle() {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
ha-card {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#root {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
padding-top: ${this.config!.aspect_ratio || "50%"};
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
position: absolute;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"hui-iframe-card": HuiIframeCard;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("hui-iframe-card", HuiIframeCard);
|
@ -9,7 +9,7 @@ import "../cards/hui-error-card.js";
|
|||||||
import "../cards/hui-glance-card.ts";
|
import "../cards/hui-glance-card.ts";
|
||||||
import "../cards/hui-history-graph-card.js";
|
import "../cards/hui-history-graph-card.js";
|
||||||
import "../cards/hui-horizontal-stack-card.js";
|
import "../cards/hui-horizontal-stack-card.js";
|
||||||
import "../cards/hui-iframe-card.js";
|
import "../cards/hui-iframe-card.ts";
|
||||||
import "../cards/hui-map-card.js";
|
import "../cards/hui-map-card.js";
|
||||||
import "../cards/hui-markdown-card.js";
|
import "../cards/hui-markdown-card.js";
|
||||||
import "../cards/hui-media-control-card.js";
|
import "../cards/hui-media-control-card.js";
|
||||||
|
Loading…
x
Reference in New Issue
Block a user