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

feat: add permission denied state to locked content

Browse Source
This commit is contained in:
log101 2024-07-18 20:13:26 +03:00
parent c6f0d851c2
commit 7e77b4326f
2 changed files with 36 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/LockedContent/templates.ts
View File

@ -29,6 +29,27 @@ function permissionButtonTemplate(onClickHandler: () => void) {
`;
}
// This template is shown when user has not given permission
function permissionDeniedButtonTemplate() {
return html`<div class="flex flex-col justify-center gap-4 overlay">
<button
id="unlock-content-button"
class="inline-flex gap-2 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"
>
${lockSVG}
<p>İçerik Kilitli</p>
</button>
<div class="rounded-lg border bg-card text-card-foreground shadow-sm p-2">
<div class="pb-0 px-4 text-center">
<p id="locked-content-description">
Konumuna erişim izni vermediğin için hedefe ne kadar <br />
yakın olduğun tespit edilemiyor.
</p>
</div>
</div>
</div>`;
}
// This template is shown when user has given permission but has not arrived yet
function lockedButtonTemplate(proximityText: string | undefined) {
return html`<div class="flex flex-col justify-center gap-4 overlay">
@ -75,4 +96,5 @@ export {
lockedButtonTemplate,
unlockedButtonTemplate,
permissionButtonTemplate,
permissionDeniedButtonTemplate,
};

19
src/components/locked-content-lit.ts
View File

@ -13,6 +13,7 @@ import lockedContentStyles from "../styles/locked-content.css?inline";
import {
lockedButtonTemplate,
permissionButtonTemplate,
permissionDeniedButtonTemplate,
unlockedButtonTemplate,
} from "./LockedContent/templates";
@ -46,7 +47,7 @@ export class LockedContent extends LitElement {
// Reactive states, template is rendered according to this states
@state()
protected _hasGeolocationPermission = false;
protected _geolocationPermissionStatus: PermissionState = "prompt";
@state()
protected _unlocked = false;
@state()
@ -59,7 +60,7 @@ export class LockedContent extends LitElement {
// This callback will be fired when geolocation info is available
successCallback(position: GeolocationPosition) {
// Set hasGeolocationPermission state true to change the template
if (!this._hasGeolocationPermission) this._hasGeolocationPermission = true;
this._geolocationPermissionStatus = "granted";
// Target position must be set
if (!this.targetPosition) return;
@ -121,7 +122,12 @@ export class LockedContent extends LitElement {
const id = navigator.geolocation.watchPosition(
this.successCallback.bind(this),
errorCallback,
(err) => {
if (err.code == GeolocationPositionError.PERMISSION_DENIED) {
this._geolocationPermissionStatus = "denied";
}
errorCallback(err);
},
this.geolocationOptions
);
@ -141,6 +147,7 @@ export class LockedContent extends LitElement {
this._startWatchingLocation();
break;
case "denied":
this._geolocationPermissionStatus = "denied";
case "prompt":
default:
break;
@ -158,10 +165,12 @@ export class LockedContent extends LitElement {
// 4 - User did not give geolocation permission
if (this._arrived) {
buttonTemplate = this._unlockedButtonTemplate;
} else if (this._hasGeolocationPermission) {
} else if (this._geolocationPermissionStatus == "granted") {
buttonTemplate = this._lockedButtonTemplate;
} else {
} else if (this._geolocationPermissionStatus == "prompt") {
buttonTemplate = this._permissionButtonTemplate;
} else {
buttonTemplate = permissionDeniedButtonTemplate;
}
return html`