refactor panel-resize

pull/1/head
LianaHus 5 years ago
parent 7316f0db27
commit 5f34ddc871
  1. 6
      src/app.js
  2. 6
      src/framingService.js
  3. 83
      src/lib/panels-resize.js

@ -141,7 +141,6 @@ class App {
init () {
var self = this
self._components.resizeFeature = new PanelsResize('#side-panel', '#editor-container', { 'minWidth': 330, x: 450 })
run.apply(self)
}
@ -157,7 +156,7 @@ class App {
// center panel, resizable
self._view.sidepanel = yo`
<div id="side-panel" class=${css.sidepanel}>
<div id="side-panel" style="min-width: 320px;" class=${css.sidepanel}>
${''}
</div>
`
@ -169,10 +168,13 @@ class App {
</div>
`
self._components.resizeFeature = new PanelsResize(self._view.sidepanel)
self._view.el = yo`
<div class=${css.browsersolidity}>
${self._view.iconpanel}
${self._view.sidepanel}
${self._components.resizeFeature.render()}
${self._view.mainpanel}
</div>
`

@ -10,13 +10,13 @@ export class FramingService {
start () {
this.sidePanel.events.on('toggle', () => {
this.resizeFeature.panel1.clientWidth !== 0 ? this.resizeFeature.minimize() : this.resizeFeature.maximise()
this.resizeFeature.panel.clientWidth !== 0 ? this.resizeFeature.hidePanel() : this.resizeFeature.showPanel()
})
this.sidePanel.events.on('showing', () => {
this.resizeFeature.panel1.clientWidth === 0 ? this.resizeFeature.maximise() : ''
this.resizeFeature.panel.clientWidth === 0 ? this.resizeFeature.showPanel() : ''
})
this.mainPanel.events.on('toggle', () => {
this.resizeFeature.maximise()
this.resizeFeature.showPanel()
})
this.verticalIcon.select('fileExplorers')

@ -3,11 +3,10 @@ const csjs = require('csjs-inject')
const css = csjs`
.dragbar {
width : 4px;
width : 1px;
height : 100%;
cursor : col-resize;
z-index : 999;
/* border-right : 2px solid var(--primary); */
}
.ghostbar {
width : 3px;
@ -21,28 +20,25 @@ const css = csjs`
}
`
/*
* opt:
* minWidth : minimn width for panels
* x : position of gutter at load
*
*
*/
export default class PanelsResize {
constructor (idpanel1, idpanel2, opt) {
var panel1 = document.querySelector(idpanel1)
var panel2 = document.querySelector(idpanel2)
this.panel1 = panel1
this.panel2 = panel2
this.opt = opt
constructor (panel) {
this.panel = panel
let self = this;
const string = panel.style.minWidth
this.minWidth = string.length > 2 ? parseInt(string.substring(0, string.length - 2)) : 0
window.addEventListener('resize', function (event) {
self.setPosition(event)
})
}
var ghostbar = yo`<div class=${css.ghostbar}></div>`
render () {
this.ghostbar = yo`<div class=${css.ghostbar}></div>`
let mousedown = (event) => {
event.preventDefault()
if (event.which === 1) {
moveGhostbar(event)
document.body.appendChild(ghostbar)
document.body.appendChild(this.ghostbar)
document.addEventListener('mousemove', moveGhostbar)
document.addEventListener('mouseup', removeGhostbar)
document.addEventListener('keydown', cancelGhostbar)
@ -51,58 +47,47 @@ export default class PanelsResize {
let cancelGhostbar = (event) => {
if (event.keyCode === 27) {
document.body.removeChild(ghostbar)
document.body.removeChild(this.ghostbar)
document.removeEventListener('mousemove', moveGhostbar)
document.removeEventListener('mouseup', removeGhostbar)
document.removeEventListener('keydown', cancelGhostbar)
}
}
let moveGhostbar = (event) => { // @NOTE VERTICAL ghostbar
let p = processPositions(event)
if (p.panel1Width <= opt.minWidth || p.panel2Width <= opt.minWidth) return
ghostbar.style.left = event.x + 'px'
}
let setPosition = (event) => {
let p = processPositions(event)
panel1.style.width = p.panel1Width + 'px'
panel2.style.left = p.panel2left + 'px'
panel2.style.width = p.panel2Width + 'px'
let moveGhostbar = (event) => {
this.ghostbar.style.left = event.x + 'px'
}
let removeGhostbar = (event) => {
document.body.removeChild(ghostbar)
document.body.removeChild(this.ghostbar)
document.removeEventListener('mousemove', moveGhostbar)
document.removeEventListener('mouseup', removeGhostbar)
document.removeEventListener('keydown', cancelGhostbar)
setPosition(event)
this.setPosition(event)
}
let processPositions = (event) => {
let panel1Width = event.x - panel1.offsetLeft
panel1Width = panel1Width < opt.minWidth ? opt.minWidth : panel1Width
let panel2left = panel1.offsetLeft + panel1Width
let panel2Width = panel2.parentElement.clientWidth - panel1.offsetLeft - panel1Width
panel2Width = panel2Width < opt.minWidth ? opt.minWidth : panel2Width
return { panel1Width, panel2left, panel2Width }
return yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
}
window.addEventListener('resize', function (event) {
setPosition({ x: panel1.offsetLeft + panel1.clientWidth })
})
var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
panel1.appendChild(dragbar)
calculatePanelWidth (event) {
return event.x - this.panel.offsetLeft
}
setPosition(opt)
setPosition (event) {
let panelWidth = this.calculatePanelWidth(event)
// close the panel if the width is less than a minWidth
if (panelWidth > this.minWidth - 10 || this.panel.style.display == 'none') {
this.panel.style.width = panelWidth + 'px'
this.showPanel()
} else this.hidePanel()
}
minimize () {
this.panel1.style.display = 'none'
hidePanel () {
this.panel.style.display = 'none'
}
maximise () {
this.panel1.style.display = 'flex'
showPanel () {
this.panel.style.display = 'flex'
}
}

Loading…
Cancel
Save