From 430c50b3ae2e745078c84453eec48725a8369d41 Mon Sep 17 00:00:00 2001
From: log101
Date: Fri, 19 Jul 2024 13:18:44 +0300
Subject: [PATCH] feat: synchronize map permissoins with lockedcontent
component permissons
---
src/components/LockedContent/templates.ts | 2 +-
src/pages/[id].astro | 3 +-
src/scripts/initMap.js | 161 ---------------
src/scripts/initMap.ts | 230 ++++++++++++++++++++++
src/scripts/initSelectionMap.js | 8 +-
5 files changed, 236 insertions(+), 168 deletions(-)
delete mode 100644 src/scripts/initMap.js
create mode 100644 src/scripts/initMap.ts
diff --git a/src/components/LockedContent/templates.ts b/src/components/LockedContent/templates.ts
index 37f853b..ea89396 100644
--- a/src/components/LockedContent/templates.ts
+++ b/src/components/LockedContent/templates.ts
@@ -1,4 +1,4 @@
-import { html, type TemplateResult } from "lit";
+import { html } from "lit";
import { lockSVG, unlockSVG } from "./svg";
// This template is shown when user hasn't give geolocation permission yet
diff --git a/src/pages/[id].astro b/src/pages/[id].astro
index 34e135b..d8e03e6 100644
--- a/src/pages/[id].astro
+++ b/src/pages/[id].astro
@@ -11,7 +11,6 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
-import LockedContent from "@/components/LockedContent";
import WebComponentWrapper from "@/components/WebComponentWrapper.astro";
import { CalendarIcon } from "@radix-ui/react-icons";
import { Separator } from "@/components/ui/separator";
@@ -86,5 +85,5 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
-
+
diff --git a/src/scripts/initMap.js b/src/scripts/initMap.js
deleted file mode 100644
index b2a7b2e..0000000
--- a/src/scripts/initMap.js
+++ /dev/null
@@ -1,161 +0,0 @@
-const data = JSON.parse(document.getElementById('map').dataset.targetLocation)
-
-const TARGET_LOCATION = data
-
-function startWatchingLocation() {
- map.locate({ watch: true })
-}
-
-var map = L.map('map').setView(TARGET_LOCATION, 13);
-
-L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
- maxZoom: 19,
- attribution:
- '© OpenStreetMap',
-}).addTo(map);
-
-var targetLocationIcon = L.icon({
- iconUrl: 'goal.svg',
- iconSize: [32, 32],
-});
-
-L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map);
-
-var circle = L.circle(TARGET_LOCATION, {
- color: 'blue',
- fillColor: '#30f',
- fillOpacity: 0.2,
- radius: 50
-}).addTo(map);
-
-var currentLocationIcon = L.icon({
- iconUrl: 'blue-dot.png',
- iconSize: [32, 32],
-});
-
-let currentLocationMarker;
-
-function onLocationError(err) {
- let errorMessage;
- switch (err.code) {
- case 1:
- errorMessage = 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.'
- break;
- case 2:
- errorMessage = 'Konumunuz tespit edilemedi, lütfen biraz sonra tekrar deneyiniz.'
- break;
- case 3:
- errorMessage = 'Konum isteği zaman aşımına uğradı, lütfen sayfayı yenileyip tekrar deneyiniz.'
- break;
- default:
- errorMessage = 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.'
- break;
- }
- // @ts-ignore
- Toastify({
- text: errorMessage,
- duration: 3000,
- gravity: 'top', // `top` or `bottom`
- position: 'center', // `left`, `center` or `right`
- stopOnFocus: true, // Prevents dismissing of toast on hover
- style: {
- background: 'black',
- borderRadius: '6px',
- margin: '16px',
- },
- onClick: function () { }, // Callback after click
- }).showToast();
-}
-
-
-function onLocationSuccess(locationEvent) {
- const position = locationEvent.latlng
-
- const currentPos = {
- lat: position.lat,
- lng: position.lng
- }
-
- if (currentLocationMarker) {
- currentLocationMarker.setLatLng(currentPos);
- } else {
- currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
- currentLocationMarker.addTo(map);
- }
-}
-
-map.on('locationerror', onLocationError);
-
-map.on('locationfound', onLocationSuccess)
-
-
-L.Control.GoToCurrentLocation = L.Control.extend({
- onAdd: function (map) {
- const locationButton = document.createElement('button');
-
- locationButton.textContent = 'Konum İzni Ver';
-
- locationButton.classList.add('custom-map-control-button');
-
- locationButton.type = 'button'
-
- locationButton.addEventListener('click', (ev) => {
- if (locationButton.textContent != 'Konumuma Git') {
- startWatchingLocation()
- locationButton.textContent = 'Konumuma Git';
- } else {
- if (currentLocationMarker) {
- map.setView(currentLocationMarker.getLatLng(), 12);
- } else {
- // @ts-ignore
- Toastify({
- text: 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.',
- duration: 3000,
- gravity: 'top', // `top` or `bottom`
- position: 'center', // `left`, `center` or `right`
- stopOnFocus: true, // Prevents dismissing of toast on hover
- style: {
- background: 'black',
- borderRadius: '6px',
- margin: '16px',
- },
- onClick: function () { }, // Callback after click
- }).showToast();
- }
-
- }
- L.DomEvent.stopPropagation(ev)
- })
-
- return locationButton;
- },
-});
-
-L.Control.GoToTargetLocation = L.Control.extend({
- onAdd: function (map) {
- const locationButton = document.createElement('button');
-
- locationButton.textContent = 'Hedefe Git';
-
- locationButton.classList.add('custom-map-control-button');
-
- locationButton.addEventListener('click', () => {
- map.setView(TARGET_LOCATION, 18);
- });
-
- return locationButton;
- }
-});
-
-L.control.currentLocation = function (opts) {
- return new L.Control.GoToCurrentLocation(opts);
-};
-
-L.control.targetLocation = function (opts) {
- return new L.Control.GoToTargetLocation(opts);
-};
-
-L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
-
-L.control.targetLocation({ position: 'bottomleft' }).addTo(map);
-
diff --git a/src/scripts/initMap.ts b/src/scripts/initMap.ts
new file mode 100644
index 0000000..c5419cd
--- /dev/null
+++ b/src/scripts/initMap.ts
@@ -0,0 +1,230 @@
+import L from "leaflet";
+
+const mapEl = document.getElementById("map");
+
+var targetLocationIcon = L.icon({
+ iconUrl: "goal.svg",
+ iconSize: [32, 32],
+});
+
+var currentLocationIcon = L.icon({
+ iconUrl: "blue-dot.png",
+ iconSize: [32, 32],
+});
+
+const targetLocation = mapEl?.dataset.targetLocation;
+
+const data = JSON.parse(targetLocation ?? "{}");
+const TARGET_LOCATION = data;
+
+var map = L.map("map").setView(TARGET_LOCATION, 13);
+
+L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map);
+
+L.circle(TARGET_LOCATION, {
+ color: "blue",
+ fillColor: "#30f",
+ fillOpacity: 0.2,
+ radius: 50,
+}).addTo(map);
+
+L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+ maxZoom: 19,
+ attribution:
+ '© OpenStreetMap',
+}).addTo(map);
+
+map.on("locationerror", onLocationError);
+
+map.on("locationfound", onLocationSuccess);
+
+let currentLocationMarker: L.Marker;
+
+function onLocationError(err: L.ErrorEvent) {
+ let errorMessage;
+ switch (err.code) {
+ case 1:
+ errorMessage =
+ "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.";
+ break;
+ case 2:
+ errorMessage =
+ "Konumunuz tespit edilemedi, lütfen biraz sonra tekrar deneyiniz.";
+ break;
+ case 3:
+ errorMessage =
+ "Konum isteği zaman aşımına uğradı, lütfen sayfayı yenileyip tekrar deneyiniz.";
+ break;
+ default:
+ errorMessage =
+ "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.";
+ break;
+ }
+ // @ts-ignore
+ Toastify({
+ text: errorMessage,
+ duration: 3000,
+ gravity: "top", // `top` or `bottom`
+ position: "center", // `left`, `center` or `right`
+ stopOnFocus: true, // Prevents dismissing of toast on hover
+ style: {
+ background: "black",
+ borderRadius: "6px",
+ margin: "16px",
+ },
+ onClick: function () {}, // Callback after click
+ }).showToast();
+}
+
+function onLocationSuccess(locationEvent: L.LocationEvent) {
+ const position = locationEvent.latlng;
+
+ const currentPos = {
+ lat: position.lat,
+ lng: position.lng,
+ };
+
+ if (currentLocationMarker) {
+ currentLocationMarker.setLatLng(currentPos);
+ } else {
+ currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
+ currentLocationMarker.addTo(map);
+ }
+}
+
+// @ts-ignore L.Control allows extensions
+L.Control.AskPermisson = L.Control.extend({
+ onAdd: function () {
+ const locationButton = document.createElement("button");
+
+ locationButton.textContent = "Konum İzni Ver";
+
+ locationButton.classList.add("custom-map-control-button");
+
+ locationButton.type = "button";
+
+ locationButton.addEventListener("click", (ev) => {
+ startWatchingLocation();
+ locationButton.textContent = "Konumuma Git";
+ L.DomEvent.stopPropagation(ev);
+ });
+
+ return locationButton;
+ },
+});
+
+// @ts-ignore L.Control allows extensions
+L.Control.CurrentLocation = L.Control.extend({
+ onAdd: function (map: L.Map) {
+ const locationButton = document.createElement("button");
+
+ locationButton.textContent = "Konumuma Git";
+
+ locationButton.classList.add("custom-map-control-button");
+
+ locationButton.type = "button";
+
+ locationButton.addEventListener("click", (ev) => {
+ if (currentLocationMarker) {
+ map.setView(currentLocationMarker.getLatLng(), 12);
+ } else {
+ // @ts-ignore
+ Toastify({
+ text: "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.",
+ duration: 3000,
+ gravity: "top", // `top` or `bottom`
+ position: "center", // `left`, `center` or `right`
+ stopOnFocus: true, // Prevents dismissing of toast on hover
+ style: {
+ background: "black",
+ borderRadius: "6px",
+ margin: "16px",
+ },
+ onClick: function () {}, // Callback after click
+ }).showToast();
+ }
+
+ L.DomEvent.stopPropagation(ev);
+ });
+
+ return locationButton;
+ },
+});
+
+// @ts-ignore L.Control allows extensions
+L.Control.GoToTargetLocation = L.Control.extend({
+ onAdd: function (map: L.Map) {
+ const locationButton = document.createElement("button");
+
+ locationButton.textContent = "Hedefe Git";
+
+ locationButton.classList.add("custom-map-control-button");
+
+ locationButton.addEventListener("click", () => {
+ map.setView(TARGET_LOCATION, 18);
+ });
+
+ return locationButton;
+ },
+});
+
+// @ts-ignore L.Control allows extensions
+L.control.askPermission = function (opts) {
+ // @ts-ignore L.Control allows extensions
+ return new L.Control.AskPermisson(opts);
+};
+
+// @ts-ignore L.Control allows extensions
+L.control.goToCurrentLocation = function (opts) {
+ // @ts-ignore L.Control allows extensions
+ return new L.Control.CurrentLocation(opts);
+};
+
+// @ts-ignore L.Control allows extensions
+L.control.targetLocation = function (opts) {
+ // @ts-ignore L.Control allows extensions
+ return new L.Control.GoToTargetLocation(opts);
+};
+
+// @ts-ignore L.Control allows extensions
+const goToCurrentLocationControl = L.control.goToCurrentLocation({
+ position: "bottomleft",
+});
+
+// @ts-ignore L.Control allows extensions
+const askPermissionControl = L.control.askPermission({
+ position: "bottomleft",
+});
+
+// @ts-ignore L.Control allows extensions
+const targetLocationControl = L.control.targetLocation({
+ position: "bottomleft",
+});
+
+function startWatchingLocation() {
+ goToCurrentLocationControl.addTo(map);
+ askPermissionControl.remove();
+ map.locate({ watch: true });
+}
+
+function initLocationControls() {
+ targetLocationControl.addTo(map);
+ // Check geolocation permission, if user has given permission before
+ // start watching user location
+ navigator.permissions
+ .query({ name: "geolocation" })
+ .then((permissionStatus) => {
+ switch (permissionStatus.state) {
+ case "granted":
+ startWatchingLocation();
+ break;
+ case "denied":
+ case "prompt":
+ askPermissionControl.addTo(map);
+ default:
+ break;
+ }
+ });
+}
+
+initLocationControls();
diff --git a/src/scripts/initSelectionMap.js b/src/scripts/initSelectionMap.js
index f02729f..c248cba 100644
--- a/src/scripts/initSelectionMap.js
+++ b/src/scripts/initSelectionMap.js
@@ -48,7 +48,7 @@ map.on('locationerror', onLocationError);
map.on('locationfound', onLocationSuccess)
-L.Control.GoToCurrentLocation = L.Control.extend({
+L.Control.AskPermisson = L.Control.extend({
onAdd: function (map) {
const locationButton = document.createElement('button');
@@ -90,11 +90,11 @@ L.Control.GoToCurrentLocation = L.Control.extend({
},
});
-L.control.currentLocation = function (opts) {
- return new L.Control.GoToCurrentLocation(opts);
+L.control.askPermission = function (opts) {
+ return new L.Control.AskPermisson(opts);
};
-L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
+L.control.askPermission({ position: 'bottomleft' }).addTo(map);
map.on('click', (e) => {