feat: add geolocatoin permission denied case for some elements

src/components/LockedContent/domUtils.ts

@@ -30,6 +30,12 @@ function removeElement(elemId: string) {
   else console.error("Element could not be found!");
 }
 
+function addAttribute(elemId: string, attribute: string, value: string) {
+  const elem = document.getElementById(elemId);
+  if (elem) elem.setAttribute(attribute, value);
+  else console.error("Element could not be found!");
+}
+
 function revealContent() {
   incrementUnlockCounter(document.URL.slice(-12));
   removeClasses("content", "blur-2xl");
@@ -43,4 +49,5 @@ export {
   toggleClass,
   updateText,
   revealContent,
+  addAttribute,
 };

src/components/LockedContent/geolocation.ts

@@ -1,6 +1,7 @@
 import Toastify from "toastify-js";
 import L, { type LatLngTuple } from "leaflet";
 import {
+  addAttribute,
   addClasses,
   removeClasses,
   removeElement,
@@ -72,6 +73,13 @@ function errorCallback(err: GeolocationPositionError) {
     case GeolocationPositionError.PERMISSION_DENIED:
       errorMessage =
         "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.";
+      updateText(
+        "locked-content-description",
+        "Konum izleme izni alınamadı. \nİçeriği görüntüleyebilmek için konum bilginiz gerekiyor."
+      );
+      addAttribute("current-location-control", "disabled", "true");
+      addClasses("current-location-control", "disabled-button");
+      removeElement("location-permission-button");
       break;
     case GeolocationPositionError.POSITION_UNAVAILABLE:
       errorMessage =

src/scripts/initMap.ts

@@ -57,6 +57,8 @@ const CurrentLocation = L.Control.extend({
 
     locationButton.type = "button";
 
+    locationButton.id = "current-location-control";
+
     locationButton.addEventListener("click", () => {
       if (currentLocationMarker) {
         map.setView(currentLocationMarker.getLatLng(), 12);
@@ -90,7 +92,7 @@ const GoToTargetLocation = L.Control.extend({
     locationButton.classList.add("custom-map-control-button");
 
     locationButton.addEventListener("click", () => {
-      if (TARGET_LOCATION) map.setView(TARGET_LOCATION, 18);
+      if (TARGET_LOCATION) map.setView(TARGET_LOCATION, 12);
     });
 
     return locationButton;

src/styles/locked-page.css

@@ -14,3 +14,12 @@
 .custom-map-control-button:hover {
   background: rgb(235, 235, 235);
 }
+
+.disabled-button {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.disabled-button:hover {
+  background-color: #fff;
+}