diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 23366d8a61..745535ec0e 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -15,8 +15,8 @@ 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 PluginAPI = require('../plugin/pluginAPI')
const plugins = require('../plugin/plugins')
+const DraggableContent = require('../ui/draggableContent')
var toolTip = require('../ui/tooltip')
const EventManager = remixLib.EventManager
@@ -46,18 +46,12 @@ module.exports = class RighthandPanel {
var tabbedMenu = new TabbedMenu(self._components.registry)
- var pluginAPI = new PluginAPI(
- self._deps.fileProviders,
- self._deps.compiler,
- self._deps.udapp,
- tabbedMenu
- )
-
var pluginManager = new PluginManager(
- pluginAPI,
self._deps.app,
self._deps.compiler,
- self._deps.txlistener
+ self._deps.txlistener,
+ self._deps.fileProviders,
+ self._deps.udapp
)
var analysisTab = new AnalysisTab(self._components.registry)
@@ -90,15 +84,11 @@ module.exports = class RighthandPanel {
})
self.loadPlugin = function (json) {
- if (self._components.pluginManager.plugins[json.title]) {
- self._components.tabbedMenu.removeTabByTitle(json.title)
- self._components.pluginManager.unregister(json)
- } else {
- var tab = new PluginTab(json)
- var content = tab.render()
- self._components.tabbedMenu.addTab(json.title, json.title + ' plugin', content)
- self._components.pluginManager.register(json, content)
- }
+ var modal = new DraggableContent()
+ var tab = new PluginTab(json)
+ var content = tab.render()
+ document.querySelector('body').appendChild(modal.render(json.title, content))
+ self._components.pluginManager.register(json, modal, content)
}
self._view.dragbar = yo``
diff --git a/src/app/plugin/pluginAPI.js b/src/app/plugin/pluginAPI.js
index 4298db9624..67e42541ce 100644
--- a/src/app/plugin/pluginAPI.js
+++ b/src/app/plugin/pluginAPI.js
@@ -4,14 +4,14 @@ var executionContext = require('../../execution-context')
/*
Defines available API. `key` / `type`
*/
-module.exports = (fileProviders, compiler, udapp, tabbedMenu) => {
+module.exports = (pluginManager, fileProviders, compiler, udapp) => {
return {
app: {
getExecutionContextProvider: (mod, cb) => {
cb(null, executionContext.getProvider())
},
updateTitle: (mod, title, cb) => {
- tabbedMenu.updateTabTitle(mod, title)
+ pluginManager.plugins[mod].modal.setTitle(title)
if (cb) cb()
},
detectNetWork: (mod, cb) => {
diff --git a/src/app/plugin/pluginManager.js b/src/app/plugin/pluginManager.js
index 0ea91f1781..1f04a610bd 100644
--- a/src/app/plugin/pluginManager.js
+++ b/src/app/plugin/pluginManager.js
@@ -1,5 +1,6 @@
'use strict'
var executionContext = require('../../execution-context')
+const PluginAPI = require('./pluginAPI')
/**
* Register and Manage plugin:
*
@@ -77,12 +78,17 @@ var executionContext = require('../../execution-context')
*
*/
module.exports = class PluginManager {
- constructor (pluginAPI, app, compiler, txlistener) {
+ constructor (app, compiler, txlistener, fileProviders, udapp) {
const self = this
+ var pluginAPI = new PluginAPI(
+ this,
+ fileProviders,
+ compiler,
+ udapp
+ )
self.plugins = {}
self.origins = {}
self.inFocus
- self.allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
compiler.event.register('compilationFinished', (success, data, source) => {
if (self.inFocus) {
// trigger to the current focus
@@ -153,12 +159,10 @@ module.exports = class PluginManager {
}
var data = JSON.parse(event.data)
data.value.unshift(extension)
- // if (self.allowedapi[data.type]) {
data.value.push((error, result) => {
response(data.key, data.type, data.id, error, result)
})
pluginAPI[data.key][data.type].apply({}, data.value)
- // }
}, false)
}
unregister (desc) {
@@ -166,9 +170,9 @@ module.exports = class PluginManager {
delete self.plugins[desc.title]
delete self.origins[desc.url]
}
- register (desc, content) {
+ register (desc, modal, content) {
const self = this
- self.plugins[desc.title] = {content, origin: desc.url}
+ self.plugins[desc.title] = { content, modal, origin: desc.url }
self.origins[desc.url] = desc.title
}
broadcast (value) {
diff --git a/src/app/tabs/plugin-tab.js b/src/app/tabs/plugin-tab.js
index ae5360792e..38b42ce4b1 100644
--- a/src/app/tabs/plugin-tab.js
+++ b/src/app/tabs/plugin-tab.js
@@ -26,7 +26,7 @@ module.exports = class plugintab {
}
const css = csjs`
.pluginTabView {
- height: 100%;
+ height: 456px;
width: 100%;
}
.iframe {
diff --git a/src/app/ui/draggableContent.js b/src/app/ui/draggableContent.js
new file mode 100644
index 0000000000..7e2f5d01c4
--- /dev/null
+++ b/src/app/ui/draggableContent.js
@@ -0,0 +1,84 @@
+'use strict'
+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles-guide/theme-chooser')
+var styles = styleGuide.chooser()
+
+var css = csjs`
+ .containerDraggableModal {
+ position: absolute;
+ z-index: 1000;
+ background-color: ${styles.appProperties.quaternary_BackgroundColor};
+ text-align: center;
+ width: 500px;
+ height: 500px;
+ border: 2px solid ${styles.appProperties.solidBorderBox_BorderColor};
+ }
+
+ .headerDraggableModal {
+ padding: 10px;
+ cursor: move;
+ z-index: 10;
+ color: ${styles.appProperties.mainText_Color};
+ background-color: ${styles.appProperties.quaternary_BackgroundColor};
+ border-bottom: 2px solid ${styles.appProperties.solidBorderBox_BorderColor};
+ }
+`
+
+module.exports =
+ class DraggableContent {
+ render (title, content) {
+ var el = yo`
+
+
+ ${content}
+
`
+ dragElement(el)
+ el.style.top = '20%'
+ el.style.left = '50%'
+ this.el = el
+ return el
+ }
+ setTitle (title) {
+ this.el.querySelector('.title').innerHTML = title
+ }
+}
+
+function dragElement (elmnt) {
+ var pos1 = 0
+ var pos2 = 0
+ var pos3 = 0
+ var pos4 = 0
+
+ elmnt.querySelector('.title').onmousedown = dragMouseDown
+
+ function dragMouseDown (e) {
+ e = e || window.event
+ e.preventDefault()
+ // get the mouse cursor position at startup:
+ pos3 = e.clientX
+ pos4 = e.clientY
+ document.onmouseup = closeDragElement
+ // call a function whenever the cursor moves:
+ document.onmousemove = elementDrag
+ }
+
+ function elementDrag (e) {
+ e = e || window.event
+ e.preventDefault()
+ // calculate the new cursor position:
+ pos1 = pos3 - e.clientX
+ pos2 = pos4 - e.clientY
+ pos3 = e.clientX
+ pos4 = e.clientY
+ // set the element's new position:
+ elmnt.style.top = (elmnt.offsetTop - pos2) + 'px'
+ elmnt.style.left = (elmnt.offsetLeft - pos1) + 'px'
+ }
+
+ function closeDragElement () {
+ /* stop moving when mouse button is released:*/
+ document.onmouseup = null
+ document.onmousemove = null
+ }
+}