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

feat: show content on click

Browse Source
This commit is contained in:
log101 2024-07-10 14:55:57 +03:00
parent 59090b979c
commit ad19793879
3 changed files with 45 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/LockedContent.tsx
View File

@ -22,7 +22,7 @@ const LocationButton = ({
imageUrl?: string;
location?: string;
}) => {
const [atTarget, setAtTarget] = useState(false);
const [atTarget, setAtTarget] = useState(true);
const [contentVisible, setContentVisible] = useState(false);
const [hasPermission, setHasPermission] = useState(false);
const [watchId, setWatchId] = useState<number>();
@ -57,7 +57,7 @@ const LocationButton = ({
if (betweenMeters > 1000) {
setDistanceRemain(`${(betweenMeters / 1000).toFixed()} KM`);
} else if (betweenMeters > 50) {
} else if (betweenMeters > 200) {
setDistanceRemain(`${betweenMeters.toFixed(0)} M`);
} else {
setAtTarget(true);

46
src/components/WebComponentWrapper.astro
View File

@ -1,5 +1,5 @@
---
import { LockClosedIcon } from "@radix-ui/react-icons";
import { LockClosedIcon, LockOpen1Icon } from "@radix-ui/react-icons";
interface Props {
contentId?: string;
@ -17,30 +17,34 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
<div class="flex flex-col justify-center items-center image-wrapper">
<img id="content" src="#" class="blur-2xl h-[450px]" />
<div class="flex flex-col justify-center gap-4 overlay">
<template id="unlocked-button-template">
<template id="locked-button-template">
<div class="flex flex-col justify-center gap-4 overlay">
<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 text-lg p-6 text-md"
>
<LockClosedIcon className="mr-2 h-4 w-4" /> İçerik Kilitli
</button>
<div
class="rounded-lg border bg-card text-card-foreground shadow-sm p-2"
>
<div class="pb-0 px-4 text-center">
İçeriği görmek için konuma gitmelisin!
</div>
</div>
</div>
</template>
<template id="unlocked-button-template">
<div class="flex flex-col justify-center gap-4 overlay">
<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"
>
<LockOpen1Icon className="mr-2 h-4 w-4" />
İçeriğin Kilidi Açıldı
</button>
</template>
<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
</button>
</template>
<slot name="locked-content-button" />
<unlock-content-button locked></unlock-content-button>
<slot name="locked-content-description">
<div
class="rounded-lg border bg-card text-card-foreground shadow-sm p-2"
>
@ -48,8 +52,10 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
İçeriği görmek için butona bas!
</div>
</div>
</slot>
</div>
</div>
</template>
<unlock-content-button></unlock-content-button>
</div>
</div>
<style>

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

@ -9,15 +9,8 @@ class LockedContent extends HTMLElement {
let templateContent = template.content;
// Get attributes
const contentId = this.getAttribute("contentId");
const imageURL = this.getAttribute("imageURL") ?? "#";
// Fetch functions
const incrementCounter = async (id: string) =>
await fetch(`http://localhost:3000/api/location/increment/${id}`, {
method: "PATCH",
});
// Attach cloned template to DOM
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(templateContent.cloneNode(true));
@ -32,11 +25,7 @@ class LockedContent extends HTMLElement {
);
if (unlockContentButton) {
unlockContentButton.addEventListener("click", () => {
if (contentId) {
incrementCounter(contentId);
}
});
unlockContentButton.addEventListener("click", (el) => {});
}
}
}
@ -44,6 +33,11 @@ class LockedContent extends HTMLElement {
class UnlockContentButton extends HTMLElement {
static observedAttributes = ["locked"];
private incrementCounter = async (id: string) =>
fetch(`http://localhost:3000/api/location/increment/${id}`, {
method: "PATCH",
});
constructor() {
super();
}
@ -52,6 +46,8 @@ class UnlockContentButton extends HTMLElement {
const host = document.getElementById("locked-content");
if (host) {
const contentId = host.getAttribute("contentId");
let lockedTemplate = host.shadowRoot?.getElementById(
"locked-button-template"
) as HTMLTemplateElement;
@ -67,6 +63,15 @@ class UnlockContentButton extends HTMLElement {
} else {
this.appendChild(unlockedTemplateContent.cloneNode(true));
}
this.addEventListener("click", (el) => {
if (contentId) {
this.incrementCounter(contentId);
const imageContent = host.shadowRoot?.getElementById("content");
imageContent?.classList.remove("blur-2xl");
this.remove();
}
});
}
}