Fix and enable ProgressBar again (hipster version)

src/plugins/ProgressBar.js

@@ -1,4 +1,5 @@
 import Plugin from './Plugin'
+import yo from 'yo-yo'
 
 /**
  * Progress bar
@@ -16,47 +17,23 @@ export default class ProgressBar extends Plugin {
     this.opts = Object.assign({}, defaultOptions, opts)
   }
 
-  setProgress (percentage) {
-    this.progressBarContainerEl.classList.add('is-active')
-    this.progressBarPercentageEl.innerHTML = `${percentage}%`
-    this.progressBarInnerEl.setAttribute('style', `width: ${percentage}%`)
+  update (state) {
+    const newEl = this.render(state)
+    yo.update(this.el, newEl)
   }
 
-  init () {
-    const caller = this
-    this.target = this.getTarget(this.opts.target, caller)
+  render () {
+    const progress = this.core.getState().totalProgress
 
-    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>`
-    this.progressBarPercentageEl = document.querySelector(`${this.target} .UppyProgressBar-percentage`)
-    this.progressBarInnerEl = document.querySelector(`${this.target} .UppyProgressBar-inner`)
-  }
-
-  events () {
-    // When there is some progress (uploading), emit this event to adjust progressbar
-    this.core.emitter.on('upload-progress', (data) => {
-      const percentage = data.percentage
-      const uploader = data.uploader
-      this.core.log(
-        `progress is: ${percentage}, set by ${uploader.constructor.name}`
-      )
-      // this.setProgress(percentage)
-    })
-
-    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')
-    })
+    return yo`<div class="UppyProgressBar">
+      <div class="UppyProgressBar-inner" style="width: ${progress}%"></div>
+      <div class="UppyProgressBar-percentage">${progress}</div>
+    </div>`
   }
 
   install () {
-    this.init()
-    this.events()
-    return
+    const caller = this
+    this.el = this.render(this.core.state)
+    this.target = this.getTarget(this.opts.target, caller, this.el)
   }
 }

src/plugins/_OldProgressBar.js

@@ -0,0 +1,62 @@
+import Plugin from './Plugin'
+
+/**
+ * Progress bar
+ *
+ */
+export default class ProgressBar extends Plugin {
+  constructor (core, opts) {
+    super(core, opts)
+    this.type = 'progressindicator'
+
+    // set default options
+    const defaultOptions = {}
+
+    // merge default options with the ones set by user
+    this.opts = Object.assign({}, defaultOptions, opts)
+  }
+
+  setProgress (percentage) {
+    this.progressBarContainerEl.classList.add('is-active')
+    this.progressBarPercentageEl.innerHTML = `${percentage}%`
+    this.progressBarInnerEl.setAttribute('style', `width: ${percentage}%`)
+  }
+
+  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>`
+    this.progressBarPercentageEl = document.querySelector(`${this.target} .UppyProgressBar-percentage`)
+    this.progressBarInnerEl = document.querySelector(`${this.target} .UppyProgressBar-inner`)
+  }
+
+  events () {
+    // When there is some progress (uploading), emit this event to adjust progressbar
+    this.core.emitter.on('upload-progress', (data) => {
+      const percentage = data.percentage
+      const uploader = data.uploader
+      this.core.log(
+        `progress is: ${percentage}, set by ${uploader.constructor.name}`
+      )
+      // this.setProgress(percentage)
+    })
+
+    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.init()
+    this.events()
+    return
+  }
+}

src/scss/_progressbar.scss

@@ -1,24 +1,27 @@
 .UppyProgressBar {
-  height: 100%;
-  margin: 0 auto;
-  background-color: lighten($color-pink, 30%);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 10000;
 }
 
 .UppyProgressBar-inner {
-  background-color: $color-pink;
+  background-color: $color-cornflower-blue;
+  box-shadow: 0 0 10px rgba($color-cornflower-blue, 0.7);
   height: 100%;
   width: 0;
+  transition: width 0.4s ease;
 }
 
 .UppyProgressBar-percentage {
+  display: none;
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  // bottom: 30px;
-  // font-size: 12px;
-  // line-height: 30px;
   color: $color-white;
 
   // &:after {

src/scss/_progressdrawer.scss

@@ -56,20 +56,6 @@
   background-color: $color-cornflower-blue;
 }
 
-// .UppyProgressDrawer-item.is-uploaded {
-//   .UppyProgressDrawer-itemBar {
-//     width: 100%;
-//   }
-//
-//   .UppyProgressDrawer-itemRemove {
-//     display: block;
-//   }
-//
-//   .UppyProgressDrawer-itemCheck {
-//     display: block;
-//   }
-// }
-
 .UppyProgressDrawer-itemInfo {
   float: left;
   width: 12%;
@@ -106,6 +92,8 @@
   top: 0;
   height: 100%;
   background-color: $color-pink;
+  width: 0;
+  transition: width 0.4s ease;
 }
 
 .UppyProgressDrawer-itemName {

website/src/examples/modal/app.es6

@@ -3,12 +3,13 @@ import Dummy from '../../../../src/plugins/Dummy.js'
 import Tus10 from '../../../../src/plugins/Tus10.js'
 import Modal from '../../../../src/plugins/Modal.js'
 import DragDrop from '../../../../src/plugins/DragDrop.js'
+import ProgressBar from '../../../../src/plugins/ProgressBar.js'
 import ProgressDrawer from '../../../../src/plugins/ProgressDrawer.js'
 
 const uppy = new Uppy({debug: true, autoProceed: false})
 uppy
   .use(Modal, {trigger: '#uppyModalOpener'})
-  // .use(ProgressBar, {target: Modal})
+  .use(ProgressBar, {target: 'body'})
   .use(DragDrop, {target: Modal})
   // .use(GoogleDrive, {target: Modal})
   .use(Dummy, {target: Modal})