jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-22 16:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Ensure Sortable is recreated when card editors are reopened (#10382)

Browse Source
This commit is contained in:
Nathan Orick 2021-10-25 13:49:00 -04:00 committed by GitHub
parent b5c717a559
commit a12c2eea5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/panels/lovelace/components/hui-entity-editor.ts
View File

@ -10,10 +10,6 @@ import {
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { guard } from "lit/directives/guard"; import { guard } from "lit/directives/guard";
import type { SortableEvent } from "sortablejs"; import type { SortableEvent } from "sortablejs";
import Sortable, {
AutoScroll,
OnSpill,
} from "sortablejs/modular/sortable.core.esm";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/entity/ha-entity-picker"; import "../../../components/entity/ha-entity-picker";
import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker"; import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
@ -22,6 +18,8 @@ import { sortableStyles } from "../../../resources/ha-sortable-style";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { EntityConfig } from "../entity-rows/types"; import { EntityConfig } from "../entity-rows/types";
let Sortable;
@customElement("hui-entity-editor") @customElement("hui-entity-editor")
export class HuiEntityEditor extends LitElement { export class HuiEntityEditor extends LitElement {
@property({ attribute: false }) protected hass?: HomeAssistant; @property({ attribute: false }) protected hass?: HomeAssistant;
@ -34,7 +32,7 @@ export class HuiEntityEditor extends LitElement {
@state() private _renderEmptySortable = false; @state() private _renderEmptySortable = false;
private _sortable?: Sortable; private _sortable?;
public connectedCallback() { public connectedCallback() {
super.connectedCallback(); super.connectedCallback();
@ -86,11 +84,6 @@ export class HuiEntityEditor extends LitElement {
`; `;
} }
protected firstUpdated(): void {
Sortable.mount(OnSpill);
Sortable.mount(new AutoScroll());
}
protected updated(changedProps: PropertyValues): void { protected updated(changedProps: PropertyValues): void {
super.updated(changedProps); super.updated(changedProps);
@ -128,7 +121,17 @@ export class HuiEntityEditor extends LitElement {
this._renderEmptySortable = false; this._renderEmptySortable = false;
} }
private _createSortable() { private async _createSortable() {
if (!Sortable) {
const sortableImport = await import(
"sortablejs/modular/sortable.core.esm"
);
Sortable = sortableImport.Sortable;
Sortable.mount(sortableImport.OnSpill);
Sortable.mount(sortableImport.AutoScroll());
}
this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), { this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), {
animation: 150, animation: 150,
fallbackClass: "sortable-fallback", fallbackClass: "sortable-fallback",

25
src/panels/lovelace/editor/hui-entities-card-row-editor.ts
View File

@ -10,10 +10,6 @@ import {
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { guard } from "lit/directives/guard"; import { guard } from "lit/directives/guard";
import type { SortableEvent } from "sortablejs"; import type { SortableEvent } from "sortablejs";
import Sortable, {
AutoScroll,
OnSpill,
} from "sortablejs/modular/sortable.core.esm";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/entity/ha-entity-picker"; import "../../../components/entity/ha-entity-picker";
import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker"; import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
@ -23,6 +19,8 @@ import { sortableStyles } from "../../../resources/ha-sortable-style";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types"; import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
let Sortable;
declare global { declare global {
interface HASSDomEvents { interface HASSDomEvents {
"entities-changed": { "entities-changed": {
@ -43,7 +41,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
@state() private _renderEmptySortable = false; @state() private _renderEmptySortable = false;
private _sortable?: Sortable; private _sortable?;
public connectedCallback() { public connectedCallback() {
super.connectedCallback(); super.connectedCallback();
@ -134,11 +132,6 @@ export class HuiEntitiesCardRowEditor extends LitElement {
`; `;
} }
protected firstUpdated(): void {
Sortable.mount(OnSpill);
Sortable.mount(new AutoScroll());
}
protected updated(changedProps: PropertyValues): void { protected updated(changedProps: PropertyValues): void {
super.updated(changedProps); super.updated(changedProps);
@ -176,7 +169,17 @@ export class HuiEntitiesCardRowEditor extends LitElement {
this._renderEmptySortable = false; this._renderEmptySortable = false;
} }
private _createSortable() { private async _createSortable() {
if (!Sortable) {
const sortableImport = await import(
"sortablejs/modular/sortable.core.esm"
);
Sortable = sortableImport.Sortable;
Sortable.mount(sortableImport.OnSpill);
Sortable.mount(sortableImport.AutoScroll());
}
this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), { this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), {
animation: 150, animation: 150,
fallbackClass: "sortable-fallback", fallbackClass: "sortable-fallback",