import options setup bookmark theme

src/component/base/utility/index.css

@@ -1,8 +1,8 @@
 :root {
-  --utility-muted: var(--theme-primary-140);
+  --utility-muted: var(--theme-primary-110);
-  --utility-muted-hover: var(--theme-primary-140);
+  --utility-muted-hover: var(--theme-primary-110);
-  --utility-muted-focus-active: var(--theme-primary-140);
+  --utility-muted-focus-active: var(--theme-primary-110);
-  --utility-muted-checked: var(--theme-primary-140);
+  --utility-muted-checked: var(--theme-primary-110);
   --utility-muted-disabled: var(--theme-primary-030);
 }
 

src/component/data/index.js

@@ -1,10 +1,12 @@
 import { state } from '../state';
 import { bookmark } from '../bookmark';
+import { menu } from '../menu';
 import { version } from '../version';
 import { update } from '../update';
 import { appName } from '../appName';
 
 import { Modal } from '../modal';
+import { ImportForm } from '../importForm';
 
 import { dateTime } from '../../utility/dateTime';
 import { node } from '../../utility/node';
@@ -21,15 +23,20 @@ data.get = (key) => {
   return localStorage.getItem(key);
 };
 
-data.import = (input, feedback) => {
+data.import = {
-  const fileList = input.files;
+  state: { setup: true, bookmark: true, theme: true },
+  file: (input, feedback) => {
 
-  if (fileList.length > 0) {
+    const fileList = input.files;
-    data.validateJsonFile(fileList, input, feedback);
+
-  };
+    if (fileList.length > 0) {
+      data.validateFile(fileList, input, feedback);
+    };
+
+  }
 };
 
-data.validateJsonFile = (fileList, input, feedback) => {
+data.validateFile = (fileList, input, feedback) => {
 
   // make new file reader
   var reader = new FileReader();
@@ -43,13 +50,48 @@ data.validateJsonFile = (fileList, input, feedback) => {
       // 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(dataToImport);
+          };
+
+          console.log(dataToImport);
+
+          const importForm = new ImportForm({
+            dataToImport: dataToImport,
+            state: data.import.state
+          });
+
+          const importModal = new Modal({
+            heading: 'Data to import',
+            content: importForm.form(),
+            successText: 'Import',
+            width: 'small',
+            successAction: () => {
+
+              data.backup(event.target.result);
+
+              data.restore(dataToImport);
+
+              data.save();
+
+              data.reload.render();
+
+            }
+          });
+
+          importModal.open();
+
+        };
+
         data.feedback.clear.render(feedback);
 
-        data.feedback.success.render(feedback, fileList[0].name, () => {
+        data.feedback.success.render(feedback, fileList[0].name, validFileSuccessAction);
-          data.restore(JSON.parse(event.target.result));
-          data.save();
-          data.reload.render();
-        });
 
         input.value = '';
 
@@ -116,31 +158,59 @@ data.remove = (key) => {
 };
 
 data.backup = (dataToBackup) => {
+
   if (dataToBackup) {
-    console.log('data version ' + dataToBackup.version + ' backed up');
+
     data.set(appName + 'Backup', JSON.stringify(dataToBackup));
+
+    console.log('data version ' + dataToBackup.version + ' backed up');
+
   };
+
+};
+
+data.update = (dataToUpdate) => {
+
+  if (dataToUpdate.version != version.number) {
+
+    dataToUpdate = update.run(dataToUpdate);
+
+  } else {
+
+    console.log('data version:', version.number, 'no need to run update');
+
+  };
+
+  return dataToUpdate;
+
 };
 
 data.restore = (dataToRestore) => {
+
   if (dataToRestore) {
-    if (dataToRestore.version != version.number) {
+
-      // backup save data before running update
+    console.log('data found to load');
-      data.backup(dataToRestore);
+
-      // run update on save data
+    if (data.import.state.setup) {
-      dataToRestore = update.run(dataToRestore);
+      state.set.restore.setup(dataToRestore);
-      // save data
-      data.set(appName, JSON.stringify(dataToRestore));
-    } else {
-      console.log('data version:', version.number, 'no need to run update');
     };
-    // restore state and bookmarks from save data
+
-    state.set.restore(dataToRestore);
+    if (data.import.state.theme) {
-    bookmark.restore(dataToRestore);
+      state.set.restore.theme(dataToRestore);
+    };
+
+    if (data.import.state.bookmark) {
+      bookmark.restore(dataToRestore);
+    };
+
   } else {
+
     console.log('no data found to load');
+
     state.set.default();
+
   };
+
 };
 
 data.save = () => {
@@ -215,11 +285,15 @@ data.feedback.clear = {
 
 data.feedback.success = {
   render: (feedback, filename, action) => {
+
     feedback.appendChild(node('p:Success! Restoring ' + appName + ' Bookmarks and Settings.|class:muted small'));
+
     feedback.appendChild(node('p:' + filename));
+
     if (action) {
       data.feedback.animation.set.render(feedback, 'is-pop', action);
     };
+
   }
 };
 

src/component/importForm/index.js

@@ -0,0 +1,94 @@
+import { state } from '../state';
+import { data } from '../data';
+import { bookmark } from '../bookmark';
+
+import * as form from '../form';
+
+import { Button } from '../button';
+
+import { Control_helperText } from '../control/helperText';
+import { Control_inputButton } from '../control/inputButton';
+import { Control_groupText } from '../control/groupText';
+import { Control_radio } from '../control/radio';
+import { Control_radioGrid } from '../control/radioGrid';
+import { Control_checkbox } from '../control/checkbox';
+import { Control_slider } from '../control/slider';
+import { Control_sliderSlim } from '../control/sliderSlim';
+import { Control_colorMixer } from '../control/colorMixer';
+import { Control_color } from '../control/color';
+import { Control_text } from '../control/text';
+import { Control_select } from '../control/select';
+
+import { node } from '../../utility/node';
+import { complexNode } from '../../utility/complexNode';
+
+export const ImportForm = function({
+  dataToImport = false,
+  state = false
+} = {}) {
+
+  this.element = {
+    form: node('form|class:import-form'),
+    description: node('p:Import all or part of the backup:|class:mb-5')
+  };
+
+  this.count = {
+    bookmark: () => {
+
+      let count = 0;
+
+      dataToImport.bookmark.forEach((item, i) => { count = count + item.items.length });
+
+      return count;
+
+    },
+  };
+
+  this.control = {
+    import: {
+      setup: new Control_checkbox({
+        object: state,
+        path: 'setup',
+        id: 'setup',
+        labelText: 'Settings',
+        description: 'This includes Layout size and position, Header setup and other user settings.'
+      }),
+      bookmark: new Control_checkbox({
+        object: state,
+        path: 'bookmark',
+        id: 'bookmark',
+        labelText: 'Bookmarks',
+        description: `This includes ${this.count.bookmark()} ${this.count.bookmark() > 1 ? `Bookmarks` : `Bookmark`} in ${dataToImport.bookmark.length} ${dataToImport.bookmark.length > 1 ? `Groups` : `Group`}.`
+      }),
+      theme: new Control_checkbox({
+        object: state,
+        path: 'theme',
+        id: 'theme',
+        labelText: 'Theme',
+        description: 'This includes the Colour, Accent, Fonts, Background and any saved Custom Themes.'
+      })
+    }
+  };
+
+  this.disable = () => {};
+
+  this.assemble = () => {
+
+    this.element.form.append(node('div', [
+      this.element.description,
+      this.control.import.setup.wrap(),
+      this.control.import.bookmark.wrap(),
+      this.control.import.theme.wrap()
+    ]));
+
+  };
+
+  this.form = () => {
+
+    return this.element.form;
+
+  };
+
+  this.assemble();
+
+};

src/component/menuContent/dataSetting/index.js

@@ -60,7 +60,7 @@ dataSetting.import = (parent) => {
     labelText: 'Import data',
     inputButtonStyle: ['line'],
     action: () => {
-      data.import(dataSetting.control.import.importElement.input, importFeedback)
+      data.import.file(dataSetting.control.import.importElement.input, importFeedback)
     }
   });
 

src/component/search/index.js

@@ -270,8 +270,6 @@ export const Search = function() {
 
   };
 
-  this.state();
-
   this.assemble();
 
   this.placeholder();

src/component/state/index.js

@@ -259,13 +259,29 @@ state.get = {
 };
 
 state.set = {
-  restore: (dataToRestore) => {
+  restore: {
-    state.current = dataToRestore.state;
+    setup: (dataToRestore) => {
-    console.log('state restored');
+
+      state.current.layout = dataToRestore.state.layout;
+      state.current.header = dataToRestore.state.header;
+      state.current.bookmark = dataToRestore.state.bookmark;
+      state.current.group = dataToRestore.state.group;
+      state.current.toolbar = dataToRestore.state.toolbar;
+      console.log('setup restored');
+
+    },
+    theme: (dataToRestore) => {
+
+      state.current.theme = dataToRestore.state.theme;
+      console.log('theme restored');
+
+    }
   },
   default: () => {
+
     state.current = state.get.default();
     console.log('state set to default');
+
   }
 };