chore: use CSS classes instead of inline style in js (#138)

IGNF · Jan 2, 2025 · 945c167 · 945c167
1 parent a653050
commit 945c167
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 41 deletions.
diff --git a/src/css/directions.css b/src/css/directions.css
@@ -28,6 +28,10 @@
   background-size: 22px;
 }
 
+.btnDirectionsCompute.loading {
+  background-image: url(assets/loading-white.svg)
+}
+
 /*
  * checkboxes
  */
@@ -281,6 +285,10 @@
   border-radius: 8px;
 }
 
+#directionsLocationImg_step.animated {
+  background-color: #E7E7E7;
+}
+
 .hidden .lblDirectionsLocations {
   background-image: none;
   border: none;

diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css
@@ -55,6 +55,25 @@
   bottom: 0;
 }
 
+#geolocateBtn.locationLoading {
+  background-image: url("assets/loading-green.svg");
+}
+
+#geolocateBtn.locationFixe {
+  background-image: url("assets/map-buttons/location-fixed.svg");
+}
+
+#geolocateBtn.locationFollow {
+  background-image: url("assets/map-buttons/location-follow.svg");
+}
+
+#geolocateBtn.locationDisabled {
+  background-image: url("assets/map-buttons/location-disabled.svg");
+}
+
+
+locationFollow
+
 #sideBySideLeftLayer {
   background-image: url("assets/map-buttons/compare/compare-layer-left.svg");
   position: absolute;
@@ -217,6 +236,34 @@
   white-space: nowrap;
 }
 
+#interactivityBtn.backgroundGreen, #createCompareLandmarkBtn.backgroundGreen {
+  background-color: #26A581DD;
+}
+
+#interactivityBtn.backgroundWhite, #createCompareLandmarkBtn.backgroundWhite {
+  background-color: #F4F6F8E5;
+}
+
+#interactivityBtn.textColor, #createCompareLandmarkBtn.textColor {
+  color: #3F4A55;
+}
+
+#interactivityBtn.widthOn {
+  width: calc(63px + 12.846rem);
+}
+
+#createCompareLandmarkBtn.widthOn {
+  width: calc(63px + 14.446rem);
+}
+
+#interactivityBtn.widthOff, #createCompareLandmarkBtn.widthOff {
+  width: calc(63px + 15.923rem);
+}
+
+#interactivityBtn.noOpacity, #createCompareLandmarkBtn.noOpacity {
+  opacity: 0;
+}
+
 #map:has(.maplibregl-ctrl-shrink) > #interactivityBtn {
   top: calc(10px + var(--safe-area-inset-top));
 }

diff --git a/src/js/compare.js b/src/js/compare.js
@@ -394,18 +394,16 @@ class Compare {
     this.mapRLT2.setZoom(this.map.getZoom());
     this.changeMode();
 
-    DOM.$createCompareLandmarkBtn.style.removeProperty("opacity");
-    DOM.$createCompareLandmarkBtn.style.removeProperty("color");
     clearTimeout(this.timeoutID1);
     clearTimeout(this.timeoutID2);
     clearTimeout(this.timeoutID3);
     this.timeoutID1 = setTimeout(() => {
-      DOM.$createCompareLandmarkBtn.style.backgroundColor = "#26A581DD";
-      DOM.$createCompareLandmarkBtn.style.width = "calc(63px + 14.446rem)";
+      DOM.$createCompareLandmarkBtn.classList.add("backgroundGreen");
+      DOM.$createCompareLandmarkBtn.classList.add("widthOn");
       this.timeoutID2 = setTimeout(() => {
-        DOM.$createCompareLandmarkBtn.style.removeProperty("width");
+        DOM.$createCompareLandmarkBtn.classList.remove("widthOn");
         this.timeoutID3 = setTimeout(() => {
-          DOM.$createCompareLandmarkBtn.style.removeProperty("background-color");
+          DOM.$createCompareLandmarkBtn.classList.remove("backgroundGreen");
         }, 450);
       }, 2000);
     }, 50);

diff --git a/src/js/directions/directions-dom.js b/src/js/directions/directions-dom.js
@@ -4,7 +4,6 @@
  * This program and the accompanying materials are made available under the terms of the GPL License, Version 3.0.
  */
 
-import LoadingWhite from "../../css/assets/loading-white.svg";
 import { Toast } from "@capacitor/toast";
 
 /**
@@ -152,7 +151,7 @@ let DirectionsDOM = {
   __setComputeButtonLoading() {
     this.dom.buttonCompute.value = "";
     this.dom.buttonCompute.disabled = true;
-    this.dom.buttonCompute.style.backgroundImage = "url(" + LoadingWhite + ")";
+    this.dom.buttonCompute.classList.add("loading");
     document.querySelectorAll(".inputDirectionsLocationsContainer").forEach((el) => {
       el.classList.add("disabled");
     });
@@ -165,7 +164,7 @@ let DirectionsDOM = {
   __unsetComputeButtonLoading() {
     this.dom.buttonCompute.value = "Calculer";
     this.dom.buttonCompute.disabled = false;
-    this.dom.buttonCompute.style.removeProperty("background-image");
+    this.dom.buttonCompute.classList.remove("loading");
     document.querySelectorAll(".inputDirectionsLocationsContainer").forEach((el) => {
       el.classList.remove("disabled");
     });
@@ -445,8 +444,8 @@ let DirectionsDOM = {
     labelAddStep.title = "Ajouter une étape";
     labelAddStep.textContent = "Ajouter une étape";
     labelAddStep.addEventListener("click", function () {
-      labelAddStep.style.backgroundColor = "#E7E7E7";
-      setTimeout(() => { labelAddStep.style.removeProperty("background-color"); }, 150);
+      labelAddStep.classList.add("animated");
+      setTimeout(() => { labelAddStep.classList.remove("animated"); }, 150);
       var locations = document.querySelectorAll(".divDirectionsLocationsItem");
       for (let index = 0; index < locations.length; index++) {
         const element = locations[index];

diff --git a/src/js/map-interactivity/interactivity-indicator.js b/src/js/map-interactivity/interactivity-indicator.js
@@ -142,20 +142,20 @@ class InteractivityIndicator {
   active () {
     this.hardDisabled = false;
     DOM.$interactivityBtn.classList.remove("d-none");
-    DOM.$interactivityBtn.style.removeProperty("opacity");
-    DOM.$interactivityBtn.style.removeProperty("color");
+    DOM.$interactivityBtn.classList.remove("noOpacity");
+    DOM.$interactivityBtn.classList.remove("textColor");
     document.getElementById("interactivityBtnText").innerText = "La carte est interactive";
     if (!this.shown) {
       clearTimeout(this.timeoutID1);
       clearTimeout(this.timeoutID2);
       clearTimeout(this.timeoutID3);
       this.timeoutID1 = setTimeout(() => {
-        DOM.$interactivityBtn.style.backgroundColor = "#26A581DD";
-        DOM.$interactivityBtn.style.width = "calc(63px + 12.846rem)";
+        DOM.$interactivityBtn.classList.add("backgroundGreen");
+        DOM.$interactivityBtn.classList.add("widthOn");
         this.timeoutID2 = setTimeout(() => {
-          DOM.$interactivityBtn.style.removeProperty("width");
+          DOM.$interactivityBtn.classList.remove("widthOn");
           this.timeoutID3 = setTimeout(() => {
-            DOM.$interactivityBtn.style.removeProperty("background-color");
+            DOM.$interactivityBtn.classList.remove("backgroundGreen");
           }, 450);
         }, 2000);
       }, 50);
@@ -180,14 +180,14 @@ class InteractivityIndicator {
       clearTimeout(this.timeoutID2);
       clearTimeout(this.timeoutID3);
       this.timeoutID1 = setTimeout(() => {
-        DOM.$interactivityBtn.style.color = "#3F4A55";
-        DOM.$interactivityBtn.style.backgroundColor = "#F4F6F8E5";
-        DOM.$interactivityBtn.style.width = "calc(63px + 15.923rem)";
+        DOM.$interactivityBtn.classList.add("textColor");
+        DOM.$interactivityBtn.classList.add("backgroundWhite");
+        DOM.$interactivityBtn.classList.add("widthOff");
         this.timeoutID2 = setTimeout(() => {
-          DOM.$interactivityBtn.style.removeProperty("width");
+          DOM.$interactivityBtn.classList.remove("widthOff");
           this.timeoutID3 = setTimeout(() => {
-            DOM.$interactivityBtn.style.removeProperty("background-color");
-            DOM.$interactivityBtn.style.opacity = 0;
+            DOM.$interactivityBtn.classList.remove("backgroundWhite");
+            DOM.$interactivityBtn.classList.add("noOpacity");
           }, 450);
         }, 2400);
       }, 50);

diff --git a/src/js/services/location.js b/src/js/services/location.js
@@ -62,12 +62,6 @@ import { Capacitor } from "@capacitor/core";
 
 import Buffer from "@turf/buffer";
 
-// fichiers SVG
-import LocationImg from "../../css/assets/map-buttons/localisation.svg";
-import LocationFollowImg from "../../css/assets/map-buttons/location-follow.svg";
-import LocationFixeImg from "../../css/assets/map-buttons/location-fixed.svg";
-import LocationLoading from "../../css/assets/loading-green.svg";
-import LocationDisabled from "../../css/assets/map-buttons/location-disabled.svg";
 import PopupUtils from "../utils/popup-utils";
 
 /* Géolocalisation */
@@ -262,7 +256,7 @@ const moveTo = (coords, zoom = Globals.map.getZoom(), panTo = true, gps = true)
 const watchPositionCallback = (position) => {
   if (firstLocation) {
     // FIXME: STYLE: passer par une classe et style CSS
-    DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationFixeImg + "\")";
+    DOM.$geolocateBtn.classList.add("locationFixe");
     Toast.show({
       text: "Suivi de position activé",
       duration: "short",
@@ -317,7 +311,8 @@ const trackLocation = () => {
       if (Capacitor.getPlatform() === "android") {
         watch_id = navigator.geolocation.watchPosition(watchPositionCallback, (err) => {
           console.warn(err);
-          DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationImg + "\")";
+          DOM.$geolocateBtn.classList.remove("locationFixe");
+          DOM.$geolocateBtn.classList.remove("locationDisabled");
           Geolocation.clearWatch({id: watch_id});
           clean();
           currentPosition = null;
@@ -344,12 +339,14 @@ const trackLocation = () => {
       }
     } else {
       // Location services denied
-      DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationDisabled + "\")";
+      DOM.$geolocateBtn.classList.remove("locationFixe");
+      DOM.$geolocateBtn.classList.add("locationDisabled");
       showLocationDeniedPopup();
     }
   }).catch(() => {
     // Location services disabled
-    DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationDisabled + "\")";
+    DOM.$geolocateBtn.classList.remove("locationFixe");
+    DOM.$geolocateBtn.classList.add("locationDisabled");
     showLocationDisabledPopup();
   });
 };
@@ -358,7 +355,7 @@ const trackLocation = () => {
  * Modification du statut de localisation
  */
 const enablePosition = async() => {
-  DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationLoading + "\")";
+  DOM.$geolocateBtn.classList.add("locationLoading");
   let permissionStatus;
   if (popup.popup) {
     popup.popup.remove();
@@ -374,7 +371,8 @@ const enablePosition = async() => {
     try {
       permissionStatus = await Geolocation.checkPermissions();
     } catch {
-      DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationDisabled + "\")";
+      DOM.$geolocateBtn.classList.remove("locationLoading");
+      DOM.$geolocateBtn.classList.add("locationDisabled");
       showLocationDisabledPopup();
       return;
     }
@@ -384,10 +382,12 @@ const enablePosition = async() => {
   }
   if (["denied", "prompt-with-rationale"].includes(permissionStatus.location)) {
     // Location services denied
-    DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationDisabled + "\")";
+    DOM.$geolocateBtn.classList.remove("locationLoading");
+    DOM.$geolocateBtn.classList.add("locationDisabled");
     showLocationDeniedPopup();
     return;
   }
+  DOM.$geolocateBtn.classList.remove("locationLoading");
   location_active = true;
   tracking_active = true;
   if (!currentPosition && localStorage.getItem("lastKnownPosition")) {
@@ -412,7 +412,9 @@ const locationOnOff = async () => {
     if (currentPosition === null) {
       return;
     }
-    DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationFixeImg + "\")";
+    DOM.$geolocateBtn.classList.remove("locationDisabled");
+    DOM.$geolocateBtn.classList.remove("locationLoading");
+    DOM.$geolocateBtn.classList.add("locationFixe");
     tracking_active = true;
     Globals.map.setPadding({top: 0, right: 0, bottom: 0, left: 0});
     Globals.map.setCenter([currentPosition.coords.longitude, currentPosition.coords.latitude]);
@@ -430,7 +432,8 @@ const locationOnOff = async () => {
     if (currentPosition === null) {
       return;
     }
-    DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationFollowImg + "\")";
+    DOM.$geolocateBtn.classList.remove("locationFixe");
+    DOM.$geolocateBtn.classList.add("locationFollow");
     navigation_active = true;
     const padding = {top: DOM.$map.clientHeight * 0.5};
     Globals.map.easeTo({
@@ -447,7 +450,7 @@ const locationOnOff = async () => {
       position: "bottom"
     });
   } else {
-    DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationImg + "\")";
+    DOM.$geolocateBtn.classList.remove("locationFollow");
     tracking_active = false;
     navigation_active = false;
     KeepAwake.allowSleep();
@@ -549,7 +552,8 @@ const getLocation = async () => {
 };
 
 const disableTracking = () => {
-  DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationImg + "\")";
+  DOM.$geolocateBtn.classList.remove("locationFixe");
+  DOM.$geolocateBtn.classList.remove("locationFollow");
   tracking_active = false;
   if (navigation_active) {
     navigation_active = false;
@@ -560,7 +564,8 @@ const disableTracking = () => {
 };
 
 const disableNavigation = (bearing = Globals.map.getBearing()) => {
-  DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationFixeImg + "\")";
+  DOM.$geolocateBtn.classList.add("locationFixe");
+  DOM.$geolocateBtn.classList.remove("locationFollow");
   navigation_active = false;
   Globals.map.setPadding({top: 0, right: 0, bottom: 0, left: 0});
   Globals.map.flyTo({