Improve Options and Links (#37)

* Fix Options Page and popupClick * Improve popLinks * Update popLinks
cssnr · Dec 2, 2023 · 91233fb · 91233fb
1 parent a9a3ce6
commit 91233fb
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 42 deletions.
diff --git a/src/html/popup.html b/src/html/popup.html
@@ -12,13 +12,13 @@
 <div class="container-fluid p-3">
     <div class="d-grid g-2 gap-2">
         <div class="btn-group btn-group-sm" role="group" aria-label="Button group with nested dropdown">
-            <button id="btn-all" class="btn btn-success btn-sm popup-click" type="button">
+            <button id="btn-all" class="btn btn-success btn-sm" type="button">
                 All Links</button>
             <div class="btn-group" role="group">
                 <button type="button" class="btn btn-outline-success btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                     Filters</button>
                 <ul id="filters-ul" class="dropdown-menu">
-                    <li id="no-filters"><a class="dropdown-item popup-click" href="#" data-href="html/options.html">No Saved Filters</a></li>
+                    <li id="no-filters"><a class="dropdown-item" href="#" data-href="options">No Saved Filters</a></li>
                 </ul>
             </div>
         </div>
@@ -30,7 +30,7 @@
 <!--                <input type="text" id="flags-input" class="form-control w-25" placeholder="Flags" aria-label="Flags">-->
 <!--            </div>-->
         </form>
-        <button id="btn-domains" class="btn btn-primary btn-sm popup-click" type="button">Only Domains</button>
+        <button id="btn-domains" class="btn btn-primary btn-sm" type="button">Only Domains</button>
         <hr class="my-0">
         <form id="links-form" class="my-0">
             <label for="links-text" class="form-label visually-hidden">Open Links</label>
@@ -57,15 +57,16 @@
             </label>
         </div>
 
-        <a class="btn btn-outline-info btn-sm popup-click" role="button" data-href="html/options.html">
+        <a class="btn btn-outline-info btn-sm" role="button" data-href="options">
             Options
             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-gear-fill ms-1" viewBox="0 0 16 16">
                 <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
             </svg>
         </a>
         <p class="mb-0 text-center small">
-            <a id="btn-about" class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover popup-click" type="button" rel="noopener"
-               data-href="">Link Extractor</a> v<span id="version"></span>
+            <img class="" src="../images/logo16.png" alt="Link Extractor" width="16" height="16">
+            <a class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover" type="button" rel="noopener"
+               data-href="homepage">Link Extractor</a> v<span id="version"></span>
         </p>
     </div>
 </div>

diff --git a/src/js/links.js b/src/js/links.js
@@ -191,8 +191,7 @@ function handleKeybinds(event) {
         } else if (checkKey(event, ['KeyD', 'KeyM'])) {
             document.getElementById('copy-domains').click()
         } else if (checkKey(event, ['KeyT', 'KeyO'])) {
-            const url = chrome.runtime.getURL('../html/options.html')
-            chrome.tabs.create({ active: true, url: url }).then()
+            chrome.runtime.openOptionsPage()
         } else if (checkKey(event, ['KeyF', 'KeyI'])) {
             event.preventDefault() // prevent typing f on focus
             document.getElementById('filter-links').focus()

diff --git a/src/js/options.js b/src/js/options.js
@@ -15,12 +15,8 @@ document.getElementById('reset-default').addEventListener('click', resetForm)
     })
 })
 
-const tooltipTriggerList = document.querySelectorAll(
-    '[data-bs-toggle="tooltip"]'
-)
-const tooltipList = [...tooltipTriggerList].map(
-    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
-)
+const toolTips = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+const tooltipList = [...toolTips].map((el) => new bootstrap.Tooltip(el))
 
 /**
  * Options Page Init

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -3,31 +3,25 @@
 import { injectTab } from './exports.js'
 
 document.addEventListener('DOMContentLoaded', initPopup)
-document.getElementById('filter-form').addEventListener('submit', popupClick)
+document.getElementById('filter-form').addEventListener('submit', popLinks)
 document.getElementById('links-form').addEventListener('submit', linksForm)
 document.getElementById('links-text').addEventListener('input', updateLinks)
 document
     .getElementById('defaultFilter')
     .addEventListener('change', updateOptions)
 
-const buttons = document.querySelectorAll('.popup-click')
-buttons.forEach((el) => el.addEventListener('click', popupClick))
+const popupLinks = document.querySelectorAll('[data-href]')
+popupLinks.forEach((el) => el.addEventListener('click', popLinks))
 
-const tooltipTriggerList = document.querySelectorAll(
-    '[data-bs-toggle="tooltip"]'
-)
-const tooltipList = [...tooltipTriggerList].map(
-    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
-)
-
-const filterInput = document.getElementById('filter-input')
-filterInput.focus()
+const toolTips = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+const tooltipList = [...toolTips].map((el) => new bootstrap.Tooltip(el))
 
 /**
  * Popup Action Init
  * @function initOptions
  */
 async function initPopup() {
+    document.getElementById('filter-input').focus()
     const { options, patterns } = await chrome.storage.sync.get([
         'options',
         'patterns',
@@ -58,36 +52,39 @@ function createFilterLink(number, value = '') {
     a.textContent = value.substring(0, 24)
     a.href = '#'
     a.classList.add('dropdown-item', 'small')
-    a.addEventListener('click', popupClick)
+    a.addEventListener('click', popLinks)
     li.appendChild(a)
 }
 
 /**
- * Handle Popup Clicks
- * @function popupClick
+ * Popup Links Click Callback
+ * Firefox requires a call to window.close()
+ * @function popLinks
  * @param {MouseEvent} event
  */
-async function popupClick(event) {
-    console.log('popupClick:', event)
+async function popLinks(event) {
+    console.log('popLinks:', event)
     event.preventDefault()
     const anchor = event.target.closest('a')
     if (anchor?.dataset?.href) {
         let url
         if (anchor.dataset.href.startsWith('http')) {
             url = anchor.dataset.href
+        } else if (anchor.dataset.href === 'homepage') {
+            url = chrome.runtime.getManifest().homepage_url
+        } else if (anchor.dataset.href === 'options') {
+            chrome.runtime.openOptionsPage()
+            return window.close()
         } else {
             url = chrome.runtime.getURL(anchor.dataset.href)
         }
-        console.log(`url: ${url}`)
-        await chrome.tabs.create({ active: true, url })
-        return window.close()
-    }
-    if (event.target.id === 'btn-about') {
-        const url = chrome.runtime.getManifest().homepage_url
+        console.log('url:', url)
+        if (!url) {
+            return console.error('No dataset.href for anchor:', anchor)
+        }
         await chrome.tabs.create({ active: true, url })
         return window.close()
     }
-
     let filter
     if (event.target.classList.contains('dropdown-item')) {
         console.log(`event.target.textContent: ${event.target.textContent}`)

diff --git a/src/js/service-worker.js b/src/js/service-worker.js
@@ -35,8 +35,7 @@ async function onInstalled(details) {
         createContextMenus(patterns)
     }
     if (details.reason === 'install') {
-        const url = chrome.runtime.getURL('/html/options.html')
-        await chrome.tabs.create({ active: true, url })
+        chrome.runtime.openOptionsPage()
     } else if (options.showUpdate && details.reason === 'update') {
         const manifest = chrome.runtime.getManifest()
         if (manifest.version !== details.previousVersion) {
@@ -59,8 +58,7 @@ async function onInstalled(details) {
 async function onClicked(ctx, tab) {
     console.log('onClicked:', ctx, tab)
     if (['options', 'filters'].includes(ctx.menuItemId)) {
-        const url = chrome.runtime.getURL('/html/options.html')
-        await chrome.tabs.create({ active: true, url })
+        chrome.runtime.openOptionsPage()
     } else if (ctx.menuItemId === 'links') {
         console.log('injectTab: links')
         await injectTab(null, null, null)