From 9c3f8db54824d05d2420dc0b5e720360921819bd Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Mon, 16 Dec 2024 18:01:01 +0100 Subject: [PATCH] chore: clean CSS loader - change the CSS (cf https://github.com/umap-project/umap/issues/564#issuecomment-2541883101) - change the way we pass events (and their id) to Leaflet.Loading --- umap/static/umap/js/modules/rendering/map.js | 8 +- umap/static/umap/js/modules/request.js | 4 +- umap/static/umap/js/umap.controls.js | 4 +- umap/static/umap/map.css | 195 +++---------------- 4 files changed, 42 insertions(+), 169 deletions(-) diff --git a/umap/static/umap/js/modules/rendering/map.js b/umap/static/umap/js/modules/rendering/map.js index a3baeb3a..1c660291 100644 --- a/umap/static/umap/js/modules/rendering/map.js +++ b/umap/static/umap/js/modules/rendering/map.js @@ -263,8 +263,12 @@ export const LeafletMap = BaseMap.extend({ this.loader.onAdd(this) if (!this.options.noControl) { - DomEvent.on(document.body, 'dataloading', (e) => this.fire('dataloading', e)) - DomEvent.on(document.body, 'dataload', (e) => this.fire('dataload', e)) + DomEvent.on(document.body, 'dataloading', (event) => + this.fire('dataloading', event.detail) + ) + DomEvent.on(document.body, 'dataload', (event) => + this.fire('dataload', event.detail) + ) this.on('click', this.closeInplaceToolbar) } diff --git a/umap/static/umap/js/modules/request.js b/umap/static/umap/js/modules/request.js index c8525363..79a04cf2 100644 --- a/umap/static/umap/js/modules/request.js +++ b/umap/static/umap/js/modules/request.js @@ -47,8 +47,8 @@ class BaseRequest { // In case of error, an alert is sent, but non 20X status are not handled // The consumer must check the response status by hand export class Request extends BaseRequest { - fire(name, params) { - document.body.dispatchEvent(new CustomEvent(name, params)) + fire(name, detail) { + document.body.dispatchEvent(new CustomEvent(name, { detail })) } async _fetch(method, uri, headers, data) { diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 54061492..de445fe5 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -942,11 +942,11 @@ L.Control.Loading.include({ }, _showIndicator: function () { - L.DomUtil.addClass(this._map._container, 'umap-loading') + this._map._container.classList.add('umap-loading') }, _hideIndicator: function () { - L.DomUtil.removeClass(this._map._container, 'umap-loading') + this._map._container.classList.remove('umap-loading') }, }) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index e58ba798..ea74ecef 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -935,173 +935,42 @@ a.umap-control-caption, /* ********************************* */ /* Ajax loader */ /* ********************************* */ -.umap-loading .umap-loader -{ - display: block; - -webkit-animation: shift-rightwards 3s ease-in-out infinite; - -moz-animation: shift-rightwards 3s ease-in-out infinite; - -ms-animation: shift-rightwards 3s ease-in-out infinite; - -o-animation: shift-rightwards 3s ease-in-out infinite; - animation: shift-rightwards 3s ease-in-out infinite; - -webkit-animation-delay: .2s; - -moz-animation-delay: .2s; - -o-animation-delay: .2s; - animation-delay: .2s; -} .umap-loader { - position: absolute; - display: none; - top: 0; - left: 0; - right: 0; - height: 4px; - z-index: var(--zindex-loader); - background-color: #79c1c0 !important; - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -o-transform: translateX(100%); - transform: translateX(100%); + width: 100%; + height: 6px; + display: inline-block; + position: absolute; + background: var(--color-brightCyan); + overflow: hidden; + display: none; + top: 0; + left: 0; + right: 0; + height: 4px; + z-index: var(--zindex-loader); +} +.umap-loader::after { + content: ''; + box-sizing: border-box; + width: 0; + height: 4.8px; + background: var(--color-darkerGray); + position: absolute; + top: 0; + left: 0; + animation: animFw 10s linear infinite; } - -@-webkit-keyframes shift-rightwards -{ - 0% - { - -webkit-transform:translateX(-100%); - -moz-transform:translateX(-100%); - -o-transform:translateX(-100%); - transform:translateX(-100%); - } - - 40% - { - -webkit-transform:translateX(0%); - -moz-transform:translateX(0%); - -o-transform:translateX(0%); - transform:translateX(0%); - } - - 60% - { - -webkit-transform:translateX(0%); - -moz-transform:translateX(0%); - -o-transform:translateX(0%); - transform:translateX(0%); - } - - 100% - { - -webkit-transform:translateX(100%); - -moz-transform:translateX(100%); - -o-transform:translateX(100%); - transform:translateX(100%); - } - +@keyframes animFw { + 0% { + width: 0; + } + 100% { + width: 100%; + } } -@-moz-keyframes shift-rightwards -{ - 0% - { - -webkit-transform:translateX(-100%); - -moz-transform:translateX(-100%); - -o-transform:translateX(-100%); - transform:translateX(-100%); - } - - 40% - { - -webkit-transform:translateX(0%); - -moz-transform:translateX(0%); - -o-transform:translateX(0%); - transform:translateX(0%); - } - - 60% - { - -webkit-transform:translateX(0%); - -moz-transform:translateX(0%); - -o-transform:translateX(0%); - transform:translateX(0%); - } - - 100% - { - -webkit-transform:translateX(100%); - -moz-transform:translateX(100%); - -o-transform:translateX(100%); - transform:translateX(100%); - } - -} -@-o-keyframes shift-rightwards -{ - 0% - { - -webkit-transform:translateX(-100%); - -moz-transform:translateX(-100%); - -o-transform:translateX(-100%); - transform:translateX(-100%); - } - - 40% - { - -webkit-transform:translateX(0%); - -moz-transform:translateX(0%); - -o-transform:translateX(0%); - transform:translateX(0%); - } - - 60% - { - -webkit-transform:translateX(0%); - -moz-transform:translateX(0%); - -o-transform:translateX(0%); - transform:translateX(0%); - } - - 100% - { - -webkit-transform:translateX(100%); - -moz-transform:translateX(100%); - -o-transform:translateX(100%); - transform:translateX(100%); - } - -} -@keyframes shift-rightwards -{ - 0% - { - -webkit-transform:translateX(-100%); - -moz-transform:translateX(-100%); - -o-transform:translateX(-100%); - transform:translateX(-100%); - } - - 40% - { - -webkit-transform:translateX(0%); - -moz-transform:translateX(0%); - -o-transform:translateX(0%); - transform:translateX(0%); - } - - 60% - { - -webkit-transform:translateX(0%); - -moz-transform:translateX(0%); - -o-transform:translateX(0%); - transform:translateX(0%); - } - - 100% - { - -webkit-transform:translateX(100%); - -moz-transform:translateX(100%); - -o-transform:translateX(100%); - transform:translateX(100%); - } +.umap-loading .umap-loader { + display: block; } /* *************************** */