Format URL attribute as link (#8126)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Philip Allgaier 2021-01-11 15:59:26 +01:00 committed by GitHub
parent edcb7e87bb
commit f42587af22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -12,6 +12,7 @@ import { until } from "lit-html/directives/until";
import hassAttributeUtil, {
formatAttributeName,
} from "../util/hass-attributes-util";
import { haStyle } from "../resources/styles";
let jsYamlPromise: Promise<typeof import("js-yaml")>;
@ -55,33 +56,36 @@ class HaAttributes extends LitElement {
`;
}
static get styles(): CSSResult {
return css`
.data-entry {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.data-entry .value {
max-width: 60%;
overflow-wrap: break-word;
text-align: right;
}
.key {
flex-grow: 1;
}
.attribution {
color: var(--secondary-text-color);
text-align: center;
}
pre {
font-family: inherit;
font-size: inherit;
margin: 0px;
overflow-wrap: break-word;
white-space: pre-line;
}
`;
static get styles(): CSSResult[] {
return [
haStyle,
css`
.data-entry {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.data-entry .value {
max-width: 60%;
overflow-wrap: break-word;
text-align: right;
}
.key {
flex-grow: 1;
}
.attribution {
color: var(--secondary-text-color);
text-align: center;
}
pre {
font-family: inherit;
font-size: inherit;
margin: 0px;
overflow-wrap: break-word;
white-space: pre-line;
}
`,
];
}
private computeDisplayAttributes(filtersArray: string[]): string[] {
@ -105,6 +109,7 @@ class HaAttributes extends LitElement {
if (value === null) {
return "-";
}
// YAML handling
if (
(Array.isArray(value) && value.some((val) => val instanceof Object)) ||
(!Array.isArray(value) && value instanceof Object)
@ -115,6 +120,19 @@ class HaAttributes extends LitElement {
const yaml = jsYamlPromise.then((jsYaml) => jsYaml.safeDump(value));
return html` <pre>${until(yaml, "")}</pre> `;
}
// URL handling
if (typeof value === "string" && value.startsWith("http")) {
try {
// If invalid URL, exception will be raised
const url = new URL(value);
if (url.protocol === "http:" || url.protocol === "https:")
return html`<a target="_blank" rel="noreferrer" href="${value}"
>${value}</a
>`;
} catch (_) {
// Nothing to do here
}
}
return Array.isArray(value) ? value.join(", ") : value;
}
}