From b9b53da4ec5ddea2e28b8ceda5326b0c86d677a7 Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Wed, 19 Sep 2018 19:09:31 -0400 Subject: [PATCH 1/5] add `onMount` to Plugin from @uppy/core Called when plugin is mounted, whether in DOM or into another plugin. Needed because sometimes plugins are mounted separately/after `install`, so this.el and this.parent might not be available in `install`. This is the case with @uppy/react plugins, for example. --- packages/@uppy/core/src/Plugin.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/@uppy/core/src/Plugin.js b/packages/@uppy/core/src/Plugin.js index 3fde0a3fe..21d1813e5 100644 --- a/packages/@uppy/core/src/Plugin.js +++ b/packages/@uppy/core/src/Plugin.js @@ -72,6 +72,16 @@ module.exports = class Plugin { } } + /** + * Called when plugin is mounted, whether in DOM or into another plugin. + * Needed because sometimes plugins are mounted separately/after `install`, + * so this.el and this.parent might not be available in `install`. + * This is the case with @uppy/react plugins, for example. + */ + onMount () { + + } + /** * Check if supplied `target` is a DOM element or an `object`. * If it’s an object — target is a plugin, and we search `plugins` @@ -107,6 +117,7 @@ module.exports = class Plugin { this.el = preact.render(this.render(this.uppy.getState()), targetElement) + this.onMount() return this.el } @@ -127,9 +138,11 @@ module.exports = class Plugin { } if (targetPlugin) { - const targetPluginName = targetPlugin.id - this.uppy.log(`Installing ${callerPluginName} to ${targetPluginName}`) + this.uppy.log(`Installing ${callerPluginName} to ${targetPlugin.id}`) + this.parent = targetPlugin.id this.el = targetPlugin.addTarget(plugin) + + this.onMount() return this.el } From 06eda75be4e578fd020361a29bc1a6700d3ae1de Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Wed, 19 Sep 2018 19:10:36 -0400 Subject: [PATCH 2/5] call `hideAllPanels` on `file-added` I believe this was removed because we were doing `addFile` right away when it was selected in `Providers`, which is not the case now, so safe to close Dashboard panels when a file is added. --- packages/@uppy/dashboard/src/index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/@uppy/dashboard/src/index.js b/packages/@uppy/dashboard/src/index.js index 375ef011d..a8f337908 100644 --- a/packages/@uppy/dashboard/src/index.js +++ b/packages/@uppy/dashboard/src/index.js @@ -456,7 +456,10 @@ module.exports = class Dashboard extends Plugin { this.ro.observe(this.el.querySelector('.uppy-Dashboard-inner')) this.uppy.on('plugin-remove', this.removeTarget) - this.uppy.on('file-added', (ev) => this.toggleAddFilesPanel(false)) + this.uppy.on('file-added', (ev) => { + this.toggleAddFilesPanel(false) + this.hideAllPanels() + }) } removeEvents () { @@ -658,7 +661,9 @@ module.exports = class Dashboard extends Plugin { const plugins = this.opts.plugins || [] plugins.forEach((pluginID) => { const plugin = this.uppy.getPlugin(pluginID) - if (plugin) plugin.mount(this, plugin) + if (plugin) { + plugin.mount(this, plugin) + } }) if (!this.opts.disableStatusBar) { From e16b71886b55386fc053771acf8da047e6e29d71 Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Wed, 19 Sep 2018 19:11:22 -0400 Subject: [PATCH 3/5] move this.el.addEventListener to onMount so that they are only set when `this.el` is actually available --- packages/@uppy/url/src/index.js | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/@uppy/url/src/index.js b/packages/@uppy/url/src/index.js index d4eb804d6..ab03e4747 100644 --- a/packages/@uppy/url/src/index.js +++ b/packages/@uppy/url/src/index.js @@ -141,8 +141,12 @@ module.exports = class Url extends Plugin { } }) .then(() => { - const dashboard = this.uppy.getPlugin('Dashboard') - if (dashboard) dashboard.hideAllPanels() + // Close the Dashboard panel if plugin is installed + // into Dashboard (could be other parent UI plugin) + // const parent = this.uppy.getPlugin(this.parent) + // if (parent && parent.hideAllPanels) { + // parent.hideAllPanels() + // } }) .catch((err) => { this.uppy.log(err) @@ -206,23 +210,29 @@ module.exports = class Url extends Plugin { addFile={this.addFile} /> } + onMount () { + if (this.el) { + this.el.addEventListener('drop', this.handleDrop) + this.el.addEventListener('dragover', this.handleDragOver) + this.el.addEventListener('dragleave', this.handleDragLeave) + this.el.addEventListener('paste', this.handlePaste) + } + } + install () { const target = this.opts.target if (target) { this.mount(target, this) } - - this.el.addEventListener('drop', this.handleDrop) - this.el.addEventListener('dragover', this.handleDragOver) - this.el.addEventListener('dragleave', this.handleDragLeave) - this.el.addEventListener('paste', this.handlePaste) } uninstall () { - this.el.removeEventListener('drop', this.handleDrop) - this.el.removeEventListener('dragover', this.handleDragOver) - this.el.removeEventListener('dragleave', this.handleDragLeave) - this.el.removeEventListener('paste', this.handlePaste) + if (this.el) { + this.el.removeEventListener('drop', this.handleDrop) + this.el.removeEventListener('dragover', this.handleDragOver) + this.el.removeEventListener('dragleave', this.handleDragLeave) + this.el.removeEventListener('paste', this.handlePaste) + } this.unmount() } From f8020d877bc35aa339264d7aab951e68ed0789cb Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Wed, 19 Sep 2018 19:13:52 -0400 Subject: [PATCH 4/5] add commented parent.hideAllPanels call MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit in case we need to manually close Dashboard panels, we now have a `this.parent` propety on Plugins, which means we can do `this.uppy.getPlugin(this.parent)` instead of `this.uppy.getPlugin('Dashboard')` — no need to know plugin id, see https://github.com/transloadit/uppy/issues/1057 --- packages/@uppy/webcam/src/index.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/@uppy/webcam/src/index.js b/packages/@uppy/webcam/src/index.js index 4883d721c..cb8299022 100644 --- a/packages/@uppy/webcam/src/index.js +++ b/packages/@uppy/webcam/src/index.js @@ -183,8 +183,13 @@ module.exports = class Webcam extends Plugin { .then(() => { this.recordingChunks = null this.recorder = null - const dashboard = this.uppy.getPlugin('Dashboard') - if (dashboard) dashboard.hideAllPanels() + + // Close the Dashboard panel if plugin is installed + // into Dashboard (could be other parent UI plugin) + // const parent = this.uppy.getPlugin(this.parent) + // if (parent && parent.hideAllPanels) { + // parent.hideAllPanels() + // } }, (error) => { this.recordingChunks = null this.recorder = null @@ -242,8 +247,12 @@ module.exports = class Webcam extends Plugin { return this.getImage() }).then((tagFile) => { this.captureInProgress = false - const dashboard = this.uppy.getPlugin('Dashboard') - if (dashboard) dashboard.hideAllPanels() + // Close the Dashboard panel if plugin is installed + // into Dashboard (could be other parent UI plugin) + // const parent = this.uppy.getPlugin(this.parent) + // if (parent && parent.hideAllPanels) { + // parent.hideAllPanels() + // } try { this.uppy.addFile(tagFile) } catch (err) { From 7c1938611430326116c529a071cb445f6b5f0ef8 Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Wed, 19 Sep 2018 19:21:42 -0400 Subject: [PATCH 5/5] Save actual plugin instance instead of plugin.id in this.parent --- packages/@uppy/core/src/Plugin.js | 2 +- packages/@uppy/url/src/index.js | 5 ++--- packages/@uppy/webcam/src/index.js | 10 ++++------ 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/@uppy/core/src/Plugin.js b/packages/@uppy/core/src/Plugin.js index 21d1813e5..9c8157734 100644 --- a/packages/@uppy/core/src/Plugin.js +++ b/packages/@uppy/core/src/Plugin.js @@ -139,7 +139,7 @@ module.exports = class Plugin { if (targetPlugin) { this.uppy.log(`Installing ${callerPluginName} to ${targetPlugin.id}`) - this.parent = targetPlugin.id + this.parent = targetPlugin this.el = targetPlugin.addTarget(plugin) this.onMount() diff --git a/packages/@uppy/url/src/index.js b/packages/@uppy/url/src/index.js index ab03e4747..c16a3d605 100644 --- a/packages/@uppy/url/src/index.js +++ b/packages/@uppy/url/src/index.js @@ -143,9 +143,8 @@ module.exports = class Url extends Plugin { .then(() => { // Close the Dashboard panel if plugin is installed // into Dashboard (could be other parent UI plugin) - // const parent = this.uppy.getPlugin(this.parent) - // if (parent && parent.hideAllPanels) { - // parent.hideAllPanels() + // if (this.parent && this.parent.hideAllPanels) { + // this.parent.hideAllPanels() // } }) .catch((err) => { diff --git a/packages/@uppy/webcam/src/index.js b/packages/@uppy/webcam/src/index.js index cb8299022..1ca503029 100644 --- a/packages/@uppy/webcam/src/index.js +++ b/packages/@uppy/webcam/src/index.js @@ -186,9 +186,8 @@ module.exports = class Webcam extends Plugin { // Close the Dashboard panel if plugin is installed // into Dashboard (could be other parent UI plugin) - // const parent = this.uppy.getPlugin(this.parent) - // if (parent && parent.hideAllPanels) { - // parent.hideAllPanels() + // if (this.parent && this.parent.hideAllPanels) { + // this.parent.hideAllPanels() // } }, (error) => { this.recordingChunks = null @@ -249,9 +248,8 @@ module.exports = class Webcam extends Plugin { this.captureInProgress = false // Close the Dashboard panel if plugin is installed // into Dashboard (could be other parent UI plugin) - // const parent = this.uppy.getPlugin(this.parent) - // if (parent && parent.hideAllPanels) { - // parent.hideAllPanels() + // if (this.parent && this.parent.hideAllPanels) { + // this.parent.hideAllPanels() // } try { this.uppy.addFile(tagFile)