From 5eadd138c0ad4c1708efeaaeabbcdcb60f7bb5de Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Thu, 2 Jun 2016 01:21:56 -0400 Subject: [PATCH] =?UTF-8?q?Fix=20yo-yo=20+=20Uppy=20rendering=20issues,=20?= =?UTF-8?q?add=20focus=20on=20the=20first=20element=20in=20Modal=20tab,=20?= =?UTF-8?q?refactor=20getTarget=20=E2=80=94=20now=20called=20mount?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/Core.js | 26 +++++++++++------- src/plugins/DragDrop.js | 17 ++++++++---- src/plugins/Dummy.js | 20 +++++++++----- src/plugins/GoogleDrive.js | 21 ++++++++------- src/plugins/Modal.js | 21 ++++++++++----- src/plugins/Plugin.js | 22 ++++++++++----- src/plugins/ProgressBar.js | 5 ++-- src/plugins/ProgressDrawer.js | 43 ++++++++++++++++-------------- website/src/examples/modal/app.es6 | 2 +- 9 files changed, 112 insertions(+), 65 deletions(-) diff --git a/src/core/Core.js b/src/core/Core.js index 75ff5506ba..4c735da1be 100644 --- a/src/core/Core.js +++ b/src/core/Core.js @@ -1,5 +1,6 @@ import Utils from '../core/Utils' import Translator from '../core/Translator' +import yo from 'yo-yo' import ee from 'events' /** @@ -40,6 +41,14 @@ export default class Core { // for debugging and testing global.UppyState = this.state global.UppyAddFile = this.addFile.bind(this) + + this.updateAll = this.updateAll.bind(this) + this.setState = this.setState.bind(this) + this.getState = this.getState.bind(this) + this.use = this.use.bind(this) + this.actions = this.actions.bind(this) + this.run = this.run.bind(this) + this.getPlugin = this.getPlugin.bind(this) } /** @@ -60,7 +69,8 @@ export default class Core { * @param {newState} object */ setState (newState) { - this.log(`Setting state to: ${newState}`) + this.log('Setting state to: ') + this.log(newState) this.state = Object.assign({}, this.state, newState) this.updateAll() } @@ -80,6 +90,7 @@ export default class Core { const imgSrc = ev.target.result const updatedFiles = Object.assign({}, this.state.files) updatedFiles[file.id].preview = imgSrc + updatedFiles[file.id].previewEl = yo`${file.name}` this.setState({files: updatedFiles}) }) reader.addEventListener('error', (err) => { @@ -121,9 +132,9 @@ export default class Core { this.setState({files: updatedFiles}) - // if (fileTypeGeneral === 'image') { - // this.addImgPreviewToFile(updatedFiles[fileID]) - // } + if (fileTypeGeneral === 'image') { + this.addImgPreviewToFile(updatedFiles[fileID]) + } if (this.opts.autoProceed) { this.emitter.emit('next') @@ -260,7 +271,7 @@ export default class Core { if (msg === `${msg}`) { console.log(`LOG: ${msg}`) } else { - console.log('LOG') + console.log('LOG↓') console.dir(msg) } global.uppyLog = global.uppyLog || '' @@ -288,10 +299,7 @@ export default class Core { * All preseters(data) --> All acquirers(data) --> All uploaders(data) --> done */ run () { - this.log({ - class: this.constructor.name, - method: 'run' - }) + this.log('Core is run, initializing actions, installing plugins...') this.actions() diff --git a/src/plugins/DragDrop.js b/src/plugins/DragDrop.js index a65e885a81..c5fa82a77f 100644 --- a/src/plugins/DragDrop.js +++ b/src/plugins/DragDrop.js @@ -36,6 +36,7 @@ export default class DragDrop extends Plugin { this.handleDrop = this.handleDrop.bind(this) this.checkDragDropSupport = this.checkDragDropSupport.bind(this) this.handleInputChange = this.handleInputChange.bind(this) + this.render = this.render.bind(this) } /** @@ -97,7 +98,13 @@ export default class DragDrop extends Plugin { } focus () { - this.input.focus() + const firstInput = document.querySelector(`${this.target} .UppyDragDrop-focus`) + + // only works for the first time if wrapped in setTimeout for some reason + // firstInput.focus() + setTimeout(function () { + firstInput.focus() + }, 10) } render (state) { @@ -122,7 +129,7 @@ export default class DragDrop extends Plugin {
- { this.handleDrop(files) diff --git a/src/plugins/Dummy.js b/src/plugins/Dummy.js index c0c7a7c48b..6ca2b0a7c1 100644 --- a/src/plugins/Dummy.js +++ b/src/plugins/Dummy.js @@ -19,13 +19,15 @@ export default class Dummy extends Plugin { this.opts = Object.assign({}, defaultOptions, opts) this.strange = yo`

this is strange 1

` + this.render = this.render.bind(this) + this.install = this.install.bind(this) } render () { - const bla = yo`

this is strange 2

` + const bla = yo`

this is strange 2

` return yo`
- + ${this.strange} ${bla}
@@ -33,12 +35,18 @@ export default class Dummy extends Plugin { } focus () { - const firstInput = document.querySelector(`${this.target} *:input[type!=hidden]:first`) - firstInput.focus() + const firstInput = document.querySelector(`${this.target} .UppyDummy-firstInput`) + + // only works for the first time if wrapped in setTimeout for some reason + // firstInput.focus() + setTimeout(function () { + firstInput.focus() + }, 10) } install () { - this.el = this.render() - this.target = this.getTarget(this.opts.target, this, this.el, this.render) + const target = this.opts.target + const plugin = this + this.target = this.mount(target, plugin) } } diff --git a/src/plugins/GoogleDrive.js b/src/plugins/GoogleDrive.js index b8ddb2d0c7..02368a9ec2 100644 --- a/src/plugins/GoogleDrive.js +++ b/src/plugins/GoogleDrive.js @@ -26,6 +26,7 @@ export default class Google extends Plugin { this.renderBrowser = this.renderBrowser.bind(this) this.sortByTitle = this.sortByTitle.bind(this) this.sortByDate = this.sortByDate.bind(this) + this.render = this.render.bind(this) // set default options const defaultOptions = {} @@ -34,13 +35,14 @@ export default class Google extends Plugin { this.opts = Object.assign({}, defaultOptions, opts) } - update (state) { - if (typeof this.el === 'undefined') { - return - } + focus () { + const firstInput = document.querySelector(`${this.target} .UppyGoogleDrive-focusInput`) - const newEl = this.render(this.core.state) - yo.update(this.el, newEl) + // only works for the first time if wrapped in setTimeout for some reason + // firstInput.focus() + setTimeout(function () { + firstInput.focus() + }, 10) } /** @@ -402,7 +404,7 @@ export default class Google extends Plugin {
    -
    • +
    • @@ -457,8 +459,9 @@ export default class Google extends Plugin { } }) - this.el = this.render(this.core.state) - this.target = this.getTarget(this.opts.target, this, this.el, this.render.bind(this)) + const target = this.opts.target + const plugin = this + this.target = this.mount(target, plugin) this.checkAuthentication() .then((authenticated) => { diff --git a/src/plugins/Modal.js b/src/plugins/Modal.js index b35c89a638..7215c91d93 100644 --- a/src/plugins/Modal.js +++ b/src/plugins/Modal.js @@ -28,13 +28,19 @@ export default class Modal extends Plugin { this.hideModal = this.hideModal.bind(this) this.showModal = this.showModal.bind(this) + + this.addTarget = this.addTarget.bind(this) + this.showTabPanel = this.showTabPanel.bind(this) + this.events = this.events.bind(this) + this.render = this.render.bind(this) + this.install = this.install.bind(this) } - addTarget (callerPlugin, render) { - const callerPluginId = callerPlugin.constructor.name - const callerPluginName = callerPlugin.title || callerPluginId - const callerPluginIcon = callerPlugin.icon || this.opts.defaultTabIcon - const callerPluginType = callerPlugin.type + addTarget (plugin) { + const callerPluginId = plugin.constructor.name + const callerPluginName = plugin.title || callerPluginId + const callerPluginIcon = plugin.icon || this.opts.defaultTabIcon + const callerPluginType = plugin.type if (callerPluginType !== 'acquirer' && callerPluginType !== 'progressindicator' && @@ -49,7 +55,8 @@ export default class Modal extends Plugin { name: callerPluginName, icon: callerPluginIcon, type: callerPluginType, - render: render, + focus: plugin.focus, + render: plugin.render, isHidden: true } @@ -71,6 +78,7 @@ export default class Modal extends Plugin { const newTargets = modal.targets.map((target) => { if (target.type === 'acquirer') { if (target.id === id) { + target.focus() return Object.assign({}, target, { isHidden: false }) @@ -118,6 +126,7 @@ export default class Modal extends Plugin { const newTargets = modal.targets.map((target) => { if (target.type === 'acquirer' && !found) { found = true + target.focus() return Object.assign({}, target, { isHidden: false diff --git a/src/plugins/Plugin.js b/src/plugins/Plugin.js index a1bea2e68f..cabb5d6d4c 100644 --- a/src/plugins/Plugin.js +++ b/src/plugins/Plugin.js @@ -15,7 +15,11 @@ export default class Plugin { this.core = core this.opts = opts this.type = 'none' - // this.name = this.constructor.name + + this.update = this.update.bind(this) + this.mount = this.mount.bind(this) + this.focus = this.focus.bind(this) + this.install = this.install.bind(this) } update () { @@ -35,8 +39,8 @@ export default class Plugin { * @param {String|Object} target * */ - getTarget (target, caller, el, render) { - const callerPluginName = caller.id + mount (target, plugin) { + const callerPluginName = plugin.id if (typeof target === 'string') { this.core.log(`Installing ${callerPluginName} to ${target}`) @@ -45,16 +49,20 @@ export default class Plugin { // if (replaceTargetContent) { // document.querySelector(target).innerHTML = '' // } - document.querySelector(target).appendChild(el) + const element = plugin.render(this.core.state) + document.querySelector(target).appendChild(element) return target } else { - // TODO: is this the way to roll just to get the plugin name? + // TODO: is instantiating the plugin really the way to roll + // just to get the plugin name? const Target = target const targetPluginName = new Target().id + this.core.log(`Installing ${callerPluginName} to ${targetPluginName}`) - let targetPlugin = this.core.getPlugin(targetPluginName) - let selectorTarget = targetPlugin.addTarget(caller, render) + + const targetPlugin = this.core.getPlugin(targetPluginName) + const selectorTarget = targetPlugin.addTarget(plugin) return selectorTarget } diff --git a/src/plugins/ProgressBar.js b/src/plugins/ProgressBar.js index 704c520098..253f4335f4 100644 --- a/src/plugins/ProgressBar.js +++ b/src/plugins/ProgressBar.js @@ -31,7 +31,8 @@ export default class ProgressBar extends Plugin { } install () { - this.el = this.render(this.core.state) - this.target = this.getTarget(this.opts.target, this, this.el, this.render.bind(this)) + const target = this.opts.target + const plugin = this + this.target = this.mount(target, plugin) } } diff --git a/src/plugins/ProgressDrawer.js b/src/plugins/ProgressDrawer.js index f0769f843c..77581495af 100644 --- a/src/plugins/ProgressDrawer.js +++ b/src/plugins/ProgressDrawer.js @@ -17,6 +17,8 @@ export default class ProgressDrawer extends Plugin { // merge default options with the ones set by user this.opts = Object.assign({}, defaultOptions, opts) + + this.render = this.render.bind(this) } drawerItem (file) { @@ -30,27 +32,27 @@ export default class ProgressDrawer extends Plugin { ` + const fileIcon = yo` + + + + ${file.type.specific ? file.type.specific.toUpperCase() : '?'} + + + ` + return yo`
  • - - - - ${file.type.specific ? file.type.specific.toUpperCase() : '?'} - - - ${file.type.general === 'image' - ? yo`${file.name}` - : yo`${file.type.specific}` - } + ${file.type.general === 'image' ? file.previewEl : fileIcon}

    @@ -127,7 +129,8 @@ export default class ProgressDrawer extends Plugin { } install () { - this.el = this.render(this.core.state) - this.target = this.getTarget(this.opts.target, this, this.el, this.render.bind(this)) + const target = this.opts.target + const plugin = this + this.target = this.mount(target, plugin) } } diff --git a/website/src/examples/modal/app.es6 b/website/src/examples/modal/app.es6 index c2e7cb4a8a..1b9499433b 100644 --- a/website/src/examples/modal/app.es6 +++ b/website/src/examples/modal/app.es6 @@ -1,4 +1,4 @@ -import Uppy from 'uppy/core' +import Uppy from '../../../../src/core/Core.js' import Dummy from '../../../../src/plugins/Dummy.js' import Tus10 from '../../../../src/plugins/Tus10.js' import Modal from '../../../../src/plugins/Modal.js'