Skip to content

Commit

Permalink
chore: move alert to dedicated module
Browse files Browse the repository at this point in the history
  • Loading branch information
yohanboniface committed May 22, 2024
1 parent 03f6080 commit 142a89f
Show file tree
Hide file tree
Showing 15 changed files with 184 additions and 162 deletions.
51 changes: 0 additions & 51 deletions umap/static/umap/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -756,57 +756,6 @@ input[type=hidden].blur + [type="button"] {
}


/* *********** */
/* Alerts */
/* *********** */
#umap-alert-container {
min-height: 46px;
line-height: 46px;
padding-left: 10px;
width: calc(100% - 500px);
position: absolute;
top: -46px;
left: 250px; /* Keep save/cancel button accessible. */
right: 250px;
box-shadow: 0 1px 7px #999999;
visibility: hidden;
background: none repeat scroll 0 0 rgba(20, 22, 23, 0.8);
font-weight: bold;
color: #fff;
font-size: 0.8em;
z-index: 1012;
border-radius: 2px;
}
#umap-alert-container.error {
background-color: #c60f13;
}
.umap-alert #umap-alert-container {
visibility: visible;
top: 23px;
}
.umap-alert-container .umap-action {
margin-left: 10px;
background-color: #fff;
color: #000;
padding: 5px;
border-radius: 4px;
}
.umap-alert-container .umap-action:hover {
color: #000;
}
.umap-alert-container .error .umap-action {
background-color: #666;
color: #eee;
}
.umap-alert-container .error .umap-action:hover {
color: #fff;
}
.umap-alert-container input {
padding: 5px;
border-radius: 4px;
width: 100%;
}

/* *********** */
/* Tooltip */
/* *********** */
Expand Down
47 changes: 47 additions & 0 deletions umap/static/umap/css/alert.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
#umap-alert-container {
min-height: 46px;
line-height: 46px;
padding-left: 10px;
width: calc(100% - 500px);
position: absolute;
top: -46px;
left: 250px; /* Keep save/cancel button accessible. */
right: 250px;
box-shadow: 0 1px 7px #999999;
visibility: hidden;
background: none repeat scroll 0 0 rgba(20, 22, 23, 0.8);
font-weight: bold;
color: #fff;
font-size: 0.8em;
z-index: 1012;
border-radius: 2px;
}
#umap-alert-container.error {
background-color: #c60f13;
}
.umap-alert #umap-alert-container {
visibility: visible;
top: 23px;
}
.umap-alert-container .umap-action {
margin-left: 10px;
background-color: #fff;
color: #000;
padding: 5px;
border-radius: 4px;
}
.umap-alert-container .umap-action:hover {
color: #000;
}
.umap-alert-container .error .umap-action {
background-color: #666;
color: #eee;
}
.umap-alert-container .error .umap-action:hover {
color: #fff;
}
.umap-alert-container input {
padding: 5px;
border-radius: 4px;
width: 100%;
}
2 changes: 2 additions & 0 deletions umap/static/umap/js/modules/global.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Browser from './browser.js'
import Facets from './facets.js'
import Caption from './caption.js'
import { Panel, EditPanel, FullPanel } from './panel.js'
import Alert from './ui/alert.js'
import * as Utils from './utils.js'
import { SCHEMA } from './schema.js'
import { Request, ServerRequest, RequestError, HTTPError, NOKError } from './request.js'
Expand All @@ -21,6 +22,7 @@ window.U = {
Browser,
Facets,
Panel,
Alert,
EditPanel,
FullPanel,
Utils,
Expand Down
20 changes: 12 additions & 8 deletions umap/static/umap/js/modules/request.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,18 @@ 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 {
constructor(ui) {
constructor(alert) {
super()
this.ui = ui
this.alert = alert
}

fire(name, params) {
document.body.dispatchEvent(new CustomEvent(name, params))
}

async _fetch(method, uri, headers, data) {
const id = Math.random()
this.ui.fire('dataloading', { id: id })
this.fire('dataloading', { id: id })
try {
const response = await BaseRequest.prototype._fetch.call(
this,
Expand All @@ -68,7 +72,7 @@ export class Request extends BaseRequest {
if (error instanceof NOKError) return this._onNOK(error)
return this._onError(error)
} finally {
this.ui.fire('dataload', { id: id })
this.fire('dataload', { id: id })
}
}

Expand All @@ -81,7 +85,7 @@ export class Request extends BaseRequest {
}

_onError(error) {
this.ui.alert({ content: L._('Problem in the response'), level: 'error' })
this.alert.open({ content: L._('Problem in the response'), level: 'error' })
}

_onNOK(error) {
Expand Down Expand Up @@ -127,9 +131,9 @@ export class ServerRequest extends Request {
try {
const data = await response.json()
if (data.info) {
this.ui.alert({ content: data.info, level: 'info' })
this.alert.open({ content: data.info, level: 'info' })
} else if (data.error) {
this.ui.alert({ content: data.error, level: 'error' })
this.alert.open({ content: data.error, level: 'error' })
return this._onError(new Error(data.error))
}
return [data, response, null]
Expand All @@ -144,7 +148,7 @@ export class ServerRequest extends Request {

_onNOK(error) {
if (error.status === 403) {
this.ui.alert({
this.alert.open({
content: error.message || L._('Action not allowed :('),
level: 'error',
})
Expand Down
88 changes: 88 additions & 0 deletions umap/static/umap/js/modules/ui/alert.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { DomUtil, DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
import { translate } from '../i18n.js'

const ALERTS = []
let ALERT_ID = null

export default class Alert {
constructor(map) {
this.parent = map._controlContainer
this.map = map
this.container = DomUtil.create('div', 'with-transition', this.parent)
this.container.id = 'umap-alert-container'
DomEvent.disableClickPropagation(this.container)
DomEvent.on(this.container, 'contextmenu', DomEvent.stopPropagation) // Do not activate our custom context menu.
DomEvent.on(this.container, 'wheel', DomEvent.stopPropagation)
DomEvent.on(this.container, 'MozMousePixelScroll', DomEvent.stopPropagation)
}

open(params) {
if (DomUtil.hasClass(this.parent, 'umap-alert')) ALERTS.push(params)
else this._open(params)
}

_open(params) {
if (!params) {
if (ALERTS.length) params = ALERTS.pop()
else return
}
let timeoutID
const level_class = params.level && params.level == 'info' ? 'info' : 'error'
this.container.innerHTML = ''
DomUtil.addClass(this.parent, 'umap-alert')
DomUtil.addClass(this.container, level_class)
const close = () => {
if (timeoutID && timeoutID !== ALERT_ID) {
return
} // Another alert has been forced
this.container.innerHTML = ''
DomUtil.removeClass(this.parent, 'umap-alert')
DomUtil.removeClass(this.container, level_class)
if (timeoutID) window.clearTimeout(timeoutID)
this._open()
}
const closeButton = DomUtil.createButton(
'umap-close-link',
this.container,
'',
close,
this
)
DomUtil.create('i', 'umap-close-icon', closeButton)
const label = DomUtil.create('span', '', closeButton)
label.title = label.textContent = translate('Close')
DomUtil.element({
tagName: 'div',
innerHTML: params.content,
parent: this.container,
})
this.addActions(params.actions)
if (params.duration !== Infinity) {
ALERT_ID = timeoutID = window.setTimeout(close, params.duration || 3000)
}
}

addActions(actions) {
actions = actions || []
let action, el, input
const form = DomUtil.create('div', 'umap-alert-actions', this.container)
for (let action of actions) {
if (action.input) {
input = DomUtil.element({
tagName: 'input',
parent: form,
className: 'umap-alert-input',
placeholder: action.input,
})
}
el = DomUtil.createButton(
'umap-action',
form,
action.label,
action.callback,
action.callbackContext || this.map
)
DomEvent.on(el, 'click', close, this)
}
}
}
3 changes: 1 addition & 2 deletions umap/static/umap/js/umap.controls.js
Original file line number Diff line number Diff line change
Expand Up @@ -1048,7 +1048,6 @@ U.Locate = L.Control.Locate.extend({
if (!this._container || !this._container.parentNode) return
return L.Control.Locate.prototype.remove.call(this)
},

})

U.Search = L.PhotonSearch.extend({
Expand Down Expand Up @@ -1087,7 +1086,7 @@ U.Search = L.PhotonSearch.extend({
if (latlng.isValid()) {
this.reverse.doReverse(latlng)
} else {
this.map.ui.alert({ content: 'Invalid latitude or longitude', mode: 'error' })
this.map.alert.open({ content: 'Invalid latitude or longitude', mode: 'error' })
}
return
}
Expand Down
4 changes: 2 additions & 2 deletions umap/static/umap/js/umap.features.js
Original file line number Diff line number Diff line change
Expand Up @@ -726,7 +726,7 @@ U.Marker = L.Marker.extend({
const builder = new U.FormBuilder(this, coordinatesOptions, {
callback: function () {
if (!this._latlng.isValid()) {
this.map.ui.alert({
this.map.alert.open({
content: L._('Invalid latitude or longitude'),
level: 'error',
})
Expand Down Expand Up @@ -928,7 +928,7 @@ U.PathMixin = {
items.push({
text: L._('Display measure'),
callback: function () {
this.map.ui.alert({ content: this.getMeasure(), level: 'info' })
this.map.alert.open({ content: this.getMeasure(), level: 'info' })
},
context: this,
})
Expand Down
4 changes: 2 additions & 2 deletions umap/static/umap/js/umap.importer.js
Original file line number Diff line number Diff line change
Expand Up @@ -161,15 +161,15 @@ U.Importer = L.Class.extend({
}
} else {
if (!type)
return this.map.ui.alert({
return this.map.alert.open({
content: L._('Please choose a format'),
level: 'error',
})
if (this.rawInput.value && type === 'umap') {
try {
this.map.importRaw(this.rawInput.value, type)
} catch (e) {
this.ui.alert({ content: L._('Invalid umap data'), level: 'error' })
this.alert.open({ content: L._('Invalid umap data'), level: 'error' })
console.error(e)
}
} else {
Expand Down
Loading

0 comments on commit 142a89f

Please sign in to comment.