Add swap terms link

forgetso · Sep 25, 2023 · 075e59c · 075e59c
1 parent fa3ec02
commit 075e59c
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 16 deletions.
diff --git a/assets/popup.html b/assets/popup.html
@@ -1,6 +1,7 @@
 <html lang="en">
 
 <head>
+    <meta charset="UTF-8">
     <link href="bootstrap.min.css" rel="stylesheet">
     <script src="../util.js"></script>
     <script src="../popup.js"></script>
@@ -20,6 +21,10 @@
             color: #444;
         }
 
+        textarea {
+            height: calc(1.5em + .75rem + calc(var(--bs-border-width)))
+        }
+
         button {
             width: 100%;
         }
@@ -74,6 +79,10 @@
             margin: 0 auto;
         }
 
+        #swapTerms {
+            text-align: right;
+        }
+
     </style>
     <title>Search and Replace</title>
 </head>
@@ -87,14 +96,17 @@
         <form id="searchReplaceForm">
             <div class="first-row form-group">
                 <label for="searchTerm">Search for</label>
-                <textarea class="data_field form-control rounded-1" name="searchTerm" id="searchTerm" type="text"></textarea>
+                <textarea class="data_field form-control rounded-1" name="searchTerm" id="searchTerm"
+                          type="text"></textarea>
             </div>
-            <div class="form-group" id="searchTermCount">
-                <p></p>
+            <div class="form-group row">
+                <div class="col-6" id="searchTermCount"></div>
+                <div class="col-6 link-body-emphasis" id="swapTerms">Swap ⇅</div>
             </div>
             <div class="form-group">
                 <label for="replaceTerm">Replace with</label>
-                <textarea class="data_field form-control rounded-1" name="replaceTerm" id="replaceTerm" type="text"></textarea>
+                <textarea class="data_field form-control rounded-1" name="replaceTerm" id="replaceTerm"
+                          type="text"></textarea>
             </div>
             <div class="form-group" id="hints">
                 <p></p>
@@ -124,10 +136,14 @@
                 <input name="save" id="save" type="checkbox" class="form-check-input"/>
             </div>
             <div class="form-group">
-                <button name="replaceNext" id="replaceNext" class="btn btn-light mb-2 rounded-1 border-1 border-dark-subtle" type="submit">Replace Next</button>
+                <button name="replaceNext" id="replaceNext"
+                        class="btn btn-light mb-2 rounded-1 border-1 border-dark-subtle" type="submit">Replace Next
+                </button>
             </div>
             <div class="form-group">
-                <button name="replaceAll" id="replaceAll" class="btn btn-light mb-2 rounded-1 border-1 border-dark-subtle" type="submit">Replace All</button>
+                <button name="replaceAll" id="replaceAll"
+                        class="btn btn-light mb-2 rounded-1 border-1 border-dark-subtle" type="submit">Replace All
+                </button>
             </div>
 
         </form>
@@ -143,10 +159,12 @@
                 <div id="historyHeader">
                     <a class="fs-6" href="#">History</a>
                 </div>
-                <div id="historyContent">
+                <div id="historyContent">q
                     <ul id="historyList">
                     </ul>
-                    <button class="btn btn-light btn-sm rounded-1 border-1 border-dark-subtle mb-2" id="clearHistory">Clear</button>
+                    <button class="btn btn-light btn-sm rounded-1 border-1 border-dark-subtle mb-2" id="clearHistory">
+                        Clear
+                    </button>
                 </div>
             </div>
             <!-- Options Link -->
@@ -163,7 +181,9 @@
 
 </div>
 
-<div class="text-center">Version 1.6.9</div>
+<div class="text-center">
+    <a href="https://github.com/forgetso/search-replace/releases/tag/1.6.10" target="_blank" class="link-body-emphasis">Version 1.6.10</a>
+</div>
 </body>
 
 </html>
diff --git a/manifest.json b/manifest.json
@@ -46,6 +46,6 @@
     "https://*/*"
   ],
   "update_url": "http://clients2.google.com/service/update2/crx",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "options_page": "assets/options.html"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "search_and_replace",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "resolutions": {
     "author": "Chris Taylor <[email protected]>"
   },

diff --git a/src/constants.ts b/src/constants.ts
@@ -15,6 +15,6 @@ export const RICH_TEXT_EDITOR_GENERIC: RichTextEditor = {
 export const RICH_TEXT_EDITORS: RichTextEditor[] = [RICH_TEXT_EDITOR_TINY_MCE, RICH_TEXT_EDITOR_GENERIC]
 
 export const HINTS = {
-    wordpress6: 'Hint: WordPress 6+ detected. Check "Only change visible content?" when editing posts.',
-    gmail: 'Hint: Gmail detected. Check "Only change visible content?" when editing draft emails.',
+    wordpress6: 'Hint: WordPress 6+ detected. Check "Visible content only?" when editing posts.',
+    gmail: 'Hint: Gmail detected. Check "Visible content only?" when editing draft emails.',
 }
diff --git a/src/popup.ts b/src/popup.ts
@@ -86,6 +86,13 @@ window.addEventListener('DOMContentLoaded', function () {
 
     // Click handler for historyContent element. Will take the search term and replace term from the history item and populate the input fields
     ;(<HTMLDivElement>document.getElementById('historyContent')).addEventListener('click', historyItemClickHandler)
+
+    // Click handler for swapping terms
+    ;(<HTMLButtonElement>document.getElementById('swapTerms')).addEventListener('click', function (e) {
+        const searchTerm = <HTMLTextAreaElement>document.getElementById('searchTerm')
+        const replaceTerm = <HTMLTextAreaElement>document.getElementById('replaceTerm')
+        swapTerms(searchTerm, replaceTerm)
+    })
 })
 
 async function storeTermsHandler(e) {
@@ -197,7 +204,7 @@ function tabQueryCallback(msg) {
         if ('searchTermCount' in msg) {
             ;(<HTMLDivElement>(
                 document.getElementById('searchTermCount')
-            )).innerHTML = `<p>${msg['searchTermCount']} matches</p>`
+            )).innerHTML = `${msg['searchTermCount']} matches`
         }
         const hintsElement = document.getElementById('hints')
 
@@ -309,6 +316,15 @@ function constructSearchReplaceHistory(searchReplaceInstance?: SearchReplaceInst
     return historyItems
 }
 
+function swapTerms(source: HTMLTextAreaElement, target: HTMLTextAreaElement) {
+    const sourceText = source.value
+    source.value = target.value
+    target.value = sourceText
+    storeTerms({}, true)
+        .then((r) => console.log(r))
+        .catch((e) => console.error(e))
+}
+
 function getHistoryItemsFromListItemsElements(history: HTMLElement): SearchReplaceInstance[] {
     return Array.from(history.getElementsByTagName('li')).map((item) => ({
         searchTerm: item.getAttribute('data-searchTerm') || '',