log101/konulu-konum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: locked-content repond to attribute changes

Browse Source
This commit is contained in:
log101 2024-07-10 13:59:13 +03:00
parent 5821818618
commit 59090b979c
4 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -19,3 +19,4 @@ pnpm-debug.log*
# macOS-specific files # macOS-specific files
.DS_Store .DS_Store
TODO

BIN
bun.lockb
View File

Binary file not shown.

8
src/components/WebComponentWrapper.astro
View File

@ -18,7 +18,7 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
<img id="content" src="#" class="blur-2xl h-[450px]" /> <img id="content" src="#" class="blur-2xl h-[450px]" />
<div class="flex flex-col justify-center gap-4 overlay"> <div class="flex flex-col justify-center gap-4 overlay">
<template id="unlock-content-button-template"> <template id="unlocked-button-template">
<button <button
id="unlock-content-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" 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> </button>
</template> </template>
<template id="unlock-content-button-template-locked"> <template id="locked-button-template">
<button <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" 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 <LockClosedIcon className="mr-2 h-4 w-4" /> İçerik Kilitli
@ -36,7 +37,8 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
</template> </template>
<slot name="locked-content-button" /> <slot name="locked-content-button" />
<unlock-content-button></unlock-content-button>
<unlock-content-button locked></unlock-content-button>
<slot name="locked-content-description"> <slot name="locked-content-description">
<div <div

47
src/components/locked-content.ts
View File

@ -42,18 +42,57 @@ class LockedContent extends HTMLElement {
} }
class UnlockContentButton extends HTMLElement { class UnlockContentButton extends HTMLElement {
static observedAttributes = ["locked"];
constructor() { constructor() {
super(); super();
}
connectedCallback() {
const host = document.getElementById("locked-content"); const host = document.getElementById("locked-content");
if (host) { if (host) {
let template = host.shadowRoot?.getElementById( let lockedTemplate = host.shadowRoot?.getElementById(
"unlock-content-button-template" "locked-button-template"
) as HTMLTemplateElement; ) 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));
}
} }
} }
} }