Merge pull request #649 from ethereum/serapathMaster
Serapath master - app.js - refactorpull/1/head
yann300
7 years ago
committed by
GitHub
commit
b087feff9c
@ -0,0 +1,240 @@ |
||||
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 |
||||
Loading…
Reference in new issue