Merge pull request #6 from NekitCorp/issue3

Issue3

public/manifest.json

@@ -15,7 +15,7 @@
     "content_scripts": [
         {
             "matches": ["*://www.workflowy.com/*", "*://workflowy.com/*"],
-            "js": ["build/content_script.js"]
+            "js": ["build/content_scripts.js"]
         }
     ],
     "permissions": ["storage"]

rollup.config.js

@@ -21,7 +21,7 @@ function createConfig(filename, useSvelte = false) {
                     dev: !production,
                     // we'll extract any component CSS out into
                     // a separate file - better for performance
-                    css: css => {
+                    css: (css) => {
                         css.write(`${filename}.css`, false);
                     },
                     preprocess: sveltePreprocess(),
@@ -49,4 +49,4 @@ function createConfig(filename, useSvelte = false) {
     };
 }
 
-export default [createConfig("options", true), createConfig("content_script")];
+export default [createConfig("options", true), createConfig("content_scripts")];

src/__tests__/time.test.ts

@@ -1,4 +1,4 @@
-import { getTagSeconds } from "../utils/time";
+import { getTagSeconds } from "../content_scripts/time";
 
 describe("time tests", () => {
     test("getTagSeconds test", () => {

src/storage.ts → src/common/storage.ts

@@ -1,4 +1,4 @@
-import type { IHotkey } from "./utils/keyboard-keys";
+import type { IHotkey } from "./keyboard-keys";
 
 export type IStorage = {
     /** Filter by hashtags on hotkey */
@@ -8,14 +8,11 @@ export type IStorage = {
     calcTotalTime: boolean;
 
     /** Swap hashtags on hotkey */
-    swapHashtags: {
-        delete: string;
-        insert: string;
-    } & IHotkey;
+    swaps: Array<{ delete: string; insert: string } & IHotkey>;
 };
 
 export const defaultStorage: IStorage = {
     filters: [],
     calcTotalTime: true,
-    swapHashtags: null,
+    swaps: [],
 };

src/content_scripts.ts

@@ -0,0 +1,21 @@
+import setHotkey from "hotkeys-js";
+import { defaultStorage, IStorage } from "./common/storage";
+import { startFiltersOnHotkey, startSwaps } from "./content_scripts/hotkey";
+import { createObserver, highlight, renderTotalTime } from "./content_scripts/time";
+
+// By default hotkeys are not enabled for INPUT, SELECT, TEXTAREA elements.
+setHotkey.filter = function (event) {
+    return true;
+};
+
+chrome.storage.sync.get(defaultStorage, ({ filters, calcTotalTime, swaps }: IStorage) => {
+    // Start calculate total time
+    if (calcTotalTime) {
+        highlight();
+        renderTotalTime();
+        createObserver();
+    }
+
+    startFiltersOnHotkey(filters);
+    startSwaps(swaps);
+});

src/content_script.ts → src/content_scripts/hotkey.ts

@@ -1,22 +1,8 @@
 import setHotkey from "hotkeys-js";
-import { defaultStorage, IStorage } from "./storage";
-import { createHashtag } from "./utils/dom";
-import { createObserver, highlight, renderTotalTime } from "./utils/time";
+import type { IStorage } from "../common/storage";
+import { createHashtag } from "./dom";
 
-// By default hotkeys are not enabled for INPUT, SELECT, TEXTAREA elements.
-setHotkey.filter = function (event) {
-    return true;
-};
-
-chrome.storage.sync.get(defaultStorage, ({ filters, calcTotalTime, swapHashtags }: IStorage) => {
-    // Start calculate total time
-    if (calcTotalTime) {
-        highlight();
-        renderTotalTime();
-        createObserver();
-    }
-
-    // Start filters by hotkey
+export function startFiltersOnHotkey(filters: IStorage["filters"]) {
     for (const filter of filters) {
         setHotkey(`${filter.specialKey}+${filter.key}`, function (event, handler) {
             // Prevent the default refresh event under WINDOWS system
@@ -30,19 +16,20 @@ chrome.storage.sync.get(defaultStorage, ({ filters, calcTotalTime, swapHashtags
             }
         });
     }
+}
 
-    // Start swap hashtags on hotkey
-    if (swapHashtags) {
-        setHotkey(`${swapHashtags.specialKey}+${swapHashtags.key}`, function (event, handler) {
+export function startSwaps(swaps: IStorage["swaps"]) {
+    for (const swap of swaps) {
+        setHotkey(`${swap.specialKey}+${swap.key}`, function (event, handler) {
             // Prevent the default refresh event under WINDOWS system
             event.preventDefault();
 
             const activeElement = document.activeElement;
             const innerContentContainer = activeElement.querySelector(".innerContentContainer");
 
             if (innerContentContainer) {
-                const deleteTags = swapHashtags.delete ? swapHashtags.delete.split(" ") : [];
-                const insertTags = swapHashtags.insert ? swapHashtags.insert.split(" ") : [];
+                const deleteTags = swap.delete ? swap.delete.split(" ") : [];
+                const insertTags = swap.insert ? swap.insert.split(" ") : [];
 
                 for (const tag of document.activeElement.querySelectorAll(".contentTag")) {
                     const contentTagText = tag.querySelector(".contentTagText");
@@ -68,4 +55,4 @@ chrome.storage.sync.get(defaultStorage, ({ filters, calcTotalTime, swapHashtags
             }
         });
     }
-});
+}

src/options.ts

@@ -1,3 +1,3 @@
-import Options from "./components/Options.svelte";
+import Options from "./options/components/Options.svelte";
 
 new Options({ target: document.body });

src/options/components/HotkeyCols.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { keys, specialKeys } from "../../common/keyboard-keys";
+
+    export let key = "";
+    export let specialKey = "";
+</script>
+
+<style>
+</style>
+
+<td>
+    <select bind:value={specialKey}>
+        {#each specialKeys as specialKey}
+            <option value={specialKey}>{specialKey}</option>
+        {/each}
+    </select>
+</td>
+<td>
+    <select bind:value={key}>
+        {#each keys as key}
+            <option value={key}>{key}</option>
+        {/each}
+    </select>
+</td>