toggle swap panel

pull/1/head
yann300 6 years ago
parent f156e6bb1a
commit a76cb8e1fb
  1. 15
      src/app.js
  2. 10
      src/app/components/swap-panel-api.js
  3. 27
      src/lib/panels-resize.js

@ -104,8 +104,9 @@ var css = csjs`
flex-direction : column;
position : absolute;
top : 0;
left : 50px;
bottom : 0;
overflow : hidden
overflow : hidden;
}
.highlightcode {
position:absolute;
@ -173,10 +174,7 @@ class App {
init () {
var self = this
self._view.swappanel.style.left = self._view.iconpanel.clientWidth + 'px'
self._view.mainpanel.style.left = (self._view.iconpanel.clientWidth + self._view.swappanel.clientWidth) + 'px'
let resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': 400, x: 450 }) // eslint-disable-line
self._components.resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': 400, x: 450 })
run.apply(self)
}
@ -450,7 +448,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
const swapPanelComponent = new SwapPanelComponent()
const verticalIconComponent = new VerticalIconsComponent()
const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, appManager) // eslint-disable-line
const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, appManager) // eslint-disable-line
const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, appManager) // eslint-disable-line
swapPanelApi.event.on('toggle', () => {
this._components.resizeFeature.panel1.clientWidth !== 0 ? this._components.resizeFeature.minimize() : this._components.resizeFeature.maximise()
})
swapPanelApi.event.on('showing', () => { this._components.resizeFeature.maximise() })
self._components.editorpanel.init()
self._components.fileManager.init()

@ -1,10 +1,18 @@
// const EventEmmitter = require('events')
import EventEmmitter from 'events'
class SwapPanelApi {
constructor (swapPanelComponent, verticalIconsComponent, appManager) {
this.event = new EventEmmitter()
this.component = swapPanelComponent
this.currentContent
verticalIconsComponent.event.on('showContent', (moduleName) => {
if (this.currentContent === moduleName) {
this.event.emit('toggle')
return
}
this.event.emit('showing', moduleName)
this.component.showContent(moduleName)
this.currentContent = moduleName
})
appManager.event.on('requestContainer', (mod, content) => {
this.add(mod.name, content)

@ -37,6 +37,9 @@ 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
var ghostbar = yo`<div class=${css.ghostbar}></div>`
@ -61,13 +64,13 @@ export default class PanelsResize {
}
let moveGhostbar = (event) => { // @NOTE VERTICAL ghostbar
let p = processPositiions(event)
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 = processPositiions(event)
let p = processPositions(event)
panel1.style.width = p.panel1Width + 'px'
panel2.style.left = p.panel2left + 'px'
panel2.style.width = p.panel2Width + 'px'
@ -81,7 +84,7 @@ export default class PanelsResize {
setPosition(event)
}
let processPositiions = (event) => {
let processPositions = (event) => {
let panel1Width = event.x - panel1.offsetLeft
panel1Width = panel1Width < opt.minWidth ? opt.minWidth : panel1Width
let panel2left = panel1.offsetLeft + panel1Width
@ -98,5 +101,23 @@ export default class PanelsResize {
panel1.appendChild(dragbar)
setPosition(opt)
}
minimize () {
let panel1Width = 0
let panel2left = this.panel1.offsetLeft + panel1Width
let panel2Width = this.panel2.parentElement.clientWidth - this.panel1.offsetLeft - panel1Width
this.panel1.style.width = panel1Width + 'px'
this.panel2.style.left = panel2left + 'px'
this.panel2.style.width = panel2Width + 'px'
}
maximise () {
let panel1Width = this.opt.minWidth
let panel2left = this.panel1.offsetLeft + panel1Width
let panel2Width = this.panel2.parentElement.clientWidth - this.panel1.offsetLeft - panel1Width
this.panel1.style.width = panel1Width + 'px'
this.panel2.style.left = panel2left + 'px'
this.panel2.style.width = panel2Width + 'px'
}
}

Loading…
Cancel
Save