Merge pull request #328 from transloadit/chore/dashboard

Dashboard: show()/hide()/isOpen()

src/core/Core.js

@@ -71,6 +71,7 @@ class Uppy {
     this.updateMeta = this.updateMeta.bind(this)
     this.initSocket = this.initSocket.bind(this)
     this.log = this.log.bind(this)
+    this.info = this.info.bind(this)
     this.addFile = this.addFile.bind(this)
     this.removeFile = this.removeFile.bind(this)
     this.calculateProgress = this.calculateProgress.bind(this)

src/core/Utils.js

@@ -524,6 +524,23 @@ function findDOMElement (element) {
   }
 }
 
+/**
+ * Find one or more DOM elements.
+ *
+ * @param {string} element
+ * @return {Array|null}
+ */
+function findAllDOMElements (element) {
+  if (typeof element === 'string') {
+    const elements = [].slice.call(document.querySelectorAll(element))
+    return elements.length > 0 ? elements : null
+  }
+
+  if (typeof element === 'object' && isDOMElement(element)) {
+    return [element]
+  }
+}
+
 function getSocketHost (url) {
   // get the host domain
   var regex = /^(?:https?:\/\/|\/\/)?(?:[^@\n]+@)?(?:www\.)?([^\n]+)/
@@ -575,6 +592,7 @@ module.exports = {
   copyToClipboard,
   prettyETA,
   findDOMElement,
+  findAllDOMElements,
   getSocketHost,
   emitSocketProgress
 }

src/plugins/Dashboard/Dashboard.js

@@ -69,7 +69,7 @@ module.exports = function Dashboard (props) {
               type="button"
               aria-label="${props.i18n('closeModal')}"
               title="${props.i18n('closeModal')}"
-              onclick=${props.hideModal}>${closeIcon()}</button>
+              onclick=${props.closeModal}>${closeIcon()}</button>
 
       <div class="UppyDashboard-innerWrap">
 

src/plugins/Dashboard/index.js

@@ -4,7 +4,7 @@ const dragDrop = require('drag-drop')
 const Dashboard = require('./Dashboard')
 const StatusBar = require('../StatusBar')
 const Informer = require('../Informer')
-const { findDOMElement } = require('../../core/Utils')
+const { findAllDOMElements } = require('../../core/Utils')
 const prettyBytes = require('prettier-bytes')
 const { defaultTabIcon } = require('./icons')
 
@@ -14,8 +14,8 @@ const { defaultTabIcon } = require('./icons')
 module.exports = class DashboardUI extends Plugin {
   constructor (core, opts) {
     super(core, opts)
-    this.id = 'DashboardUI'
-    this.title = 'Dashboard UI'
+    this.id = 'Dashboard'
+    this.title = 'Dashboard'
     this.type = 'orchestrator'
 
     const defaultLocale = {
@@ -67,8 +67,9 @@ module.exports = class DashboardUI extends Plugin {
     this.translator = new Translator({locale: this.locale})
     this.containerWidth = this.translator.translate.bind(this.translator)
 
-    this.hideModal = this.hideModal.bind(this)
-    this.showModal = this.showModal.bind(this)
+    this.closeModal = this.closeModal.bind(this)
+    this.openModal = this.openModal.bind(this)
+    this.isModalOpen = this.isModalOpen.bind(this)
 
     this.addTarget = this.addTarget.bind(this)
     this.actions = this.actions.bind(this)
@@ -144,21 +145,7 @@ module.exports = class DashboardUI extends Plugin {
     })})
   }
 
-  hideModal () {
-    const modal = this.core.getState().modal
-
-    this.core.setState({
-      modal: Object.assign({}, modal, {
-        isHidden: true
-      })
-    })
-
-    document.body.classList.remove('is-UppyDashboard-open')
-
-    window.scrollTo(0, this.savedDocumentScrollPosition)
-  }
-
-  showModal () {
+  openModal () {
     const modal = this.core.getState().modal
 
     this.core.setState({
@@ -183,22 +170,41 @@ module.exports = class DashboardUI extends Plugin {
     setTimeout(this.updateDashboardElWidth, 500)
   }
 
+  closeModal () {
+    const modal = this.core.getState().modal
+
+    this.core.setState({
+      modal: Object.assign({}, modal, {
+        isHidden: true
+      })
+    })
+
+    document.body.classList.remove('is-UppyDashboard-open')
+
+    window.scrollTo(0, this.savedDocumentScrollPosition)
+  }
+
+  isModalOpen () {
+    return !this.core.getState().modal.isHidden || false
+  }
+
   // Close the Modal on esc key press
   handleEscapeKeyPress (event) {
     if (event.keyCode === 27) {
-      this.hideModal()
+      this.closeModal()
     }
   }
 
   handleClickOutside () {
-    if (this.opts.closeModalOnClickOutside) this.hideModal()
+    if (this.opts.closeModalOnClickOutside) this.closeModal()
   }
 
   initEvents () {
     // Modal open button
-    const showModalTrigger = findDOMElement(this.opts.trigger)
+    const showModalTrigger = findAllDOMElements(this.opts.trigger)
+    console.log(showModalTrigger)
     if (!this.opts.inline && showModalTrigger) {
-      showModalTrigger.addEventListener('click', this.showModal)
+      showModalTrigger.forEach(trigger => trigger.addEventListener('click', this.openModal))
     }
 
     if (!this.opts.inline && !showModalTrigger) {
@@ -214,9 +220,9 @@ module.exports = class DashboardUI extends Plugin {
   }
 
   removeEvents () {
-    const showModalTrigger = findDOMElement(this.opts.trigger)
+    const showModalTrigger = findAllDOMElements(this.opts.trigger)
     if (!this.opts.inline && showModalTrigger) {
-      showModalTrigger.removeEventListener('click', this.showModal)
+      showModalTrigger.forEach(trigger => trigger.removeEventListener('click', this.openModal))
     }
 
     this.removeDragDropListener()
@@ -260,7 +266,7 @@ module.exports = class DashboardUI extends Plugin {
   }
 
   handleDrop (files) {
-    this.core.log('All right, someone dropped something...')
+    this.core.log('[Dashboard] Files were dropped')
 
     files.forEach((file) => {
       this.core.addFile({
@@ -301,7 +307,6 @@ module.exports = class DashboardUI extends Plugin {
       inProgressFilesArray.push(files[file])
     })
 
-    // total size and uploaded size
     let totalSize = 0
     let totalUploadedSize = 0
     inProgressFilesArray.forEach((file) => {
@@ -327,7 +332,7 @@ module.exports = class DashboardUI extends Plugin {
     }
 
     const pauseUpload = (fileID) => {
-      this.core.emit.emit('core:upload-pause', fileID)
+      this.core.emit('core:upload-pause', fileID)
     }
 
     const cancelUpload = (fileID) => {
@@ -344,12 +349,6 @@ module.exports = class DashboardUI extends Plugin {
       this.core.emit('dashboard:file-card')
     }
 
-    const info = (text, type, duration) => {
-      this.core.info(text, type, duration)
-    }
-
-    const resumableUploads = this.core.state.capabilities.resumableUploads || false
-
     return Dashboard({
       state: state,
       modal: state.modal,
@@ -363,7 +362,7 @@ module.exports = class DashboardUI extends Plugin {
       autoProceed: this.core.opts.autoProceed,
       hideUploadButton: this.opts.hideUploadButton,
       id: this.id,
-      hideModal: this.hideModal,
+      closeModal: this.closeModal,
       handleClickOutside: this.handleClickOutside,
       showProgressDetails: this.opts.showProgressDetails,
       inline: this.opts.inline,
@@ -376,10 +375,10 @@ module.exports = class DashboardUI extends Plugin {
       resumeAll: this.resumeAll,
       addFile: this.core.addFile,
       removeFile: this.core.removeFile,
-      info: info,
+      info: this.core.info,
       note: this.opts.note,
       metaFields: state.metaFields,
-      resumableUploads: resumableUploads,
+      resumableUploads: this.core.state.capabilities.resumableUploads || false,
       startUpload: startUpload,
       pauseUpload: pauseUpload,
       cancelUpload: cancelUpload,

src/plugins/StatusBar/index.js

@@ -11,8 +11,8 @@ const prettyBytes = require('prettier-bytes')
 module.exports = class StatusBarUI extends Plugin {
   constructor (core, opts) {
     super(core, opts)
-    this.id = 'StatusBarUI'
-    this.title = 'StatusBar UI'
+    this.id = 'StatusBar'
+    this.title = 'StatusBar'
     this.type = 'progressindicator'
 
     // set default options

website/src/docs/dashboard.md

@@ -21,12 +21,14 @@ Dashboard is a universal UI plugin for Uppy:
 uppy.use(Dashboard, {
   target: 'body',
   getMetaFromForm: true,
+  trigger: '#uppy-select-files',
   inline: false,
   width: 750,
   height: 550,
+  showProgressDetails: false,
+  hideUploadButton: false,
   note: false,
-  disableStatusBar: false,
-  disableInformer: false,
+  closeModalOnClickOutside: false,
   locale: {
     strings: {
       selectToUpload: 'Select files to upload',
@@ -60,7 +62,7 @@ By default Dashboard will be rendered as a modal, which is opened via clicking o
 
 ### `trigger: '#uppy-select-files'`
 
-String with a CSS selector for a button that will trigger opening Dashboard modal.
+String with a CSS selector for a button that will trigger opening Dashboard modal. Multiple buttons or links can be used, if it’s a class selector (`.uppy-choose`, for example).
 
 ### `width: 750`
 
@@ -88,4 +90,29 @@ See [general plugin options](/docs/plugins).
 
 ### `locale`
 
-See [general plugin options](/docs/plugins).
+See [general plugin options](/docs/plugins).
+
+## Methods
+
+### `openModal()`
+
+Shows the Dashboard modal. Use it like this:
+
+`uppy.getPlugin('Dashboard').openModal()`
+
+### `closeModal()`
+
+Hides the Dashboard modal. Use it like this:
+
+`uppy.getPlugin('Dashboard').closeModal()`
+
+### `isModalOpen()`
+
+Returns `true` if the Dashboard modal is open, `false` otherwise.
+
+```js
+const dashboard = uppy.getPlugin('Dashboard')
+if ( dashboard.isModalOpen() ) {
+  dashboard.closeModal()
+}
+```