From a0e183aa66ce816f4b1edf64dab0153266d55e0e Mon Sep 17 00:00:00 2001 From: Amaury Zarzelli Date: Mon, 7 Oct 2024 15:39:10 +0200 Subject: [PATCH] refactor: replace useless style in js by css classes (#129) --- src/css/app.scss | 3 ++- src/css/elevationLine.css | 13 ++++++++++ src/css/isochrone.css | 6 ++++- src/css/map-buttons.css | 5 ++++ src/css/map.css | 22 ++++++++++++++++ src/css/mapboxgl-accessibility.css | 3 +++ src/css/signalement.css | 6 +++++ src/css/tabs.css | 1 + src/js/directions/directions-results-dom.js | 2 -- .../elevation-line-control.js | 23 +++------------- src/js/index.js | 26 +++---------------- src/js/isochrone/isochrone-dom.js | 6 ++--- .../interactivity-indicator.js | 21 +++++++-------- src/js/map-interactivity/map-interactivity.js | 16 +++--------- src/js/poi-accessibility.js | 6 +---- src/js/route-draw/route-draw-dom.js | 2 -- src/js/signalement-osm.js | 15 +++-------- 17 files changed, 84 insertions(+), 92 deletions(-) create mode 100644 src/css/elevationLine.css diff --git a/src/css/app.scss b/src/css/app.scss index ca8cb4c1..54a994d6 100644 --- 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'; \ No newline at end of file +@use 'media-queries.css'; diff --git a/src/css/elevationLine.css b/src/css/elevationLine.css new file mode 100644 index 00000000..b594e991 --- /dev/null +++ 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 index 42e704c0..043ffeef 100644 --- 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; -} \ No newline at end of file +} diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css index 635982a3..98c9da59 100644 --- 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 index fec5689b..9dad2a89 100644 --- 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 index 0401269e..1df45625 100644 --- 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 index d418f2fe..6282459c 100644 --- 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 index 8fa4674b..fe2c2bd8 100644 --- 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 index 94589346..2a93b244 100644 --- 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 index 25f1750d..2cf236c5 100644 --- 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,8 +383,7 @@ 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"); } /** @@ -406,7 +391,7 @@ Distance du départ : ${distanceText} ${this.unit}`; * @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 index 89c0381e..66b28b81 100644 --- 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 index 98ffdc3b..33a016a1 100644 --- 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 index b2398717..f04f2084 100644 --- 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 index 5418abc8..e773f6f8 100644 --- 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 index 62ae901d..81471bc0 100644 --- 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 index ad1a79dd..819e3644 100644 --- 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"); diff --git a/src/js/signalement-osm.js b/src/js/signalement-osm.js index 40237d32..988d719c 100644 --- a/src/js/signalement-osm.js +++ b/src/js/signalement-osm.js @@ -8,8 +8,6 @@ import Globals from "./globals"; import { Toast } from "@capacitor/toast"; -import LoadingWhite from "../css/assets/loading-white.svg"; - /** * Permet de créer une Note OpenStreetMap depuis un POI OSM */ @@ -89,23 +87,16 @@ class SignalementOSM { console.warn("Signalement sans lieu !"); return; } - // FIXME: STYLE: passer par une classe et style CSS - this.dom.submitButton.style.pointerEvents = "none"; - this.dom.submitButton.style.backgroundImage = "url(" + LoadingWhite + ")"; - this.dom.submitButton.style.color = "#0000"; + this.dom.submitButton.classList.add("inactive"); this.#send().then( (response) => { this.target.querySelector("#osmNoteUrl").href = `https://www.openstreetmap.org/note/${response.properties.id}`; this.target.querySelector("#signalementOsmMain").classList.add("d-none"); this.target.querySelector("#signalementOsmDone").classList.remove("d-none"); - this.dom.submitButton.style.removeProperty("pointer-events"); - this.dom.submitButton.style.removeProperty("background-image"); - this.dom.submitButton.style.removeProperty("color"); + this.dom.submitButton.classList.remove("inactive"); }).catch( () => { this.target.querySelector("#signalementOsmMain").classList.add("d-none"); this.target.querySelector("#signalementOsmDone").classList.remove("d-none"); - this.dom.submitButton.style.removeProperty("pointer-events"); - this.dom.submitButton.style.removeProperty("background-image"); - this.dom.submitButton.style.removeProperty("color"); + this.dom.submitButton.classList.remove("inactive"); this.hide(); Toast.show({ text: "Une erreur s'est produite lors de la création de la note",