From 7050d16751d61bc79f9e4084f7291dc1ee8ab320 Mon Sep 17 00:00:00 2001 From: Kuldeep M Date: Tue, 14 Sep 2021 23:00:53 +0100 Subject: [PATCH] import and export date via the clipboard --- src/component/data/index.js | 224 +++++++++++------- .../menuContent/dataSetting/index.js | 43 +++- 2 files changed, 172 insertions(+), 95 deletions(-) diff --git a/src/component/data/index.js b/src/component/data/index.js index 83140c8e..6aff1021 100644 --- a/src/component/data/index.js +++ b/src/component/data/index.js @@ -10,6 +10,7 @@ import { ImportForm } from '../importForm'; import { dateTime } from '../../utility/dateTime'; import { node } from '../../utility/node'; +import { complexNode } from '../../utility/complexNode'; import { isJson } from '../../utility/isJson'; import { clearChildNode } from '../../utility/clearChildNode'; @@ -47,7 +48,7 @@ data.import = { } = {}) => { if (fileList.length > 0) { - data.validateFile({ + data.validate.file({ fileList: fileList, feedback: feedback, input: input @@ -61,103 +62,164 @@ data.import = { }) => { if (fileList.length > 0) { - data.validateFile({ + data.validate.file({ fileList: fileList, feedback: feedback }); }; - } -}; + }, + paste: ({ + clipboardData = false, + feedback = false + }) => { -data.validateFile = ({ - fileList = false, - feedback = false, - input = false -} = {}) => { + data.validate.paste({ + clipboardData: clipboardData, + feedback: feedback + }); - // make new file reader - var reader = new FileReader(); + }, + render: (dataToImport) => { - // define the on load event for the reader - reader.onload = (event) => { + let dataToCheck = JSON.parse(dataToImport); - // is this a JSON file - if (isJson(event.target.result)) { + if (dataToCheck.version != version.number) { - // is this JSON from this app - if (JSON.parse(event.target.result)[appName] || JSON.parse(event.target.result)[appName.toLowerCase()]) { + dataToCheck = data.update(dataToCheck); - const validFileSuccessAction = () => { + }; - menu.close(); + const importForm = new ImportForm({ + dataToImport: dataToCheck, + state: data.import.state + }); - let dataToImport = JSON.parse(event.target.result); + const importModal = new Modal({ + heading: 'Restoring from a ' + appName + ' backup', + content: importForm.form(), + successText: 'Import', + width: 'small', + successAction: () => { - if (dataToImport.version != version.number) { + if (data.import.state.setup.include || data.import.state.theme.include || data.import.state.bookmark.include) { - dataToImport = data.update(JSON.parse(event.target.result)); + let dataToRestore = JSON.parse(dataToImport); + + if (dataToRestore.version != version.number) { + + data.backup(dataToRestore); + + dataToRestore = data.update(dataToRestore); }; - const importForm = new ImportForm({ - dataToImport: dataToImport, - state: data.import.state - }); + data.restore(dataToRestore); - const importModal = new Modal({ - heading: 'Restoring from a ' + appName + ' backup', - content: importForm.form(), - successText: 'Import', - width: 'small', - successAction: () => { + data.save(); - if (data.import.state.setup.include || data.import.state.theme.include || data.import.state.bookmark.include) { - - let dataToRestore = JSON.parse(event.target.result); - - if (dataToRestore.version != version.number) { - - data.backup(dataToRestore); - - dataToRestore = data.update(dataToRestore); - - }; - - data.restore(dataToRestore); - - data.save(); - - data.reload.render(); - - }; - - data.import.reset(); - - }, - cancelAction: () => { data.import.reset(); }, - closeAction: () => { data.import.reset(); } - }); - - importModal.open(); + data.reload.render(); }; + data.import.reset(); + + }, + cancelAction: () => { data.import.reset(); }, + closeAction: () => { data.import.reset(); } + }); + + importModal.open(); + + } +}; + +data.validate = { + paste: ({ + feedback = false + } = {}) => { + + navigator.clipboard.readText().then(clipboardData => { + + // is the data a JSON object + if (isJson(clipboardData)) { + data.feedback.clear.render(feedback); - data.feedback.success.render(feedback, fileList[0].name, validFileSuccessAction); + data.feedback.success.render(feedback, 'Clipboard data', () => { - if (input) { + menu.close(); - input.value = ''; + data.import.render(clipboardData); + + }); + + } else { + + // not a JSON object + + data.feedback.clear.render(feedback); + + data.feedback.fail.notClipboardJson.render(feedback, 'Clipboard data'); + + }; + + }).catch(error => { + + data.feedback.clear.render(feedback); + + data.feedback.fail.notClipboardJson.render(feedback, 'Clipboard data'); + + }); + + }, + file: ({ + fileList = false, + feedback = false, + input = false + } = {}) => { + + // make new file reader + var reader = new FileReader(); + + // define the on load event for the reader + reader.onload = (event) => { + + // is this a JSON file + if (isJson(event.target.result)) { + + // is this JSON from this app + if (JSON.parse(event.target.result)[appName] || JSON.parse(event.target.result)[appName.toLowerCase()]) { + + data.feedback.clear.render(feedback); + + data.feedback.success.render(feedback, fileList[0].name, () => { + + menu.close(); + + data.import.render(event.target.result); + + }); + + if (input) { input.value = ''; }; + + } else { + + data.feedback.clear.render(feedback); + + data.feedback.fail.notAppJson.render(feedback, fileList[0].name); + + if (input) { input.value = ''; }; }; } else { + // not a JSON file + data.feedback.clear.render(feedback); - data.feedback.fail.notAppJson.render(feedback, fileList[0].name); + data.feedback.fail.notJson.render(feedback, fileList[0].name); if (input) { @@ -167,27 +229,12 @@ data.validateFile = ({ }; - } else { - - // not a JSON file - - data.feedback.clear.render(feedback); - - data.feedback.fail.notJson.render(feedback, fileList[0].name); - - if (input) { - - input.value = ''; - - }; - }; - }; - - // invoke the reader - reader.readAsText(fileList.item(0)); + // invoke the reader + reader.readAsText(fileList.item(0)); + } }; data.export = () => { @@ -407,7 +454,7 @@ data.feedback = {}; data.feedback.empty = { render: (feedback) => { - feedback.appendChild(node('p:No JSON file selected.|class:muted small')); + feedback.appendChild(node('p:Nothing selected to import.|class:muted small')); } }; @@ -435,14 +482,21 @@ data.feedback.fail = { notJson: { render: (feedback, filename) => { feedback.appendChild(node('p:Not a JSON file. Make sure the selected file came from ' + appName + '.|class:small muted')); - feedback.appendChild(node('p:' + filename)); + feedback.appendChild(complexNode({ tag: 'p', text: filename })); data.feedback.animation.set.render(feedback, 'is-shake'); } }, notAppJson: { render: (feedback, filename) => { feedback.appendChild(node('p:Not the right kind of JSON file. Make sure the selected file came from ' + appName + '.|class:small muted')); - feedback.appendChild(node('p:' + filename)); + feedback.appendChild(complexNode({ tag: 'p', text: filename })); + data.feedback.animation.set.render(feedback, 'is-shake'); + } + }, + notClipboardJson: { + render: (feedback, name) => { + feedback.appendChild(node('p:Not the right kind of data. Make sure the clipboard holds data from ' + appName + ' or a ' + appName + ' backup JSON file.|class:small muted')); + feedback.appendChild(node('p:' + name)); data.feedback.animation.set.render(feedback, 'is-shake'); } } diff --git a/src/component/menuContent/dataSetting/index.js b/src/component/menuContent/dataSetting/index.js index 162dac53..4569ca17 100644 --- a/src/component/menuContent/dataSetting/index.js +++ b/src/component/menuContent/dataSetting/index.js @@ -55,7 +55,7 @@ dataSetting.restore = (parent) => { id: 'restore-data', type: 'file', inputHide: true, - labelText: 'Import data', + labelText: 'Import from file', inputButtonStyle: ['line'], action: () => { data.import.file({ @@ -66,6 +66,16 @@ dataSetting.restore = (parent) => { } }); + dataSetting.control.restore.paste = new Button({ + text: 'Import from clipboard', + style: ['line'], + func: () => { + data.import.paste({ + feedback: dataSetting.control.restore.feedback, + }); + } + }); + dataSetting.control.restore.restoreHelper = new Control_helperText({ text: ['Restore a previously exported ' + appName + ' backup.'] }); @@ -83,7 +93,8 @@ dataSetting.restore = (parent) => { }); }, children: [ - dataSetting.control.restore.restoreElement.button + dataSetting.control.restore.restoreElement.button, + dataSetting.control.restore.paste.button ] }); @@ -111,13 +122,13 @@ dataSetting.backup = (parent) => { } }); - // dataSetting.control.backup.copy = new Button({ - // text: 'Copy data to clipboard', - // style: ['line'], - // func: () => { - // navigator.clipboard.writeText(JSON.stringify(data.load())); - // } - // }); + dataSetting.control.backup.copy = new Button({ + text: 'Copy to clipboard', + style: ['line'], + func: () => { + navigator.clipboard.writeText(JSON.stringify(data.load())); + } + }); dataSetting.control.backup.exportHelper = new Control_helperText({ text: ['Download a backup of your ' + appName + ' Bookmarks and Settings.', 'This file can later be imported on this or another deivce.'] @@ -125,7 +136,19 @@ dataSetting.backup = (parent) => { parent.appendChild( node('div', [ - dataSetting.control.backup.export.wrap(), + form.wrap({ + children: [ + form.inline({ + gap: 'small', + equalGap: true, + wrap: true, + children: [ + dataSetting.control.backup.export.wrap(), + dataSetting.control.backup.copy.wrap() + ] + }) + ] + }), dataSetting.control.backup.exportHelper.wrap() ]) );