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) => {