Bugfixes

thomasloven · Feb 22, 2022 · ccea2cd · ccea2cd
1 parent 529b66e
commit ccea2cd
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 30 deletions.
diff --git a/layout-card.js b/layout-card.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "layout-card",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "",
   "private": true,
   "scripts": {

diff --git a/src/helpers.ts b/src/helpers.ts
@@ -0,0 +1,15 @@
+export const loadHaYamlEditor = async () => {
+  if (customElements.get("ha-yaml-editor")) return;
+
+  // Load in ha-yaml-editor from developer-tools-service
+  const ppResolver = document.createElement("partial-panel-resolver");
+  const routes = (ppResolver as any).getRoutes([
+    {
+      component_name: "developer-tools",
+      url_path: "a",
+    },
+  ]);
+  await routes?.routes?.a?.load?.();
+  const devToolsRouter = document.createElement("developer-tools-router");
+  await (devToolsRouter as any)?.routerOptions?.routes?.service?.load?.();
+};
diff --git a/src/layout-card-editor.ts b/src/layout-card-editor.ts
@@ -1,8 +1,8 @@
 import { LitElement, html, CSSResultArray, css } from "lit";
 import { property, state, query } from "lit/decorators.js";
 import { LayoutCardConfig } from "./types";
+import { loadHaYamlEditor } from "./helpers";
 
-const LAYOUT_TYPES = ["masonry", "panel", "sidebar"];
 const CUSTOM_LAYOUT_TYPES = ["masonry", "horizontal", "vertical", "grid"];
 
 class LayoutCardEditor extends LitElement {
@@ -19,7 +19,10 @@ class LayoutCardEditor extends LitElement {
 
   setConfig(config) {
     this._config = config;
-    console.log(this._config);
+  }
+
+  firstUpdated() {
+    loadHaYamlEditor();
   }
 
   _handleSwitchTab(ev: CustomEvent) {

diff --git a/src/layouts/base-column-layout.ts b/src/layouts/base-column-layout.ts
@@ -97,6 +97,9 @@ export class BaseColumnLayout extends BaseLayout {
           "var(--masonry-view-card-margin, 4px 4px 8px)"
         };
         --layout-height: ${this._config.layout?.height ?? "auto"};
+        --layout-overflow: ${
+          this._config.layout?.height !== undefined ? "auto" : "visible"
+        };
       }
       @media (max-width: ${column_max_width}px) {
         .column:first-child > * {
@@ -226,7 +229,7 @@ export class BaseColumnLayout extends BaseLayout {
           display: block;
           height: 100%;
           box-sizing: border-box;
-          overflow-y: auto;
+          overflow-y: var(--layout-overflow);
         }
 
         #columns {
@@ -241,7 +244,7 @@ export class BaseColumnLayout extends BaseLayout {
           margin: var(--layout-margin);
           padding: var(--layout-padding);
           height: var(--layout-height);
-          overflow-y: auto;
+          overflow-y: var(--layout-overflow);
         }
         .column {
           grid-row: 1/2;

diff --git a/src/layouts/grid.ts b/src/layouts/grid.ts
@@ -56,6 +56,9 @@ class GridLayout extends BaseLayout {
         --layout-margin: ${this._config.layout?.margin ?? "4px 4px 0px 4px"};
         --layout-padding: ${this._config.layout?.padding ?? "0px"};
         --layout-height: ${this._config.layout?.height ?? "auto"};
+        --layout-overflow: ${
+          this._config.layout?.height !== undefined ? "auto" : "visible"
+        };
       }`;
     this.shadowRoot.appendChild(styleEl);
   }
@@ -139,7 +142,7 @@ class GridLayout extends BaseLayout {
           margin: var(--layout-margin);
           padding: var(--layout-padding);
           height: var(--layout-height);
-          overflow-y: auto;
+          overflow-y: var(--layout-overflow);
         }
         #root > * {
           margin: var(--masonry-view-card-margin, 4px 4px 8px);

diff --git a/src/layouts/masonry.ts b/src/layouts/masonry.ts
@@ -22,7 +22,12 @@ class MasonryLayout extends BaseColumnLayout {
       const col = shortestCol();
       col.appendChild(this.getCardElement(c));
 
-      col.length += c.card.getCardSize ? await c.card.getCardSize() : 1;
+      col.length += c.card.getCardSize
+        ? await (Promise.race([
+            c.card.getCardSize(),
+            new Promise((resolve) => setTimeout(() => resolve(1), 500)),
+          ]) as Promise<number>)
+        : 1;
     }
   }
 }

diff --git a/src/patches/hui-view-editor.ts b/src/patches/hui-view-editor.ts
@@ -1,21 +1,10 @@
+import { loadHaYamlEditor } from "../helpers";
 const LAYOUT_TYPES = ["masonry", "horizontal", "vertical", "grid"];
 
 customElements.whenDefined("hui-view-editor").then(() => {
   const HuiViewEditor = customElements.get("hui-view-editor");
 
-  (async () => {
-    // Load in ha-yaml-editor from developer-tools-service
-    const ppResolver = document.createElement("partial-panel-resolver");
-    const routes = (ppResolver as any).getRoutes([
-      {
-        component_name: "developer-tools",
-        url_path: "a",
-      },
-    ]);
-    await routes?.routes?.a?.load?.();
-    const devToolsRouter = document.createElement("developer-tools-router");
-    await (devToolsRouter as any)?.routerOptions?.routes?.service?.load?.();
-  })();
+  loadHaYamlEditor();
 
   const firstUpdated = HuiViewEditor.prototype.firstUpdated;
   HuiViewEditor.prototype.firstUpdated = function () {
@@ -55,7 +44,7 @@ customElements.whenDefined("hui-view-editor").then(() => {
 
     if (_changedProperties.has("_config")) {
       const layoutEditor = this.shadowRoot.querySelector("ha-yaml-editor");
-      if (layoutEditor) return;
+      if (!layoutEditor) return;
       (layoutEditor as any).defaultValue = this._config.layout;
     }
   };