Skip to content

B
baas-ide
Commit b087feff authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #649 from ethereum/serapathMaster

Serapath master - app.js - refactor
parents b712220f acbfdccf
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 351 additions and 196 deletions
assets/css/browser-solidity.css
View file @ b087feff
.scroller {
position: absolute;
z-index: 999;
text-align: center;
cursor: pointer;
display: none;
padding: 0 0.9em;
vertical-align: middle;
background-color: rgba(255, 255, 255, 0.8);
height: 100%;
font-size: 1.3em;
}
.scroller i {
line-height: 3em;
}
.scroller-right {
right: 0;
}
.scroller-left {
left: 0;
}
#files {
list-style: none;
margin: 0;
font-size: 15px;
height: 2.5em;
box-sizing: border-box;
line-height: 2em;
padding: 0.5em 0 0;
position: relative;
left: 40px;
top:0;
min-width:3000px;
border-bottom: 0 none;
}
#files .file {
padding: 0 0.6em;
box-sizing: border-box;
......@@ -51,22 +11,6 @@
color: #999;
}
.toggleRHP {
display: block;
float: left;
margin-top: 0.5em;
padding: 0.6em;
font-weight: bold;
cursor: pointer;
color: black;
}
.toggleRHP {
float: right;
position: absolute;
right: 0;
}
#files .file.active {
color: black;
font-weight: bold;
......@@ -98,18 +42,6 @@
display: inline-block;
}
#righthand-panel {
position: absolute;
top: 0;
width: 37em;
max-width: 80vw;
right: 0;
bottom: 0;
overflow: auto;
box-sizing: border-box;
overflow: hidden;
}
#header {
font-size: 13px;
height: 100%;
......@@ -378,17 +310,6 @@
border: .2em dotted #ffbd01;
}
#ghostbar {
width: 1px;
background-color: red;
opacity: 0.5;
position: absolute;
cursor: col-resize;
z-index: 9999;
top: 0;
bottom: 0;
}
input[readonly] {
display: block;
width: 100%;
......
src/app.js
View file @ b087feff
This diff is collapsed.
src/app/editor-panel.js 0 → 100644
View file @ b087feff
var csjs = require('csjs-inject')
var yo = require('yo-yo')
var EventManager = require('ethereum-remix').lib.EventManager
var css = csjs`
.tabsbar {
display : flex;
overflow : hidden;
}
.tabs {
position : relative;
display : flex;
margin : 0;
left : 10px;
margin-right : 10px;
width : 100%;
overflow : hidden;
}
.files {
position : relative;
list-style : none;
margin : 0;
font-size : 15px;
height : 2.5em;
box-sizing : border-box;
line-height : 2em;
padding : 0.5em 0 0;
top : 0;
border-bottom : 0 none;
}
.changeeditorfontsize {
margin : 0;
}
.changeeditorfontsize i {
cursor : pointer;
display : block;
color : #111111;
}
.changeeditorfontsize i {
cursor : pointer;
}
.changeeditorfontsize i:hover {
color : orange;
}
.buttons {
display : flex;
flex-direction : row;
justify-content : space-around;
align-items : center;
min-width : 45px;
}
.toggleLHP {
display : flex;
padding : 10px;
width : 100%;
font-weight : bold;
color : black;
}
.toggleLHP i {
cursor : pointer;
}
.toggleLHP i:hover {
color : orange;
}
.scroller {
position : absolute;
z-index : 999;
text-align : center;
cursor : pointer;
padding : 0 0.9em;
vertical-align : middle;
background-color : rgba(255, 255, 255, 0.8);
height : 100%;
font-size : 1.3em;
}
.scroller i {
line-height : 3em;
}
.scrollerright {
right : 0;
margin-right : 15px;
}
.scrollerleft {
left : 0;
}
.toggleRHP {
margin-top : 0.5em;
padding : 0.6em;
font-weight : bold;
color : black;
right : 0;
}
.toggleRHP i {
cursor : pointer;
}
.toggleRHP i:hover {
color : orange;
}
.show {
opacity : 1;
transition : .3s opacity ease-in;
}
.hide {
opacity : 0;
pointer-events : none;
transition : .3s opacity ease-in;
}
`
class EditorPanel {
constructor (opts = {}) {
var self = this
self.data = {
_FILE_SCROLL_DELTA: 200
}
self._view = {}
self._api = { editor: opts.api.editor }
self.event = new EventManager()
}
refresh () {
var self = this
self._view.tabs.onmouseenter()
}
render () {
var self = this
if (self._view.el) return self._view.el
self._view.el = [
self._renderTabsbar(),
self._api.editor.render()
]
return self._view.el
}
_renderTabsbar () {
var self = this
if (self._view.tabsbar) return self._view.tabsbar
self._view.filetabs = yo`<ul id="files" class="${css.files} nav nav-tabs"></ul>`
self._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>
${self._view.filetabs}
<div onclick=${scrollRight} class="${css.scroller} ${css.hide} ${css.scrollerright}">
<i class="fa fa-chevron-right "></i>
</div>
</div>
`
self._view.tabsbar = yo`
<div class=${css.tabsbar}>
<div class=${css.buttons}>
<span class=${css.toggleLHP} onclick=${toggleLHP} title="Toggle left hand panel">
<i class="fa fa-angle-double-left"></i>
</span>
<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>
${self._view.tabs}
<span class="${css.toggleRHP}" onclick=${toggleRHP} title="Toggle right hand panel">
<i class="fa fa-angle-double-right"></i>
</span>
</div>
`
return self._view.tabsbar
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 toggleLHP (event) {
this.children[0].classList.toggle('fa-angle-double-right')
this.children[0].classList.toggle('fa-angle-double-left')
self.event.trigger('resize', ['left'])
}
function toggleRHP (event) {
this.children[0].classList.toggle('fa-angle-double-right')
this.children[0].classList.toggle('fa-angle-double-left')
self.event.trigger('resize', ['right'])
}
function increase () { self._api.editor.editorFontSize(1) }
function decrease () { self._api.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)
}
}
}
}
}
module.exports = EditorPanel
src/app/editor.js
View file @ b087feff
......@@ -24,12 +24,15 @@ document.head.appendChild(yo`
</style>
`)
function Editor (editorElement) {
var editor = ace.edit(editorElement)
editorElement.editor = editor // required to access the editor during tests
editorElement.className += ' ' + css['ace-editor']
function Editor (opts = {}) {
var self = this
var el = yo`<div id="input"></div>`
var editor = ace.edit(el)
el.className += ' ' + css['ace-editor']
el.editor = editor // required to access the editor during tests
self.render = function () { return el }
var event = new EventManager()
this.event = event
self.event = event
var sessions = {}
var sourceAnnotations = []
var readOnlySessions = {}
......@@ -37,7 +40,6 @@ function Editor (editorElement) {
var emptySession = createSession('')
var self = this
editor.on('guttermousedown', function (e) {
var target = e.domEvent.target
if (target.className.indexOf('ace_gutter-cell') === -1) {
......
src/app/file-panel.js
View file @ b087feff
......@@ -13,6 +13,7 @@ var css = csjs`
display : flex;
flex-direction : row;
width : 100%;
height : 100%;
box-sizing : border-box;
}
.fileexplorer {
......@@ -28,37 +29,39 @@ var css = csjs`
.newFile {
padding : 10px;
}
.newFile i {
cursor : pointer;
}
.newFile i:hover {
color : orange;
}
.connectToLocalhost {
padding : 10px;
}
.uploadFile {
padding : 10px;
.connectToLocalhost i {
cursor : pointer;
}
.toggleLHP {
display : flex;
justify-content : flex-end;
.connectToLocalhost i:hover {
color : orange;
}
.uploadFile {
padding : 10px;
width : 100%;
font-weight : bold;
cursor : pointer;
color : black;
}
.isVisible {
position : absolute;
left : 35px;
.uploadFile label:hover {
color : orange;
}
.isHidden {
position : absolute;
height : 99%;
left : -101%;
.uploadFile label {
cursor : pointer;
}
.treeview {
background-color : white;
}
.dragbar {
position : relative;
top : 36px;
left : 2px;
position : absolute;
top : 37px;
width : 0.5em;
right : 0;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-right : 2px solid hsla(215, 81%, 79%, .3);
......@@ -73,13 +76,6 @@ var css = csjs`
top : 0;
bottom : 0;
}
.changeeditorfontsize {
padding: 10px;
}
.changeeditorfontsize i {
display: block;
color: #111111;
}
`
var limit = 60
......@@ -87,6 +83,7 @@ var canUpload = window.File || window.FileReader || window.FileList || window.Bl
var ghostbar = yo`<div class=${css.ghostbar}></div>`
function filepanel (appAPI, filesProvider) {
var self = this
var fileExplorer = new FileExplorer(appAPI, filesProvider['browser'])
var fileSystemExplorer = new FileExplorer(appAPI, filesProvider['localhost'])
var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
......@@ -119,13 +116,6 @@ function filepanel (appAPI, filesProvider) {
<span onclick=${connectToLocalhost} class="${css.connectToLocalhost}">
<i class="websocketconn fa fa-link" title="Connect to Localhost"></i>
</span>
<span class=${css.changeeditorfontsize} >
<i class="increditorsize fa fa-plus" aria-hidden="true" title="increase editor font size"></i>
<i class="decreditorsize fa fa-minus" aria-hidden="true" title="decrease editor font size"></i>
</span>
<span class=${css.toggleLHP} onclick=${toggle} title="Toggle left hand panel">
<i class="fa fa-angle-double-left"></i>
</span>
</div>
<div class=${css.treeview}>${fileExplorer.init()}</div>
<div class="filesystemexplorer ${css.treeview}"></div>
......@@ -135,10 +125,10 @@ function filepanel (appAPI, filesProvider) {
`
}
var events = new EventManager()
var event = new EventManager()
self.event = event
var element = template()
element.querySelector('.increditorsize').addEventListener('click', () => { appAPI.editorFontSize(1) })
element.querySelector('.decreditorsize').addEventListener('click', () => { appAPI.editorFontSize(-1) })
var containerFileSystem = element.querySelector('.filesystemexplorer')
var websocketconn = element.querySelector('.websocketconn')
filesProvider['localhost'].remixd.event.register('connecting', (event) => {
......@@ -166,9 +156,7 @@ function filepanel (appAPI, filesProvider) {
containerFileSystem.removeChild(fileSystemExplorer.element)
}
})
// TODO please do not add custom javascript objects, which have no
// relation to the DOM to DOM nodes
element.events = events
fileExplorer.events.register('focus', function (path) {
appAPI.switchToFile(path)
})
......@@ -177,15 +165,7 @@ function filepanel (appAPI, filesProvider) {
appAPI.switchToFile(path)
})
return element
function toggle (event) {
var isHidden = element.classList.toggle(css.isHidden)
this.classList.toggle(css.isVisible)
this.children[0].classList.toggle('fa-angle-double-right')
this.children[0].classList.toggle('fa-angle-double-left')
events.trigger('ui-hidden', [isHidden])
}
self.render = function render () { return element }
function uploadFile (event) {
// TODO The file explorer is merely a view on the current state of
......@@ -195,6 +175,7 @@ function filepanel (appAPI, filesProvider) {
;[...this.files].forEach(fileExplorer.api.addFile)
}
// ----------------- resizeable ui ---------------
function mousedown (event) {
event.preventDefault()
if (event.which === 1) {
......@@ -213,21 +194,21 @@ function filepanel (appAPI, filesProvider) {
document.removeEventListener('keydown', cancelGhostbar)
}
}
function moveGhostbar (event) {
var rhp = window['righthand-panel'].offsetLeft
function getPosition (event) {
var rhp = document.body.offsetWidth - window['righthand-panel'].offsetWidth
var newpos = (event.pageX < limit) ? limit : event.pageX
newpos = (newpos < (rhp - limit)) ? newpos : (rhp - limit)
ghostbar.style.left = newpos + 'px'
return newpos
}
function moveGhostbar (event) {
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)
var width = (event.pageX < limit) ? limit : event.pageX
element.style.width = width + 'px'
events.trigger('ui-resize', [width])
self.event.trigger('resize', [getPosition(event)])
}
function createNewFile () {
......
src/app/righthand-panel.js
View file @ b087feff
var csjs = require('csjs-inject')
var yo = require('yo-yo')
var $ = require('jquery')
var EventManager = require('ethereum-remix').lib.EventManager
var tabbedMenu = require('./tabbed-menu')
var contractTab = require('./contract-tab')
......@@ -8,8 +9,6 @@ var analysisTab = require('./analysis-tab')
var debuggerTab = require('./debugger-tab')
var filesTab = require('./files-tab')
var csjs = require('csjs-inject')
var css = csjs`
.options {
float: left;
......@@ -21,6 +20,28 @@ var css = csjs`
margin-right: 0.5em;
font-size: 1em;
}
.dragbar {
position : absolute;
width : 0.5em;
top : 3em;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-left : 2px solid hsla(215, 81%, 79%, .3);
}
.ghostbar {
width : 3px;
background-color : #C6CFF7;
opacity : 0.5;
position : absolute;
cursor : col-resize;
z-index : 9999;
top : 0;
bottom : 0;
}
.panel {
height : 100%;
}
`
// ------------------------------------------------------------------
......@@ -30,6 +51,9 @@ module.exports = RighthandPanel
function RighthandPanel (appAPI, events, opts) {
var self = this
self._api = appAPI
self.event = new EventManager()
self._view = {}
var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
var options = yo`
<ul id="options">
......@@ -41,8 +65,10 @@ function RighthandPanel (appAPI, events, opts) {
<li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
</ul>
`
var element = yo`
<div id="righthand-panel">
self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
self._view.element = yo`
<div id="righthand-panel" class=${css.panel}>
${self._view.dragbar}
<div id="header">
<div id="menu">
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
......@@ -58,19 +84,10 @@ function RighthandPanel (appAPI, events, opts) {
debuggerTab(optionViews, appAPI, events, opts)
filesTab(optionViews, appAPI, events, opts)
self.render = function () { return element }
self.render = function () { return self._view.element }
self.init = function () {
;[...options.children].forEach((el) => { el.classList.add(css.options) })
// ----------------- toggle right hand panel -----------------
var hidingRHP = false
$('.toggleRHP').click(function () {
hidingRHP = !hidingRHP
self._api.setEditorSize(hidingRHP ? 0 : appAPI.config.get(EDITOR_WINDOW_SIZE))
$('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP)
$('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP)
})
// ----------------- tabbed menu -----------------
var tabbedMenuAPI = {
......@@ -81,49 +98,43 @@ function RighthandPanel (appAPI, events, opts) {
tabbedMenu(options, tabbedMenuAPI, tabEvents, {})
// ----------------- resizeable ui ---------------
var EDITOR_WINDOW_SIZE = 'editorWindowSize'
var dragging = false
$('#dragbar').mousedown(function (e) {
e.preventDefault()
dragging = true
var main = $('#righthand-panel')
var ghostbar = $('<div id="ghostbar">', {
css: {
top: main.offset().top,
left: main.offset().left
}
}).prependTo('body')
$(document).mousemove(function (e) {
ghostbar.css('left', e.pageX + 2)
})
})
var $body = $('body')
function getEditorSize () {
return $('#righthand-panel').width()
var limit = 60
self._view.dragbar.addEventListener('mousedown', mousedown)
var 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)
}
}
$(document).mouseup(function (e) {
if (dragging) {
var delta = $body.width() - e.pageX + 2
$('#ghostbar').remove()
$(document).unbind('mousemove')
dragging = false
delta = (delta < 50) ? 50 : delta
self._api.setEditorSize(delta)
appAPI.config.set(EDITOR_WINDOW_SIZE, delta)
appAPI.reAdjust()
function cancelGhostbar (event) {
if (event.keyCode === 27) {
document.body.removeChild(ghostbar)
document.removeEventListener('mousemove', moveGhostbar)
document.removeEventListener('mouseup', removeGhostbar)
document.removeEventListener('keydown', cancelGhostbar)
}
})
if (appAPI.config.exists(EDITOR_WINDOW_SIZE)) {
self._api.setEditorSize(appAPI.config.get(EDITOR_WINDOW_SIZE))
} else {
appAPI.config.set(EDITOR_WINDOW_SIZE, getEditorSize())
}
function getPosition (event) {
var lhp = window['filepanel'].offsetWidth
var 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) {
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)
self.event.trigger('resize', [document.body.offsetWidth - getPosition(event)])
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment