Reset progressbar and presenter when modal is closed/opened

src/plugins/Modal.js

@@ -115,6 +115,7 @@ export default class Modal extends Plugin {
   hideModal () {
     this.isModalVisible = false
     this.modalEl.setAttribute('aria-hidden', 'true')
+    this.core.emitter.emit('reset')
   }
 
   showModal () {
@@ -162,8 +163,6 @@ export default class Modal extends Plugin {
 
     // Select first tab right away
     this.tabs[0].click()
-
-    // this.hideAllTabPanels()
   }
 
   install () {

src/plugins/Present.js

@@ -25,15 +25,14 @@ export default class Present extends Plugin {
     `
   }
 
-  run (results) {
-    const uploadedCount = results[0].uploadedCount
-    const target = this.opts.target.name
-
-    // Emit allDone event so that, for example, Modal can hide all tabs
-    this.core.emitter.emit('allDone')
+  hidePresenter () {
+    this.presenter.classList.remove('is-visible')
+  }
 
-    const presenter = document.querySelector('.UppyPresenter')
-    presenter.innerHTML = `
+  showPresenter (target, uploadedCount) {
+    console.log(this.presenter)
+    this.presenter.classList.add('is-visible')
+    this.presenter.innerHTML = `
       <p>You have successfully uploaded
         <strong>${this.core.i18n('files', {'smart_count': uploadedCount})}</strong>
       </p>
@@ -43,11 +42,29 @@ export default class Present extends Plugin {
     `
   }
 
+  initEvents () {
+    this.core.emitter.on('reset', data => {
+      this.hidePresenter()
+    })
+  }
+
+  run (results) {
+    // Emit allDone event so that, for example, Modal can hide all tabs
+    this.core.emitter.emit('allDone')
+
+    const uploadedCount = results[0].uploadedCount
+    const target = this.opts.target.name
+    this.showPresenter(target, uploadedCount)
+  }
+
   install () {
     const caller = this
     this.target = this.getTarget(this.opts.target, caller)
     this.targetEl = document.querySelector(this.target)
     this.targetEl.innerHTML = this.render()
+    this.initEvents()
+    this.presenter = document.querySelector('.UppyPresenter')
+
     return
   }
 }

src/plugins/ProgressBar.js

@@ -23,20 +23,21 @@ export default class ProgressBar extends Plugin {
     this.progressBarInnerEl.setAttribute('style', `width: ${percentage}%`)
   }
 
-  initProgressBar () {
+  init () {
     const caller = this
     this.target = this.getTarget(this.opts.target, caller)
 
+    this.uploadButton = document.querySelector('.js-UppyModal-next')
     this.progressBarContainerEl = document.querySelector(this.target)
     this.progressBarContainerEl.innerHTML = `<div class="UppyProgressBar">
-      <div class="UppyProgressBar-inner"></div>
-      <div class="UppyProgressBar-percentage"></div>
-    </div>`
+        <div class="UppyProgressBar-inner"></div>
+        <div class="UppyProgressBar-percentage"></div>
+      </div>`
     this.progressBarPercentageEl = document.querySelector(`${this.target} .UppyProgressBar-percentage`)
     this.progressBarInnerEl = document.querySelector(`${this.target} .UppyProgressBar-inner`)
   }
 
-  initEvents () {
+  events () {
     // When there is some progress (uploading), emit this event to adjust progressbar
     this.core.emitter.on('progress', data => {
       const percentage = data.percentage
@@ -53,19 +54,24 @@ export default class ProgressBar extends Plugin {
 
       // Display count of selected files
       const selectedCount = files.length
-      const uploadButton = document.querySelector('.js-UppyModal-next')
 
-      uploadButton.innerHTML = this.core.i18n('uploadFiles', {'smart_count': selectedCount})
+      this.uploadButton.innerHTML = this.core.i18n('uploadFiles', {'smart_count': selectedCount})
 
       Object.keys(files).forEach(file => {
         this.core.log(`These file has been selected: ${files[file]}`)
       })
     })
+
+    this.core.emitter.on('reset', data => {
+      this.progressBarContainerEl.classList.remove('is-active')
+      this.uploadButton.classList.remove('is-active')
+      this.uploadButton.innerHTML = this.core.i18n('upload')
+    })
   }
 
   install () {
-    this.initProgressBar()
-    this.initEvents()
+    this.init()
+    this.events()
     return
   }
 }

src/scss/_present.scss

@@ -1,6 +1,11 @@
 .UppyPresenter {
   font-size: 25px;
   text-align: center;
+  display: none;
+}
+
+.UppyPresenter.is-visible {
+  display: block;
 }
 
 .UppyPresenter-modalClose {