Browse Source

Type presenter and Present plugin

Artur Paikin 9 years ago
parent
commit
78367195b7
4 changed files with 45 additions and 1 deletions
  1. 1 1
      src/core/Core.js
  2. 3 0
      src/plugins/Modal.js
  3. 39 0
      src/plugins/Present.js
  4. 2 0
      website/src/examples/modal/app.es6

+ 1 - 1
src/core/Core.js

@@ -21,7 +21,7 @@ export default class Core {
     this.opts = Object.assign({}, defaultOptions, opts)
 
     // Dictates in what order different plugin types are ran:
-    this.types = [ 'presetter', 'view', 'progress', 'selecter', 'uploader' ]
+    this.types = [ 'presetter', 'view', 'progress', 'selecter', 'uploader', 'presenter' ]
 
     this.type = 'core'
 

+ 3 - 0
src/plugins/Modal.js

@@ -39,6 +39,8 @@ export default class Modal extends Plugin {
     switch (callerPlugin.type) {
       case 'progress':
         return '.UppyModal-progressContainer'
+      case 'presenter':
+        return '.UppyModal-presenterContainer'
       case 'selecter':
 
         // add tab panel, where plugin will render
@@ -95,6 +97,7 @@ export default class Modal extends Plugin {
           <ul class="UppyModalTabs" role="tablist"></ul>
           <div class="UppyModalContent">
             <div class="UppyModal-progressContainer">progress here</div>
+            <div class="UppyModal-presenterContainer"></div>
           </div>
         </div>
       </div>

+ 39 - 0
src/plugins/Present.js

@@ -0,0 +1,39 @@
+import Plugin from './Plugin'
+
+/**
+ * Present
+ *
+ */
+export default class Present extends Plugin {
+  constructor (core, opts) {
+    super(core, opts)
+    this.type = 'presenter'
+    this.name = 'Present'
+
+    // set default options
+    const defaultOptions = {}
+
+    // merge default options with the ones set by user
+    this.opts = Object.assign({}, defaultOptions, opts)
+  }
+
+  render () {
+    return `
+      <div class="UppyPresenter"></div>
+    `
+  }
+
+  run () {
+    const presenter = document.querySelector('.UppyPresenter')
+    presenter.innerHTML = `<p>Files have been uploaded, would you like to close the Modal
+      or upload something else?</p>`
+  }
+
+  install () {
+    const caller = this
+    this.target = this.getTarget(this.opts.target, caller)
+    this.targetEl = document.querySelector(this.target)
+    this.targetEl.innerHTML = this.render()
+    return
+  }
+}

+ 2 - 0
website/src/examples/modal/app.es6

@@ -4,6 +4,7 @@ import GoogleDrive from '../../../../src/plugins/GoogleDrive.js'
 import DragDrop from '../../../../src/plugins/DragDrop.js'
 import Modal from '../../../../src/plugins/Modal.js'
 import ProgressBar from '../../../../src/plugins/ProgressBar.js'
+import Present from '../../../../src/plugins/Present.js'
 import Tus10 from '../../../../src/plugins/Tus10.js'
 
 const uppy = new Uppy({debug: true})
@@ -12,6 +13,7 @@ uppy
   .use(Dummy, {target: Modal})
   .use(ProgressBar, {target: Modal})
   .use(DragDrop, {target: Modal})
+  .use(Present, {target: Modal})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/'})
   // .use(GoogleDrive, {target: Modal})
   .run()