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