Rename to hui-yaml-editor

This commit is contained in:
Bram Kragten 2019-01-28 20:41:09 +01:00
parent 20ecfffb9c
commit d76ffd343e
5 changed files with 63 additions and 33 deletions

View File

@ -103,6 +103,7 @@
"@babel/preset-typescript": "^7.1.0",
"@gfx/zopfli": "^1.0.9",
"@types/chai": "^4.1.7",
"@types/codemirror": "^0.0.71",
"@types/mocha": "^5.2.5",
"babel-eslint": "^10",
"babel-loader": "^8.0.4",

View File

@ -3,24 +3,20 @@ import "codemirror/mode/yaml/yaml";
// tslint:disable-next-line
import codeMirrorCSS from "codemirror/lib/codemirror.css";
import { fireEvent } from "../../../common/dom/fire_event";
let _this;
declare global {
interface HASSDomEvents {
"code-changed": {
"yaml-changed": {
value: string;
};
}
}
export class HuiCodeEditor extends HTMLElement {
public codemirror;
private _value;
export class HuiYamlEditor extends HTMLElement {
public codemirror: CodeMirror;
private _value: string;
constructor() {
public constructor() {
super();
_this = this;
this._value = "";
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.innerHTML = `
@ -43,27 +39,35 @@ export class HuiCodeEditor extends HTMLElement {
this._value = value;
}
get value() {
get value(): string {
return this.codemirror.getValue();
}
public connectedCallback() {
public connectedCallback(): void {
if (!this.codemirror) {
this.codemirror = CodeMirror(this.shadowRoot, {
value: this._value,
lineNumbers: true,
mode: "yaml",
tabSize: 2,
autofocus: true,
});
fireEvent(this, "yaml-changed", { value: this._value });
this.codemirror.on("changes", () => this._onChange());
} else {
this.codemirror.refresh();
}
}
private _onChange() {
fireEvent(this, "code-changed", { value: this.codemirror.getValue() });
private _onChange(): void {
fireEvent(this, "yaml-changed", { value: this.codemirror.getValue() });
}
}
window.customElements.define("hui-code-editor", HuiCodeEditor);
declare global {
interface HTMLElementTagNameMap {
"hui-yaml-editor": HuiYamlEditor;
}
}
window.customElements.define("hui-yaml-editor", HuiYamlEditor);

View File

@ -23,13 +23,16 @@ import { HomeAssistant } from "../../../../types";
import { LovelaceCardConfig } from "../../../../data/lovelace";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../components/hui-code-editor";
import "../../components/hui-yaml-editor";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { HuiYamlEditor } from "../../components/hui-yaml-editor";
import "./hui-card-preview";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { HuiCardPreview } from "./hui-card-preview";
import { LovelaceCardEditor, Lovelace } from "../../types";
import { YamlChangedEvent, ConfigValue, ConfigError } from "../types";
import { ConfigValue, ConfigError } from "../types";
import { EntityConfig } from "../../entity-rows/types";
import { getCardElementTag } from "../../common/get-card-element-tag";
import { addCard, replaceCard } from "../config-util";
@ -115,10 +118,10 @@ export class HuiEditCard extends LitElement {
${this._uiEditor
? this._configElement
: html`
<hui-code-editor
<hui-yaml-editor
.value="${this._configValue!.value}"
@code-changed="${this._handleYamlChanged}"
></hui-code-editor>
@yaml-changed="${this._handleYamlChanged}"
></hui-yaml-editor>
`}
</div>
`;
@ -190,6 +193,9 @@ export class HuiEditCard extends LitElement {
await this.updateComplete;
this._loading = false;
this._resizeDialog();
if (!this._uiEditor) {
this.yamlEditor.codemirror.refresh();
}
}
private async _resizeDialog(): Promise<void> {
@ -256,7 +262,9 @@ export class HuiEditCard extends LitElement {
this._updatePreview(value);
}
private _updatePreview(config: LovelaceCardConfig) {
private async _updatePreview(config: LovelaceCardConfig) {
await this.updateComplete;
if (!this._previewEl) {
return;
}
@ -389,6 +397,10 @@ export class HuiEditCard extends LitElement {
}
}
private get yamlEditor(): HuiYamlEditor {
return this.shadowRoot!.querySelector("hui-yaml-editor")!;
}
static get styles(): CSSResult[] {
return [
haStyleDialog,

View File

@ -14,10 +14,10 @@ import { Lovelace } from "./types";
import "../../components/ha-icon";
import { haStyle } from "../../resources/ha-style";
import "./components/hui-code-editor";
import "./components/hui-yaml-editor";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { HuiCodeEditor } from "./components/hui-code-editor";
import { HuiYamlEditor } from "./components/hui-yaml-editor";
const lovelaceStruct = struct.interface({
title: "string?",
@ -69,24 +69,23 @@ class LovelaceFullConfigEditor extends LitElement {
</app-toolbar>
</app-header>
<div class="content">
<hui-code-editor @code-changed="${this._yamlChanged}">
</hui-code-editor>
<hui-yaml-editor> </hui-yaml-editor>
</div>
</app-header-layout>
`;
}
protected firstUpdated() {
const codeEditor = this.codeEditor;
codeEditor.value = yaml.safeDump(this.lovelace!.config);
codeEditor.addEventListener("keydown", (e) => {
const yamlEditor = this.yamlEditor;
yamlEditor.value = yaml.safeDump(this.lovelace!.config);
yamlEditor.addEventListener("keydown", (e) => {
if (e.keyCode === 51) {
this._hashAdded = true;
return;
}
});
codeEditor.addEventListener("code-changed", (e) => {
this._hash = this._hashAdded || this.codeEditor.value.includes("#");
yamlEditor.addEventListener("yaml-changed", (e) => {
this._hash = this._hashAdded || this.yamlEditor.value.includes("#");
if (this._changed) {
return;
}
@ -169,7 +168,7 @@ class LovelaceFullConfigEditor extends LitElement {
let value;
try {
value = yaml.safeLoad(this.codeEditor.value);
value = yaml.safeLoad(this.yamlEditor.value);
} catch (err) {
alert(`Unable to parse YAML: ${err}`);
this._saving = false;
@ -192,8 +191,8 @@ class LovelaceFullConfigEditor extends LitElement {
this._hashAdded = false;
}
private get codeEditor(): HuiCodeEditor {
return this.shadowRoot!.querySelector("hui-code-editor")! as HuiCodeEditor;
private get yamlEditor(): HuiYamlEditor {
return this.shadowRoot!.querySelector("hui-yaml-editor")!;
}
}

View File

@ -1436,6 +1436,13 @@
resolved "https://registry.yarnpkg.com/@types/clone/-/clone-0.1.30.tgz#e7365648c1b42136a59c7d5040637b3b5c83b614"
integrity sha1-5zZWSMG0ITalnH1QQGN7O1yDthQ=
"@types/codemirror@^0.0.71":
version "0.0.71"
resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-0.0.71.tgz#861f1bcb3100c0a064567c5400f2981cf4ae8ca7"
integrity sha512-b2oEEnno1LIGKMR7uBEsr40al1UijF1HEpRn0+Yf1xOLl24iQgB7DBpZVMM7y54G5wCNoclDrRO65E6KHPNO2w==
dependencies:
"@types/tern" "*"
"@types/compression@^0.0.33":
version "0.0.33"
resolved "https://registry.yarnpkg.com/@types/compression/-/compression-0.0.33.tgz#95dc733a2339aa846381d7f1377792d2553dc27d"
@ -1477,7 +1484,7 @@
resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-0.0.20.tgz#cae698714dd61ebee5ab3f2aeb9a34ba1011735a"
integrity sha512-6dhZJLbA7aOwkYB2GDGdIqJ20wmHnkDzaxV9PJXe7O02I2dSFTERzRB6JrX6cWKaS+VqhhY7cQUMCbO5kloFUw==
"@types/estree@0.0.39":
"@types/estree@*", "@types/estree@0.0.39":
version "0.0.39"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
@ -1850,6 +1857,13 @@
dependencies:
"@types/node" "*"
"@types/tern@*":
version "0.22.1"
resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.22.1.tgz#d96467553128794f42fbe7ba8f60b520acffb817"
integrity sha512-CRzPRkg8hYLwunsj61r+rqPJQbiCIEQqlMMY/0k7krgIsoSaFgGg1ZH2f9qaR1YpenaMl6PnlTtUkCbNH/uo+A==
dependencies:
"@types/estree" "*"
"@types/through@*":
version "0.0.29"
resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.29.tgz#72943aac922e179339c651fa34a4428a4d722f93"