From 5eb78d7a66ccb01030bc457d8ac152fd6552e140 Mon Sep 17 00:00:00 2001
From: ferrreo <harderthanfire@gmail.com>
Date: Wed, 28 Jun 2023 19:34:18 +0100
Subject: [PATCH] Fix features open and close + rework animation to be more pog

---
 src/components/widgets/AccordionWidget.astro | 50 ++++++++------------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/components/widgets/AccordionWidget.astro b/src/components/widgets/AccordionWidget.astro
index d8f1b0b..bb9bd52 100644
--- a/src/components/widgets/AccordionWidget.astro
+++ b/src/components/widgets/AccordionWidget.astro
@@ -6,20 +6,12 @@ type Props = {
 const { title, description } = Astro.props;
 ---
 
-<div
-  class="w-full rounded-lg border overflow-hidden closed transition-height duration-200 relative px-2 py-2 dark:bg-slate-800"
->
-  <button
-    class="w-full text-center md:text-start accordion flex flex-row gap-x-1 py-1 justify-between items-center"
-  >
-    <h3
-      class="hed w-full font-bold pointer-events-none"
-    >
+<accordion-widget class="w-full rounded-lg border block overflow-hidden closed transition-height duration-200 relative px-2 py-2 dark:bg-slate-800">
+  <button class="w-full text-center md:text-start accordion flex flex-row gap-x-1 py-1 justify-between items-center">
+    <h3 class="hed w-full font-bold pointer-events-none">
       {title}
     </h3>
-    <div
-      class="chev pointer-events-none transition-transform duration-200 shrink-0 h-4 w-4"
-    >
+    <div class="chev pointer-events-none transition-transform duration-200 shrink-0 h-4 w-4">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="shrink md:h-4 fill-slate-800 dark:fill-white transition-transform duration-500 ease-in-out pointer-events-none"
@@ -31,28 +23,28 @@ const { title, description } = Astro.props;
       >
     </div>
   </button>
-  <p
-    style="top: 50px"
-    class="text-center md:text-start absolute pointer-events-none"
-  >
+  <p style="top: 50px" class="text-center md:text-start absolute pointer-events-none">
     {description}
   </p>
-</div>
+</accordion-widget>
 
 <script>
-  const accords = document.querySelectorAll(".accordion");
+  class AccordionWidget extends HTMLElement {
+    constructor() {
+      super();
+      this.addEventListener("click", (event) => {
+        const target = event.target as HTMLElement;
+        const parent = target.parentNode as HTMLElement;
+        const next = target.nextElementSibling as HTMLElement;
+        const nextHeight = next.getBoundingClientRect().height;
+        parent.style.height = parent.style.height ? "" : 58 + nextHeight + "px";
+        parent.classList.toggle("closed");
+        target.querySelector(".chev")?.classList.toggle("rotate-180");
+      });
+    }
+  }
 
-  accords.forEach((accord) => {
-    accord.addEventListener("click", (e) => {
-      const target = e.target as HTMLElement;
-      const parent = target.parentNode as HTMLElement;
-      const next = target.nextElementSibling as HTMLElement;
-      const nextHeight = next.getBoundingClientRect().height;
-      parent.style.height = parent.style.height ? "" : 58 + nextHeight + "px";
-      parent.classList.toggle("closed");
-      target.querySelector(".chev")?.classList.toggle("rotate-180");
-    });
-  });
+  customElements.define("accordion-widget", AccordionWidget);
 </script>
 
 <style>