refactor

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 */

src/content_scripts.ts

@@ -0,0 +1,24 @@
+import setHotkey from "hotkeys-js";
+import { defaultStorage, IStorage } from "./common/storage";
+import { startFiltersOnHotkey, startSwapHashtagsOnHotkey } 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, swapHashtags }: IStorage) => {
+    // Start calculate total time
+    if (calcTotalTime) {
+        highlight();
+        renderTotalTime();
+        createObserver();
+    }
+
+    startFiltersOnHotkey(filters);
+
+    if (swapHashtags) {
+        startSwapHashtagsOnHotkey(swapHashtags);
+    }
+});

src/content_scripts/hotkey.ts

@@ -0,0 +1,56 @@
+import setHotkey from "hotkeys-js";
+import type { IStorage } from "../common/storage";
+import { createHashtag } from "./dom";
+
+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
+            event.preventDefault();
+
+            if (filter.hashtags) {
+                location.hash =
+                    "?q=" + filter.hashtags.split(" ").reduce((acc, val) => `${acc}#${val} `, "");
+            } else {
+                location.hash = "";
+            }
+        });
+    }
+}
+
+export function startSwapHashtagsOnHotkey(swapHashtags: IStorage["swapHashtags"]) {
+    setHotkey(`${swapHashtags.specialKey}+${swapHashtags.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(" ") : [];
+
+            for (const tag of document.activeElement.querySelectorAll(".contentTag")) {
+                const contentTagText = tag.querySelector(".contentTagText");
+
+                if (deleteTags.includes(contentTagText.textContent)) {
+                    tag.remove();
+                }
+            }
+
+            for (const tag of insertTags) {
+                innerContentContainer.append(" ");
+                innerContentContainer.append(createHashtag(tag));
+                // remove possible resulting double spaces
+                innerContentContainer.innerHTML = innerContentContainer.innerHTML.replace(
+                    /\s{2,}\<span/g,
+                    " <span"
+                );
+            }
+
+            // Reset focus to force save changes in workflowy
+            (activeElement as HTMLElement).blur();
+            (activeElement as HTMLElement).focus();
+        }
+    });
+}

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>

src/components/Options.svelte → src/options/components/Options.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import type { IStorage } from "../storage";
-    import { defaultStorage } from "../storage";
+    import type { IStorage } from "../../common/storage";
+    import { defaultStorage } from "../../common/storage";
     import Fieldset from "./Fieldset.svelte";
-    import Hotkey from "./Hotkey.svelte";
+    import HotkeyCols from "./HotkeyCols.svelte";
 
     let options: IStorage | null = null;
     let successMessage: string = null;
@@ -48,10 +48,13 @@
         --midnight-blue: #41729f;
     }
 
-    .filter-container {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 5px;
+    .container {
+        min-width: 500px;
+    }
+
+    table {
+        width: 100%;
+        text-align: center;
     }
 
     .emoji-button {
@@ -99,18 +102,33 @@
     {#if options}
         <Fieldset title="Filter by hashtags on hotkey">
             <div>🙋 Filter by one: <b>today</b></div>
-            <div>🙋 Multiple filter: <b>today 5m</b></div>
+            <div>🙋 Multiple filter: <b>today 5m important</b> <i>(space separated)</i></div>
             <div style="margin-bottom: 10px">🙋 Clear filter: <i>leave the input empty</i></div>
-            {#each options.filters as filter}
-                <div class="filter-container">
-                    <Hotkey bind:key={filter.key} bind:specialKey={filter.specialKey} />
-                    <input type="text" bind:value={filter.hashtags} />
-                    <button
-                        class="emoji-button"
-                        title="Delete filter"
-                        on:click={() => removeFilter(filter)}>➖</button>
-                </div>
-            {/each}
+
+            <table>
+                <thead>
+                    <tr>
+                        <th>Special key</th>
+                        <th>Key</th>
+                        <th>Hashtags</th>
+                        <th>Remove</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {#each options.filters as filter}
+                        <tr>
+                            <HotkeyCols bind:key={filter.key} bind:specialKey={filter.specialKey} />
+                            <td><input type="text" bind:value={filter.hashtags} /></td>
+                            <td>
+                                <button
+                                    class="emoji-button"
+                                    title="Remove filter"
+                                    on:click={() => removeFilter(filter)}>➖</button>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
             <button
                 class="emoji-button add-filter-button"
                 title="Add new filter"
@@ -130,7 +148,7 @@
                     <input type="text" bind:value={options.swapHashtags.delete} /></label>
                 <div>
                     Hotkey:
-                    <Hotkey
+                    <HotkeyCols
                         bind:key={options.swapHashtags.key}
                         bind:specialKey={options.swapHashtags.specialKey} />
                 </div>