use custom element

Lehoczky · Aug 10, 2024 · c9edfff · c9edfff
1 parent 079b37d
commit c9edfff
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 49 deletions.
diff --git a/packages/demo/src/components/ResizableWindow.astro b/packages/demo/src/components/ResizableWindow.astro
@@ -10,7 +10,7 @@ export interface Props extends HTMLAttributes<"div"> {}
 const { class: className, ...attrs } = Astro.props
 ---
 
-<div
+<resizable-window
   class={cn(
     "flex min-w-[10rem] max-w-[896px] resize-x flex-col overflow-x-auto rounded-xl @container sm:overflow-hidden",
     className,
@@ -19,12 +19,59 @@ const { class: className, ...attrs } = Astro.props
 >
   <ResizableWindowHeader />
 
-  <div
-    data-resizable-window=""
-    class="relative grid place-items-stretch bg-base-600"
-  >
+  <div data-frame class="relative grid place-items-stretch bg-base-600">
     <slot />
 
     <ResizableWindowDimensions class="absolute right-0 top-px" />
   </div>
-</div>
+</resizable-window>
+
+<script>
+  import { debounce } from "perfect-debounce"
+
+  class ResizableWindow extends HTMLElement {
+    constructor() {
+      super()
+
+      const frame = this.querySelector("[data-frame]")
+      const dimensionContainer = this.querySelector("[data-dimensions]")
+
+      const numberFormatter = Intl.NumberFormat("en", {
+        maximumFractionDigits: 2,
+      })
+      const dimensionText = (width: number, height: number) => {
+        return `${numberFormatter.format(width)} x ${numberFormatter.format(height)}`
+      }
+
+      const hideDimensionContainer = debounce(
+        (element: Element) => element.classList.add("invisible"),
+        1500,
+      )
+
+      // We want to skip the first resize callback, because it fires
+      // immediately on page load thanks to the iframe content being loaded.
+      let isFirstUpdate = true
+
+      const resizeObserver = new ResizeObserver((entries) => {
+        if (isFirstUpdate) {
+          isFirstUpdate = false
+          return
+        }
+
+        const { width, height } = entries[0].contentRect
+
+        if (dimensionContainer) {
+          dimensionContainer.classList.remove("invisible")
+          dimensionContainer.textContent = dimensionText(width, height)
+          hideDimensionContainer(dimensionContainer)
+        }
+      })
+
+      if (frame) {
+        resizeObserver.observe(frame)
+      }
+    }
+  }
+
+  customElements.define("resizable-window", ResizableWindow)
+</script>
diff --git a/packages/demo/src/pages/index.astro b/packages/demo/src/pages/index.astro
@@ -102,46 +102,3 @@ import DemoSection from "../components/DemoSection.astro"
     </div>
   </div>
 </MainLayout>
-
-<script>
-  import { debounce } from "perfect-debounce"
-
-  const resizableWindows = document.querySelectorAll("[data-resizable-window]")
-
-  const numberFormatter = Intl.NumberFormat("en", {
-    maximumFractionDigits: 2,
-  })
-  const dimensionText = (width: number, height: number) => {
-    return `${numberFormatter.format(width)} x ${numberFormatter.format(height)}`
-  }
-
-  const hideDimensionContainer = debounce(
-    (element: Element) => element.classList.add("invisible"),
-    1500,
-  )
-
-  // We want to skip the first resize callback, because it fires
-  // immediately on page load thanks to the iframe content being loaded.
-  let isFirstUpdate = true
-
-  const resizeObserver = new ResizeObserver((entries) => {
-    if (isFirstUpdate) {
-      isFirstUpdate = false
-      return
-    }
-
-    const entry = entries[0]
-    const { width, height } = entry.contentRect
-    const dimensionContainer = entry.target.querySelector("[data-dimensions]")
-
-    if (dimensionContainer) {
-      dimensionContainer.classList.remove("invisible")
-      dimensionContainer.textContent = dimensionText(width, height)
-      hideDimensionContainer(dimensionContainer)
-    }
-  })
-
-  for (const window of resizableWindows) {
-    resizeObserver.observe(window)
-  }
-</script>