Merge remote-tracking branch 'origin/master'

.gitignore

@@ -17,3 +17,5 @@ website/themes/uppy/source/uppy/
 
 npm-debug.log*
 website/themes/uppy/_config.yml
+
+config/

CHANGELOG.md

@@ -24,6 +24,7 @@ Ideas that will be planned into a release at one point
 - [ ] build: minification of the bundle
 - [ ] build: sourcemaps for everything (compiled es6->es5 module as well as bundle)
 - [ ] core: Apply plugins when DOM elements aren't static (#25)
+- [ ] core: Add polyfill for `fetch`
 - [ ] instagram: Add basic Instagram plugin example (#21)
 - [ ] presets: Add basic preset that mimics Transloadit's jQuery plugin (#28)
 - [ ] test: setup an HTML page with all sorts of crazy styles, resets & bootstrap to see what brakes Uppy (@arturi)
@@ -50,11 +51,12 @@ look at https://github.com/akiran/react-slick
 ## 0.0.3 (March 01, 2016)
 
 - [ ] modal: Make sure modal renders under one dom node (@arturi)
-- [ ] google: Convert `GoogleDrive` to adhere to `Dummy`'s format, so it's compatible with the new Modal (@hedgerh)
 - [ ] modal: Make Modal prettier and accessible using Artur's research (@arturi)
 - [ ] dragdrop: Convert `DragDrop` to adhere to `Dummy`'s format, so it's compatible with the new Modal (@arturi)
 - [ ] modal: Make the Modal look like Harry's sketchup  (@hedgerh)
 - [x] modal: Make `ProgressBar` work with the new Modal (@kvz)
+- [x] modal: Make `ProgressBar` work with the new Modal (@kvz)
+- [x] google: Convert `GoogleDrive` to adhere to `Dummy`'s format, so it's compatible with the new Modal (@hedgerh)
 - [x] core: throw an error when one Plugin is `.use`d twice. We don't support that now, and will result in very confusing behavior (@kvz)
 - [x] modal: Rename FakeModal to Modal, deprecating our old one (@kvz)
 

src/plugins/DragDrop.js

@@ -21,21 +21,6 @@ export default class DragDrop extends Plugin {
     // Check for browser dragDrop support
     this.isDragDropSupported = this.checkDragDropSupport()
 
-    // Initialize dragdrop component, mount it to container DOM node
-    this.container = document.querySelector(this.opts.target)
-    this.container.innerHTML = this.render()
-
-    // Set selectors
-    this.dropzone = document.querySelector(`${this.opts.target} .UppyDragDrop-inner`)
-    this.input = document.querySelector(`${this.opts.target} .UppyDragDrop-input`)
-    this.status = document.querySelector(`${this.opts.target} .UppyDragDrop-status`)
-    this.progress = document.querySelector(`${this.opts.target} .UppyDragDrop-progress`)
-
-    Utils.addClass(this.container, 'UppyDragDrop')
-    if (this.isDragDropSupported) {
-      Utils.addClass(this.container, 'is-dragdrop-supported')
-    }
-
     // Bind `this` to class methods
     this.initEvents = this.initEvents.bind(this)
     this.handleDrop = this.handleDrop.bind(this)
@@ -60,8 +45,6 @@ export default class DragDrop extends Plugin {
     ${!this.core.opts.autoProceed
       ? `<button class="UppyDragDrop-uploadBtn" type="submit">${this.core.i18n('upload')}</button>`
       : ''}
-    <!--div class="UppyDragDrop-status"></div-->
-    <!--div class="UppyDragDrop-progress"></div-->
   </form>`
   }
 
@@ -89,7 +72,7 @@ export default class DragDrop extends Plugin {
   }
 
   initEvents () {
-    this.core.log(`waiting for some files to be dropped on ${this.opts.target}`)
+    this.core.log(`waiting for some files to be dropped on ${this.target}`)
 
     // prevent default actions for all drag & drop events
     const strEvents = 'drag dragstart dragend dragover dragenter dragleave drop'
@@ -162,6 +145,28 @@ export default class DragDrop extends Plugin {
     })
   }
 
+  install () {
+    // Initialize dragdrop component, mount it to container DOM node
+    // this.container = document.querySelector(this.opts.target)
+    // this.container.innerHTML = this.render()
+
+    const caller = this
+    this.target = this.getTarget(this.opts.target, caller)
+    this.container = document.querySelector(this.target)
+    this.container.innerHTML = this.render()
+
+    // this.target.innerHTML = this.render()
+
+    // Set selectors
+    this.dropzone = document.querySelector(`${this.target} .UppyDragDrop-inner`)
+    this.input = document.querySelector(`${this.target} .UppyDragDrop-input`)
+
+    Utils.addClass(this.container, 'UppyDragDrop')
+    if (this.isDragDropSupported) {
+      Utils.addClass(this.container, 'is-dragdrop-supported')
+    }
+  }
+
   run (results) {
     this.core.log({
       class: this.constructor.name,

src/plugins/Dummy.js

@@ -30,7 +30,8 @@ export default class Dummy extends Plugin {
     // )
     const caller = this
     this.target = this.getTarget(this.opts.target, caller)
-    this.target.innerHTML = this.render()
+    this.targetEl = document.querySelector(this.target)
+    this.targetEl.innerHTML = this.render()
     return
   }
 }

src/plugins/Modal.js

@@ -29,7 +29,7 @@ export default class Modal extends Plugin {
 
     switch (callerPlugin.type) {
       case 'progress':
-        return document.querySelector('.UppyModal-progress-container')
+        return '.UppyModal-progress-container'
       case 'selecter':
         // add tab panel
         const modalContent = document.querySelector('.UppyModal-content')
@@ -59,7 +59,7 @@ export default class Modal extends Plugin {
 
         this.initEvents()
 
-        return document.querySelector(`#${callerPluginName}`)
+        return `#${callerPluginName}`
       default:
         let msg = 'Error: Modal can only be used by plugins of types: selecter, progress'
         this.core.log(msg)

src/plugins/Spinner.js

@@ -42,9 +42,6 @@ export default class Spinner extends Plugin {
   }
 
   install () {
-    // this.core.log('the spinner target is... ' +
-    //   this.getTarget(this.opts.target).spinner
-    // )
     const caller = this
     this.target = this.getTarget(this.opts.target, caller)
 

website/src/examples/fakemodal/app.es6

@@ -0,0 +1,11 @@
+import Uppy from '../../../../src/core/Core.js'
+import Dummy from '../../../../src/plugins/Dummy.js'
+import DragDrop from '../../../../src/plugins/DragDrop.js'
+import Modal from '../../../../src/plugins/Modal.js'
+
+const uppy = new Uppy({debug: true})
+uppy
+  .use(Modal)
+  .use(Dummy, {target: Modal})
+  .use(DragDrop, {target: Modal})
+  .run()

website/src/examples/fakemodal/index.ejs

@@ -0,0 +1,35 @@
+---
+title: Fake Modal
+layout: example
+type: examples
+order: 1
+---
+
+{% blockquote %}
+Making a modal dialog great again.
+{% endblockquote %}
+
+<link rel="stylesheet" href="app.css">
+<% include app.html %>
+<script src="app.js"></script>
+
+<hr />
+
+<p id="console-wrapper">
+  Console output (latest logs are at the top): <br />
+</p>
+
+<p>
+  On this page we're using the following HTML snippet:
+</p>
+{% include_code lang:html fakemodal/app.html %}
+
+<p>
+  Along with this JavaScript:
+</p>
+{% include_code lang:js fakemodal/app.es6 %}
+
+<p>
+  And the following CSS:
+</p>
+{% include_code lang:css fakemodal/app.css %}