diff --git a/.gitignore b/.gitignore index ba1ef9e16..2efd27c1c 100644 --- a/.gitignore +++ b/.gitignore @@ -17,3 +17,5 @@ website/themes/uppy/source/uppy/ npm-debug.log* website/themes/uppy/_config.yml + +config/ diff --git a/CHANGELOG.md b/CHANGELOG.md index e3a3806ad..c1514efe5 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/plugins/DragDrop.js b/src/plugins/DragDrop.js index fadf94e29..a8e16770e 100644 --- a/src/plugins/DragDrop.js +++ b/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 ? `` : ''} - - ` } @@ -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, diff --git a/src/plugins/Dummy.js b/src/plugins/Dummy.js index 7f2d3420d..1a9929dcb 100644 --- a/src/plugins/Dummy.js +++ b/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 } } diff --git a/src/plugins/Modal.js b/src/plugins/Modal.js index 64a67b8a5..7a0e90a45 100644 --- a/src/plugins/Modal.js +++ b/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) diff --git a/src/plugins/Spinner.js b/src/plugins/Spinner.js index e951648f5..ef49bd71f 100644 --- a/src/plugins/Spinner.js +++ b/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) diff --git a/website/src/examples/fakemodal/app.es6 b/website/src/examples/fakemodal/app.es6 new file mode 100644 index 000000000..f16b4b108 --- /dev/null +++ b/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() diff --git a/website/src/examples/modal/app.html b/website/src/examples/fakemodal/app.html similarity index 100% rename from website/src/examples/modal/app.html rename to website/src/examples/fakemodal/app.html diff --git a/website/src/examples/fakemodal/index.ejs b/website/src/examples/fakemodal/index.ejs new file mode 100644 index 000000000..6be9885c8 --- /dev/null +++ b/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 %} + + +<% include app.html %> + + +
+ Console output (latest logs are at the top):
+
+ On this page we're using the following HTML snippet: +
+{% include_code lang:html fakemodal/app.html %} + ++ Along with this JavaScript: +
+{% include_code lang:js fakemodal/app.es6 %} + ++ And the following CSS: +
+{% include_code lang:css fakemodal/app.css %}