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,47 +62,36 @@ 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()]) {
-
-        const validFileSuccessAction = () => {
-
-          menu.close();
-
-          let dataToImport = JSON.parse(event.target.result);
-
-          if (dataToImport.version != version.number) {
-
-            dataToImport = data.update(JSON.parse(event.target.result));
+      dataToCheck = data.update(dataToCheck);
 
     };
 
     const importForm = new ImportForm({
-            dataToImport: dataToImport,
+      dataToImport: dataToCheck,
       state: data.import.state
     });
 
@@ -114,7 +104,7 @@ data.validateFile = ({
 
         if (data.import.state.setup.include || data.import.state.theme.include || data.import.state.bookmark.include) {
 
-                let dataToRestore = JSON.parse(event.target.result);
+          let dataToRestore = JSON.parse(dataToImport);
 
           if (dataToRestore.version != version.number) {
 
@@ -141,29 +131,85 @@ data.validateFile = ({
 
     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 = '';
-
-        };
+          if (input) { input.value = ''; };
 
         };
 
@@ -188,6 +234,7 @@ data.validateFile = ({
     // 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({
-  //   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', [
+      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()
     ])
   );