Make space for current page custom format

yorkxin · Aug 29, 2024 · 684353c · 684353c
1 parent d1bd37c
commit 684353c
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 54 deletions.
diff --git a/e2e/src/test/java/org/yorkxin/copyasmarkdown/e2e/BaseTest.java b/e2e/src/test/java/org/yorkxin/copyasmarkdown/e2e/BaseTest.java
@@ -252,7 +252,7 @@ protected void openOptionsPermissionsPage() {
     }
 
     protected void openCustomFormatPage(String slot) {
-        driver.get(getExtensionProtocol()+"://"+extId+"/dist/ui/custom-format.html?slot="+slot);
+        driver.get(getExtensionProtocol()+"://"+extId+"/dist/ui/export-tabs-custom-format.html?slot="+slot);
     }
 
     protected String getExtensionProtocol() {

diff --git a/src/background.js b/src/background.js
@@ -229,7 +229,7 @@ function renderBuiltInFormat(format, tabLists, listType) {
  * @returns {string}
  */
 async function renderCustomFormat({ slot, lists }) {
-  const customFormat = await CustomFormatsStorage.get(slot);
+  const customFormat = await CustomFormatsStorage.get('tabs', slot);
   const input = CustomFormat.makeRenderInput(lists);
   return customFormat.render(input);
 }

diff --git a/src/lib/custom-format.js b/src/lib/custom-format.js
@@ -5,6 +5,8 @@ Mustache.escape = function (text) { return text; };
 
 /** @typedef {import('./tabs.js').TabList} TabList */
 
+/** @typedef {'tabs'} Context */
+
 /**
  * @typedef {Object} RenderInputLink
  * @prop {String} title
@@ -29,17 +31,20 @@ Mustache.escape = function (text) { return text; };
 export default class CustomFormat {
   /**
    * @param {Object} params
+   * @param {Context} context
    * @param {string} params.slot
    * @param {string} params.name
    * @param {string} params.template
    * @param {boolean} params.showInPopupMenu
    */
   constructor({
+    context,
     slot,
     name,
     template,
     showInPopupMenu,
   }) {
+    this.context = context;
     this.slot = slot;
     this.name = name;
     this.template = template;
@@ -100,4 +105,4 @@ export default class CustomFormat {
 
     return { links, groups };
   }
-}
+}
diff --git a/src/storage/custom-formats-storage.js b/src/storage/custom-formats-storage.js
@@ -1,49 +1,51 @@
 import CustomFormat from '../lib/custom-format.js';
 
-function storageKeyOf(slot, attribute) {
-  return `custom_formats.${slot}.${attribute}`;
+function storageKeyOf(context, slot, attribute) {
+  return `custom_formats.${context}.${slot}.${attribute}`;
 }
 
 export default {
   /**
    *
+   * @param context {string}
    * @param slot {string}
    * @returns {Promise<CustomFormat>}
    */
-  async get(slot) {
+  async get(context, slot) {
     const stored = await browser.storage.sync.get({
-      [storageKeyOf(slot, 'name')]: '',
-      [storageKeyOf(slot, 'template')]: '',
-      [storageKeyOf(slot, 'show_in_popup_menu')]: false,
+      [storageKeyOf(context, slot, 'name')]: '',
+      [storageKeyOf(context, slot, 'template')]: '',
+      [storageKeyOf(context, slot, 'show_in_popup_menu')]: false,
     });
 
     return new CustomFormat({
       slot,
-      name: stored[storageKeyOf(slot, 'name')],
-      template: stored[storageKeyOf(slot, 'template')],
-      showInPopupMenu: stored[storageKeyOf(slot, 'show_in_popup_menu')],
+      name: stored[storageKeyOf(context, slot, 'name')],
+      template: stored[storageKeyOf(context, slot, 'template')],
+      showInPopupMenu: stored[storageKeyOf(context, slot, 'show_in_popup_menu')],
     });
   },
 
   /**
    *
    * @returns {Promise<CustomFormat[]>}
    */
-  async list() {
-    return Promise.all(['1', '2', '3', '4', '5'].map((slot) => this.get(slot)));
+  async list(context) {
+    return Promise.all(['1', '2', '3', '4', '5'].map((slot) => this.get(context, slot)));
   },
 
   /**
    *
+   * @param context {string}
    * @param slot {string}
    * @param customFormat {CustomFormat}
    * @returns {Promise<void>}
    */
-  async save(slot, customFormat) {
+  async save(context, slot, customFormat) {
     const assignments = {
-      [storageKeyOf(slot, 'name')]: customFormat.name,
-      [storageKeyOf(slot, 'template')]: customFormat.template,
-      [storageKeyOf(slot, 'show_in_popup_menu')]: customFormat.showInPopupMenu,
+      [storageKeyOf(context, slot, 'name')]: customFormat.name,
+      [storageKeyOf(context, slot, 'template')]: customFormat.template,
+      [storageKeyOf(context, slot, 'show_in_popup_menu')]: customFormat.showInPopupMenu,
     };
 
     await browser.storage.sync.set(assignments);

diff --git a/src/ui/about.html b/src/ui/about.html
@@ -22,11 +22,11 @@ <h1 class="title">Copy as Markdown</h1>
         </ul>
         <p class="menu-label">Custom Formats</p>
         <ul class="menu-list">
-          <li><a href="custom-format.html?slot=1">Custom Format 1</a></li>
-          <li><a href="custom-format.html?slot=2">Custom Format 2</a></li>
-          <li><a href="custom-format.html?slot=3">Custom Format 3</a></li>
-          <li><a href="custom-format.html?slot=4">Custom Format 4</a></li>
-          <li><a href="custom-format.html?slot=5">Custom Format 5</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=1">Custom Format 1</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=2">Custom Format 2</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=3">Custom Format 3</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=4">Custom Format 4</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=5">Custom Format 5</a></li>
           <li><a href="custom-format-help.html">Help & Examples</a></li>
         </ul>
         <p class="menu-label">Others</p>

diff --git a/src/ui/custom-format-help.html b/src/ui/custom-format-help.html
@@ -22,11 +22,11 @@ <h1 class="title">Copy as Markdown</h1>
         </ul>
         <p class="menu-label">Custom Formats</p>
         <ul class="menu-list">
-          <li><a href="custom-format.html?slot=1">Custom Format 1</a></li>
-          <li><a href="custom-format.html?slot=2">Custom Format 2</a></li>
-          <li><a href="custom-format.html?slot=3">Custom Format 3</a></li>
-          <li><a href="custom-format.html?slot=4">Custom Format 4</a></li>
-          <li><a href="custom-format.html?slot=5">Custom Format 5</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=1">Custom Format 1</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=2">Custom Format 2</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=3">Custom Format 3</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=4">Custom Format 4</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=5">Custom Format 5</a></li>
           <li><a href="custom-format-help.html" class="is-active">Help & Examples</a></li>
         </ul>
         <p class="menu-label">Others</p>

diff --git a/src/ui/custom-format.js b/src/ui/custom-format.js
@@ -105,8 +105,12 @@ class UI {
           number: 1,
           ol: 1,
           links: [
-            { title: 'Example 1', url: 'https://example.com/1', number: 1, ol: 1 },
-            { title: 'Example 2', url: 'https://example.com/2', number: 2, ol: 2 },
+            {
+              title: 'Example 1', url: 'https://example.com/1', number: 1, ol: 1,
+            },
+            {
+              title: 'Example 2', url: 'https://example.com/2', number: 2, ol: 2,
+            },
           ],
         },
         {
@@ -115,8 +119,12 @@ class UI {
           number: 2,
           ol: 3,
           links: [
-            { title: 'Example 3', url: 'https://example.com/3', number: 1, ol: 1 },
-            { title: 'Example 4', url: 'https://example.com/4', number: 2, ol: 2 },
+            {
+              title: 'Example 3', url: 'https://example.com/3', number: 1, ol: 1,
+            },
+            {
+              title: 'Example 4', url: 'https://example.com/4', number: 2, ol: 2,
+            },
           ],
         },
         {
@@ -125,8 +133,12 @@ class UI {
           number: 3,
           ol: 4,
           links: [
-            { title: 'Example 5', url: 'https://example.com/5', number: 1, ol: 4 },
-            { title: 'Example 6', url: 'https://example.com/6', number: 2, ol: 5 },
+            {
+              title: 'Example 5', url: 'https://example.com/5', number: 1, ol: 4,
+            },
+            {
+              title: 'Example 6', url: 'https://example.com/6', number: 2, ol: 5,
+            },
           ],
         },
       ],
@@ -136,10 +148,10 @@ class UI {
 
 document.addEventListener('DOMContentLoaded', async () => {
   const ui = new UI(document);
-  const customFormat = await CustomFormatsStorage.get(ui.slot);
+  const customFormat = await CustomFormatsStorage.get('tabs', ui.slot);
   ui.load(customFormat);
 
   ui.elSave.addEventListener('click', async () => {
-    await CustomFormatsStorage.save(ui.slot, ui.current());
+    await CustomFormatsStorage.save('tabs', ui.slot, ui.current());
   });
 });
diff --git a/src/ui/custom-format.html → src/ui/export-tabs-custom-format.html b/src/ui/custom-format.html → src/ui/export-tabs-custom-format.html
@@ -18,13 +18,13 @@ <h1 class="title">Copy as Markdown</h1>
           <li><a href="options.html">Markdown Style</a></li>
           <li><a href="options-permissions.html">Permissions</a></li>
         </ul>
-        <p class="menu-label">Custom Formats</p>
+        <p class="menu-label">Exporting Tabs</p>
         <ul class="menu-list">
-          <li><a data-menu-custom-format="1" href="custom-format.html?slot=1">Custom Format 1</a></li>
-          <li><a data-menu-custom-format="2" href="custom-format.html?slot=2">Custom Format 2</a></li>
-          <li><a data-menu-custom-format="3" href="custom-format.html?slot=3">Custom Format 3</a></li>
-          <li><a data-menu-custom-format="4" href="custom-format.html?slot=4">Custom Format 4</a></li>
-          <li><a data-menu-custom-format="5" href="custom-format.html?slot=5">Custom Format 5</a></li>
+          <li><a data-menu-custom-format="1" href="export-tabs-custom-format.html?slot=1">Custom Format 1</a></li>
+          <li><a data-menu-custom-format="2" href="export-tabs-custom-format.html?slot=2">Custom Format 2</a></li>
+          <li><a data-menu-custom-format="3" href="export-tabs-custom-format.html?slot=3">Custom Format 3</a></li>
+          <li><a data-menu-custom-format="4" href="export-tabs-custom-format.html?slot=4">Custom Format 4</a></li>
+          <li><a data-menu-custom-format="5" href="export-tabs-custom-format.html?slot=5">Custom Format 5</a></li>
           <li><a href="custom-format-help.html">Help & Examples</a></li>
         </ul>
         <p class="menu-label">Others</p>

diff --git a/src/ui/options-permissions.html b/src/ui/options-permissions.html
@@ -22,11 +22,11 @@ <h1 class="title">Copy as Markdown - Additional Permissions</h1>
         </ul>
         <p class="menu-label">Custom Formats</p>
         <ul class="menu-list">
-          <li><a href="custom-format.html?slot=1">Custom Format 1</a></li>
-          <li><a href="custom-format.html?slot=2">Custom Format 2</a></li>
-          <li><a href="custom-format.html?slot=3">Custom Format 3</a></li>
-          <li><a href="custom-format.html?slot=4">Custom Format 4</a></li>
-          <li><a href="custom-format.html?slot=5">Custom Format 5</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=1">Custom Format 1</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=2">Custom Format 2</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=3">Custom Format 3</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=4">Custom Format 4</a></li>
+          <li><a href="export-tabs-custom-format.html?slot=5">Custom Format 5</a></li>
           <li><a href="custom-format-help.html">Help & Examples</a></li>
         </ul>
         <p class="menu-label">Others</p>

diff --git a/src/ui/options.html b/src/ui/options.html
@@ -20,13 +20,13 @@ <h1 class="title">Copy as Markdown</h1>
             <li><a href="options.html" class="is-active">Markdown Style</a></li>
             <li><a href="options-permissions.html">Permissions</a></li>
           </ul>
-          <p class="menu-label">Custom Formats</p>
+          <p class="menu-label">Exporting Tabs</p>
           <ul class="menu-list">
-            <li><a href="custom-format.html?slot=1">Custom Format 1</a></li>
-            <li><a href="custom-format.html?slot=2">Custom Format 2</a></li>
-            <li><a href="custom-format.html?slot=3">Custom Format 3</a></li>
-            <li><a href="custom-format.html?slot=4">Custom Format 4</a></li>
-            <li><a href="custom-format.html?slot=5">Custom Format 5</a></li>
+            <li><a href="export-tabs-custom-format.html?slot=1">Custom Format 1</a></li>
+            <li><a href="export-tabs-custom-format.html?slot=2">Custom Format 2</a></li>
+            <li><a href="export-tabs-custom-format.html?slot=3">Custom Format 3</a></li>
+            <li><a href="export-tabs-custom-format.html?slot=4">Custom Format 4</a></li>
+            <li><a href="export-tabs-custom-format.html?slot=5">Custom Format 5</a></li>
             <li><a href="custom-format-help.html">Help & Examples</a></li>
           </ul>
           <p class="menu-label">Others</p>

diff --git a/src/ui/popup.js b/src/ui/popup.js
@@ -120,7 +120,7 @@ async function showCustomFormats() {
   const divExportAll = document.getElementById('actions-export-all');
   const divExportHighlighted = document.getElementById('actions-export-highlighted');
 
-  const customFormats = await CustomFormatsStorage.list();
+  const customFormats = await CustomFormatsStorage.list('tabs');
   customFormats.forEach((customFormat) => {
     if (!customFormat.showInPopupMenu) {
       return;