Merge pull request #1234 from ethereum/refactor_plugin

refactor plugin tab
pull/1/head
yann300 7 years ago committed by GitHub
commit 6d56c9666c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 55
      src/app/plugin/pluginManager.js
  2. 43
      src/app/tabs/plugin-tab.js
  3. 16
      src/app/tabs/styles/plugin-tab-styles.js

@ -37,40 +37,39 @@
* See index.html and remix.js in test-browser folder for sample
*
*/
class PluginManager {
module.exports = class PluginManager {
constructor (api = {}, events = {}, opts = {}) {
var self = this
this.plugins = {}
this.inFocus
var allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
events.compiler.register('compilationFinished', (success, data, source) => {
if (this.inFocus) {
const self = this
self._opts = opts
self._api = api
self._events = events
self.plugins = {}
self.inFocus
self.allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
self._events.compiler.register('compilationFinished', (success, data, source) => {
if (self.inFocus) {
// trigger to the current focus
this.post(this.inFocus, JSON.stringify({
self.post(self.inFocus, JSON.stringify({
type: 'compilationFinished',
value: {
success: success,
data: data,
source: source
}
value: { success, data, source }
}))
}
})
events.app.register('tabChanged', (tabName) => {
if (this.inFocus && this.inFocus !== tabName) {
self._events.app.register('tabChanged', (tabName) => {
if (self.inFocus && self.inFocus !== tabName) {
// trigger unfocus
this.post(this.inFocus, JSON.stringify({
self.post(self.inFocus, JSON.stringify({
type: 'unfocus'
}))
}
if (this.plugins[tabName]) {
if (self.plugins[tabName]) {
// trigger focus
this.post(tabName, JSON.stringify({
self.post(tabName, JSON.stringify({
type: 'focus'
}))
this.inFocus = tabName
this.post(tabName, JSON.stringify({
self.inFocus = tabName
self.post(tabName, JSON.stringify({
type: 'compilationData',
value: api.compiler.getCompilationResult()
}))
@ -86,10 +85,10 @@ class PluginManager {
result: result
}))
}
if (event.type === 'message' && this.inFocus && this.plugins[this.inFocus] && this.plugins[this.inFocus].origin === event.origin) {
if (event.type === 'message' && self.inFocus && self.plugins[self.inFocus] && self.plugins[self.inFocus].origin === event.origin) {
var data = JSON.parse(event.data)
data.arguments.unshift(this.inFocus)
if (allowedapi[data.type]) {
data.arguments.unshift(self.inFocus)
if (self.allowedapi[data.type]) {
data.arguments.push((error, result) => {
response(data.type, data.id, error, result)
})
@ -99,13 +98,13 @@ class PluginManager {
}, false)
}
register (desc, content) {
this.plugins[desc.title] = {content, origin: desc.url}
const self = this
self.plugins[desc.title] = {content, origin: desc.url}
}
post (name, value) {
if (this.plugins[name]) {
this.plugins[name].content.querySelector('iframe').contentWindow.postMessage(value, this.plugins[name].origin)
const self = this
if (self.plugins[name]) {
self.plugins[name].content.querySelector('iframe').contentWindow.postMessage(value, self.plugins[name].origin)
}
}
}
module.exports = PluginManager

@ -1,12 +1,37 @@
var yo = require('yo-yo')
var css = require('./styles/plugin-tab-styles')
var csjs = require('csjs-inject')
var remixLib = require('remix-lib')
function plugintab (api = {}, events = {}, opts = {}) {
var el = yo`
<div class="${css.pluginTabView}" id="pluginView">
<iframe class="${css.iframe}" src="${opts.url}/index.html"></iframe>
</div>`
return { render () { return el } }
}
var EventManager = remixLib.EventManager
module.exports = plugintab
module.exports = class plugintab {
constructor (api = {}, events = {}, opts = {}) {
const self = this
self.event = new EventManager()
self._opts = opts
self._api = api
self._events = events
self._view = { el: null }
self._components = {}
}
render () {
const self = this
if (self._view.el) return self._view.el
self._view.el = yo`
<div class="${css.pluginTabView}" id="pluginView">
<iframe class="${css.iframe}" src="${self._opts.url}/index.html"></iframe>
</div>`
return self._view.el
}
}
const css = csjs`
.pluginTabView {
height: 100%;
width: 100%;
}
.iframe {
height: 100%;
width: 100%;
border: 0;
}
`

@ -1,16 +0,0 @@
var csjs = require('csjs-inject')
var css = csjs`
.pluginTabView {
height: 100%;
width: 100%;
}
.iframe {
height: 100%;
width: 100%;
border: 0;
}
`
module.exports = css
Loading…
Cancel
Save