feat: create a lit component

This commit is contained in:
log101 2024-07-11 13:49:35 +03:00
parent 6aae6b37bd
commit 873e127251
6 changed files with 35 additions and 2 deletions

BIN
bun.lockb

Binary file not shown.

View File

@ -30,6 +30,7 @@
"htmx.org": "^1.9.12", "htmx.org": "^1.9.12",
"kysely": "^0.26.0", "kysely": "^0.26.0",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"lit": "^3.1.4",
"lucide-react": "^0.309.0", "lucide-react": "^0.309.0",
"nanoid": "^5.0.4", "nanoid": "^5.0.4",
"react": "^18.2.0", "react": "^18.2.0",

View File

@ -111,5 +111,8 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
imageURL={imageUrl} imageURL={imageUrl}
targetPos={location} targetPos={location}
id="locked-content"></locked-content> id="locked-content"></locked-content>
<locked-content-lit imageId="sample" targetPosition="[1,1]"
></locked-content-lit>
<script src="../components/locked-content.ts"></script> <script src="../components/locked-content.ts"></script>
<script src="../components/locked-content-lit.ts"></script>

View File

@ -0,0 +1,28 @@
import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
@customElement("locked-content-lit")
export class LockedContent extends LitElement {
// Static properties
@property() readonly imageId?: string;
@property() readonly imageURL?: string;
@property({ type: Object })
readonly targetPosition?: [lat: number, lng: number];
// Reactive state
@state()
protected _hasGeolocationPermission = false;
@state()
protected _unlocked = false;
@state()
protected _targetProximity?: number;
render() {
return html`
<div>
Hello from MyElement! ${this.imageId}
<p>${this.targetPosition}</p>
</div>
`;
}
}

View File

@ -2,7 +2,6 @@ import L, { type LatLngTuple } from "leaflet";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
class LockedContent extends HTMLElement { class LockedContent extends HTMLElement {
unlockButtonElement: HTMLElement | null;
watchId: number; watchId: number;
targetPos: LatLngTuple; targetPos: LatLngTuple;
geolocationOptions = { geolocationOptions = {

View File

@ -6,6 +6,8 @@
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["./src/*"] "@/*": ["./src/*"]
} },
"experimentalDecorators": true,
"useDefineForClassFields": false,
} }
} }