From d9629031224f08db8d23a6d2884b3f1d7fee8448 Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Sun, 21 Feb 2016 12:18:07 -0500 Subject: [PATCH 1/5] Make DragDrop work with Modal or great again --- src/plugins/DragDrop.js | 41 +++++++++++++++----------- src/plugins/Dummy.js | 3 +- src/plugins/Modal.js | 5 +++- website/src/examples/fakemodal/app.es6 | 2 ++ 4 files changed, 31 insertions(+), 20 deletions(-) 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 40044503a..37b3640d4 100644 --- a/src/plugins/Modal.js +++ b/src/plugins/Modal.js @@ -61,7 +61,10 @@ export default class Modal extends Plugin { this.initEvents() - return document.querySelector(`#${callerPluginName}`) + const target = `#${callerPluginName}` + + // return document.querySelector(`#${callerPluginName}`) + return target } render () { diff --git a/website/src/examples/fakemodal/app.es6 b/website/src/examples/fakemodal/app.es6 index 9d656d1e7..f16b4b108 100644 --- a/website/src/examples/fakemodal/app.es6 +++ b/website/src/examples/fakemodal/app.es6 @@ -1,9 +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() From f2024d1e6350fcfbf892f308c2a4481ad1e947cc Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Sun, 21 Feb 2016 12:18:19 -0500 Subject: [PATCH 2/5] remove comment --- src/plugins/Spinner.js | 3 --- 1 file changed, 3 deletions(-) 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) From be9f4e2247435ef909dded58eee755a4fc4f76d9 Mon Sep 17 00:00:00 2001 From: Kevin van Zonneveld Date: Sun, 21 Feb 2016 18:20:13 +0100 Subject: [PATCH 3/5] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d1c3c23d..934209a4c 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) From 0c1dee61aea7158131827412a7ab56abed05b4e2 Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Sun, 21 Feb 2016 12:32:44 -0500 Subject: [PATCH 4/5] Add config folder to gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) 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/ From 007e34c44b844e26e072c9c7cf2f4e08436e27c1 Mon Sep 17 00:00:00 2001 From: Harry Hedger Date: Sun, 21 Feb 2016 18:39:38 +0100 Subject: [PATCH 5/5] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 934209a4c..bc81ec15c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -52,7 +52,7 @@ look at https://github.com/akiran/react-slick - [ ] modal: Make sure modal renders under one dom node (@arturi) - [ ] modal: Make `ProgressBar` work with the new Modal (@kvz) -- [ ] google: Convert `GoogleDrive` to adhere to `Dummy`'s format, so it's compatible with the new Modal (@hedgerh) +- [x] 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)