draggable content for extension

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]) {
+      var modal = new DraggableContent()
-        self._components.tabbedMenu.removeTabByTitle(json.title)
+      var tab = new PluginTab(json)
-        self._components.pluginManager.unregister(json)
+      var content = tab.render()
-      } else {
+      document.querySelector('body').appendChild(modal.render(json.title, content))
-        var tab = new PluginTab(json)
+      self._components.pluginManager.register(json, modal, content)
-        var content = tab.render()
-        self._components.tabbedMenu.addTab(json.title, json.title + ' plugin', content)
-        self._components.pluginManager.register(json, content)
-      }
     }
 
     self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`

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) => {

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) {

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 {

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`
+    <div class=${css.containerDraggableModal} >
+      <div class="${css.headerDraggableModal} title">${title}</div>
+      ${content}
+    </div>   `
+      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
+  }
+}