Merge pull request #1691 from ethereum/swapit_mainView
Move tab logic outside of editor panelpull/1/head
yann300
6 years ago
committed by
GitHub
commit
838135a75c
@ -1,182 +0,0 @@ |
||||
const yo = require('yo-yo') |
||||
const csjs = require('csjs-inject') |
||||
const remixLib = require('remix-lib') |
||||
|
||||
var globalRegistry = require('../../global/registry') |
||||
|
||||
const styleguide = require('../ui/styles-guide/theme-chooser') |
||||
const styles = styleguide.chooser() |
||||
// const PluginManager = require('../plugin/pluginManager')
|
||||
// const TabbedMenu = require('../tabs/tabbed-menu')
|
||||
// const CompileTab = require('../tabs/compile-tab')
|
||||
// const SettingsTab = require('../tabs/settings-tab')
|
||||
// const AnalysisTab = require('../tabs/analysis-tab')
|
||||
// const DebuggerTab = require('../tabs/debugger-tab')
|
||||
// const SupportTab = require('../tabs/support-tab')
|
||||
// const PluginTab = require('../tabs/plugin-tab')
|
||||
// const TestTab = require('../tabs/test-tab')
|
||||
// const RunTab = require('../tabs/run-tab')
|
||||
// const DraggableContent = require('../ui/draggableContent')
|
||||
|
||||
const EventManager = remixLib.EventManager |
||||
|
||||
// var async = require('async')
|
||||
|
||||
// var tooltip = require('../ui/tooltip')
|
||||
|
||||
// var styleGuide = require('../ui/styles-guide/theme-chooser')
|
||||
|
||||
// var css = require('./styles/file-panel-styles')
|
||||
|
||||
// var canUpload = window.File || window.FileReader || window.FileList || window.Blob
|
||||
// var ghostbar = yo`<div class=${css.ghostbar}></div>`
|
||||
|
||||
/* |
||||
Overview of APIs: |
||||
* fileManager: @args fileProviders (browser, shared-folder, swarm, github, etc ...) & config & editor |
||||
- listen on browser & localhost file provider (`fileRenamed` & `fileRemoved`) |
||||
- update the tabs, switchFile |
||||
- trigger `currentFileChanged` |
||||
- set the current file in the config |
||||
* fileProvider: currently browser, swarm, localhost, github, gist |
||||
- link to backend |
||||
- provide properties `type`, `readonly` |
||||
- provide API `resolveDirectory`, `remove`, `exists`, `rename`, `get`, `set` |
||||
- trigger `fileExternallyChanged`, `fileRemoved`, `fileRenamed`, `fileRenamedError`, `fileAdded` |
||||
* file-explorer: treeview @args fileProvider |
||||
- listen on events triggered by fileProvider |
||||
- call fileProvider API |
||||
*/ |
||||
|
||||
module.exports = class LeftIconPanel { |
||||
constructor (localRegistry) { |
||||
const self = this |
||||
self._components = {} |
||||
self._components.registry = localRegistry || globalRegistry |
||||
|
||||
self._components.registry.put({api: this, name: 'lefticonpanel'}) |
||||
self.event = new EventManager() |
||||
self._view = { |
||||
element: null, |
||||
tabbedMenu: null, |
||||
tabbedMenuViewport: null, |
||||
dragbar: null |
||||
} |
||||
|
||||
self.plugins = [ |
||||
{type: 'fileManager', displayName: 'File Manger', icon: 'fa fa-files-o fa-2x'}, |
||||
{type: 'pluginManager', displayName: 'Plugin Manger', icon: 'fa fa-puzzle-piece fa-2x'}, |
||||
{type: 'settings', displayName: 'setting', icon: 'fa fa-cog fa-2x'} |
||||
] |
||||
} |
||||
|
||||
swapPlugin (name) { |
||||
console.log(name) |
||||
} |
||||
|
||||
render () { |
||||
const self = this |
||||
// if (self._view.element) return self._view.element
|
||||
// return self._view.element
|
||||
return yo` |
||||
<div class=${css.container}> |
||||
<ul> |
||||
${self.plugins.map(function (pi) { |
||||
return yo`<li>
|
||||
<i onclick=${() => { self.swapPlugin(pi.type) }} style="size: 24px;" class="${pi.icon} ${css.plugin}"></i> |
||||
</li>` |
||||
}) |
||||
} |
||||
</ul> |
||||
</div> |
||||
` |
||||
} |
||||
|
||||
init () { |
||||
// @TODO: init is for resizable drag bar only and should be refactored in the future
|
||||
const self = this |
||||
const limit = 60 |
||||
self._view.dragbar.addEventListener('mousedown', mousedown) |
||||
const ghostbar = yo`<div class=${css.ghostbar}></div>` |
||||
function mousedown (event) { |
||||
event.preventDefault() |
||||
if (event.which === 1) { |
||||
moveGhostbar(event) |
||||
document.body.appendChild(ghostbar) |
||||
document.addEventListener('mousemove', moveGhostbar) |
||||
document.addEventListener('mouseup', removeGhostbar) |
||||
document.addEventListener('keydown', cancelGhostbar) |
||||
} |
||||
} |
||||
function cancelGhostbar (event) { |
||||
if (event.keyCode === 27) { |
||||
document.body.removeChild(ghostbar) |
||||
document.removeEventListener('mousemove', moveGhostbar) |
||||
document.removeEventListener('mouseup', removeGhostbar) |
||||
document.removeEventListener('keydown', cancelGhostbar) |
||||
} |
||||
} |
||||
function getPosition (event) { |
||||
const lhp = window['filepanel'].offsetWidth |
||||
const max = document.body.offsetWidth - limit |
||||
var newpos = (event.pageX > max) ? max : event.pageX |
||||
newpos = (newpos > (lhp + limit)) ? newpos : lhp + limit |
||||
return newpos |
||||
} |
||||
function moveGhostbar (event) { // @NOTE VERTICAL ghostbar
|
||||
ghostbar.style.left = getPosition(event) + 'px' |
||||
} |
||||
function removeGhostbar (event) { |
||||
document.body.removeChild(ghostbar) |
||||
document.removeEventListener('mousemove', moveGhostbar) |
||||
document.removeEventListener('mouseup', removeGhostbar) |
||||
document.removeEventListener('keydown', cancelGhostbar) |
||||
} |
||||
} |
||||
} |
||||
|
||||
const css = csjs` |
||||
.lefticonpanel { |
||||
display : flex; |
||||
flex-direction : column; |
||||
top : 0; |
||||
right : 0; |
||||
bottom : 0; |
||||
box-sizing : border-box; |
||||
overflow : hidden; |
||||
height : 100%; |
||||
} |
||||
.header { |
||||
height : 100%; |
||||
} |
||||
.dragbar { |
||||
position : absolute; |
||||
width : ${styles.rightPanel.dragbarWidth}; |
||||
top : 3em; |
||||
bottom : 0; |
||||
cursor : col-resize; |
||||
background-color : ${styles.rightPanel.dragbarBackgroundColor}; |
||||
z-index : 999; |
||||
border-left : 2px solid ${styles.rightPanel.bar_Dragging}; |
||||
} |
||||
.ghostbar { |
||||
width : 3px; |
||||
background-color : ${styles.rightPanel.bar_Ghost}; |
||||
opacity : 0.5; |
||||
position : absolute; |
||||
cursor : col-resize; |
||||
z-index : 9999; |
||||
top : 0; |
||||
bottom : 0; |
||||
} |
||||
i.plugin { |
||||
cursor : pointer; |
||||
} |
||||
.container ul { |
||||
margin-top : 10px; |
||||
} |
||||
.container ul li { |
||||
text-align : center; |
||||
margin-top : 10px; |
||||
} |
||||
` |
||||
@ -0,0 +1,176 @@ |
||||
var yo = require('yo-yo') |
||||
var $ = require('jquery') |
||||
|
||||
var styles = require('./styles/editor-panel-styles') |
||||
var css = styles.css |
||||
|
||||
export class TabProxy { |
||||
constructor (fileManager, editor) { |
||||
this.fileManager = fileManager |
||||
this.editor = editor |
||||
this.activeEntity |
||||
this.entities = {} |
||||
this.data = {} |
||||
this._view = {} |
||||
|
||||
fileManager.event.register('fileRemoved', (name) => { |
||||
const filesEl = document.querySelector('#files') |
||||
var file = filesEl.querySelector(`li[path="${name}"]`) |
||||
if (file) { |
||||
filesEl.removeChild(file) |
||||
} |
||||
}) |
||||
|
||||
fileManager.event.register('fileClosed', (name) => { |
||||
const filesEl = document.querySelector('#files') |
||||
var file = filesEl.querySelector(`li[path="${name}"]`) |
||||
if (file) { |
||||
filesEl.removeChild(file) |
||||
} |
||||
}) |
||||
|
||||
fileManager.event.register('currentFileChanged', (file) => { |
||||
const filesEl = document.querySelector('#files') |
||||
if (!filesEl.querySelector(`li[path="${file}"]`)) { |
||||
filesEl.appendChild(yo`<li class="file" path="${file}" ><span class="name">${file}</span><span class="remove"><i class="fa fa-close"></i></span></li>`) |
||||
} |
||||
this.active(file) |
||||
}) |
||||
|
||||
fileManager.event.register('fileRenamed', (oldName, newName) => { |
||||
const filesEl = document.querySelector('#files') |
||||
var file = filesEl.querySelector(`li[path="${oldName}"]`) |
||||
if (file) { |
||||
filesEl.setAttribute('path', file) |
||||
file.querySelector(`.name`).innerHTML = newName |
||||
} |
||||
}) |
||||
} |
||||
|
||||
active (name) { |
||||
var filesEl = document.querySelector('#files') |
||||
let file = filesEl.querySelector(`li[path="${this.activeEntity}"]`) |
||||
if (file) $(file).removeClass('active') |
||||
if (name) { |
||||
let active = filesEl.querySelector(`li[path="${name}"]`) |
||||
if (active) { |
||||
$(active).addClass('active') |
||||
this.activeEntity = name |
||||
} |
||||
} |
||||
} |
||||
|
||||
addHandler (type, fn) { |
||||
this.handlers[type] = fn |
||||
} |
||||
|
||||
renderTabsbar () { |
||||
this._view.filetabs = yo`<ul id="files" class="${css.files} nav nav-tabs"></ul>` |
||||
|
||||
this._view.tabs = yo` |
||||
<div class=${css.tabs} onmouseenter=${toggleScrollers} onmouseleave=${toggleScrollers}> |
||||
<div onclick=${scrollLeft} class="${css.scroller} ${css.hide} ${css.scrollerleft}"> |
||||
<i class="fa fa-chevron-left "></i> |
||||
</div> |
||||
${this._view.filetabs} |
||||
<div onclick=${scrollRight} class="${css.scroller} ${css.hide} ${css.scrollerright}"> |
||||
<i class="fa fa-chevron-right "></i> |
||||
</div> |
||||
</div> |
||||
` |
||||
let tabsbar = yo` |
||||
<div class=${css.tabsbar}> |
||||
<div class=${css.buttons}> |
||||
<span class=${css.changeeditorfontsize} > |
||||
<i class="increditorsize fa fa-plus" onclick=${increase} aria-hidden="true" title="increase editor font size"></i> |
||||
<i class="decreditorsize fa fa-minus" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i> |
||||
</span> |
||||
</div> |
||||
${this._view.tabs} |
||||
</div> |
||||
` |
||||
|
||||
// tabs
|
||||
var $filesEl = $(this._view.filetabs) |
||||
|
||||
// Switch tab
|
||||
var self = this |
||||
$filesEl.on('click', '.file:not(.active)', function (ev) { |
||||
ev.preventDefault() |
||||
self.fileManager.switchFile($(this).find('.name').text()) |
||||
return false |
||||
}) |
||||
|
||||
// Remove current tab
|
||||
$filesEl.on('click', '.file .remove', function (ev) { |
||||
ev.preventDefault() |
||||
var name = $(this).parent().find('.name').text() |
||||
self.fileManager.closeFile(name) |
||||
return false |
||||
}) |
||||
|
||||
function toggleScrollers (event = {}) { |
||||
if (event.type) self.data._focus = event.type |
||||
var isMouseEnter = self.data._focus === 'mouseenter' |
||||
var leftArrow = this.children[0] |
||||
var rightArrow = this.children[2] |
||||
if (isMouseEnter && this.children[1].offsetWidth > this.offsetWidth) { |
||||
var hiddenLength = self._view.filetabs.offsetWidth - self._view.tabs.offsetWidth |
||||
var currentLeft = self._view.filetabs.offsetLeft || 0 |
||||
var hiddenRight = hiddenLength + currentLeft |
||||
if (currentLeft < 0) { |
||||
leftArrow.classList.add(css.show) |
||||
leftArrow.classList.remove(css.hide) |
||||
} |
||||
if (hiddenRight > 0) { |
||||
rightArrow.classList.add(css.show) |
||||
rightArrow.classList.remove(css.hide) |
||||
} |
||||
} else { |
||||
leftArrow.classList.remove(css.show) |
||||
leftArrow.classList.add(css.hide) |
||||
rightArrow.classList.remove(css.show) |
||||
rightArrow.classList.add(css.hide) |
||||
} |
||||
} |
||||
function increase () { self.editor.editorFontSize(1) } |
||||
function decrease () { self.editor.editorFontSize(-1) } |
||||
function scrollLeft (event) { |
||||
var leftArrow = this |
||||
var rightArrow = this.nextElementSibling.nextElementSibling |
||||
var currentLeft = self._view.filetabs.offsetLeft || 0 |
||||
if (currentLeft < 0) { |
||||
rightArrow.classList.add(css.show) |
||||
rightArrow.classList.remove(css.hide) |
||||
if (currentLeft < -self.data._FILE_SCROLL_DELTA) { |
||||
self._view.filetabs.style.left = `${currentLeft + self.data._FILE_SCROLL_DELTA}px` |
||||
} else { |
||||
self._view.filetabs.style.left = `${currentLeft - currentLeft}px` |
||||
leftArrow.classList.remove(css.show) |
||||
leftArrow.classList.add(css.hide) |
||||
} |
||||
} |
||||
} |
||||
|
||||
function scrollRight (event) { |
||||
var rightArrow = this |
||||
var leftArrow = this.previousElementSibling.previousElementSibling |
||||
var hiddenLength = self._view.filetabs.offsetWidth - self._view.tabs.offsetWidth |
||||
var currentLeft = self._view.filetabs.offsetLeft || 0 |
||||
var hiddenRight = hiddenLength + currentLeft |
||||
if (hiddenRight > 0) { |
||||
leftArrow.classList.add(css.show) |
||||
leftArrow.classList.remove(css.hide) |
||||
if (hiddenRight > self.data._FILE_SCROLL_DELTA) { |
||||
self._view.filetabs.style.left = `${currentLeft - self.data._FILE_SCROLL_DELTA}px` |
||||
} else { |
||||
self._view.filetabs.style.left = `${currentLeft - hiddenRight}px` |
||||
rightArrow.classList.remove(css.show) |
||||
rightArrow.classList.add(css.hide) |
||||
} |
||||
} |
||||
} |
||||
|
||||
return tabsbar |
||||
} |
||||
} |
||||
Loading…
Reference in new issue