Merge pull request #425 from transloadit/fix/plugin-target

Set `this.target` in `Plugin` class

src/plugins/Dashboard/index.js

@@ -176,8 +176,8 @@ module.exports = class DashboardUI extends Plugin {
 
   setFocusToFirstNode () {
     const focusableNodes = this.getFocusableNodes()
-    console.log(focusableNodes)
-    console.log(focusableNodes[0])
+    // console.log(focusableNodes)
+    // console.log(focusableNodes[0])
     if (focusableNodes.length) focusableNodes[0].focus()
   }
 
@@ -283,14 +283,14 @@ module.exports = class DashboardUI extends Plugin {
   }
 
   removeActions () {
-    window.removeEventListener('resize', this.updateDashboardElWidth)
-
     this.core.off('core:file-added', this.hideAllPanels)
     this.core.off('dashboard:file-card', this.handleFileCard)
+
+    window.removeEventListener('resize', this.updateDashboardElWidth)
   }
 
   updateDashboardElWidth () {
-    const dashboardEl = this.target.querySelector('.UppyDashboard-inner')
+    const dashboardEl = this.el.querySelector('.UppyDashboard-inner')
     this.core.log(`Dashboard width: ${dashboardEl.offsetWidth}`)
 
     this.setPluginState({

src/plugins/DragDrop/index.js

@@ -58,8 +58,9 @@ module.exports = class DragDrop extends Plugin {
 
     // Bind `this` to class methods
     this.handleDrop = this.handleDrop.bind(this)
+    this.onBrowseClick = this.onBrowseClick.bind(this)
+    this.onInputChange = this.onInputChange.bind(this)
     this.checkDragDropSupport = this.checkDragDropSupport.bind(this)
-    this.handleInputChange = this.handleInputChange.bind(this)
     this.render = this.render.bind(this)
   }
 
@@ -98,7 +99,7 @@ module.exports = class DragDrop extends Plugin {
     })
   }
 
-  handleInputChange (ev) {
+  onInputChange (ev) {
     this.core.log('[DragDrop] Files selected through input')
 
     const files = toArray(ev.target.files)
@@ -113,14 +114,12 @@ module.exports = class DragDrop extends Plugin {
     })
   }
 
-  render (state) {
-    const onSelect = (ev) => {
-      const input = this.target.querySelector('.uppy-DragDrop-input')
-      input.click()
-    }
-
-    // const selectedFilesCount = Object.keys(state.files).length
+  onBrowseClick (ev) {
+    const input = this.target.querySelector('.uppy-DragDrop-input')
+    input.click()
+  }
 
+  render (state) {
     return html`
       <div class="Uppy UppyTheme--default uppy-DragDrop-container ${this.isDragDropSupported ? 'is-dragdrop-supported' : ''}"
            style="width: ${this.opts.width}; height: ${this.opts.height};">
@@ -133,8 +132,8 @@ module.exports = class DragDrop extends Plugin {
                  name="files[]"
                  multiple="true"
                  value=""
-                 onchange=${this.handleInputChange.bind(this)} />
-          <label class="uppy-DragDrop-label" onclick=${onSelect}>
+                 onchange=${this.onInputChange} />
+          <label class="uppy-DragDrop-label" onclick=${this.onBrowseClick}>
             ${this.i18n('dropHereOr')}
             <span class="uppy-DragDrop-dragText">${this.i18n('browse')}</span>
           </label>
@@ -144,36 +143,14 @@ module.exports = class DragDrop extends Plugin {
     `
   }
 
-  // ${selectedFilesCount > 0
-  // ? html`<div class="uppy-DragDrop-selectedCount">
-  //     ${this.i18n('selectedFiles', {'smart_count': selectedFilesCount})}
-  //   </div>`
-  // : ''}
-
   install () {
     const target = this.opts.target
     if (target) {
       this.mount(target, this)
     }
-  }
-
-  uninstall () {
-    this.unmount()
-  }
-
-  mount (...args) {
-    super.mount(...args)
-
-    const dndContainer = this.target.querySelector('.uppy-DragDrop-container')
-    this.removeDragDropListener = dragDrop(dndContainer, (files) => {
+    this.removeDragDropListener = dragDrop(this.el, (files) => {
       this.handleDrop(files)
       this.core.log(files)
     })
   }
-
-  unmount (...args) {
-    this.removeDragDropListener()
-
-    super.unmount(...args)
-  }
 }

src/plugins/Plugin.js

@@ -87,9 +87,7 @@ module.exports = class Plugin {
       this.el = plugin.render(this.core.state)
       targetElement.appendChild(this.el)
 
-      this.target = targetElement
-
-      return targetElement
+      return this.el
     }
 
     let targetPlugin
@@ -111,8 +109,8 @@ module.exports = class Plugin {
     if (targetPlugin) {
       const targetPluginName = targetPlugin.id
       this.core.log(`Installing ${callerPluginName} to ${targetPluginName}`)
-      this.target = targetPlugin
-      return targetPlugin.addTarget(plugin)
+      this.el = targetPlugin.addTarget(plugin)
+      return this.el
     }
 
     this.core.log(`Not installing ${callerPluginName}`)
@@ -131,7 +129,7 @@ module.exports = class Plugin {
     if (this.el && this.el.parentNode) {
       this.el.parentNode.removeChild(this.el)
     }
-    this.target = null
+    // this.target = null
   }
 
   install () {

src/plugins/Plugin.test.js

@@ -259,14 +259,10 @@ describe('Plugin', () => {
       })
 
       it('returns the target DOM element', () => {
-        plugin = new Plugin(mockCore, {replaceTargetContent: true})
+        plugin = new Plugin(mockCore)
         plugin.render = () => {}
         const target = plugin.mount(mockTarget, mockPlugin)
-        expect(target).toEqual({
-          nodeName: 'FORM',
-          innerHTML: '',
-          appendChild
-        })
+        expect(target).toEqual({ el: 'lo' })
       })
     })