From 5be1c98221f76073098bfa6aea81d160a73df410 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Mon, 19 Aug 2019 14:17:18 +0200 Subject: [PATCH 1/4] refactor panel-resize --- src/app.js | 8 ++-- src/framingService.js | 6 +-- src/lib/panels-resize.js | 87 +++++++++++++++++----------------------- 3 files changed, 44 insertions(+), 57 deletions(-) diff --git a/src/app.js b/src/app.js index a63821319b..54e14404eb 100644 --- a/src/app.js +++ b/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` -
+
${''}
` @@ -169,10 +168,13 @@ class App {
` + self._components.resizeFeature = new PanelsResize(self._view.sidepanel) + self._view.el = yo`
${self._view.iconpanel} ${self._view.sidepanel} + ${self._components.resizeFeature.render()} ${self._view.mainpanel}
` diff --git a/src/framingService.js b/src/framingService.js index fe326b52dd..fa8a0d3237 100644 --- a/src/framingService.js +++ b/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') diff --git a/src/lib/panels-resize.js b/src/lib/panels-resize.js index a32006866f..0602e6134c 100644 --- a/src/lib/panels-resize.js +++ b/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`
` + render () { + this.ghostbar = yo`
` 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`
` + } - var dragbar = yo`
` - 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' } } + From 7fc26ecd152e9fde186aa98d5e1ea45e5c80c8b9 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Mon, 19 Aug 2019 14:38:25 +0200 Subject: [PATCH 2/4] renamed editor-container id to main-panel --- src/app.js | 2 +- test-browser/commands/checkTerminalFilter.js | 4 ++-- test-browser/commands/testFunction.js | 10 +++++----- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app.js b/src/app.js index 54e14404eb..3684485629 100644 --- a/src/app.js +++ b/src/app.js @@ -163,7 +163,7 @@ class App { // handle the editor + terminal self._view.mainpanel = yo` -
+
${''}
` diff --git a/test-browser/commands/checkTerminalFilter.js b/test-browser/commands/checkTerminalFilter.js index 8cc90327da..810cb2b2ac 100644 --- a/test-browser/commands/checkTerminalFilter.js +++ b/test-browser/commands/checkTerminalFilter.js @@ -17,10 +17,10 @@ function checkFilter (browser, filter, test, done) { done() return } - var filterClass = '#editor-container div[class^="search"] input[class^="filter"]' + var filterClass = '#main-panel div[class^="search"] input[class^="filter"]' browser.setValue(filterClass, filter, function () { browser.execute(function () { - return document.querySelector('#editor-container div[class^="journal"]').innerHTML === test + return document.querySelector('#main-panel div[class^="journal"]').innerHTML === test }, [], function (result) { browser.clearValue(filterClass).setValue(filterClass, '', function () { if (!result.value) { diff --git a/test-browser/commands/testFunction.js b/test-browser/commands/testFunction.js index 18f72b88a5..b201158331 100644 --- a/test-browser/commands/testFunction.js +++ b/test-browser/commands/testFunction.js @@ -16,12 +16,12 @@ class TestFunction extends EventEmitter { }) .click('.instance button[title="' + fnFullName + '"]') .pause(500) - .waitForElementPresent('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"]') - .assert.containsText('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] span', log) - .click('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] div[class^="log"]') + .waitForElementPresent('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"]') + .assert.containsText('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] span', log) + .click('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] div[class^="log"]') .perform(function (client, done) { if (expectedReturn) { - client.getText('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #decodedoutput', (result) => { + client.getText('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #decodedoutput', (result) => { console.log(result) var equal = deepequal(JSON.parse(result.value), JSON.parse(expectedReturn)) if (!equal) { @@ -33,7 +33,7 @@ class TestFunction extends EventEmitter { }) .perform((client, done) => { if (expectedEvent) { - client.getText('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #logs', (result) => { + client.getText('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #logs', (result) => { console.log(result) var equal = deepequal(JSON.parse(result.value), JSON.parse(expectedEvent)) if (!equal) { From 26d93f3386649e71ff5c492805f4253f8e122399 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Mon, 19 Aug 2019 14:40:31 +0200 Subject: [PATCH 3/4] standard --- src/lib/panels-resize.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/panels-resize.js b/src/lib/panels-resize.js index 0602e6134c..6d9fa57053 100644 --- a/src/lib/panels-resize.js +++ b/src/lib/panels-resize.js @@ -23,7 +23,7 @@ const css = csjs` export default class PanelsResize { constructor (panel) { this.panel = panel - let self = this; + 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) { @@ -44,7 +44,7 @@ export default class PanelsResize { document.addEventListener('keydown', cancelGhostbar) } } - + let cancelGhostbar = (event) => { if (event.keyCode === 27) { document.body.removeChild(this.ghostbar) @@ -76,7 +76,7 @@ export default class PanelsResize { 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') { + if (panelWidth > this.minWidth - 10 || this.panel.style.display === 'none') { this.panel.style.width = panelWidth + 'px' this.showPanel() } else this.hidePanel() From a879a09f83ece870698a5a4222844ab46f6e707f Mon Sep 17 00:00:00 2001 From: LianaHus Date: Tue, 20 Aug 2019 10:21:50 +0200 Subject: [PATCH 4/4] let => const --- src/lib/panels-resize.js | 14 +++++--------- test-browser/commands/checkTerminalFilter.js | 2 +- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/lib/panels-resize.js b/src/lib/panels-resize.js index 6d9fa57053..2ec2447f28 100644 --- a/src/lib/panels-resize.js +++ b/src/lib/panels-resize.js @@ -23,18 +23,14 @@ const css = csjs` export default class PanelsResize { 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) - }) } render () { this.ghostbar = yo`
` - let mousedown = (event) => { + const mousedown = (event) => { event.preventDefault() if (event.which === 1) { moveGhostbar(event) @@ -45,7 +41,7 @@ export default class PanelsResize { } } - let cancelGhostbar = (event) => { + const cancelGhostbar = (event) => { if (event.keyCode === 27) { document.body.removeChild(this.ghostbar) document.removeEventListener('mousemove', moveGhostbar) @@ -54,11 +50,11 @@ export default class PanelsResize { } } - let moveGhostbar = (event) => { + const moveGhostbar = (event) => { this.ghostbar.style.left = event.x + 'px' } - let removeGhostbar = (event) => { + const removeGhostbar = (event) => { document.body.removeChild(this.ghostbar) document.removeEventListener('mousemove', moveGhostbar) document.removeEventListener('mouseup', removeGhostbar) @@ -74,7 +70,7 @@ export default class PanelsResize { } setPosition (event) { - let panelWidth = this.calculatePanelWidth(event) + const 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' diff --git a/test-browser/commands/checkTerminalFilter.js b/test-browser/commands/checkTerminalFilter.js index 810cb2b2ac..e448599bbb 100644 --- a/test-browser/commands/checkTerminalFilter.js +++ b/test-browser/commands/checkTerminalFilter.js @@ -17,7 +17,7 @@ function checkFilter (browser, filter, test, done) { done() return } - var filterClass = '#main-panel div[class^="search"] input[class^="filter"]' + const filterClass = '#main-panel div[class^="search"] input[class^="filter"]' browser.setValue(filterClass, filter, function () { browser.execute(function () { return document.querySelector('#main-panel div[class^="journal"]').innerHTML === test