refactor: replace useless style in js by css classes (#129)

IGNF · Oct 7, 2024 · a0e183a · a0e183a
1 parent 5096b30
commit a0e183a
Show file tree

Hide file tree

Showing 17 changed files with 84 additions and 92 deletions.
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -21,6 +21,7 @@
 @use 'signalement.css';
 @use 'landmark.css';
 @use 'location.css';
+@use 'elevationLine.css';
 @use 'mapboxgl-accessibility.css';
 @use 'action-sheet.css';
-@use 'media-queries.css';
+@use 'media-queries.css';
diff --git a/src/css/elevationLine.css b/src/css/elevationLine.css
@@ -0,0 +1,13 @@
+.elevationLineLoadingDom {
+  width: 100%;
+  aspect-ratio: 2 / 1;
+  position: sticky;
+  flex-shrink: 0;
+  margin-bottom: -50%;
+  transform: translate(0, -100%);
+  background-color: #3F4A5555;
+  background-image: url(assets/loading-darkgrey.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 50px;
+}
diff --git a/src/css/isochrone.css b/src/css/isochrone.css
@@ -62,6 +62,10 @@
   background-size: 22px;
 }
 
+.btnIsochroneCompute.loading {
+  background-image: url(assets/loading-white.svg);
+}
+
 /*
  * transport / mode
  */
@@ -335,4 +339,4 @@ input#isochroneValueDistanceInput[type=number]
 .divIsochroneDisplayOption > .toggleSwitch {
   flex-shrink: 0;
   margin-left: 20px;
-}
+}
diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css
@@ -297,6 +297,11 @@
   pointer-events: none;
 }
 
+#mapCenter.loading {
+  background-image: url("assets/loading-green.svg");
+  background-size: 75px;
+}
+
 #mapCenterMenu {
   color: var(--dark-grey);
   display: flex;

diff --git a/src/css/map.css b/src/css/map.css
@@ -59,6 +59,28 @@
   flex-direction: column;
 }
 
+/* Marker icons */
+.myPositionIcon {
+  width: 51px;
+  height: 51px;
+  background-size: contain;
+  background-image: url(assets/position.svg);
+}
+
+.myPositionIconGrey {
+  width: 51px;
+  height: 51px;
+  background-size: contain;
+  background-image: url(assets/position-grey.svg);
+}
+
+.searchResultIcon {
+  width: 36px;
+  height: 36px;
+  background-size: contain;
+  background-image: url(assets/map-center.svg);
+}
+
 @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #map {
     height: 100vh;

diff --git a/src/css/mapboxgl-accessibility.css b/src/css/mapboxgl-accessibility.css
@@ -10,4 +10,7 @@ ISC License
   border-radius: 0;
   border: none;
   position: fixed;
+  display: block;
+  width: 24px;
+  height: 24px;
 }
diff --git a/src/css/signalement.css b/src/css/signalement.css
@@ -133,3 +133,9 @@
   background-size: 22px;
   margin-top: 10px;
 }
+
+.signalement-submit.inactive {
+  pointer-events: none;
+  background-image: url(assets/loading-white.svg);
+  color: #0000;
+}
diff --git a/src/css/tabs.css b/src/css/tabs.css
@@ -134,4 +134,5 @@
 
 .elevationLineCanvas {
   touch-action: none;
+  width: 100%;
 }
diff --git a/src/js/directions/directions-results-dom.js b/src/js/directions/directions-results-dom.js
@@ -167,8 +167,6 @@ let DirectionsResultsDOM = {
       var canvasProfile = document.createElement("canvas");
       canvasProfile.id = "directions-elevationline";
       canvasProfile.className = "elevationLineCanvas";
-      // FIXME: STYLE: passer par une classe et style CSS
-      canvasProfile.style.width = "100%";
       divList.appendChild(canvasProfile);
     }
 

diff --git a/src/js/elevation-line-control/elevation-line-control.js b/src/js/elevation-line-control/elevation-line-control.js
@@ -31,9 +31,6 @@ import Location from "../services/location";
 
 import { Toast } from "@capacitor/toast";
 
-import LoadingDark from "../../css/assets/loading-darkgrey.svg";
-
-
 /**
  * Interface sur le contrôle profil altimétrique
  * @module ElevationLineControl
@@ -65,19 +62,8 @@ class ElevationLineControl {
     this.chart = null;
 
     this.loadingDom = document.createElement("div"); // div de la patience
-    // FIXME: STYLE: passer par une classe et style CSS
-    this.loadingDom.style.width = "100%";
-    this.loadingDom.style.aspectRatio = "2 / 1";
-    this.loadingDom.style.position = "sticky";
-    this.loadingDom.style.flexShrink = "0";
-    this.loadingDom.style.marginBottom = "-50%";
-    this.loadingDom.style.transform = "translate(0, -100%)";
-    this.loadingDom.style.backgroundColor = "#3F4A5555";
-    this.loadingDom.style.backgroundImage = "url(" + LoadingDark + ")";
-    this.loadingDom.style.backgroundPosition = "center";
-    this.loadingDom.style.backgroundRepeat = "no-repeat";
-    this.loadingDom.style.backgroundSize = "50px";
-    this.loadingDom.style.display = "none";
+    this.loadingDom.className = "elevationLineLoadingDom";
+    this.loadingDom.classList.add("d-none");
     this.loadingDomInDocument = false;
 
     return this;
@@ -397,16 +383,15 @@ Distance du départ : ${distanceText} ${this.unit}`;
       this.target.after(this.loadingDom);
       this.loadingDomInDocument = true;
     }
-    // FIXME: STYLE: passer par une classe et style CSS
-    this.loadingDom.style.removeProperty("display");
+    this.loadingDom.classList.remove("d-none");
   }
 
   /**
    * Désactive la patience
    * @private
    */
   #unsetLoading() {
-    this.loadingDom.style.display = "none";
+    this.loadingDom.classList.add("d-none");
   }
 
   /**

diff --git a/src/js/index.js b/src/js/index.js
@@ -33,11 +33,6 @@ import "@maplibre/maplibre-gl-compare/dist/maplibre-gl-compare.css";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "../css/app.scss";
 
-// fichiers SVG
-import PositionImg from "../css/assets/position.svg";
-import PositionImgGrey from "../css/assets/position-grey.svg";
-import MapCenterImg from "../css/assets/map-center.svg";
-
 // Affichage des éléments PWA en mode WE (Toast et ActionSheet)
 import { defineCustomElements } from "@ionic/pwa-elements/loader";
 defineCustomElements(window);
@@ -119,28 +114,13 @@ function app() {
 
   // Définition des icones
   Globals.myPositionIcon = document.createElement("div");
-  Globals.myPositionIcon.class = "myPositionIcon";
-  // FIXME: STYLE: passer par une classe et style CSS
-  Globals.myPositionIcon.style.width = "51px";
-  Globals.myPositionIcon.style.height = "51px";
-  Globals.myPositionIcon.style.backgroundSize = "contain";
-  Globals.myPositionIcon.style.backgroundImage = "url(" + PositionImg + ")";
+  Globals.myPositionIcon.className = "myPositionIcon";
 
   Globals.myPositionIconGrey = document.createElement("div");
-  Globals.myPositionIconGrey.class = "myPositionIconGrey";
-  // FIXME: STYLE: passer par une classe et style CSS
-  Globals.myPositionIconGrey.style.width = "51px";
-  Globals.myPositionIconGrey.style.height = "51px";
-  Globals.myPositionIconGrey.style.backgroundSize = "contain";
-  Globals.myPositionIconGrey.style.backgroundImage = "url(" + PositionImgGrey + ")";
+  Globals.myPositionIconGrey.className = "myPositionIconGrey";
 
   Globals.searchResultIcon = document.createElement("div");
-  Globals.searchResultIcon.class = "searchResultIcon";
-  // FIXME: STYLE: passer par une classe et style CSS
-  Globals.searchResultIcon.style.width = "36px";
-  Globals.searchResultIcon.style.height = "36px";
-  Globals.searchResultIcon.style.backgroundSize = "contain";
-  Globals.searchResultIcon.style.backgroundImage = "url(" + MapCenterImg + ")";
+  Globals.searchResultIcon.className = "searchResultIcon";
 
   // Main map
   const map = new maplibregl.Map({

diff --git a/src/js/isochrone/isochrone-dom.js b/src/js/isochrone/isochrone-dom.js
@@ -5,7 +5,6 @@
  */
 
 import DomUtils from "../utils/dom-utils";
-import LoadingWhite from "../../css/assets/loading-white.svg";
 
 import { Toast } from "@capacitor/toast";
 
@@ -366,8 +365,7 @@ let IsochroneDOM = {
   __setComputeButtonLoading () {
     this.dom.isochroneCompute.value = "";
     this.dom.isochroneCompute.disabled = true;
-    // FIXME: STYLE: passer par une classe et style CSS
-    this.dom.isochroneCompute.style.backgroundImage = "url(" + LoadingWhite + ")";
+    this.dom.isochroneCompute.classList.add("loading");
     document.querySelectorAll("#isochroneLocationContainer").forEach((el) => {
       el.classList.add("disabled");
     });
@@ -380,7 +378,7 @@ let IsochroneDOM = {
   __unsetComputeButtonLoading () {
     this.dom.isochroneCompute.value = "Calculer";
     this.dom.isochroneCompute.disabled = false;
-    this.dom.isochroneCompute.style.removeProperty("background-image");
+    this.dom.isochroneCompute.classList.remove("loading");
     document.querySelectorAll("#isochroneLocationContainer").forEach((el) => {
       el.classList.remove("disabled");
     });

diff --git a/src/js/map-interactivity/interactivity-indicator.js b/src/js/map-interactivity/interactivity-indicator.js
@@ -15,10 +15,10 @@ import PopupUtils from "../utils/popup-utils";
 class InteractivityIndicator {
 
   /**
-     * constructeur
-     * @param {*} map
-     * @param {*} options
-     */
+   * constructeur
+   * @param {*} map
+   * @param {*} options
+   */
   constructor(map, options) {
     this.options = options || {
       id: "PLAN.IGN.INTERACTIF$GEOPORTAIL:GPP:TMS"
@@ -137,12 +137,11 @@ class InteractivityIndicator {
   }
 
   /**
-     * Active l'indicateur d'activité
-     */
+   * Active l'indicateur d'activité
+   */
   active () {
     this.hardDisabled = false;
     DOM.$interactivityBtn.classList.remove("d-none");
-    // FIXME: STYLE: passer par une classe et style CSS
     DOM.$interactivityBtn.style.removeProperty("opacity");
     DOM.$interactivityBtn.style.removeProperty("color");
     document.getElementById("interactivityBtnText").innerText = "La carte est interactive";
@@ -197,16 +196,16 @@ class InteractivityIndicator {
   }
 
   /**
-     * Desactive l'indicateur d'activité jusqu'à nouvel ordre
-     */
+   * Desactive l'indicateur d'activité jusqu'à nouvel ordre
+   */
   hardDisable() {
     this.hardDisabled = true;
     this.disable();
   }
 
   /**
-     * Réactive l'indicateur après désactivation forcée
-     */
+   * Réactive l'indicateur après désactivation forcée
+   */
   enable() {
     this.hardDisabled = false;
     this.map.fire("zoom");

diff --git a/src/js/map-interactivity/map-interactivity.js b/src/js/map-interactivity/map-interactivity.js
@@ -16,9 +16,6 @@ import Buffer from "@turf/buffer";
 import proj4 from "proj4";
 import Legend from "./legend-plan-ign";
 
-import LoadingGreen from "../../css/assets/loading-green.svg";
-
-
 /**
  * Interface sur l'interaction avec la carte
  * @module MapInteractivity
@@ -191,9 +188,7 @@ class MapInteractivity {
     this.#multipleGFI(layersForGFI)
       .then(async (resp) => {
         this.loading = false;
-        // FIXME: STYLE: passer par une classe et style CSS
-        DOM.$mapCenter.style.removeProperty("background-image");
-        DOM.$mapCenter.style.removeProperty("background-size");
+        DOM.$mapCenter.classList.remove("loading");
         DOM.$mapCenter.classList.add("d-none");
         try {
           this.#highlightGFI(resp.geometry);
@@ -211,8 +206,7 @@ class MapInteractivity {
         return;
       }).catch(async () => {
         this.loading = false;
-        DOM.$mapCenter.style.removeProperty("background-image");
-        DOM.$mapCenter.style.removeProperty("background-size");
+        DOM.$mapCenter.classList.remove("loading");
         DOM.$mapCenter.classList.add("d-none");
         if (featureHTML !== null) {
           this.#clearSources();
@@ -299,8 +293,7 @@ class MapInteractivity {
 
   async #multipleGFI(layerArray) {
     this.loading = true;
-    DOM.$mapCenter.style.backgroundImage = `url(${LoadingGreen})`;
-    DOM.$mapCenter.style.backgroundSize = "75px";
+    DOM.$mapCenter.classList.add("loading");
     DOM.$mapCenter.classList.remove("d-none");
 
     let GFIArray = layerArray.filter(layer => layer[1].visibility === true);
@@ -542,8 +535,7 @@ class MapInteractivity {
       this.controller.abort();
       this.controller = new AbortController();
       this.loading = false;
-      DOM.$mapCenter.style.removeProperty("background-image");
-      DOM.$mapCenter.style.removeProperty("background-size");
+      DOM.$mapCenter.classList.remove("loading");
       DOM.$mapCenter.classList.add("d-none");
     }
     this.#clearSources();

diff --git a/src/js/poi-accessibility.js b/src/js/poi-accessibility.js
@@ -47,17 +47,13 @@ class MapboxAccessibility {
       feature.marker = document.createElement("button");
       feature.marker.setAttribute("title", label);
       feature.marker.setAttribute("tabindex", 0);
-      // FIXME: STYLE: passer par une classe et style CSS
-      feature.marker.style.display = "block";
+      feature.marker.className = "mapboxgl-accessibility-marker";
 
       let position;
       if (feature.geometry.type === "Point") {
         position = this.map.project(feature.geometry.coordinates);
       }
-      feature.marker.style.width = "24px";
-      feature.marker.style.height = "24px";
       feature.marker.style.transform = `translate(-50%, -50%) translate(${position.x}px, ${position.y}px)`;
-      feature.marker.className = "mapboxgl-accessibility-marker";
 
       this.map.getCanvasContainer().appendChild(feature.marker);
       return feature;

diff --git a/src/js/route-draw/route-draw-dom.js b/src/js/route-draw/route-draw-dom.js
@@ -216,8 +216,6 @@ let RouteDrawDOM = {
     var canvasProfile = document.createElement("canvas");
     canvasProfile.id = "routedraw-elevationline";
     canvasProfile.className = "elevationLineCanvas";
-    // FIXME: STYLE: passer par une classe et style CSS
-    canvasProfile.style.width = "100%";
     div.appendChild(canvasProfile);
 
     var detailsHeader = document.createElement("p");