FakeModal and Dummy plugin that uses FakeModal as a target

src/plugins/Dummy.js

@@ -0,0 +1,36 @@
+import Plugin from './Plugin'
+
+/**
+ * Dummy
+ *
+ */
+export default class Dummy extends Plugin {
+  constructor (core, opts) {
+    super(core, opts)
+    this.type = 'selecter'
+
+    // set default options
+    const defaultOptions = {}
+
+    // merge default options with the ones set by user
+    this.opts = Object.assign({}, defaultOptions, opts)
+  }
+
+  render () {
+    return `
+      <div class="wow-this-works">
+        I am a dummy plugin, look at me, I was rendered in a modal! That’s crazy, I know.
+      </div>
+    `
+  }
+
+  install () {
+    // this.core.log('the spinner target is... ' +
+    //   this.getTarget(this.opts.target).spinner
+    // )
+    const caller = this
+    this.target = this.getTarget(this.opts.target, caller)
+    this.target.innerHTML = this.render()
+    return
+  }
+}

src/plugins/FakeModal.js

@@ -1,4 +1,9 @@
 import Plugin from './Plugin'
+import Utils from '../core/Utils'
+
+function $$ (selector, context) {
+  return Array.prototype.slice.call((context || document).querySelectorAll(selector) || []);
+}
 
 /**
  * FakeModal
@@ -18,5 +23,113 @@ export default class FakeModal extends Plugin {
     this.targets = {}
 
     this.targets.spinner = '.UppyDragDrop-One-Spinner'
+
+    this.container = document.body
+  }
+
+  prepareTarget (callerPlugin) {
+    const callerPluginName = callerPlugin.constructor.name
+
+    // add tab panel
+    const modalContent = document.querySelector('.UppyModal-content')
+    const nodeForPlugin = document.createElement('div')
+
+    modalContent.appendChild(nodeForPlugin)
+    nodeForPlugin.outerHTML = `
+      <div role="tabpanel"
+           class="UppyModal-panel"
+           id="${callerPluginName}">
+      </div>
+    `
+
+    // add tab
+    const modalTabs = document.querySelector('.UppyModal-tabList')
+    const modalTab = document.createElement('div')
+
+    modalTabs.appendChild(modalTab)
+    modalTab.outerHTML = `
+      <li><a role="tab"
+         aria-controls="${callerPluginName}"
+         class="UppyModal-tab"
+         href="#${callerPluginName}">
+         ${callerPluginName}
+      </a></li>
+    `
+
+    console.log('yoyoyoyoy')
+
+    this.initEvents()
+
+    return document.querySelector(`#${callerPluginName}`)
+  }
+
+  render () {
+    // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
+
+    return `
+      <div class="UppyModal"
+           aria-hidden="true"
+           aria-labelledby="modalTitle"
+           aria-describedby="modalDescription"
+           role="dialog">
+
+        <button data-modal-hide class="UppyModal-close" title="Close uploader modal">×</button>
+
+        <ul role="tablist" class="UppyModal-tabList">
+          <li><a role="tab" aria-controls="dragdrop" class="UppyModal-tab" href="#dragdrop">Dizzy</a></li>
+          <li><a role="tab" aria-controls="dropbox" class="UppyModal-tab" href="#dropbox">Ninja</a></li>
+          <li><a role="tab" aria-controls="instagram" class="UppyModal-tab" href="#instagram">Missy</a></li>
+        </ul>
+
+        <div class="UppyModal-content">
+          <div role="tabpanel" class="UppyModal-panel" id="dragdrop">
+            123
+          </div>
+          <div role="tabpanel" class="UppyModal-panel" id="dropbox">
+            456
+          </div>
+          <div role="tabpanel" class="UppyModal-panel" id="instagram">
+            789
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  hideAllTabPanels () {
+    this.tabPanels.forEach(tabPanel => {
+      tabPanel.style.display = 'none'
+    })
+  }
+
+  showTabPanel (id) {
+    const tabPanel = document.querySelector(id)
+    tabPanel.style.display = 'block'
+  }
+
+  initEvents () {
+    const tabs = $$('.UppyModal-tab')
+    this.tabPanels = []
+    tabs.forEach(tab => {
+      const tabId = tab.getAttribute('href')
+      const tabPanel = document.querySelector(tabId)
+      this.tabPanels.push(tabPanel)
+
+      tab.addEventListener('click', event => {
+        event.preventDefault()
+        console.log(tabId)
+        this.hideAllTabPanels()
+        this.showTabPanel(tabId)
+      })
+    })
+
+    this.hideAllTabPanels()
+  }
+
+  install () {
+    const node = document.createElement('div')
+    node.innerHTML = this.render()
+    this.container.appendChild(node)
+    this.initEvents()
   }
 }

src/plugins/Plugin.js

@@ -40,25 +40,28 @@ export default class Plugin {
    * @param {String|Object} target
    *
    */
-  getTarget (target) {
+  getTarget (target, callerPlugin) {
+    // console.log('and the caller is... ')
+    // console.log(callerPlugin);
+
     if (typeof target === 'string') {
       this.core.log('string is a target')
       return target
     } else {
       this.core.log('plugin is a target')
 
-      let pluginTargets
+      let pluginTarget
 
       Object.keys(this.core.plugins).forEach(pluginType => {
         const plugins = this.core.plugins[pluginType]
         plugins.forEach(plugin => {
           if (plugin.constructor.name === target.name) {
-            pluginTargets = plugin.targets
+            pluginTarget = plugin.prepareTarget(callerPlugin)
           }
         })
       })
 
-      return pluginTargets
+      return pluginTarget
     }
   }
 

src/plugins/Spinner.js

@@ -42,10 +42,13 @@ export default class Spinner extends Plugin {
   }
 
   install () {
-    this.core.log('the spinner target is... ' +
-      this.getTarget(this.opts.target).spinner
-    )
-    this.target = this.getTarget(this.opts.target).spinner
+    // this.core.log('the spinner target is... ' +
+    //   this.getTarget(this.opts.target).spinner
+    // )
+    const caller = this
+    this.target = this.getTarget(this.opts.target, caller)
+
+
     this.initSpinner()
     this.initEvents()
     return

src/scss/_fakemodal.scss

@@ -0,0 +1,43 @@
+@mixin clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+.UppyModal * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.UppyModal {
+  width: 900px;
+  height: 600px;
+  background-color: $color-white;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 10000;
+  transform: translate(-50%, -50%);
+  @include clearfix;
+  box-shadow: 0 0 13px rgba(0, 0, 0, 0.2);
+}
+
+.UppyModal-close {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+}
+
+.UppyModal-tabList {
+  width: 15%;
+  float: left;
+  list-style: none;
+}
+
+.UppyModal-content {
+  width: 85%;
+  float: left;
+}

src/scss/_variables.scss

@@ -1,2 +1,3 @@
 $color-gray: #ccc;
 $color-pink: #e02177;
+$color-white: #fff;

src/scss/uppy.scss

@@ -6,3 +6,4 @@
 @import '_dragdrop.scss';
 @import '_progressbar.scss';
 @import '_spinner.scss';
+@import '_fakemodal.scss';

website/src/examples/fakemodal/app.es6

@@ -0,0 +1,9 @@
+import Uppy from '../../../../src/core/Core.js'
+import Dummy from '../../../../src/plugins/Dummy.js'
+import FakeModal from '../../../../src/plugins/FakeModal.js'
+
+const uppy = new Uppy({debug: true})
+uppy
+  .use(FakeModal)
+  .use(Dummy, {target: FakeModal})
+  .run()

website/src/examples/fakemodal/app.html

@@ -0,0 +1,5 @@
+<!-- Basic Uppy styles -->
+<link rel="stylesheet" href="/uppy/uppy.css">
+
+<!-- Modal trigger -->
+<button id="uppyModalOpener">Open Uppy Modal</button>

website/src/examples/fakemodal/index.ejs

@@ -0,0 +1,35 @@
+---
+title: Fake Modal
+layout: example
+type: examples
+order: 1
+---
+
+{% blockquote %}
+Making a modal dialog great again.
+{% endblockquote %}
+
+<link rel="stylesheet" href="app.css">
+<% include app.html %>
+<script src="app.js"></script>
+
+<hr />
+
+<p id="console-wrapper">
+  Console output (latest logs are at the top): <br />
+</p>
+
+<p>
+  On this page we're using the following HTML snippet:
+</p>
+{% include_code lang:html fakemodal/app.html %}
+
+<p>
+  Along with this JavaScript:
+</p>
+{% include_code lang:js fakemodal/app.es6 %}
+
+<p>
+  And the following CSS:
+</p>
+{% include_code lang:css fakemodal/app.css %}