From c05ea5bbd8d616e2036abc970fce8d7b25392341 Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Thu, 31 Aug 2017 21:50:31 +0300 Subject: [PATCH 1/6] when FileCard loads, set up an event listener for enter key and call props.done --- src/plugins/Dashboard/FileCard.js | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/src/plugins/Dashboard/FileCard.js b/src/plugins/Dashboard/FileCard.js index 4ff7daf29..20515f6ac 100644 --- a/src/plugins/Dashboard/FileCard.js +++ b/src/plugins/Dashboard/FileCard.js @@ -1,12 +1,22 @@ const html = require('yo-yo') const getFileTypeIcon = require('./getFileTypeIcon') +const onload = require('on-load') const { checkIcon } = require('./icons') -module.exports = function fileCard (props) { - const file = props.fileCardFor ? props.files[props.fileCardFor] : false - const meta = {} +let file +const meta = {} - function tempStoreMeta (ev) { +module.exports = function fileCard (props) { + file = props.fileCardFor ? props.files[props.fileCardFor] : false + // const meta = {} + + const handleEnterKey = (ev) => { + if (event.keyCode === 13) { + props.done(meta, file.id) + } + } + + const tempStoreMeta = (ev) => { const value = ev.target.value const name = ev.target.dataset.name meta[name] = value @@ -26,7 +36,7 @@ module.exports = function fileCard (props) { }) } - return html`
+ const fileCardEl = html`

Editing ${file.meta ? file.meta.name : file.name}

` + + return onload(html`
${fileCardEl}
`, + () => document.body.addEventListener('keyup', handleEnterKey), + () => document.body.removeEventListener('keyup', handleEnterKey) + ) } From cb62a1e623bbf9b28059e22cacd3f731d647e433 Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Thu, 31 Aug 2017 21:52:08 +0300 Subject: [PATCH 2/6] minor refactoring --- src/core/Core.js | 1 + src/plugins/Dashboard/index.js | 16 ++++------------ 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/src/core/Core.js b/src/core/Core.js index 60e2682d4..4bc3e1f21 100644 --- a/src/core/Core.js +++ b/src/core/Core.js @@ -72,6 +72,7 @@ class Uppy { this.initSocket = this.initSocket.bind(this) this.log = this.log.bind(this) this.addFile = this.addFile.bind(this) + this.removeFile = this.removeFile.bind(this) this.calculateProgress = this.calculateProgress.bind(this) this.resetProgress = this.resetProgress.bind(this) diff --git a/src/plugins/Dashboard/index.js b/src/plugins/Dashboard/index.js index 086918eb6..6dbb5c1a8 100644 --- a/src/plugins/Dashboard/index.js +++ b/src/plugins/Dashboard/index.js @@ -249,7 +249,7 @@ module.exports = class DashboardUI extends Plugin { } handleFileCard (fileId) { - const modal = this.core.getState().modal + const modal = this.core.state.modal this.core.setState({ modal: Object.assign({}, modal, { @@ -318,18 +318,10 @@ module.exports = class DashboardUI extends Plugin { return target.type === 'progressindicator' }) - // const addFile = (file) => { - // this.core.emitter.emit('core:file-add', file) - // } - - const removeFile = (fileID) => { - this.core.emitter.emit('core:file-remove', fileID) - } - const startUpload = (ev) => { this.core.upload().catch((err) => { // Log error. - console.error(err.stack || err.message || err) + this.core.log(err.stack || err.message || err) }) } @@ -355,7 +347,7 @@ module.exports = class DashboardUI extends Plugin { this.core.info(text, type, duration) } - const resumableUploads = this.core.getState().capabilities.resumableUploads || false + const resumableUploads = this.core.state.capabilities.resumableUploads || false return Dashboard({ state: state, @@ -382,7 +374,7 @@ module.exports = class DashboardUI extends Plugin { pauseAll: this.pauseAll, resumeAll: this.resumeAll, addFile: this.core.addFile, - removeFile: removeFile, + removeFile: this.core.removeFile, info: info, note: this.opts.note, metaFields: state.metaFields, From 3b7dbc39e38e6f03c5a3ac53cc867f9894c0ce2d Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Fri, 1 Sep 2017 01:47:20 +0300 Subject: [PATCH 3/6] pass unique ID to onload; data-name="name" for name input --- src/plugins/Dashboard/FileCard.js | 11 ++++++----- src/plugins/Dashboard/index.js | 13 +++++++------ 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/plugins/Dashboard/FileCard.js b/src/plugins/Dashboard/FileCard.js index 20515f6ac..305779668 100644 --- a/src/plugins/Dashboard/FileCard.js +++ b/src/plugins/Dashboard/FileCard.js @@ -36,7 +36,7 @@ module.exports = function fileCard (props) { }) } - const fileCardEl = html`
+ const fileCardEl = () => html`

Editing ${file.meta ? file.meta.name : file.name}

-
` +
` - return onload(html`
${fileCardEl}
`, + return onload(html`
${fileCardEl()}
`, () => document.body.addEventListener('keyup', handleEnterKey), - () => document.body.removeEventListener('keyup', handleEnterKey) + () => document.body.removeEventListener('keyup', handleEnterKey), + `uppy${file.id}` ) } diff --git a/src/plugins/Dashboard/index.js b/src/plugins/Dashboard/index.js index 6dbb5c1a8..30c101311 100644 --- a/src/plugins/Dashboard/index.js +++ b/src/plugins/Dashboard/index.js @@ -326,21 +326,22 @@ module.exports = class DashboardUI extends Plugin { } const pauseUpload = (fileID) => { - this.core.emitter.emit('core:upload-pause', fileID) + this.core.emit.emit('core:upload-pause', fileID) } const cancelUpload = (fileID) => { - this.core.emitter.emit('core:upload-cancel', fileID) - this.core.emitter.emit('core:file-remove', fileID) + this.core.emit('core:upload-cancel', fileID) + this.core.emit('core:file-remove', fileID) } const showFileCard = (fileID) => { - this.core.emitter.emit('dashboard:file-card', fileID) + this.core.emit('dashboard:file-card', fileID) } const fileCardDone = (meta, fileID) => { - this.core.emitter.emit('core:update-meta', meta, fileID) - this.core.emitter.emit('dashboard:file-card') + console.log(meta) + this.core.emit('core:update-meta', meta, fileID) + this.core.emit('dashboard:file-card') } const info = (text, type, duration) => { From 2f0d1b85812d406ee0773ea8670c89e16e9eaa51 Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Fri, 1 Sep 2017 02:06:23 +0300 Subject: [PATCH 4/6] =?UTF-8?q?don=E2=80=99t=20use=20onload,=20because=20f?= =?UTF-8?q?ileCard=20is=20actually=20always=20in=20DOM?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @goto-bus-stop could you help a bit here? I’m confused as to how to remove an event listener when FileCard is closed, given that data needed for that event listener lives in closure. Now it seems to me that every time FileCard is open, a new listener is added --- src/plugins/Dashboard/FileCard.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/plugins/Dashboard/FileCard.js b/src/plugins/Dashboard/FileCard.js index 305779668..a9bea5e8d 100644 --- a/src/plugins/Dashboard/FileCard.js +++ b/src/plugins/Dashboard/FileCard.js @@ -8,14 +8,19 @@ const meta = {} module.exports = function fileCard (props) { file = props.fileCardFor ? props.files[props.fileCardFor] : false - // const meta = {} const handleEnterKey = (ev) => { - if (event.keyCode === 13) { + if (file && event.keyCode === 13) { props.done(meta, file.id) } } + if (file) { + document.body.addEventListener('keyup', handleEnterKey) + } else { + document.body.removeEventListener('keyup', handleEnterKey) + } + const tempStoreMeta = (ev) => { const value = ev.target.value const name = ev.target.dataset.name @@ -73,8 +78,8 @@ module.exports = function fileCard (props) {
` return onload(html`
${fileCardEl()}
`, - () => document.body.addEventListener('keyup', handleEnterKey), - () => document.body.removeEventListener('keyup', handleEnterKey), + null, + null, `uppy${file.id}` ) } From 6731b82905bcfbc5c3d0a55ea8d68ff45e99bdef Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Fri, 1 Sep 2017 12:12:36 +0300 Subject: [PATCH 5/6] add event listeners to input elements instead --- src/plugins/Dashboard/FileCard.js | 35 ++++++++++++++++++------------- src/plugins/Dashboard/index.js | 1 - 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/plugins/Dashboard/FileCard.js b/src/plugins/Dashboard/FileCard.js index a9bea5e8d..7876d97c6 100644 --- a/src/plugins/Dashboard/FileCard.js +++ b/src/plugins/Dashboard/FileCard.js @@ -3,25 +3,30 @@ const getFileTypeIcon = require('./getFileTypeIcon') const onload = require('on-load') const { checkIcon } = require('./icons') -let file -const meta = {} +// let file +// const meta = {} module.exports = function fileCard (props) { - file = props.fileCardFor ? props.files[props.fileCardFor] : false + const file = props.fileCardFor ? props.files[props.fileCardFor] : false + const meta = {} - const handleEnterKey = (ev) => { - if (file && event.keyCode === 13) { + // const handleEnterKey = (ev) => { + // if (event.keyCode === 13) { + // props.done(meta, file.id) + // } + // } + + // if (file) { + // document.body.addEventListener('keyup', handleEnterKey) + // } else { + // document.body.removeEventListener('keyup', handleEnterKey) + // } + + const tempStoreMetaOrSubmit = (ev) => { + if (ev.keyCode === 13) { props.done(meta, file.id) } - } - if (file) { - document.body.addEventListener('keyup', handleEnterKey) - } else { - document.body.removeEventListener('keyup', handleEnterKey) - } - - const tempStoreMeta = (ev) => { const value = ev.target.value const name = ev.target.dataset.name meta[name] = value @@ -37,7 +42,7 @@ module.exports = function fileCard (props) { data-name="${field.id}" value="${file.meta[field.id]}" placeholder="${field.placeholder || ''}" - onkeyup=${tempStoreMeta} />` + onkeyup=${tempStoreMetaOrSubmit} />` }) } @@ -62,7 +67,7 @@ module.exports = function fileCard (props) {
+ onkeyup=${tempStoreMetaOrSubmit} />
${renderMetaFields(file)} diff --git a/src/plugins/Dashboard/index.js b/src/plugins/Dashboard/index.js index 30c101311..afe8eb09e 100644 --- a/src/plugins/Dashboard/index.js +++ b/src/plugins/Dashboard/index.js @@ -339,7 +339,6 @@ module.exports = class DashboardUI extends Plugin { } const fileCardDone = (meta, fileID) => { - console.log(meta) this.core.emit('core:update-meta', meta, fileID) this.core.emit('dashboard:file-card') } From c75e80fed2091a5a0b0d3fc3b0b009cb6603e9ba Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Fri, 1 Sep 2017 12:38:03 +0300 Subject: [PATCH 6/6] cleanup --- src/plugins/Dashboard/FileCard.js | 24 +----------------------- 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/src/plugins/Dashboard/FileCard.js b/src/plugins/Dashboard/FileCard.js index 7876d97c6..51602b8b4 100644 --- a/src/plugins/Dashboard/FileCard.js +++ b/src/plugins/Dashboard/FileCard.js @@ -1,27 +1,11 @@ const html = require('yo-yo') const getFileTypeIcon = require('./getFileTypeIcon') -const onload = require('on-load') const { checkIcon } = require('./icons') -// let file -// const meta = {} - module.exports = function fileCard (props) { const file = props.fileCardFor ? props.files[props.fileCardFor] : false const meta = {} - // const handleEnterKey = (ev) => { - // if (event.keyCode === 13) { - // props.done(meta, file.id) - // } - // } - - // if (file) { - // document.body.addEventListener('keyup', handleEnterKey) - // } else { - // document.body.removeEventListener('keyup', handleEnterKey) - // } - const tempStoreMetaOrSubmit = (ev) => { if (ev.keyCode === 13) { props.done(meta, file.id) @@ -46,7 +30,7 @@ module.exports = function fileCard (props) { }) } - const fileCardEl = () => html`
+ return html`

Editing ${file.meta ? file.meta.name : file.name}

` - - return onload(html`
${fileCardEl()}
`, - null, - null, - `uppy${file.id}` - ) }