Import/Export Settings

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @motortruck1221

src/public/js/notify.js

@@ -121,3 +121,46 @@ function promptCloakingNotify(defaulFunc, secFunc) {
         }
     })
 }
+
+function settingsImportExportChoice(exportFunc, importFunc) {
+    Swal.fire({
+        title: 'Import/Export',
+        text: `Select Between the two options`,
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        color: 'var(--text-color)',
+        background: 'var(--bg-color)',
+        confirmButtonText: 'Export',
+        cancelButtonText: 'Import',
+    }).then((result) => {
+        if (result.isConfirmed) {
+        Swal.fire({
+            title: 'Export',
+            text: `Exporting settings...`,
+            icon: 'success',
+            color: 'var(--text-color)',
+            background: 'var(--bg-color)',
+        }).then(() => {
+            exportFunc();
+        })
+        }
+        else {
+            Swal.fire({
+                title: 'Import',
+                text: 'Importing settings...',
+                color: 'var(--text-color)',
+                background: 'var(--bg-color)',
+                icon: 'success',
+            }).then(() => {
+                try {
+                    importFunc();
+                }
+                catch {
+                    console.log('No default function found');
+                }
+            })
+        }
+    })
+}

src/public/js/settings.js

@@ -133,6 +133,59 @@ function reset() {
     fullScreenChange('page');
     setItems();
 }
+function exportSettings() {
+    let title = localStorage.getItem('title');
+    let favicon = localStorage.getItem('favicon');
+    let theme = localStorage.getItem('theme');
+    let search = localStorage.getItem('searchEngine');
+    let proxy = localStorage.getItem('proxy');
+    let fullscreen = localStorage.getItem('fullScreen');
+    let bare = localStorage.getItem('bare');
+    let settings = {
+        title: title,
+        favicon: favicon,
+        theme: theme,
+        search: search,
+        proxy: proxy,
+        fullscreen: fullscreen,
+        bare: bare
+    }
+    let a = document.createElement('a');
+    let file = new Blob([JSON.stringify(settings)], { type: 'text/plain' });
+    let url = URL.createObjectURL(file);
+    a.href = url;
+    a.download = 'ruby_settings.json';
+    a.click();
+    URL.revokeObjectURL(url);
+    a.remove();
+}
+function importSettings() {
+    let input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+    input.onchange = function() {
+        let file = input.files[0];
+        let reader = new FileReader();
+        reader.readAsText(file);
+        reader.onload = function() {
+            let settings = JSON.parse(reader.result);
+            localStorage.setItem('title', settings.title);
+            localStorage.setItem('favicon', settings.favicon);
+            localStorage.setItem('theme', settings.theme);
+            localStorage.setItem('searchEngine', settings.search);
+            localStorage.setItem('proxy', settings.proxy);
+            localStorage.setItem('fullScreen', settings.fullscreen);
+            localStorage.setItem('bare', settings.bare);
+            setItems();
+            console.log('Imported settings');
+            window.location.reload();
+        }
+    }
+    input.click();
+}
+function importExportSettings() {
+    settingsImportExportChoice(exportSettings, importSettings);
+}
 
 function init() {
     let init = localStorage.getItem('init');

src/views/components/settings.erb

@@ -94,5 +94,9 @@
       <h2> Reset Settings </h2>
       <button id="resetButton" class="button" onclick="reset()">Reset</button>
     </div>
+    <div id="tile">
+      <h2> Import/Export Settings </h2>
+      <button id="imExButton" class="button" onclick="importExportSettings()">Click Here</button>
+    </div>
   </div>
 </div>