|
|
|
@ -1,10 +1,9 @@ |
|
|
|
|
/* global Node, requestAnimationFrame */ |
|
|
|
|
/* global Node, requestAnimationFrame */ // eslint-disable-line
|
|
|
|
|
import React from 'react' // eslint-disable-line
|
|
|
|
|
import ReactDOM from 'react-dom' |
|
|
|
|
import { RemixUiTerminal } from '@remix-ui/terminal' |
|
|
|
|
import { RemixUiTerminal } from '@remix-ui/terminal' // eslint-disable-line
|
|
|
|
|
import { Plugin } from '@remixproject/engine' |
|
|
|
|
import * as packageJson from '../../../../../package.json' |
|
|
|
|
import * as remixBleach from '../../lib/remixBleach' |
|
|
|
|
|
|
|
|
|
var yo = require('yo-yo') |
|
|
|
|
var javascriptserialize = require('javascript-serialize') |
|
|
|
@ -15,9 +14,6 @@ var EventManager = require('../../lib/events') |
|
|
|
|
|
|
|
|
|
var CommandInterpreterAPI = require('../../lib/cmdInterpreterAPI') |
|
|
|
|
var AutoCompletePopup = require('../ui/auto-complete-popup') |
|
|
|
|
var TxLogger = require('../../app/ui/txLogger') |
|
|
|
|
|
|
|
|
|
var csjs = require('csjs-inject') |
|
|
|
|
|
|
|
|
|
var css = require('./styles/terminal-styles') |
|
|
|
|
|
|
|
|
@ -25,8 +21,6 @@ var KONSOLES = [] |
|
|
|
|
|
|
|
|
|
function register (api) { KONSOLES.push(api) } |
|
|
|
|
|
|
|
|
|
var ghostbar = yo`<div class=${css.ghostbar} bg-secondary></div>` |
|
|
|
|
|
|
|
|
|
const profile = { |
|
|
|
|
displayName: 'Terminal', |
|
|
|
|
name: 'terminal', |
|
|
|
@ -41,623 +35,84 @@ class Terminal extends Plugin { |
|
|
|
|
super(profile) |
|
|
|
|
this.element = document.createElement('div') |
|
|
|
|
this.element.setAttribute('id', 'terminalView') |
|
|
|
|
var self = this |
|
|
|
|
self.event = new EventManager() |
|
|
|
|
self.blockchain = opts.blockchain |
|
|
|
|
self._api = api |
|
|
|
|
self._opts = opts |
|
|
|
|
self.data = { |
|
|
|
|
this.event = new EventManager() |
|
|
|
|
this.blockchain = opts.blockchain |
|
|
|
|
this._api = api |
|
|
|
|
this._opts = opts |
|
|
|
|
this.data = { |
|
|
|
|
lineLength: opts.lineLength || 80, // ????
|
|
|
|
|
session: [], |
|
|
|
|
activeFilters: { commands: {}, input: '' }, |
|
|
|
|
filterFns: {} |
|
|
|
|
} |
|
|
|
|
self._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null } |
|
|
|
|
self._components = {} |
|
|
|
|
self._components.cmdInterpreter = new CommandInterpreterAPI(this, null, self.blockchain) |
|
|
|
|
self._components.autoCompletePopup = new AutoCompletePopup(self._opts) |
|
|
|
|
self._components.autoCompletePopup.event.register('handleSelect', function (input) { |
|
|
|
|
const textList = self._view.input.innerText.split(' ') |
|
|
|
|
this._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null } |
|
|
|
|
this._components = {} |
|
|
|
|
this._components.cmdInterpreter = new CommandInterpreterAPI(this, null, this.blockchain) |
|
|
|
|
this._components.autoCompletePopup = new AutoCompletePopup(this._opts) |
|
|
|
|
this._components.autoCompletePopup.event.register('handleSelect', function (input) { |
|
|
|
|
const textList = this._view.input.innerText.split(' ') |
|
|
|
|
textList.pop() |
|
|
|
|
textList.push(input) |
|
|
|
|
self._view.input.innerText = textList |
|
|
|
|
self._view.input.focus() |
|
|
|
|
self.putCursor2End(self._view.input) |
|
|
|
|
this._view.input.innerText = textList |
|
|
|
|
this._view.input.focus() |
|
|
|
|
this.putCursor2End(this._view.input) |
|
|
|
|
}) |
|
|
|
|
self._commands = {} |
|
|
|
|
self.commands = {} |
|
|
|
|
self._JOURNAL = [] |
|
|
|
|
self._jobs = [] |
|
|
|
|
self._INDEX = {} |
|
|
|
|
self._INDEX.all = [] |
|
|
|
|
self._INDEX.allMain = [] |
|
|
|
|
self._INDEX.commands = {} |
|
|
|
|
self._INDEX.commandsMain = {} |
|
|
|
|
self.registerCommand('html', self._blocksRenderer('html'), { activate: true }) |
|
|
|
|
self.registerCommand('log', self._blocksRenderer('log'), { activate: true }) |
|
|
|
|
self.registerCommand('info', self._blocksRenderer('info'), { activate: true }) |
|
|
|
|
self.registerCommand('warn', self._blocksRenderer('warn'), { activate: true }) |
|
|
|
|
self.registerCommand('error', self._blocksRenderer('error'), { activate: true }) |
|
|
|
|
self.registerCommand('script', function execute (args, scopedCommands, append) { |
|
|
|
|
this._commands = {} |
|
|
|
|
this.commands = {} |
|
|
|
|
this._JOURNAL = [] |
|
|
|
|
this._jobs = [] |
|
|
|
|
this._INDEX = {} |
|
|
|
|
this._INDEX.all = [] |
|
|
|
|
this._INDEX.allMain = [] |
|
|
|
|
this._INDEX.commands = {} |
|
|
|
|
this._INDEX.commandsMain = {} |
|
|
|
|
this.registerCommand('html', this._blocksRenderer('html'), { activate: true }) |
|
|
|
|
this.registerCommand('log', this._blocksRenderer('log'), { activate: true }) |
|
|
|
|
this.registerCommand('info', this._blocksRenderer('info'), { activate: true }) |
|
|
|
|
this.registerCommand('warn', this._blocksRenderer('warn'), { activate: true }) |
|
|
|
|
this.registerCommand('error', this._blocksRenderer('error'), { activate: true }) |
|
|
|
|
this.registerCommand('script', function execute (args, scopedCommands, append) { |
|
|
|
|
var script = String(args[0]) |
|
|
|
|
self._shell(script, scopedCommands, function (error, output) { |
|
|
|
|
this._shell(script, scopedCommands, function (error, output) { |
|
|
|
|
if (error) scopedCommands.error(error) |
|
|
|
|
else if (output) scopedCommands.log(output) |
|
|
|
|
}) |
|
|
|
|
}, { activate: true }) |
|
|
|
|
function basicFilter (value, query) { try { return value.indexOf(query) !== -1 } catch (e) { return false } } |
|
|
|
|
|
|
|
|
|
self.registerFilter('log', basicFilter) |
|
|
|
|
self.registerFilter('info', basicFilter) |
|
|
|
|
self.registerFilter('warn', basicFilter) |
|
|
|
|
self.registerFilter('error', basicFilter) |
|
|
|
|
self.registerFilter('script', basicFilter) |
|
|
|
|
this.registerFilter('log', basicFilter) |
|
|
|
|
this.registerFilter('info', basicFilter) |
|
|
|
|
this.registerFilter('warn', basicFilter) |
|
|
|
|
this.registerFilter('error', basicFilter) |
|
|
|
|
this.registerFilter('script', basicFilter) |
|
|
|
|
|
|
|
|
|
if (opts.shell) self._shell = opts.shell // ???
|
|
|
|
|
register(self) |
|
|
|
|
if (opts.shell) this._shell = opts.shell // ???
|
|
|
|
|
register(this) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onActivation () { |
|
|
|
|
this.renderComponent() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// onActivation () {
|
|
|
|
|
// this.on('scriptRunner', 'log', (msg) => {
|
|
|
|
|
// this.commands.log.apply(this.commands, msg.data)
|
|
|
|
|
// })
|
|
|
|
|
// this.on('scriptRunner', 'info', (msg) => {
|
|
|
|
|
// this.commands.info.apply(this.commands, msg.data)
|
|
|
|
|
// })
|
|
|
|
|
// this.on('scriptRunner', 'warn', (msg) => {
|
|
|
|
|
// this.commands.warn.apply(this.commands, msg.data)
|
|
|
|
|
// })
|
|
|
|
|
// this.on('scriptRunner', 'error', (msg) => {
|
|
|
|
|
// this.commands.error.apply(this.commands, msg.data)
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// onDeactivation () {
|
|
|
|
|
// this.off('scriptRunner', 'log')
|
|
|
|
|
// this.off('scriptRunner', 'info')
|
|
|
|
|
// this.off('scriptRunner', 'warn')
|
|
|
|
|
// this.off('scriptRunner', 'error')
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// log (message) {
|
|
|
|
|
// var command = this.commands[message.type]
|
|
|
|
|
// if (typeof command === 'function') {
|
|
|
|
|
// if (typeof message.value === 'string' && message.type === 'html') {
|
|
|
|
|
// var el = document.createElement('div')
|
|
|
|
|
// el.innerHTML = remixBleach.sanitize(message.value, {
|
|
|
|
|
// list: [
|
|
|
|
|
// 'a',
|
|
|
|
|
// 'b',
|
|
|
|
|
// 'p',
|
|
|
|
|
// 'em',
|
|
|
|
|
// 'strong',
|
|
|
|
|
// 'div',
|
|
|
|
|
// 'span',
|
|
|
|
|
// 'ul',
|
|
|
|
|
// 'li',
|
|
|
|
|
// 'ol',
|
|
|
|
|
// 'hr'
|
|
|
|
|
// ]
|
|
|
|
|
// })
|
|
|
|
|
// message.value = el
|
|
|
|
|
// }
|
|
|
|
|
// command(message.value)
|
|
|
|
|
// };
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// logHtml (html) {
|
|
|
|
|
// var command = this.commands.html
|
|
|
|
|
// if (typeof command === 'function') command(html)
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// focus () {
|
|
|
|
|
// if (this._view.input) this._view.input.focus()
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
render () { |
|
|
|
|
// var self = this
|
|
|
|
|
// if (self._view.el) return self._view.el
|
|
|
|
|
//self._view.journal = yo`<div id="journal" class=${css.journal} data-id="terminalJournal"></div>`
|
|
|
|
|
// self._view.input = yo`
|
|
|
|
|
// <span class=${css.input} onload=${() => { this.focus() }} onpaste=${paste} onkeydown=${change}></span>
|
|
|
|
|
// `
|
|
|
|
|
// self._view.input.setAttribute('spellcheck', 'false')
|
|
|
|
|
// self._view.input.setAttribute('contenteditable', 'true')
|
|
|
|
|
// self._view.input.setAttribute('id', 'terminalCliInput')
|
|
|
|
|
// self._view.input.setAttribute('data-id', 'terminalCliInput')
|
|
|
|
|
|
|
|
|
|
// self._view.input.innerText = '\n'
|
|
|
|
|
// self._view.cli = yo`
|
|
|
|
|
// <div id="terminalCli" data-id="terminalCli" class="${css.cli}" onclick=${focusinput}>
|
|
|
|
|
// <span class=${css.prompt}>${'>'}</span>
|
|
|
|
|
// ${self._view.input}
|
|
|
|
|
// </div>
|
|
|
|
|
// `
|
|
|
|
|
|
|
|
|
|
// self._view.icon = yo`
|
|
|
|
|
// <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
|
|
|
|
|
// class="mx-2 ${css.toggleTerminal} fas fa-angle-double-down" data-id="terminalToggleIcon"></i>`
|
|
|
|
|
// self._view.dragbar = yo`
|
|
|
|
|
// <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
|
|
|
|
|
|
|
|
|
|
// self._view.pendingTxCount = yo`<div class="mx-2" title='Pending Transactions'>0</div>`
|
|
|
|
|
// self._view.inputSearch = yo`<input
|
|
|
|
|
// spellcheck="false"
|
|
|
|
|
// type="text"
|
|
|
|
|
// class="border ${css.filter} form-control"
|
|
|
|
|
// id="searchInput"
|
|
|
|
|
// onkeydown=${filter}
|
|
|
|
|
// placeholder="Search with transaction hash or address"
|
|
|
|
|
// data-id="terminalInputSearch">
|
|
|
|
|
// </input>`
|
|
|
|
|
// self._view.bar = yo`
|
|
|
|
|
// <div class="${css.bar}">
|
|
|
|
|
// ${self._view.dragbar}
|
|
|
|
|
// <div class="${css.menu} border-top border-dark bg-light" data-id="terminalToggleMenu">
|
|
|
|
|
// ${self._view.icon}
|
|
|
|
|
// <div class="mx-2" id="clearConsole" data-id="terminalClearConsole" onclick=${clear}>
|
|
|
|
|
// <i class="fas fa-ban" aria-hidden="true" title="Clear console"
|
|
|
|
|
// onmouseenter=${hover} onmouseleave=${hover}></i>
|
|
|
|
|
// </div>
|
|
|
|
|
// ${self._view.pendingTxCount}
|
|
|
|
|
// <div class=${css.verticalLine}></div>
|
|
|
|
|
// <div class="pt-1 h-80 mx-3 align-items-center ${css.listenOnNetwork} custom-control custom-checkbox">
|
|
|
|
|
// <input
|
|
|
|
|
// class="custom-control-input"
|
|
|
|
|
// id="listenNetworkCheck"
|
|
|
|
|
// onchange=${listenOnNetwork}
|
|
|
|
|
// type="checkbox"
|
|
|
|
|
// title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
|
|
|
|
|
// >
|
|
|
|
|
// <label
|
|
|
|
|
// class="pt-1 form-check-label custom-control-label text-nowrap""
|
|
|
|
|
// title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
|
|
|
|
|
// for="listenNetworkCheck"
|
|
|
|
|
// >
|
|
|
|
|
// listen on network
|
|
|
|
|
// </label>
|
|
|
|
|
// </div>
|
|
|
|
|
// <div class=${css.search}>
|
|
|
|
|
// <i class="fas fa-search ${css.searchIcon} bg-light" aria-hidden="true"></i>
|
|
|
|
|
// ${self._view.inputSearch}
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// `
|
|
|
|
|
// self._view.term = yo`
|
|
|
|
|
// <div class="${css.terminal_container}" tabindex="-1" data-id="terminalContainer" onscroll=${throttle(reattach, 10)} onkeydown=${focusinput}>
|
|
|
|
|
// ${self._components.autoCompletePopup.render()}
|
|
|
|
|
// <div data-id="terminalContainerDisplay" style="
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// height: 100%;
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// opacity: 0.1;
|
|
|
|
|
// z-index: -1;
|
|
|
|
|
// "></div>
|
|
|
|
|
// <div class=${css.terminal}>
|
|
|
|
|
// ${self._view.journal}
|
|
|
|
|
// ${self._view.cli}
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// `
|
|
|
|
|
// self._view.el = yo`
|
|
|
|
|
// <div class="${css.panel}" style="height: 180px;">
|
|
|
|
|
// ${self._view.bar}
|
|
|
|
|
// ${self._view.term}
|
|
|
|
|
// </div>
|
|
|
|
|
// `
|
|
|
|
|
// setInterval(async () => {
|
|
|
|
|
// try {
|
|
|
|
|
// self._view.pendingTxCount.innerHTML = await self.call('udapp', 'pendingTransactionsCount')
|
|
|
|
|
// } catch (err) {}
|
|
|
|
|
// }, 1000)
|
|
|
|
|
|
|
|
|
|
// function listenOnNetwork (ev) {
|
|
|
|
|
// self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
|
|
|
|
|
// }
|
|
|
|
|
//function paste (event) {
|
|
|
|
|
// const selection = window.getSelection()
|
|
|
|
|
// if (!selection.rangeCount) return false
|
|
|
|
|
// event.preventDefault()
|
|
|
|
|
// event.stopPropagation()
|
|
|
|
|
// var clipboard = (event.clipboardData || window.clipboardData)
|
|
|
|
|
// var text = clipboard.getData('text/plain')
|
|
|
|
|
// text = text.replace(/[^\x20-\xFF]/gi, '') // remove non-UTF-8 characters
|
|
|
|
|
// var temp = document.createElement('div')
|
|
|
|
|
// temp.innerHTML = text
|
|
|
|
|
// var textnode = document.createTextNode(temp.textContent)
|
|
|
|
|
// selection.getRangeAt(0).insertNode(textnode)
|
|
|
|
|
// selection.empty()
|
|
|
|
|
// self.scroll2bottom()
|
|
|
|
|
// placeCaretAtEnd(event.currentTarget)
|
|
|
|
|
//}
|
|
|
|
|
//function placeCaretAtEnd (el) {
|
|
|
|
|
// el.focus()
|
|
|
|
|
// var range = document.createRange()
|
|
|
|
|
// range.selectNodeContents(el)
|
|
|
|
|
// range.collapse(false)
|
|
|
|
|
// var sel = window.getSelection()
|
|
|
|
|
// sel.removeAllRanges()
|
|
|
|
|
// sel.addRange(range)
|
|
|
|
|
// }
|
|
|
|
|
// function throttle (fn, wait) {
|
|
|
|
|
// var time = Date.now()
|
|
|
|
|
// return function debounce () {
|
|
|
|
|
// if ((time + wait - Date.now()) < 0) {
|
|
|
|
|
// fn.apply(this, arguments)
|
|
|
|
|
// time = Date.now()
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// var css2 = csjs`
|
|
|
|
|
// .anchor {
|
|
|
|
|
// position : static;
|
|
|
|
|
// border-top : 2px dotted blue;
|
|
|
|
|
// height : 10px;
|
|
|
|
|
// }
|
|
|
|
|
// .overlay {
|
|
|
|
|
// position : absolute;
|
|
|
|
|
// width : 100%;
|
|
|
|
|
// display : flex;
|
|
|
|
|
// align-items : center;
|
|
|
|
|
// justify-content : center;
|
|
|
|
|
// bottom : 0;
|
|
|
|
|
// right : 15px;
|
|
|
|
|
// min-height : 20px;
|
|
|
|
|
// }
|
|
|
|
|
// .text {
|
|
|
|
|
// z-index : 2;
|
|
|
|
|
// color : black;
|
|
|
|
|
// font-weight : bold;
|
|
|
|
|
// pointer-events : none;
|
|
|
|
|
// }
|
|
|
|
|
// .background {
|
|
|
|
|
// z-index : 1;
|
|
|
|
|
// opacity : 0.8;
|
|
|
|
|
// background-color : #a6aeba;
|
|
|
|
|
// cursor : pointer;
|
|
|
|
|
// }
|
|
|
|
|
// .ul {
|
|
|
|
|
// padding-left : 20px;
|
|
|
|
|
// padding-bottom : 5px;
|
|
|
|
|
// }
|
|
|
|
|
// `
|
|
|
|
|
// var text = yo`<div class="${css2.overlay} ${css2.text}"></div>`
|
|
|
|
|
// var background = yo`<div class="${css2.overlay} ${css2.background}"></div>`
|
|
|
|
|
// var placeholder = yo`<div class=${css2.anchor}>${background}${text}</div>`
|
|
|
|
|
// var inserted = false
|
|
|
|
|
|
|
|
|
|
// window.addEventListener('resize', function (event) {
|
|
|
|
|
// self.event.trigger('resize', [])
|
|
|
|
|
// self.event.trigger('resize', [])
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
//function focusinput (event) {
|
|
|
|
|
// if (
|
|
|
|
|
// event.altKey ||
|
|
|
|
|
// event.ctrlKey ||
|
|
|
|
|
// event.metaKey ||
|
|
|
|
|
// event.shiftKey ||
|
|
|
|
|
// event.key === 'Down' ||
|
|
|
|
|
// event.key === 'ArrowDown' ||
|
|
|
|
|
// event.key === 'Up' ||
|
|
|
|
|
// event.key === 'ArrowUp' ||
|
|
|
|
|
// event.key === 'Left' ||
|
|
|
|
|
// event.key === 'ArrowLeft' ||
|
|
|
|
|
// event.key === 'Right' ||
|
|
|
|
|
// event.key === 'ArrowRight' ||
|
|
|
|
|
// event.key === 'Esc' ||
|
|
|
|
|
// event.key === 'Escape'
|
|
|
|
|
// ) return
|
|
|
|
|
|
|
|
|
|
// refocus()
|
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
// function refocus () {
|
|
|
|
|
// self._view.input.focus()
|
|
|
|
|
// reattach({ currentTarget: self._view.term })
|
|
|
|
|
// delete self.scroll2bottom
|
|
|
|
|
// self.scroll2bottom()
|
|
|
|
|
// }
|
|
|
|
|
//function reattach (event) {
|
|
|
|
|
// var el = event.currentTarget
|
|
|
|
|
// var isBottomed = el.scrollHeight - el.scrollTop - el.clientHeight < 30
|
|
|
|
|
// if (isBottomed) {
|
|
|
|
|
// if (inserted) {
|
|
|
|
|
// text.innerText = ''
|
|
|
|
|
// background.onclick = undefined
|
|
|
|
|
// if (placeholder.parentElement) self._view.journal.removeChild(placeholder)
|
|
|
|
|
// }
|
|
|
|
|
// inserted = false
|
|
|
|
|
// delete self.scroll2bottom
|
|
|
|
|
// } else {
|
|
|
|
|
// if (!inserted) self._view.journal.appendChild(placeholder)
|
|
|
|
|
// inserted = true
|
|
|
|
|
// check()
|
|
|
|
|
// if (!placeholder.nextElementSibling) {
|
|
|
|
|
// placeholder.style.display = 'none'
|
|
|
|
|
// } else {
|
|
|
|
|
// placeholder.style = ''
|
|
|
|
|
// }
|
|
|
|
|
// self.scroll2bottom = function () {
|
|
|
|
|
// var next = placeholder.nextElementSibling
|
|
|
|
|
// if (next) {
|
|
|
|
|
// placeholder.style = ''
|
|
|
|
|
// check()
|
|
|
|
|
// var messages = 1
|
|
|
|
|
// while ((next = next.nextElementSibling)) messages += 1
|
|
|
|
|
// text.innerText = `${messages} new unread log entries`
|
|
|
|
|
// } else {
|
|
|
|
|
// placeholder.style.display = 'none'
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
//}
|
|
|
|
|
//function check () {
|
|
|
|
|
// var pos1 = self._view.term.offsetHeight + self._view.term.scrollTop - (self._view.el.offsetHeight * 0.15)
|
|
|
|
|
// var pos2 = placeholder.offsetTop
|
|
|
|
|
// if ((pos1 - pos2) > 0) {
|
|
|
|
|
// text.style.display = 'none'
|
|
|
|
|
// background.style.position = 'relative'
|
|
|
|
|
// background.style.opacity = 0.3
|
|
|
|
|
// background.style.right = 0
|
|
|
|
|
// background.style.borderBox = 'content-box'
|
|
|
|
|
// background.style.padding = '2px'
|
|
|
|
|
// background.style.height = (self._view.journal.offsetHeight - (placeholder.offsetTop + placeholder.offsetHeight)) + 'px'
|
|
|
|
|
// background.onclick = undefined
|
|
|
|
|
// background.style.cursor = 'default'
|
|
|
|
|
// background.style.pointerEvents = 'none'
|
|
|
|
|
// } else {
|
|
|
|
|
// background.style = ''
|
|
|
|
|
// text.style = ''
|
|
|
|
|
// background.onclick = function (event) {
|
|
|
|
|
// placeholder.scrollIntoView()
|
|
|
|
|
// check()
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
//}
|
|
|
|
|
//function hover (event) { event.currentTarget.classList.toggle(css.hover) }
|
|
|
|
|
//function minimize (event) {
|
|
|
|
|
// event.preventDefault()
|
|
|
|
|
// event.stopPropagation()
|
|
|
|
|
// if (event.button === 0) {
|
|
|
|
|
// var classList = self._view.icon.classList
|
|
|
|
|
// classList.toggle('fa-angle-double-down')
|
|
|
|
|
// classList.toggle('fa-angle-double-up')
|
|
|
|
|
// self.event.trigger('resize', [])
|
|
|
|
|
// }
|
|
|
|
|
//}
|
|
|
|
|
// var filtertimeout = null
|
|
|
|
|
//function filter (event) {
|
|
|
|
|
// if (filtertimeout) {
|
|
|
|
|
// clearTimeout(filtertimeout)
|
|
|
|
|
// }
|
|
|
|
|
// filtertimeout = setTimeout(() => {
|
|
|
|
|
// self.updateJournal({ type: 'search', value: self._view.inputSearch.value })
|
|
|
|
|
// self.scroll2bottom()
|
|
|
|
|
// }, 500)
|
|
|
|
|
// }
|
|
|
|
|
// function clear (event) {
|
|
|
|
|
// refocus()
|
|
|
|
|
// self._view.journal.innerHTML = ''
|
|
|
|
|
// }
|
|
|
|
|
// ----------------- resizeable ui ---------------
|
|
|
|
|
//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 moveGhostbar (event) { // @NOTE HORIZONTAL ghostbar
|
|
|
|
|
// ghostbar.style.top = self._api.getPosition(event) + 'px'
|
|
|
|
|
// }
|
|
|
|
|
// function removeGhostbar (event) {
|
|
|
|
|
// if (self._view.icon.classList.contains('fa-angle-double-up')) {
|
|
|
|
|
// self._view.icon.classList.toggle('fa-angle-double-down')
|
|
|
|
|
// self._view.icon.classList.toggle('fa-angle-double-up')
|
|
|
|
|
// }
|
|
|
|
|
// document.body.removeChild(ghostbar)
|
|
|
|
|
// document.removeEventListener('mousemove', moveGhostbar)
|
|
|
|
|
// document.removeEventListener('mouseup', removeGhostbar)
|
|
|
|
|
// document.removeEventListener('keydown', cancelGhostbar)
|
|
|
|
|
// self.event.trigger('resize', [self._api.getPosition(event)])
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// self._cmdHistory = []
|
|
|
|
|
// self._cmdIndex = -1
|
|
|
|
|
// self._cmdTemp = ''
|
|
|
|
|
|
|
|
|
|
// var intro = yo`
|
|
|
|
|
// <div><div> - Welcome to Remix ${packageJson.version} - </div><br>
|
|
|
|
|
// <div>You can use this terminal to: </div>
|
|
|
|
|
// <ul class=${css2.ul}>
|
|
|
|
|
// <li>Check transactions details and start debugging.</li>
|
|
|
|
|
// <li>Execute JavaScript scripts:
|
|
|
|
|
// <br />
|
|
|
|
|
// <i> - Input a script directly in the command line interface </i>
|
|
|
|
|
// <br />
|
|
|
|
|
// <i> - Select a Javascript file in the file explorer and then run \`remix.execute()\` or \`remix.exeCurrent()\` in the command line interface </i>
|
|
|
|
|
// <br />
|
|
|
|
|
// <i> - Right click on a JavaScript file in the file explorer and then click \`Run\` </i>
|
|
|
|
|
// </li>
|
|
|
|
|
// </ul>
|
|
|
|
|
// <div>The following libraries are accessible:</div>
|
|
|
|
|
// <ul class=${css2.ul}>
|
|
|
|
|
// <li><a target="_blank" href="https://web3js.readthedocs.io/en/1.0/">web3 version 1.0.0</a></li>
|
|
|
|
|
// <li><a target="_blank" href="https://docs.ethers.io">ethers.js</a> </li>
|
|
|
|
|
// <li><a target="_blank" href="https://www.npmjs.com/package/swarmgw">swarmgw</a> </li>
|
|
|
|
|
// <li>remix (run remix.help() for more info)</li>
|
|
|
|
|
// </ul>
|
|
|
|
|
// </div>
|
|
|
|
|
// `
|
|
|
|
|
|
|
|
|
|
//self._shell('remix.help()', self.commands, () => {})
|
|
|
|
|
//self.commands.html(intro)
|
|
|
|
|
|
|
|
|
|
//self._components.txLogger = new TxLogger(this, self.blockchain)
|
|
|
|
|
// self._components.txLogger.event.register('debuggingRequested', async (hash) => {
|
|
|
|
|
// // TODO should probably be in the run module
|
|
|
|
|
// if (!await self._opts.appManager.isActive('debugger')) await self._opts.appManager.activatePlugin('debugger')
|
|
|
|
|
// this.call('menuicons', 'select', 'debugger')
|
|
|
|
|
// this.call('debugger', 'debug', hash)
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
// return self._view.el
|
|
|
|
|
return this.element |
|
|
|
|
// function wrapScript (script) {
|
|
|
|
|
// const isKnownScript = ['remix.', 'git'].some(prefix => script.trim().startsWith(prefix))
|
|
|
|
|
// if (isKnownScript) return script
|
|
|
|
|
// return `
|
|
|
|
|
// try {
|
|
|
|
|
// const ret = ${script};
|
|
|
|
|
// if (ret instanceof Promise) {
|
|
|
|
|
// ret.then((result) => { console.log(result) }).catch((error) => { console.log(error) })
|
|
|
|
|
// } else {
|
|
|
|
|
// console.log(ret)
|
|
|
|
|
// }
|
|
|
|
|
// } catch (e) {
|
|
|
|
|
// console.log(e.message)
|
|
|
|
|
// }
|
|
|
|
|
// `
|
|
|
|
|
// }
|
|
|
|
|
//function change (event) {
|
|
|
|
|
// if (self._components.autoCompletePopup.handleAutoComplete(
|
|
|
|
|
// event,
|
|
|
|
|
// self._view.input.innerText)) return
|
|
|
|
|
// if (self._view.input.innerText.length === 0) self._view.input.innerText += '\n'
|
|
|
|
|
// if (event.which === 13) {
|
|
|
|
|
// if (event.ctrlKey) { // <ctrl+enter>
|
|
|
|
|
// self._view.input.innerText += '\n'
|
|
|
|
|
// self.putCursor2End(self._view.input)
|
|
|
|
|
// self.scroll2bottom()
|
|
|
|
|
// self._components.autoCompletePopup.removeAutoComplete()
|
|
|
|
|
// } else { // <enter>
|
|
|
|
|
// self._cmdIndex = -1
|
|
|
|
|
// self._cmdTemp = ''
|
|
|
|
|
// event.preventDefault()
|
|
|
|
|
// var script = self._view.input.innerText.trim()
|
|
|
|
|
// self._view.input.innerText = '\n'
|
|
|
|
|
// if (script.length) {
|
|
|
|
|
// self._cmdHistory.unshift(script)
|
|
|
|
|
// self.commands.script(wrapScript(script))
|
|
|
|
|
// }
|
|
|
|
|
// self._components.autoCompletePopup.removeAutoComplete()
|
|
|
|
|
// }
|
|
|
|
|
// } else if (event.which === 38) { // <arrowUp>
|
|
|
|
|
// var len = self._cmdHistory.length
|
|
|
|
|
// if (len === 0) return event.preventDefault()
|
|
|
|
|
// if (self._cmdHistory.length - 1 > self._cmdIndex) {
|
|
|
|
|
// self._cmdIndex++
|
|
|
|
|
// }
|
|
|
|
|
// self._view.input.innerText = self._cmdHistory[self._cmdIndex]
|
|
|
|
|
// self.putCursor2End(self._view.input)
|
|
|
|
|
// self.scroll2bottom()
|
|
|
|
|
// } else if (event.which === 40) { // <arrowDown>
|
|
|
|
|
// if (self._cmdIndex > -1) {
|
|
|
|
|
// self._cmdIndex--
|
|
|
|
|
// }
|
|
|
|
|
// self._view.input.innerText = self._cmdIndex >= 0 ? self._cmdHistory[self._cmdIndex] : self._cmdTemp
|
|
|
|
|
// self.putCursor2End(self._view.input)
|
|
|
|
|
// self.scroll2bottom()
|
|
|
|
|
// } else {
|
|
|
|
|
// self._cmdTemp = self._view.input.innerText
|
|
|
|
|
// }
|
|
|
|
|
//}
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
renderComponent () { |
|
|
|
|
ReactDOM.render( |
|
|
|
|
<RemixUiTerminal />, |
|
|
|
|
<RemixUiTerminal |
|
|
|
|
event = {this.event} |
|
|
|
|
autoCompletePopupEvent = {this._components.autoCompletePopup.event} |
|
|
|
|
blockchain = {this.blockchain} |
|
|
|
|
api = {this._api} |
|
|
|
|
options = {this.opts} |
|
|
|
|
data = {this.data} |
|
|
|
|
cmdInterpreter = {this._components.cmdInterpreter} |
|
|
|
|
autoCompletePopup = {this._components.autoCompletePopup}/>, |
|
|
|
|
this.element |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// putCursor2End (editable) {
|
|
|
|
|
// var range = document.createRange()
|
|
|
|
|
// range.selectNode(editable)
|
|
|
|
|
// var child = editable
|
|
|
|
|
// var chars
|
|
|
|
|
|
|
|
|
|
// while (child) {
|
|
|
|
|
// if (child.lastChild) child = child.lastChild
|
|
|
|
|
// else break
|
|
|
|
|
// if (child.nodeType === Node.TEXT_NODE) {
|
|
|
|
|
// chars = child.textContent.length
|
|
|
|
|
// } else {
|
|
|
|
|
// chars = child.innerHTML.length
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// range.setEnd(child, chars)
|
|
|
|
|
// var toStart = true
|
|
|
|
|
// var toEnd = !toStart
|
|
|
|
|
// range.collapse(toEnd)
|
|
|
|
|
|
|
|
|
|
// var sel = window.getSelection()
|
|
|
|
|
// sel.removeAllRanges()
|
|
|
|
|
// sel.addRange(range)
|
|
|
|
|
|
|
|
|
|
// editable.focus()
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
//updateJournal (filterEvent) {
|
|
|
|
|
// var self = this
|
|
|
|
|
// var commands = self.data.activeFilters.commands
|
|
|
|
|
// var value = filterEvent.value
|
|
|
|
|
// if (filterEvent.type === 'select') {
|
|
|
|
|
// commands[value] = true
|
|
|
|
|
// if (!self._INDEX.commandsMain[value]) return
|
|
|
|
|
// self._INDEX.commandsMain[value].forEach(item => {
|
|
|
|
|
// item.root.steps.forEach(item => { self._JOURNAL[item.gidx] = item })
|
|
|
|
|
// self._JOURNAL[item.gidx] = item
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
// else if (filterEvent.type === 'deselect') {
|
|
|
|
|
// commands[value] = false
|
|
|
|
|
// if (!self._INDEX.commandsMain[value]) return
|
|
|
|
|
// self._INDEX.commandsMain[value].forEach(item => {
|
|
|
|
|
// item.root.steps.forEach(item => { self._JOURNAL[item.gidx].hide = true })
|
|
|
|
|
// self._JOURNAL[item.gidx].hide = true
|
|
|
|
|
// })
|
|
|
|
|
// } else if (filterEvent.type === 'search') {
|
|
|
|
|
// if (value !== self.data.activeFilters.input) {
|
|
|
|
|
// var query = self.data.activeFilters.input = value
|
|
|
|
|
// var items = self._JOURNAL
|
|
|
|
|
// for (var gidx = 0, len = items.length; gidx < len; gidx++) {
|
|
|
|
|
// var item = items[gidx]
|
|
|
|
|
// if (item && self.data.filterFns[item.cmd]) {
|
|
|
|
|
// var show = query.length ? self.data.filterFns[item.cmd](item.args, query) : true
|
|
|
|
|
// item.hide = !show
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// var df = document.createDocumentFragment()
|
|
|
|
|
// self._JOURNAL.forEach(item => {
|
|
|
|
|
// if (item && item.el && !item.hide) df.appendChild(item.el)
|
|
|
|
|
// })
|
|
|
|
|
// self._view.journal.innerHTML = ''
|
|
|
|
|
// requestAnimationFrame(function updateDOM () {
|
|
|
|
|
// self._view.journal.appendChild(df)
|
|
|
|
|
// })
|
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
_appendItem (item) { |
|
|
|
|
var self = this |
|
|
|
|
var { el, gidx } = item |
|
|
|
@ -785,7 +240,7 @@ class Terminal extends Plugin { |
|
|
|
|
if (script.indexOf('remix.') === 0) { |
|
|
|
|
// we keep the old feature. This will basically only be called when the command is querying the "remix" object.
|
|
|
|
|
// for all the other case, we use the Code Executor plugin
|
|
|
|
|
var context = domTerminalFeatures(self, scopedCommands, self.blockchain) |
|
|
|
|
var context = domTerminalFeatures(scopedCommands, self.blockchain) |
|
|
|
|
try { |
|
|
|
|
var cmds = vm.createContext(context) |
|
|
|
|
var result = vm.runInContext(script, cmds) |
|
|
|
@ -809,11 +264,11 @@ class Terminal extends Plugin { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// function domTerminalFeatures (self, scopedCommands, blockchain) {
|
|
|
|
|
// return {
|
|
|
|
|
// remix: self._components.cmdInterpreter
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
function domTerminalFeatures (scopedCommands, blockchain) { |
|
|
|
|
return { |
|
|
|
|
remix: this._components.cmdInterpreter |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function blockify (el) { return yo`<div class="px-4 ${css.block}" data-id="block_${el.getAttribute ? el.getAttribute('id') : ''}">${el}</div>` } |
|
|
|
|
|
|
|
|
|