import and export date via the clipboard

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 = ({
+    data.validate.paste({
-  fileList = false,
+      clipboardData: clipboardData,
-  feedback = false,
+      feedback: feedback
-  input = false
+    });
-} = {}) => {
 
-  // make new file reader
+  },
-  var reader = new FileReader();
+  render: (dataToImport) => {
 
-  // define the on load event for the reader
+    let dataToCheck = JSON.parse(dataToImport);
-  reader.onload = (event) => {
 
-    // is this a JSON file
+    if (dataToCheck.version != version.number) {
-    if (isJson(event.target.result)) {
 
-      // is this JSON from this app
+      dataToCheck = data.update(dataToCheck);
-      if (JSON.parse(event.target.result)[appName] || JSON.parse(event.target.result)[appName.toLowerCase()]) {
 
-        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({
+          data.restore(dataToRestore);
-            dataToImport: dataToImport,
-            state: data.import.state
-          });
 
-          const importModal = new Modal({
+          data.save();
-            heading: 'Restoring from a ' + appName + ' backup',
-            content: importForm.form(),
-            successText: 'Import',
-            width: 'small',
-            successAction: () => {
 
-              if (data.import.state.setup.include || data.import.state.theme.include || data.import.state.bookmark.include) {
+          data.reload.render();
-
-                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.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');
     }
   }

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({
+  dataSetting.control.backup.copy = new Button({
-  //   text: 'Copy data to clipboard',
+    text: 'Copy to clipboard',
-  //   style: ['line'],
+    style: ['line'],
-  //   func: () => {
+    func: () => {
-  //     navigator.clipboard.writeText(JSON.stringify(data.load()));
+      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()
     ])
   );