インポート、エクスポート機能実装

onozaty · Oct 28, 2019 · 19a46d2 · 19a46d2
1 parent 5c9ea30
commit 19a46d2
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 3 deletions.
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "__MSG_extensionName__",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "__MSG_extensionDescription__",
   "homepage_url": "https://github.com/onozaty/chrome-shortcutkey2url",
   "icons": {

diff --git a/src/options/options.css b/src/options/options.css
@@ -1,3 +1,7 @@
+.container {
+  padding-bottom: 15px;
+}
+
 h1 {
   border-bottom: 1px solid #eee;
   margin-bottom: 10px;

diff --git a/src/options/options.html b/src/options/options.html
@@ -54,11 +54,16 @@ <h1>ShortcutKey2URL</h1>
         <div class="panel-heading">Shortcut keys</div>
         <div class="panel-body">
           <div id="shortcutKeys"></div>
-          <button id="addButton" class="btn btn-primary btn-sm" type="button"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>
+          <div class="pull-right">
+            <button id="importButton" class="btn btn-info btn-sm" type="button"><span class="glyphicon glyphicon-import" aria-hidden="true"></span> Import</button>
+            <button id="exportButton" class="btn btn-info btn-sm" type="button"><span class="glyphicon glyphicon-export" aria-hidden="true"></span> Export</button>
+            &nbsp;
+            <button id="addButton" class="btn btn-info btn-sm" type="button"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>
+          </div>
         </div>
       </div>
       <div class="pull-right">
-        <button id="saveButton" class="btn btn-success btn-sm" type="button"><span class="glyphicon glyphicon-save" aria-hidden="true"></span> Save</button>
+        <button id="saveButton" class="btn btn-primary" type="button"><span class="glyphicon glyphicon-save" aria-hidden="true"></span> Save</button>
       </div>
     </div>
     <div id="template" class="panel panel-default" style="display: none">

diff --git a/src/options/options.js b/src/options/options.js
@@ -316,6 +316,45 @@ function startup(settings) {
     shortcutKeys.append(null, true);
   });
 
+  $('#importButton').on('click', () => {
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.setAttribute('hidden', true);
+
+    fileInput.addEventListener('change', (e) => {
+      const file = e.target.files[0];
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const fileContents = e.target.result;
+
+        try {
+          const importShortcutKeys = JSON.parse(fileContents);
+          importShortcutKeys.forEach((shortcutKey) => shortcutKeys.append(shortcutKey));
+        } catch (error) {
+          console.log(error);
+          alert('Could not import due to invalid format.');
+        }
+      }
+      reader.readAsText(file);
+    }, false);
+
+    document.body.appendChild(fileInput);
+    fileInput.click();
+    fileInput.remove();
+  });
+
+  $('#exportButton').on('click', () => {
+    const downloadLink = document.createElement('a');
+    downloadLink.download = 'shortcutkeys.json';
+    downloadLink.href = URL.createObjectURL(new Blob([JSON.stringify(shortcutKeys.data(), null, 2)], { 'type' : 'text/plain' }));
+    downloadLink.setAttribute('hidden', true);
+
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    downloadLink.remove();
+  });
+
   $('#saveButton').on('click', () => {
     $("#successMessage").hide();
     $("#errorMessage").hide();