From 945c167629ec1256822dc5d87cc7535942233f1f Mon Sep 17 00:00:00 2001 From: Amaury Zarzelli Date: Thu, 2 Jan 2025 12:00:29 +0100 Subject: [PATCH] chore: use CSS classes instead of inline style in js (#138) --- src/css/directions.css | 8 ++++ src/css/map-buttons.css | 47 +++++++++++++++++++ src/js/compare.js | 10 ++-- src/js/directions/directions-dom.js | 9 ++-- .../interactivity-indicator.js | 24 +++++----- src/js/services/location.js | 41 +++++++++------- 6 files changed, 98 insertions(+), 41 deletions(-) diff --git a/src/css/directions.css b/src/css/directions.css index f62a1320..31884a68 100644 --- 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 index 5635bb75..5f248933 100644 --- 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 index 9546b189..cf7ed242 100644 --- 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 index 8669eb83..485e42ad 100644 --- 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 index f04f2084..e7adf764 100644 --- 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 index 9a34ea51..e6c2402a 100644 --- 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({