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