From 776d92e7cc6fd4c08d79da9908cd61b90def2d2a Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Wed, 22 May 2024 14:00:53 +0200 Subject: [PATCH] chore: add minimal dialog class to replace custom made help box --- .../fr/tutorials/5-multimedia-tooltips.md | 2 +- umap/static/umap/css/dialog.css | 17 +++++++ umap/static/umap/css/panel.css | 2 +- umap/static/umap/js/modules/global.js | 2 + umap/static/umap/js/modules/ui/dialog.js | 44 +++++++++++++++++++ umap/static/umap/js/umap.core.js | 39 +++------------- umap/static/umap/js/umap.js | 5 ++- umap/static/umap/map.css | 22 ---------- umap/static/umap/vars.css | 2 + umap/templates/umap/css.html | 1 + umap/tests/integration/test_dashboard.py | 2 +- 11 files changed, 79 insertions(+), 59 deletions(-) create mode 100644 umap/static/umap/css/dialog.css create mode 100644 umap/static/umap/js/modules/ui/dialog.js diff --git a/docs-users/fr/tutorials/5-multimedia-tooltips.md b/docs-users/fr/tutorials/5-multimedia-tooltips.md index 5b925791..2278d4da 100644 --- a/docs-users/fr/tutorials/5-multimedia-tooltips.md +++ b/docs-users/fr/tutorials/5-multimedia-tooltips.md @@ -12,7 +12,7 @@ data-url="https://umap.openstreetmap.fr/fr/map/new/" data-alt="Panneau d’aide au formatage." data-caption="Panneau d’aide au formatage." - data-selector=".umap-help-box" + data-selector=".umap-dialog" data-width="510" data-height="326" data-padding="5" diff --git a/umap/static/umap/css/dialog.css b/umap/static/umap/css/dialog.css new file mode 100644 index 00000000..b83061f6 --- /dev/null +++ b/umap/static/umap/css/dialog.css @@ -0,0 +1,17 @@ +.umap-dialog { + z-index: 10001; + margin: auto; + margin-top: 100px; + width: 50vw; + max-width: 100vw; + max-height: 50vh; + padding: 20px; + border: 1px solid #222; + background-color: var(--background-color); + color: var(--text-color); + border-radius: 5px; +} +.umap-dialog .umap-close-link { + float: right; + width: 100px; +} diff --git a/umap/static/umap/css/panel.css b/umap/static/umap/css/panel.css index 80f168b7..8dca758a 100644 --- a/umap/static/umap/css/panel.css +++ b/umap/static/umap/css/panel.css @@ -7,6 +7,7 @@ overflow-x: auto; z-index: 1010; background-color: var(--background-color); + color: var(--text-color); opacity: 0.98; cursor: initial; border-radius: 5px; @@ -14,7 +15,6 @@ } .panel.dark { border: 1px solid #222; - color: #efefef; } .panel.full { width: initial; diff --git a/umap/static/umap/js/modules/global.js b/umap/static/umap/js/modules/global.js index 226f67a5..42aff04e 100644 --- a/umap/static/umap/js/modules/global.js +++ b/umap/static/umap/js/modules/global.js @@ -4,6 +4,7 @@ import Facets from './facets.js' import Caption from './caption.js' import { Panel, EditPanel, FullPanel } from './ui/panel.js' import Alert from './ui/alert.js' +import Dialog from './ui/dialog.js' import Tooltip from './ui/tooltip.js' import * as Utils from './utils.js' import { SCHEMA } from './schema.js' @@ -24,6 +25,7 @@ window.U = { Facets, Panel, Alert, + Dialog, Tooltip, EditPanel, FullPanel, diff --git a/umap/static/umap/js/modules/ui/dialog.js b/umap/static/umap/js/modules/ui/dialog.js new file mode 100644 index 00000000..a1542103 --- /dev/null +++ b/umap/static/umap/js/modules/ui/dialog.js @@ -0,0 +1,44 @@ +import { DomUtil, DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js' +import { translate } from '../i18n.js' + +export default class Dialog { + constructor(parent) { + this.parent = parent + this.container = DomUtil.create( + 'dialog', + 'umap-dialog', + this.parent + ) + 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) + } + + get visible() { + return this.container.open + } + + close() { + this.container.close() + } + + open({className, content, modal} = {}) { + this.container.innerHTML = '' + if (modal) this.container.showModal() + else this.container.show() + if (className) { + this.container.classList.add(className) + } + const closeButton = DomUtil.createButton( + 'umap-close-link', + this.container, + '', + () => this.container.close() + ) + DomUtil.createIcon(closeButton, 'icon-close') + const label = DomUtil.create('span', '', closeButton) + label.title = label.textContent = translate('Close') + this.container.appendChild(content) + } +} diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index cf196478..149a6681 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -346,22 +346,6 @@ U.Help = L.Class.extend({ initialize: function (map) { this.map = map - this.box = L.DomUtil.create( - 'div', - 'umap-help-box with-transition dark', - document.body - ) - const closeButton = L.DomUtil.createButton( - 'umap-close-link', - this.box, - '', - this.hide, - this - ) - L.DomUtil.add('i', 'umap-close-icon', closeButton) - const label = L.DomUtil.create('span', '', closeButton) - label.title = label.textContent = L._('Close') - this.content = L.DomUtil.create('div', 'umap-help-content', this.box) this.isMacOS = /mac/i.test( // eslint-disable-next-line compat/compat -- Fallback available. navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform @@ -377,20 +361,12 @@ U.Help = L.Class.extend({ }, show: function () { - this.content.innerHTML = '' + const container = L.DomUtil.add('div') for (let i = 0, name; i < arguments.length; i++) { name = arguments[i] - L.DomUtil.add('div', 'umap-help-entry', this.content, this.resolve(name)) + L.DomUtil.add('div', 'umap-help-entry', container, this.resolve(name)) } - L.DomUtil.addClass(document.body, 'umap-help-on') - }, - - hide: function () { - L.DomUtil.removeClass(document.body, 'umap-help-on') - }, - - visible: function () { - return L.DomUtil.hasClass(document.body, 'umap-help-on') + this.map.dialog.open({ content: container, className: 'dark' }) }, resolve: function (name) { @@ -424,16 +400,15 @@ U.Help = L.Class.extend({ }, edit: function () { - const container = L.DomUtil.create('div', ''), - self = this, - title = L.DomUtil.create('h3', '', container), - actionsContainer = L.DomUtil.create('ul', 'umap-edit-actions', container) + const container = L.DomUtil.create('div', '') + const title = L.DomUtil.create('h3', '', container) + const actionsContainer = L.DomUtil.create('ul', 'umap-edit-actions', container) const addAction = (action) => { const actionContainer = L.DomUtil.add('li', '', actionsContainer) L.DomUtil.add('i', action.options.className, actionContainer), L.DomUtil.add('span', '', actionContainer, action.options.tooltip) L.DomEvent.on(actionContainer, 'click', action.addHooks, action) - L.DomEvent.on(actionContainer, 'click', self.hide, self) + L.DomEvent.on(actionContainer, 'click', this.map.dialog.close, this.map.dialog) } title.textContent = L._('Where do we go from here?') for (const id in this.map.helpMenuActions) { diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index 5dda78d1..054ff897 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -59,6 +59,7 @@ U.Map = L.Map.extend({ this.panel = new U.Panel(this) this.alert = new U.Alert(this._controlContainer) this.tooltip = new U.Tooltip(this._controlContainer) + this.dialog = new U.Dialog(this._controlContainer) if (this.hasEditMode()) { this.editPanel = new U.EditPanel(this) this.fullPanel = new U.FullPanel(this) @@ -525,8 +526,8 @@ U.Map = L.Map.extend({ L.DomEvent.stop(e) this.search() } else if (e.keyCode === U.Keys.ESC) { - if (this.help.visible()) { - this.help.hide() + if (this.dialog.visible) { + this.dialog.close() } else { this.panel.close() this.editPanel?.close() diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 8d872b92..f2e1971c 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -390,24 +390,6 @@ ul.photon-autocomplete { /* ********************************* */ /* Help Lightbox */ /* ********************************* */ -.umap-help-box { - z-index: 10001; - position: absolute; - margin: 0 calc(50% - 500px/2); - width: 500px; - max-width: 100vw; - padding: 40px 20px; - border: 1px solid #222; - background-color: var(--color-darkGray); - color: #efefef; - font-size: 0.8em; - visibility: hidden; - top: -100%; -} -.umap-help-box .umap-close-link { - float: right; - width: 100px; -} .umap-help-button { display: inline-block; width: 16px; @@ -426,10 +408,6 @@ ul.photon-autocomplete { .dark .umap-help-button { background-image: url('./img/16-white.svg'); } -.umap-help-on .umap-help-box { - visibility: visible; - top: 100px; -} .umap-help-entry + .umap-help-entry { margin-top: 10px; border-top: 1px solid #aaa; diff --git a/umap/static/umap/vars.css b/umap/static/umap/vars.css index 16d5a7f7..c12c5114 100644 --- a/umap/static/umap/vars.css +++ b/umap/static/umap/vars.css @@ -11,6 +11,7 @@ --background-color: var(--color-light); --color-accent: var(--color-brightCyan); + --text-color: black; /* Buttons. */ --button-primary-background: var(--color-waterMint); @@ -29,4 +30,5 @@ } .dark { --background-color: var(--color-darkGray); + --text-color: #efefef; } diff --git a/umap/templates/umap/css.html b/umap/templates/umap/css.html index 4e12a22d..1233cbb6 100644 --- a/umap/templates/umap/css.html +++ b/umap/templates/umap/css.html @@ -31,4 +31,5 @@ + diff --git a/umap/tests/integration/test_dashboard.py b/umap/tests/integration/test_dashboard.py index 86e8ff78..1d0d003f 100644 --- a/umap/tests/integration/test_dashboard.py +++ b/umap/tests/integration/test_dashboard.py @@ -28,7 +28,7 @@ def test_owner_can_delete_map_after_confirmation(map, live_server, login): def test_dashboard_map_preview(map, live_server, datalayer, login): page = login(map.owner) page.goto(f"{live_server.url}/en/me") - dialog = page.locator("dialog") + dialog = page.get_by_role("dialog") expect(dialog).to_be_hidden() button = page.get_by_role("button", name="Open preview") expect(button).to_be_visible()