Issue #3 Multiple settings "Swap hashtags"

NekitCorp · Oct 14, 2020 · a84c506 · a84c506
1 parent 659f53c
commit a84c506
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 78 deletions.
diff --git a/src/common/storage.ts b/src/common/storage.ts
@@ -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: [],
 };
diff --git a/src/content_scripts.ts b/src/content_scripts.ts
@@ -1,14 +1,14 @@
 import setHotkey from "hotkeys-js";
 import { defaultStorage, IStorage } from "./common/storage";
-import { startFiltersOnHotkey, startSwapHashtagsOnHotkey } from "./content_scripts/hotkey";
+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, swapHashtags }: IStorage) => {
+chrome.storage.sync.get(defaultStorage, ({ filters, calcTotalTime, swaps }: IStorage) => {
     // Start calculate total time
     if (calcTotalTime) {
         highlight();
@@ -17,8 +17,5 @@ chrome.storage.sync.get(defaultStorage, ({ filters, calcTotalTime, swapHashtags
     }
 
     startFiltersOnHotkey(filters);
-
-    if (swapHashtags) {
-        startSwapHashtagsOnHotkey(swapHashtags);
-    }
+    startSwaps(swaps);
 });
diff --git a/src/content_scripts/hotkey.ts b/src/content_scripts/hotkey.ts
@@ -18,39 +18,41 @@ export function startFiltersOnHotkey(filters: IStorage["filters"]) {
     }
 }
 
-export function startSwapHashtagsOnHotkey(swapHashtags: IStorage["swapHashtags"]) {
-    setHotkey(`${swapHashtags.specialKey}+${swapHashtags.key}`, function (event, handler) {
-        // Prevent the default refresh event under WINDOWS system
-        event.preventDefault();
+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");
+            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(" ") : [];
+            if (innerContentContainer) {
+                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");
+                for (const tag of document.activeElement.querySelectorAll(".contentTag")) {
+                    const contentTagText = tag.querySelector(".contentTagText");
 
-                if (deleteTags.includes(contentTagText.textContent)) {
-                    tag.remove();
+                    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"
-                );
-            }
+                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();
-        }
-    });
+                // Reset focus to force save changes in workflowy
+                (activeElement as HTMLElement).blur();
+                (activeElement as HTMLElement).focus();
+            }
+        });
+    }
 }
diff --git a/src/options/components/Options.svelte b/src/options/components/Options.svelte
@@ -18,14 +18,19 @@
         options.filters = [...options.filters, { hashtags: "", key: "home", specialKey: "shift" }];
     }
 
-    function removeFilter(hotkey: IStorage["filters"][0]) {
-        options.filters = options.filters.filter((h) => h !== hotkey);
+    function removeFilter(value: IStorage["filters"][0]) {
+        options.filters = options.filters.filter((h) => h !== value);
     }
 
-    function toggleSwapHashtags() {
-        options.swapHashtags = options.swapHashtags
-            ? null
-            : { insert: "", delete: "", key: "home", specialKey: "shift" };
+    function addSwap() {
+        options.swaps = [
+            ...options.swaps,
+            { insert: "", delete: "", key: "home", specialKey: "shift" },
+        ];
+    }
+
+    function removeSwap(value: IStorage["swaps"][0]) {
+        options.swaps = options.swaps.filter((sh) => sh !== value);
     }
 
     function save() {
@@ -49,7 +54,7 @@
     }
 
     .container {
-        min-width: 500px;
+        min-width: 600px;
     }
 
     table {
@@ -73,7 +78,7 @@
         background: var(--blue);
     }
 
-    .add-filter-button {
+    .add-button {
         display: block;
         margin: 0 auto;
     }
@@ -83,15 +88,6 @@
         align-items: center;
     }
 
-    .swap-hashtags-label {
-        margin: 5px 0;
-    }
-
-    .swap-hashtags-label > input {
-        flex: 1;
-        margin-left: 5px;
-    }
-
     .success {
         color: green;
         font-weight: bold;
@@ -122,37 +118,46 @@
                             <td>
                                 <button
                                     class="emoji-button"
-                                    title="Remove filter"
+                                    title="Remove"
                                     on:click={() => removeFilter(filter)}>➖</button>
                             </td>
                         </tr>
                     {/each}
                 </tbody>
             </table>
-            <button
-                class="emoji-button add-filter-button"
-                title="Add new filter"
-                on:click={addFilter}>➕</button>
+            <button class="emoji-button add-button" title="Add" on:click={addFilter}>➕</button>
         </Fieldset>
 
         <Fieldset title="Swap hashtags on hotkey">
             <div style="margin-bottom: 10px">🙋 Leave the input empty to skip action</div>
-            <label><input
-                    type="checkbox"
-                    checked={Boolean(options.swapHashtags)}
-                    on:change={toggleSwapHashtags} />Enabled</label>
-            {#if Boolean(options.swapHashtags)}
-                <label class="swap-hashtags-label">Insert hashtags:
-                    <input type="text" bind:value={options.swapHashtags.insert} /></label>
-                <label class="swap-hashtags-label">Delete hashtags:
-                    <input type="text" bind:value={options.swapHashtags.delete} /></label>
-                <div>
-                    Hotkey:
-                    <HotkeyCols
-                        bind:key={options.swapHashtags.key}
-                        bind:specialKey={options.swapHashtags.specialKey} />
-                </div>
-            {/if}
+
+            <table>
+                <thead>
+                    <tr>
+                        <th>Special key</th>
+                        <th>Key</th>
+                        <th>Insert hashtags</th>
+                        <th>Delete hashtags</th>
+                        <th>Remove</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {#each options.swaps as swap}
+                        <tr>
+                            <HotkeyCols bind:key={swap.key} bind:specialKey={swap.specialKey} />
+                            <td><input type="text" bind:value={swap.insert} /></td>
+                            <td><input type="text" bind:value={swap.delete} /></td>
+                            <td>
+                                <button
+                                    class="emoji-button"
+                                    title="Remove"
+                                    on:click={() => removeSwap(swap)}>➖</button>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+            <button class="emoji-button add-button" title="Add" on:click={addSwap}>➕</button>
         </Fieldset>
 
         <Fieldset title="Other settings">

diff --git a/tsconfig.json b/tsconfig.json
@@ -9,4 +9,4 @@
         "typeRoots": ["node_modules/@types"],
         "types": ["svelte", "chrome", "jest"]
     }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,4 +9,4 @@ @@
             "typeRoots": ["node_modules/@types"],
             "types": ["svelte", "chrome", "jest"]
         }
-    }
+    }