refactor panel-resize

src/app.js

@@ -81,7 +81,7 @@ var css = csjs`
     width              : 50px;
     user-select        : none;
   }
-  .sidepanel          {
+  .sidepanel           {
     display            : flex;
     flex-direction     : row-reverse;
     width              : 320px;
@@ -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>
     `

src/framingService.js

@@ -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')

src/lib/panels-resize.js

@@ -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,88 +20,74 @@ 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)
       }
     }
-
+    
     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 }
-    }
-
-    window.addEventListener('resize', function (event) {
-      setPosition({ x: panel1.offsetLeft + panel1.clientWidth })
-    })
+    return yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
+  }
 
-    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'
   }
 }
+