chore: import modules in panel.js
This commit is contained in:
parent
849b194d4f
commit
e3ff769ab9
1 changed files with 26 additions and 28 deletions
|
@ -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')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue