Remove hui-yaml-editor

This commit is contained in:
Bram Kragten 2019-01-28 17:07:02 +01:00
parent 9f4ae5d932
commit 644af4d009
3 changed files with 17 additions and 86 deletions

View File

@ -15,7 +15,7 @@ declare global {
}
export class HuiCodeEditor extends HTMLElement {
public cm;
public codemirror;
private _value;
constructor() {
@ -35,35 +35,34 @@ export class HuiCodeEditor extends HTMLElement {
}
set value(value: string) {
console.log(value);
if (this.cm) {
if (value !== this.cm.getValue()) {
this.cm.setValue(value);
if (this.codemirror) {
if (value !== this.codemirror.getValue()) {
this.codemirror.setValue(value);
}
}
this._value = value;
}
get value() {
return this.cm.getValue();
return this.codemirror.getValue();
}
public connectedCallback() {
if (!this.cm) {
this.cm = CodeMirror(this.shadowRoot, {
if (!this.codemirror) {
this.codemirror = CodeMirror(this.shadowRoot, {
value: this._value,
lineNumbers: true,
mode: "yaml",
tabSize: 2,
});
this.cm.on("changes", this._onChange);
this.codemirror.on("changes", this._onChange);
} else {
this.cm.refresh();
this.codemirror.refresh();
}
}
private _onChange() {
fireEvent(_this, "code-changed", { value: _this.cm.getValue() });
fireEvent(_this, "code-changed", { value: _this.codemirror.getValue() });
}
}

View File

@ -23,7 +23,7 @@ import { HomeAssistant } from "../../../../types";
import { LovelaceCardConfig } from "../../../../data/lovelace";
import { fireEvent } from "../../../../common/dom/fire_event";
import "./hui-yaml-editor";
import "../../components/hui-code-editor";
import "./hui-card-preview";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
@ -36,9 +36,6 @@ import { addCard, replaceCard } from "../config-util";
declare global {
interface HASSDomEvents {
"yaml-changed": {
yaml: string;
};
"entities-changed": {
entities: EntityConfig[];
};
@ -118,11 +115,10 @@ export class HuiEditCard extends LitElement {
${this._uiEditor
? this._configElement
: html`
<hui-yaml-editor
.hass="${this.hass}"
.yaml="${this._configValue!.value}"
@yaml-changed="${this._handleYamlChanged}"
></hui-yaml-editor>
<hui-code-editor
.value="${this._configValue!.value}"
@code-changed="${this._handleYamlChanged}"
></hui-code-editor>
`}
</div>
`;
@ -238,8 +234,8 @@ export class HuiEditCard extends LitElement {
}
}
private _handleYamlChanged(ev: YamlChangedEvent): void {
this._configValue = { format: "yaml", value: ev.detail.yaml };
private _handleYamlChanged(ev: CustomEvent): void {
this._configValue = { format: "yaml", value: ev.detail.value };
try {
const config = yaml.safeLoad(
this._configValue.value

View File

@ -1,64 +0,0 @@
import {
html,
LitElement,
PropertyDeclarations,
TemplateResult,
} from "lit-element";
import "@polymer/paper-input/paper-textarea";
import { HomeAssistant } from "../../../../types";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../components/hui-code-editor";
export class HuiYAMLEditor extends LitElement {
protected hass?: HomeAssistant;
private _yaml?: string;
static get properties(): PropertyDeclarations {
return { _yaml: {} };
}
set yaml(yaml: string) {
if (yaml === undefined) {
return;
} else {
this._yaml = yaml;
}
}
protected render(): TemplateResult | void {
return html`
${this.renderStyle()}
<hui-code-editor
.value="${this._yaml}"
@code-changed="${this._valueChanged}"
>
</hui-code-editor>
`;
}
private renderStyle(): TemplateResult {
return html`
<style>
paper-textarea {
--paper-input-container-shared-input-style_-_font-family: monospace;
}
</style>
`;
}
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "yaml-changed", {
yaml: ev.detail.value,
});
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-yaml-editor": HuiYAMLEditor;
}
}
customElements.define("hui-yaml-editor", HuiYAMLEditor);