almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-29 11:52:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: clean CSS loader

Browse source 
- 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
This commit is contained in:
Yohan Boniface 2024-12-16 18:01:01 +01:00
parent fe06a0ff8e
commit 9c3f8db548
4 changed files with 42 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
umap/static/umap/js/modules/rendering/map.js
View file

@ -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)
}

4
umap/static/umap/js/modules/request.js
View file

@ -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) {

4
umap/static/umap/js/umap.controls.js
View file

@ -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')
},
})

177
umap/static/umap/map.css
View file

@ -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 {
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);
background-color: #79c1c0 !important;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.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%);
@keyframes animFw {
0% {
width: 0;
}
40%
{
-webkit-transform:translateX(0%);
-moz-transform:translateX(0%);
-o-transform:translateX(0%);
transform:translateX(0%);
100% {
width: 100%;
}
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%);
}
}
@-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;
}
/* *************************** */