chore: import modules in panel.js

This commit is contained in:
Yohan Boniface 2024-03-15 11:34:42 +01:00
parent 849b194d4f
commit e3ff769ab9

View file

@ -1,48 +1,46 @@
import { DomUtil, DomEvent } from '../../vendors/leaflet/leaflet-src.esm.js'
import { translate } from './i18n.js'
export class Panel { export class Panel {
MODE = 'condensed' MODE = 'condensed'
CLASSNAME = 'left' CLASSNAME = 'left'
constructor(parent) { constructor(parent) {
this.parent = parent this.parent = parent
this.container = L.DomUtil.create('div', '', this.parent) this.container = DomUtil.create('div', '', this.parent)
L.DomEvent.disableClickPropagation(this.container) DomEvent.disableClickPropagation(this.container)
L.DomEvent.on(this.container, 'contextmenu', L.DomEvent.stopPropagation) // Do not activate our custom context menu. DomEvent.on(this.container, 'contextmenu', DomEvent.stopPropagation) // Do not activate our custom context menu.
L.DomEvent.on(this.container, 'wheel', L.DomEvent.stopPropagation) DomEvent.on(this.container, 'wheel', DomEvent.stopPropagation)
L.DomEvent.on(this.container, 'MozMousePixelScroll', L.DomEvent.stopPropagation) DomEvent.on(this.container, 'MozMousePixelScroll', DomEvent.stopPropagation)
}
resetClassName() {
this.container.className = `with-transition panel ${this.CLASSNAME} ${this.MODE}`
} }
open(e) { open(e) {
//this.fire('panel:open') //this.fire('panel:open')
// We reset all because we can't know which class has been added this.container.className = `with-transition panel ${this.CLASSNAME} ${this.MODE}`
// by previous ui processes...
this.resetClassName()
this.container.innerHTML = '' this.container.innerHTML = ''
const actionsContainer = L.DomUtil.create('ul', 'toolbox', this.container) const actionsContainer = DomUtil.create('ul', 'toolbox', this.container)
const body = L.DomUtil.create('div', 'body', this.container) const body = DomUtil.create('div', 'body', this.container)
if (e.data.html.nodeType && e.data.html.nodeType === 1) if (e.data.html.nodeType && e.data.html.nodeType === 1)
body.appendChild(e.data.html) body.appendChild(e.data.html)
else body.innerHTML = e.data.html else body.innerHTML = e.data.html
const closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer) const closeLink = DomUtil.create('li', 'umap-close-link', actionsContainer)
L.DomUtil.add('i', 'icon icon-16 icon-close', closeLink) DomUtil.add('i', 'icon icon-16 icon-close', closeLink)
closeLink.title = L._('Close') closeLink.title = translate('Close')
const resizeLink = L.DomUtil.create('li', 'umap-resize-link', actionsContainer) const resizeLink = DomUtil.create('li', 'umap-resize-link', actionsContainer)
L.DomUtil.add('i', 'icon icon-16 icon-resize', resizeLink) DomUtil.add('i', 'icon icon-16 icon-resize', resizeLink)
resizeLink.title = L._('Toggle size') resizeLink.title = translate('Toggle size')
if (e.actions) { if (e.actions) {
for (let i = 0; i < e.actions.length; i++) { for (let i = 0; i < e.actions.length; i++) {
actionsContainer.appendChild(e.actions[i]) actionsContainer.appendChild(e.actions[i])
} }
} }
if (e.className) L.DomUtil.addClass(this.container, e.className) if (e.className) DomUtil.addClass(body, e.className)
if (L.DomUtil.hasClass(this.container, 'on')) { if (DomUtil.hasClass(this.container, 'on')) {
// Already open. // Already open.
//this.fire('panel:ready') //this.fire('panel:ready')
} else { } else {
L.DomEvent.once( DomEvent.once(
this.container, this.container,
'transitionend', 'transitionend',
function (e) { function (e) {
@ -50,10 +48,10 @@ export class Panel {
}, },
this this
) )
L.DomUtil.addClass(this.container, 'on') DomUtil.addClass(this.container, 'on')
} }
L.DomEvent.on(closeLink, 'click', this.close, this) DomEvent.on(closeLink, 'click', this.close, this)
L.DomEvent.on(resizeLink, 'click', this.resize, this) DomEvent.on(resizeLink, 'click', this.resize, this)
} }
resize() { resize() {
@ -69,8 +67,8 @@ export class Panel {
} }
close() { close() {
if (L.DomUtil.hasClass(this.container, 'on')) { if (DomUtil.hasClass(this.container, 'on')) {
L.DomUtil.removeClass(this.container, 'on') DomUtil.removeClass(this.container, 'on')
//this.fire('panel:closed') //this.fire('panel:closed')
} }
} }