mirror of
https://github.com/umap-project/umap.git
synced 2025-04-29 11:52:38 +02:00
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
This commit is contained in:
Yohan Boniface
parent
fe06a0ff8e
commit
9c3f8db548
4 changed files with 42 additions and 169 deletions
|
|
@ -263,8 +263,12 @@ export const LeafletMap = BaseMap.extend({
|
||||||
this.loader.onAdd(this)
|
this.loader.onAdd(this)
|
||||||
|
|
||||||
if (!this.options.noControl) {
|
if (!this.options.noControl) {
|
||||||
DomEvent.on(document.body, 'dataloading', (e) => this.fire('dataloading', e))
|
DomEvent.on(document.body, 'dataloading', (event) =>
|
||||||
DomEvent.on(document.body, 'dataload', (e) => this.fire('dataload', e))
|
this.fire('dataloading', event.detail)
|
||||||
|
)
|
||||||
|
DomEvent.on(document.body, 'dataload', (event) =>
|
||||||
|
this.fire('dataload', event.detail)
|
||||||
|
)
|
||||||
this.on('click', this.closeInplaceToolbar)
|
this.on('click', this.closeInplaceToolbar)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -47,8 +47,8 @@ class BaseRequest {
|
||||||
// In case of error, an alert is sent, but non 20X status are not handled
|
// In case of error, an alert is sent, but non 20X status are not handled
|
||||||
// The consumer must check the response status by hand
|
// The consumer must check the response status by hand
|
||||||
export class Request extends BaseRequest {
|
export class Request extends BaseRequest {
|
||||||
fire(name, params) {
|
fire(name, detail) {
|
||||||
document.body.dispatchEvent(new CustomEvent(name, params))
|
document.body.dispatchEvent(new CustomEvent(name, { detail }))
|
||||||
}
|
}
|
||||||
|
|
||||||
async _fetch(method, uri, headers, data) {
|
async _fetch(method, uri, headers, data) {
|
||||||
|
|
|
||||||
|
|
@ -942,11 +942,11 @@ L.Control.Loading.include({
|
||||||
},
|
},
|
||||||
|
|
||||||
_showIndicator: function () {
|
_showIndicator: function () {
|
||||||
L.DomUtil.addClass(this._map._container, 'umap-loading')
|
this._map._container.classList.add('umap-loading')
|
||||||
},
|
},
|
||||||
|
|
||||||
_hideIndicator: function () {
|
_hideIndicator: function () {
|
||||||
L.DomUtil.removeClass(this._map._container, 'umap-loading')
|
this._map._container.classList.remove('umap-loading')
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -935,173 +935,42 @@ a.umap-control-caption,
|
||||||
/* ********************************* */
|
/* ********************************* */
|
||||||
/* Ajax loader */
|
/* 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 {
|
.umap-loader {
|
||||||
|
width: 100%;
|
||||||
|
height: 6px;
|
||||||
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
background: var(--color-brightCyan);
|
||||||
|
overflow: hidden;
|
||||||
display: none;
|
display: none;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
z-index: var(--zindex-loader);
|
z-index: var(--zindex-loader);
|
||||||
background-color: #79c1c0 !important;
|
}
|
||||||
-webkit-transform: translateX(100%);
|
.umap-loader::after {
|
||||||
-moz-transform: translateX(100%);
|
content: '';
|
||||||
-o-transform: translateX(100%);
|
box-sizing: border-box;
|
||||||
transform: translateX(100%);
|
width: 0;
|
||||||
|
height: 4.8px;
|
||||||
|
background: var(--color-darkerGray);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
animation: animFw 10s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes animFw {
|
||||||
@-webkit-keyframes shift-rightwards
|
0% {
|
||||||
{
|
width: 0;
|
||||||
0%
|
|
||||||
{
|
|
||||||
-webkit-transform:translateX(-100%);
|
|
||||||
-moz-transform:translateX(-100%);
|
|
||||||
-o-transform:translateX(-100%);
|
|
||||||
transform:translateX(-100%);
|
|
||||||
}
|
}
|
||||||
|
100% {
|
||||||
40%
|
width: 100%;
|
||||||
{
|
|
||||||
-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%);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@-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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* *************************** */
|
/* *************************** */
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue