From 59090b979ce6eca43e204282c334d247dc74da82 Mon Sep 17 00:00:00 2001
From: log101 <ffrknerdm@gmail.com>
Date: Wed, 10 Jul 2024 13:59:13 +0300
Subject: [PATCH] feat: locked-content repond to attribute changes

---
 .gitignore                               |   1 +
 bun.lockb                                | Bin 254093 -> 254093 bytes
 src/components/WebComponentWrapper.astro |   8 ++--
 src/components/locked-content.ts         |  47 +++++++++++++++++++++--
 4 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6d4c0aa..90b22c1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+TODO
diff --git a/bun.lockb b/bun.lockb
index 27d9837d992f8f88aa692df5b66588d5f4ef4ab2..d6aa602f847dd76c13d35e19574a326cbecd3b01 100755
GIT binary patch
delta 32
ocmeA@$lrUAzoCV33)9^h9E@>>dX{>IM(s~$Fl~Q2gL#EJ0MAqmrvLx|

delta 32
kcmeA@$lrUAzoCV33)9^h983%l(EfA=)Apw`m{+(10J(q*ApigX

diff --git a/src/components/WebComponentWrapper.astro b/src/components/WebComponentWrapper.astro
index dd003ce..3a2644e 100644
--- a/src/components/WebComponentWrapper.astro
+++ b/src/components/WebComponentWrapper.astro
@@ -18,7 +18,7 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
       <img id="content" src="#" class="blur-2xl h-[450px]" />
 
       <div class="flex flex-col justify-center gap-4 overlay">
-        <template id="unlock-content-button-template">
+        <template id="unlocked-button-template">
           <button
             id="unlock-content-button"
             class="inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-11 rounded-md text-lg p-6 animate-pulse bg-indigo-600 hover:bg-indigo-700 hover:animate-none border-2 border-indigo-800"
@@ -27,8 +27,9 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
           </button>
         </template>
 
-        <template id="unlock-content-button-template-locked">
+        <template id="locked-button-template">
           <button
+            id="unlock-content-button"
             class="inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md px-8 text-md"
           >
             <LockClosedIcon className="mr-2 h-4 w-4" /> İçerik Kilitli
@@ -36,7 +37,8 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
         </template>
 
         <slot name="locked-content-button" />
-        <unlock-content-button></unlock-content-button>
+
+        <unlock-content-button locked></unlock-content-button>
 
         <slot name="locked-content-description">
           <div
diff --git a/src/components/locked-content.ts b/src/components/locked-content.ts
index 58018e9..2b71134 100644
--- a/src/components/locked-content.ts
+++ b/src/components/locked-content.ts
@@ -42,18 +42,57 @@ class LockedContent extends HTMLElement {
 }
 
 class UnlockContentButton extends HTMLElement {
+  static observedAttributes = ["locked"];
+
   constructor() {
     super();
+  }
 
+  connectedCallback() {
     const host = document.getElementById("locked-content");
 
     if (host) {
-      let template = host.shadowRoot?.getElementById(
-        "unlock-content-button-template"
+      let lockedTemplate = host.shadowRoot?.getElementById(
+        "locked-button-template"
       ) as HTMLTemplateElement;
-      let templateContent = template.content;
+      let lockedTemplateContent = lockedTemplate.content;
 
-      this.appendChild(templateContent.cloneNode(true));
+      let unlockedTemplate = host.shadowRoot?.getElementById(
+        "unlocked-button-template"
+      ) as HTMLTemplateElement;
+      let unlockedTemplateContent = unlockedTemplate.content;
+
+      if (this.hasAttribute("locked")) {
+        this.appendChild(lockedTemplateContent.cloneNode(true));
+      } else {
+        this.appendChild(unlockedTemplateContent.cloneNode(true));
+      }
+    }
+  }
+
+  attributeChangedCallback(name: string, _: string, newValue: string) {
+    if (name != "locked") return;
+    const host = document.getElementById("locked-content");
+
+    if (host) {
+      let lockedTemplate = host.shadowRoot?.getElementById(
+        "locked-button-template"
+      ) as HTMLTemplateElement;
+      let lockedTemplateContent = lockedTemplate.content;
+
+      let unlockedTemplate = host.shadowRoot?.getElementById(
+        "unlocked-button-template"
+      ) as HTMLTemplateElement;
+      let unlockedTemplateContent = unlockedTemplate.content;
+
+      if (newValue == "true") {
+        const child = this.firstElementChild;
+        child?.replaceWith(lockedTemplateContent.cloneNode(true));
+        this.replaceWith;
+      } else {
+        const child = this.firstElementChild;
+        child?.replaceWith(unlockedTemplateContent.cloneNode(true));
+      }
     }
   }
 }