feat: ✨ Next & Prev buttons on cursorModal

SkepticMystic · Oct 30, 2021 · 8303c0a · 8303c0a
1 parent 99164e5
commit 8303c0a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 73 deletions.
diff --git a/src/Components/QueryModal.svelte b/src/Components/QueryModal.svelte
@@ -5,6 +5,7 @@
   import type { CursorsModal } from "src/CursorsModal";
   import type ACPlugin from "src/main";
   import { onMount } from "svelte";
+  import type { Query, Mode } from "src/interfaces";
 
   export let modal: CursorsModal;
   export let plugin: ACPlugin;
@@ -29,6 +30,11 @@
     await plugin.saveSettings();
   }
 
+  function runSavedQ(q: Query, mode: Mode) {
+    plugin.selectInstance(editor, false, mode, q);
+    modal.close();
+  }
+
   onMount(() => {
     queryEl.focus();
     queryEl.select();
@@ -63,24 +69,35 @@
 <div class="savedQs">
   <ol>
     {#each plugin.settings.savedQueries as q}
-      <li
-        class="savedQ"
-        on:click={() => {
-          plugin.selectInstance(editor, false, "All", q);
-          modal.close();
-        }}
-      >
-        <span class="savedQ-name">
-          {q.name}
-        </span>
-        <span>→</span>
-        <span class="savedQ-query">
-          {displayRegex(q)}
+      <li class="savedQ">
+        <span on:click={() => runSavedQ(q, "All")}>
+          <span class="savedQ-name">
+            {q.name}
+          </span>
+          <span>→</span>
+          <span class="savedQ-query">
+            {displayRegex(q)}
+          </span>
         </span>
+        <button
+          aria-label="Next"
+          class="savedQ-nextOrPrev"
+          on:click={() => runSavedQ(q, "Next")}>→</button
+        >
+        <button
+          aria-label="Previous"
+          class="savedQ-nextOrPrev"
+          on:click={() => runSavedQ(q, "Prev")}>←</button
+        >
       </li>
     {/each}
   </ol>
 </div>
 
 <style>
+  button.savedQ-nextOrPrev {
+    float: right;
+    width: fit-content;
+    padding: 6px;
+  }
 </style>
diff --git a/src/CursorsModal.ts b/src/CursorsModal.ts
@@ -11,71 +11,13 @@ export class CursorsModal extends Modal {
     this.editor = editor;
     this.plugin = plugin;
   }
-  // /**
-  //  * If something is selected, return that, and the offset inside the content. Otherwise return the entire content of the note
-  //  */
-  // getSelectionAndOffset() {
-  //   const selection = this.editor.getSelection();
-  //   const offset = this.editor.posToOffset(this.editor.getCursor("from"));
-  //   if (selection !== "") {
-  //     return { selection, offset };
-  //   } else {
-  //     const content = this.editor.getValue();
-  //     return { selection: content, offset: 0 };
-  //   }
-  // }
-
-  // getSelectionsFromQuery(
-  //   q: Query,
-  //   editor: Editor,
-  //   content: string,
-  //   offset: number
-  // ): EditorSelectionOrCaret[] {
-  //   console.log({ content, offset });
-  //   const regex = createRegex(q);
-
-  //   const selections: EditorSelectionOrCaret[] = [];
-  //   const matches = [...content.matchAll(regex)];
-
-  //   matches.forEach((match) => {
-  //     const from = match.index + offset;
-  //     const to = from + match[0].length;
-
-  //     const anchor = editor.offsetToPos(from);
-  //     const head = editor.offsetToPos(to);
-
-  //     selections.push({ anchor, head });
-  //   });
-
-  //   return selections;
-  // }
-
-  // submit = (q: Query) => {
-  //   try {
-  //     const { selection, offset } = this.getSelectionAndOffset();
-  //     const selections = this.getSelectionsFromQuery(
-  //       q,
-  //       this.editor,
-  //       selection,
-  //       offset
-  //     );
-
-  //     new Notice(`${selections.length} matches found.`);
-
-  //     this.editor.setSelections(selections);
-  //     this.close();
-  //   } catch (error) {
-  //     console.log(error);
-  //     new Notice("Something went wrong, check the console for the error.");
-  //   }
-  // };
 
   async onOpen() {
-    let { contentEl } = this;
+    let { contentEl, plugin, editor } = this;
 
     new QueryModal({
       target: contentEl,
-      props: { modal: this, plugin: this.plugin, editor: this.editor },
+      props: { modal: this, plugin, editor },
     });
   }