Continue `yo-yo` integration, modal plugin rendering, no waterfall for now

src/core/Core.js

@@ -35,7 +35,6 @@ export default class Core {
 
     this.translator = new Translator({locales: this.opts.locales})
     this.i18n = this.translator.translate.bind(this.translator)
-    // console.log(this.i18n('filesChosen', {smart_count: 3}))
 
     // Set up an event EventEmitter
     this.emitter = new ee.EventEmitter()
@@ -45,7 +44,7 @@ export default class Core {
       uploadedFiles: {},
       modal: {
         isVisible: false,
-        targets: {}
+        targets: []
       }
     }
 
@@ -74,7 +73,7 @@ export default class Core {
   }
 
   updateState (newState) {
-    console.log('update state!')
+    this.log('Update state')
     this.state = Object.assign({}, this.state, newState)
     this.reRenderAll()
   }
@@ -103,27 +102,39 @@ export default class Core {
     // add new acquirer target to Modal
     this.emitter.on('modal-add-target', (target) => {
       const modal = Object.assign({}, this.state.modal)
-      modal.targets[target.id] = target
+      modal.targets.push(target)
       this.updateState({modal: modal})
     })
 
     this.emitter.on('modal-panel-show', (id) => {
       const modal = Object.assign({}, this.state.modal)
 
-      // hide all panelSelectorPrefix
-      Object.keys(modal.targets).forEach((target) => {
-        modal.targets[target].isVisible = false
+      // hide all panels, except the one that matches current id
+      modal.targets.forEach((target) => {
+        if (target.type === 'acquirer') {
+          if (target.id === id) {
+            target.isVisible = true
+            return
+          }
+          target.isVisible = false
+        }
       })
 
-      // then show this one
-      modal.targets[id].isVisible = true
-
       this.updateState({modal: modal})
     })
 
     this.emitter.on('modal-open', () => {
       const modal = Object.assign({}, this.state.modal)
+
       modal.isVisible = true
+
+      modal.targets.some((target) => {
+        if (target.type === 'acquirer') {
+          target.isVisible = true
+          return true
+        }
+      })
+
       this.updateState({modal: modal})
     })
 
@@ -309,25 +320,33 @@ export default class Core {
       this.opts.autoProceed = false
     }
 
+    Object.keys(this.plugins).forEach((pluginType) => {
+      this.plugins[pluginType].forEach((plugin) => {
+        plugin.install()
+      })
+    })
+
+    return
+
     // Each Plugin can have `run` and/or `install` methods.
     // `install` adds event listeners and does some non-blocking work, useful for `progressindicator`,
     // `run` waits for the previous step to finish (user selects files) before proceeding
-    ['install', 'run'].forEach((method) => {
-      // First we select only plugins of current type,
-      // then create an array of runType methods of this plugins
-      const typeMethods = this.types.filter((type) => this.plugins[type])
-        .map((type) => this.runType.bind(this, type, method))
-      // Run waterfall of typeMethods
-      return Utils.promiseWaterfall(typeMethods)
-        .then((result) => {
-          // If results are empty, don't log upload results. Hasn't run yet.
-          if (result[0] !== undefined) {
-            this.log(result)
-            this.log('Upload result -> success!')
-            return result
-          }
-        })
-        .catch((error) => this.log('Upload result -> failed:', error))
-    })
+    // ['install', 'run'].forEach((method) => {
+    //   // First we select only plugins of current type,
+    //   // then create an array of runType methods of this plugins
+    //   const typeMethods = this.types.filter((type) => this.plugins[type])
+    //     .map((type) => this.runType.bind(this, type, method))
+    //   // Run waterfall of typeMethods
+    //   return Utils.promiseWaterfall(typeMethods)
+    //     .then((result) => {
+    //       // If results are empty, don't log upload results. Hasn't run yet.
+    //       if (result[0] !== undefined) {
+    //         this.log(result)
+    //         this.log('Upload result -> success!')
+    //         return result
+    //       }
+    //     })
+    //     .catch((error) => this.log('Upload result -> failed:', error))
+    // })
   }
 }

src/plugins/Dummy.js

@@ -1,4 +1,5 @@
 import Plugin from './Plugin'
+import yo from 'yo-yo'
 
 /**
  * Dummy
@@ -18,7 +19,7 @@ export default class Dummy extends Plugin {
   }
 
   render () {
-    return `
+    return yo`
       <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>
@@ -27,9 +28,7 @@ export default class Dummy extends Plugin {
 
   install () {
     const caller = this
-    this.target = this.getTarget(this.opts.target, caller)
-    this.targetEl = document.querySelector(this.target)
-    this.targetEl.innerHTML = this.render()
-    return
+    this.el = this.render(this.core.state)
+    this.target = this.getTarget(this.opts.target, caller, this.el)
   }
 }

src/plugins/Modal.js

@@ -1,5 +1,4 @@
 import Plugin from './Plugin'
-// import Utils from '../core/Utils'
 import yo from 'yo-yo'
 
 /**
@@ -13,8 +12,8 @@ export default class Modal extends Plugin {
 
     // set default options
     const defaultOptions = {
-      defaultTabIcon: `
-        <svg class="UppyModalTab-icon" width="28" height="28" viewBox="0 0 101 58" xmlns="http://www.w3.org/2000/svg">
+      defaultTabIcon: yo`
+        <svg class="UppyModalTab-icon" width="28" height="28" viewBox="0 0 101 58">
           <path d="M17.582.3L.915 41.713l32.94 13.295L17.582.3zm83.333 41.414L67.975 55.01 84.25.3l16.665 41.414zm-48.998 5.403L63.443 35.59H38.386l11.527 11.526v5.905l-3.063 3.32 1.474 1.36 2.59-2.806 2.59 2.807 1.475-1.357-3.064-3.32v-5.906zm16.06-26.702c-3.973 0-7.194-3.22-7.194-7.193 0-3.973 3.222-7.193 7.193-7.193 3.974 0 7.193 3.22 7.193 7.19 0 3.974-3.22 7.194-7.195 7.194zM70.48 8.682c-.737 0-1.336.6-1.336 1.337 0 .736.6 1.335 1.337 1.335.738 0 1.338-.598 1.338-1.336 0-.74-.6-1.338-1.338-1.338zM33.855 20.415c-3.973 0-7.193-3.22-7.193-7.193 0-3.973 3.22-7.193 7.195-7.193 3.973 0 7.192 3.22 7.192 7.19 0 3.974-3.22 7.194-7.192 7.194zM36.36 8.682c-.737 0-1.336.6-1.336 1.337 0 .736.6 1.335 1.337 1.335.738 0 1.338-.598 1.338-1.336 0-.74-.598-1.338-1.337-1.338z"/>
         </svg>
       `,
@@ -24,6 +23,8 @@ export default class Modal extends Plugin {
     // merge default options with the ones set by user
     this.opts = Object.assign({}, defaultOptions, opts)
 
+    this.progressindicators = {}
+
     this.hideModal = this.hideModal.bind(this)
     this.showModal = this.showModal.bind(this)
   }
@@ -37,27 +38,24 @@ export default class Modal extends Plugin {
     const callerPluginId = callerPlugin.constructor.name
     const callerPluginName = callerPlugin.name || callerPluginId
     const callerPluginIcon = callerPlugin.icon || this.opts.defaultTabIcon
-
-    switch (callerPlugin.type) {
-      case 'progressindicator':
-        return '.UppyModal-progressBarContainer'
-      case 'presenter':
-        return '.UppyModal-presenter'
-      case 'acquirer':
-        this.core.emitter.emit('modal-add-target', {
-          id: callerPluginId,
-          name: callerPluginName,
-          icon: callerPluginIcon,
-          el: el,
-          isVisible: false
-        })
-        return `.${this.opts.panelSelectorPrefix}--${callerPluginId}`
-
-      default:
-        let msg = 'Error: Modal can only be used by plugins of types: acquirer, progressindicator'
-        this.core.log(msg)
-        break
+    const callerPluginType = callerPlugin.type
+
+    if (callerPluginType !== 'acquirer' &&
+        callerPluginType !== 'progressindicator' &&
+        callerPluginType !== 'presenter') {
+      let msg = 'Error: Modal can only be used by plugins of types: acquirer, progressindicator, presenter'
+      this.core.log(msg)
+      return
     }
+
+    this.core.emitter.emit('modal-add-target', {
+      id: callerPluginId,
+      name: callerPluginName,
+      icon: callerPluginIcon,
+      type: callerPluginType,
+      el: el,
+      isVisible: false
+    })
   }
 
   render (state) {
@@ -65,6 +63,14 @@ export default class Modal extends Plugin {
 
     const modalTargets = state.modal.targets
 
+    const acquirers = modalTargets.filter((target) => {
+      return target.type === 'acquirer'
+    })
+
+    const progressindicators = modalTargets.filter((target) => {
+      return target.type === 'progressindicator'
+    })
+
     return yo`<div class="UppyModal"
                    ${state.modal.isVisible ? '' : 'aria-hidden'}
                    aria-labelledby="modalTitle"
@@ -74,17 +80,17 @@ export default class Modal extends Plugin {
       <div class="UppyModal-inner">
         <button class="UppyModal-close js-UppyModal-close" title="Close Uppy modal">×</button>
         <ul class="UppyModalTabs" role="tablist">
-          ${Object.keys(modalTargets).map((target) => {
+          ${acquirers.map((target) => {
             return yo`<li class="UppyModalTab">
               <button class="UppyModalTab-btn"
                       role="tab"
-                      aria-controls="${modalTargets[target].id}"
-                      data-open="${this.opts.panelSelectorPrefix}--${modalTargets[target].id}"
+                      aria-controls="${target.id}"
+                      ${target.isVisible ? 'aria-selected' : ''}
                       onclick=${() => {
-                        this.showTabPanel(modalTargets[target].id)
+                        this.showTabPanel(target.id)
                       }}}>
-                ${modalTargets[target].icon}
-                <span class="UppyModalTab-name">${modalTargets[target].name}</span>
+                ${target.icon}
+                <span class="UppyModalTab-name">${target.name}</span>
               </button>
             </li>`
           })}
@@ -92,17 +98,20 @@ export default class Modal extends Plugin {
 
         <div class="UppyModalContent">
           <div class="UppyModal-presenter"></div>
-          <div class="UppyModal-progress">
-            <div class="UppyModal-progressBarContainer"></div>
-          </div>
-          ${Object.keys(modalTargets).map((target) => {
-            return yo`<div class="UppyModalContent-panel ${this.opts.panelSelectorPrefix}--${modalTargets[target].id}"
-                 role="tabpanel"
-                 ${state.modal.isVisible ? '' : 'aria-hidden'}>
-                 ${modalTargets[target].el}
+          ${acquirers.map((target) => {
+            return yo`<div class="UppyModalContent-panel
+                           ${this.opts.panelSelectorPrefix}--${target.id}"
+                           role="tabpanel"
+                           ${target.isVisible ? '' : 'aria-hidden'}>
+                           ${target.el}
             </div>`
           })}
         </div>
+        <div class="UppyModal-progressindicators">
+          ${progressindicators.map((target) => {
+            return target.el
+          })}
+        </div>
 
       </div>
     </div>`

src/plugins/Plugin.js

@@ -27,13 +27,14 @@ export default class Plugin {
   getTarget (target, callerPlugin, el) {
     if (typeof target === 'string') {
       // this.core.log('string is a target')
+      document.querySelector(target).appendChild(el)
       return target
     } else {
       // this.core.log('plugin is a target')
-
       let targetPlugin = this.core.getPlugin(target.name)
+      let selectorTarget = targetPlugin.prepareTarget(callerPlugin, el)
 
-      return targetPlugin.prepareTarget(callerPlugin, el)
+      return selectorTarget
     }
   }
 

src/plugins/ProgressDrawer.js

@@ -16,10 +16,12 @@ export default class ProgressDrawer extends Plugin {
 
     // merge default options with the ones set by user
     this.opts = Object.assign({}, defaultOptions, opts)
+
+    this.el = this.render(this.core.state)
   }
 
   update (state) {
-    var newEl = this.render(state)
+    const newEl = this.render(state)
     yo.update(this.el, newEl)
   }
 
@@ -73,11 +75,9 @@ export default class ProgressDrawer extends Plugin {
   }
 
   install () {
-    this.el = this.render(this.core.state)
     const caller = this
-
-    this.target = this.getTarget(this.opts.target, caller)
-    document.querySelector(this.target).appendChild(this.el)
+    this.target = this.getTarget(this.opts.target, caller, this.el)
+    // document.querySelector(this.target).appendChild(this.el)
 
     return
   }

src/scss/_modal.scss

@@ -109,8 +109,6 @@
 .UppyModalTab-icon {
   fill: $color-white;
   margin-right: 8px;
-  // width: 28px;
-  // height: 28px;
   width: 100%;
   height: 100%;
   vertical-align: middle;

website/src/examples/modal/app.es6

@@ -8,7 +8,7 @@ uppy
   // .use(ProgressBar, {target: Modal})
   .use(DragDrop, {target: Modal})
   // .use(GoogleDrive, {target: Modal})
-  // .use(Dummy, {target: Modal})
+  .use(Dummy, {target: Modal})
   // .use(Present, {target: Modal})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/'})
   .use(ProgressDrawer, {target: Modal})