Implement export function

ref #28
wildskyf · Mar 3, 2022 · 7208d0f · 7208d0f
1 parent 7a6c1ee
commit 7208d0f
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 0 deletions.
diff --git a/export.html b/export.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Export Page | Tab Notes</title>
+  <script type="text/javascript" src="./browser-polyfill.min.js"></script>
+  <script type="text/javascript" src="./migration.js"></script>
+  <script type="text/javascript" src="./utils.js"></script>
+  <script type="text/javascript" src="./export.js"></script>
+</head>
+<body>
+  <h1>Tab Notes - Export Page</h1>
+  <textarea id='export-content' style='width: 50vw; height: 75vh;'>
+  </textarea>
+
+  <button id='switch-button' data-current-ask="json">I need json file.</button>
+</body>
+</html>
diff --git a/export.js b/export.js
@@ -0,0 +1,41 @@
+;(() => {
+  const exportJs = () => {
+    const init = async () => {
+      const $textarea = document.querySelector('#export-content')
+      const $switchBtn = document.querySelector('#switch-button')
+      const data = await window.utils.loadPreference()
+
+      const notes = data.list
+        .map(note => note.content)
+        .filter(c => c)
+        .join('\n\n--------------------\n\n')
+
+      $textarea.value = notes
+
+      $switchBtn.addEventListener('click', () => {
+        const { currentAsk } = $switchBtn.dataset
+
+        if (currentAsk === 'json') {
+          $textarea.value = JSON.stringify(data, null, '  ')
+          $switchBtn.dataset.currentAsk = 'text'
+          $switchBtn.textContent = 'I need pure text.'
+        }
+
+        if (currentAsk === 'text') {
+          $textarea.value = notes
+          $switchBtn.dataset.currentAsk = 'json'
+          $switchBtn.textContent = 'I need json file.'
+        }
+      })
+    }
+
+    return {
+      init
+    }
+  }
+
+  window.addEventListener('load', () => {
+    exportJs().init()
+  })
+})()
+
diff --git a/newtab.css b/newtab.css
@@ -257,3 +257,42 @@ body.dark #annoucement a { color: #fff; }
   width: calc(100vw - 250px);
 }
 
+.setting-icon-container {
+  position: fixed;
+  bottom: 12px;
+  left: 12px;
+}
+
+#setting-icon {
+  background: white;
+  border: 0.2857142857em solid gray;
+  display: inline-block;
+  position: relative;
+  margin: 0.2em;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  box-sizing: border-box;
+  transition-duration: .3s;
+  cursor: pointer;
+}
+
+.dark #setting-icon {
+  background: #343434;
+}
+
+#setting-icon:before, #setting-icon:after {
+  color: gray;
+  content: "×";
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: "times new roman";
+  font-weight: bold;
+  font-size: 2.5em;
+}
+#setting-icon:after {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
diff --git a/newtab.html b/newtab.html
@@ -25,6 +25,9 @@
   </label>
   <textarea id="note-content" placeholder="write some notes..."></textarea>
   <div id="mode-switcher" data-current="day"></div>
+  <div class="setting-icon-container">
+    <div id="setting-icon"></div>
+  </div>
   <span id="status"></span>
   <a id="addon-author" href="https://github.com/wildskyf">WS</a>
 </body>

diff --git a/newtab.js b/newtab.js
@@ -20,6 +20,7 @@
     const $textarea = document.querySelector('textarea')
     const $list = document.querySelector('#list')
     const $mode_switcher = document.querySelector('#mode-switcher')
+    const $setting_gear = document.querySelector('#setting-icon')
     const $status = document.querySelector('#status')
     const $create_entry = document.querySelector('#create_entry')
 
@@ -161,6 +162,12 @@
       })
     }
 
+    const _settingHandler = () => {
+      $setting_gear.addEventListener('click', event => {
+        window.open('export.html')
+      })
+    }
+
     const _multiTabHandler = () => {
       const loadLatestData = async updateTabInfo => {
         let currentTabInfo = await browser.tabs.getCurrent()
@@ -184,6 +191,7 @@
       _noteEventHandler()
       _createButtonEventHandler()
       _themeSwitchHandler()
+      _settingHandler()
       _multiTabHandler()
     }