Minor Updates (#53)

* Minor Updates * Minor Updates * Updates and Add DataTables Options
cssnr · Dec 23, 2023 · fe7337c · fe7337c
1 parent 4f2e338
commit fe7337c
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 42 deletions.
diff --git a/src/html/links.html b/src/html/links.html
@@ -38,13 +38,13 @@
     <h2 id="loading-message" class="user-select-none d-none">Loading...</h2>
     <div class="links d-none">
         <div class="user-select-none">
-            <h2 id="links">Links <span class="badge bg-success-subtle"><span id="links-count"></span>/<span id="links-total"></span></span></h2>
+            <h2 id="links">Links <span class="badge bg-success-subtle"><span id="links-count">0</span>/<span id="links-total"></span></span></h2>
             <a id="copy-links" class="btn btn-sm btn-success clip me-1 mb-2" role="button" data-clipboard-target="#links-body" data-toast="Copied Links">
                 Copy Links <i class="fa-solid fa-copy ms-1"></i></a>
             <a id="down-links" class="btn btn-sm btn-outline-info download-file me-1 mb-2" role="button" data-target="#links-body" data-filename="links.txt">
                 Download <i class="fa-solid fa-download m-1"></i></a>
-            <button type="button" id="open-links" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-2 mb-2" data-target="#links-body">
-                Open <i class="fa-solid fa-up-right-from-square ms-1"></i></button>
+            <a id="open-links" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-2 mb-2" type="button" data-target="#links-body">
+                Open <i class="fa-solid fa-up-right-from-square ms-1"></i></a>
             <span class="d-inline-block me-1 mb-2">
                 <kbd>C</kbd> <i class="fa-regular fa-keyboard"></i> <kbd>L</kbd> to Copy Links.</span>
         </div>
@@ -64,13 +64,13 @@ <h2 id="links">Links <span class="badge bg-success-subtle"><span id="links-count
 
     <div class="domains d-none">
         <div class="user-select-none">
-            <h2 id="domains">Domains <span class="badge bg-primary-subtle"><span id="domains-count"></span>/<span id="domains-total"></span></span></h2>
+            <h2 id="domains">Domains <span class="badge bg-primary-subtle"><span id="domains-count">0</span>/<span id="domains-total"></span></span></h2>
             <a id="copy-domains" class="btn btn-sm btn-primary clip me-1 mb-2" role="button" data-clipboard-target="#domains-body" data-toast="Copied Domains">
                 Copy Domains <i class="fa-solid fa-copy ms-1"></i></a>
             <a id="down-domains" class="btn btn-sm btn-outline-info download-file me-1 mb-2" role="button" data-target="#domains-body" data-filename="domains.txt">
                 Download <i class="fa-solid fa-download ms-1"></i></a>
-            <button type="button" id="open-domains" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-2 mb-2" data-target="#domains-body">
-                Open <i class="fa-solid fa-up-right-from-square ms-1"></i></button>
+            <a id="open-domains" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-2 mb-2" type="button" data-target="#domains-body">
+                Open <i class="fa-solid fa-up-right-from-square ms-1"></i></a>
             <span class="d-inline-block me-1 mb-2">
                 <kbd>D</kbd> <i class="fa-regular fa-keyboard"></i> <kbd>M</kbd> to Copy Domains.</span>
         </div>

diff --git a/src/html/options.html b/src/html/options.html
@@ -25,7 +25,7 @@ <h1>Link Extractor</h1>
     <div class="clearfix"></div>
     <p class="text-center lead">v<span id="version"></span></p>
 
-    <table class="table table-sm table-borderless">
+    <table class="table table-sm table-borderless table-hover">
         <caption class="visually-hidden">Keyboard Shortcuts</caption>
         <thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
         <tbody>
@@ -41,15 +41,37 @@ <h1>Link Extractor</h1>
     </table>
 
     <form id="options-form" class="mb-3">
-        <label for="flags" class="form-label">Regex Flags</label>
-        <a id="reset-default" class="float-end align-bottom small" role="button">Reset to Default</a>
-        <input type="text" id="flags" class="form-control form-control-sm" aria-describedby="flagsHelp">
-        <div id="flagsInvalid" class="invalid-feedback">Invalid Regex Flags.</div>
-        <div id="flagsHelp" class="form-text mb-3">
-            Flags used when using a filter.
-            <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags" target="_blank" rel="noopener">
-                Available Flags</a>.
+        <div class="row">
+            <div class="col-sm-6 col-12 mb-2">
+                <label for="linksDisplay" class="form-label"><i class="fa-solid fa-list-ol me-2"></i> Links to Show</label>
+                <select id="linksDisplay" class="form-control form-select" aria-label="Number of Links" aria-describedby="linksDisplayHelp">
+                    <option value="-1" selected>All</option>
+                    <option value="10">10</option>
+                    <option value="25">25</option>
+                    <option value="50">50</option>
+                    <option value="100">100</option>
+                    <option value="250">250</option>
+                    <option value="500">500</option>
+                    <option value="1000">1000</option>
+                </select>
+                <div class="form-text" id="linksDisplayHelp">Initial # of Links to Show.</div>
+            </div>
+            <div class="col-sm-6 col-12 mb-2">
+                <label for="flags" class="form-label"><i class="fa-solid fa-code me-2"></i> Regex Flags</label>
+                <a id="reset-default" class="float-end align-bottom small" role="button">Reset</a>
+                <input id="flags" aria-describedby="flagsHelp" type="text" class="form-control" autocomplete="off">
+                <div id="flagsInvalid" class="invalid-feedback">Invalid Regex Flags.</div>
+                <div class="form-text" id="flagsHelp">
+                    Regex Flags for Filtering.
+<!--                    <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Regex Flags Used When Filtering Links.">-->
+<!--                        <i class="fa-solid fa-circle-info ms-1"></i>-->
+<!--                    </span>-->
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags" target="_blank" rel="noopener">
+                        <i class="fa-solid fa-arrow-up-right-from-square ms-2"></i></a>
+                </div>
+            </div>
         </div>
+
         <div class="form-check form-switch">
             <input class="form-check-input form-control" type="checkbox" role="switch" id="contextMenu">
             <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
@@ -79,7 +101,9 @@ <h1>Link Extractor</h1>
         </div>
     </form>
 
+    <hr>
     <form id="filters-form">
+        <label class="form-label" for="add-filter"><i class="fa-solid fa-filter me-2"></i> Filters</label>
         <div class="input-group mb-3">
             <input type="text" class="form-control" placeholder="Add Filter" aria-label="Filter" id="add-filter" aria-describedby="add-filter-btn">
             <button class="btn btn-outline-success" type="submit" id="add-filter-btn">

diff --git a/src/js/links.js b/src/js/links.js
@@ -19,8 +19,8 @@ const dtOptions = {
     order: [[0, 'asc']],
     pageLength: -1,
     lengthMenu: [
-        [10, 25, 50, 100, 250, -1],
-        [10, 25, 50, 100, 250, 'All'],
+        [-1, 10, 25, 50, 100, 250, 500, 1000],
+        ['All', 10, 25, 50, 100, 250, 500, 1000],
     ],
     language: {
         emptyTable: '',
@@ -108,10 +108,15 @@ async function processLinks(links) {
         return window.close()
     }
 
+    // Set custom DataTables options
+    if (options.linksDisplay !== undefined) {
+        dtOptions.pageLength = options.linksDisplay
+    }
+
     // Update links if onlyDomains is not set
     if (!onlyDomains) {
-        document.getElementById('links-count').textContent =
-            items.length.toString()
+        // document.getElementById('links-count').textContent =
+        //     items.length.toString()
         document.getElementById('links-total').textContent =
             items.length.toString()
         const linksElements = document.querySelectorAll('.links')
@@ -124,8 +129,8 @@ async function processLinks(links) {
     domains = domains.filter(function (el) {
         return el != null
     })
-    document.getElementById('domains-count').textContent =
-        domains.length.toString()
+    // document.getElementById('domains-count').textContent =
+    //     domains.length.toString()
     document.getElementById('domains-total').textContent =
         domains.length.toString()
     if (domains.length) {
@@ -182,8 +187,10 @@ function updateTable(links, selector) {
     // console.log('data:', data)
     // dtOptions['data'] = data
 
-    const table = new DataTable(selector, dtOptions)
-    table.on('draw.dt', debounce(dtDraw, 150))
+    // const table = new DataTable(selector, dtOptions)
+    // dtDraw()
+    // table.on('draw.dt init.dt', dtDraw)
+    $(selector).on('draw.dt', debounce(dtDraw, 150)).DataTable(dtOptions)
 }
 
 /**
@@ -193,8 +200,7 @@ function updateTable(links, selector) {
  */
 function openLinksClick(event) {
     console.log('openLinksClick:', event)
-    const element = document.querySelector(event.target.dataset.target)
-    const links = element.innerText.trim()
+    const links = getTargetText(event)
     console.log('links:', links)
     if (links) {
         links.split('\n').forEach(function (url) {
@@ -212,9 +218,7 @@ function openLinksClick(event) {
  */
 function downloadFileClick(event) {
     console.log('downloadFileClick:', event)
-    const element = document.querySelector(event.target.dataset.target)
-    const links = element.innerText.trim()
-    console.log('links:', links)
+    const links = getTargetText(event)
     if (links) {
         download(event.target.dataset.filename, links)
         showToast('Download Started.')
@@ -223,6 +227,21 @@ function downloadFileClick(event) {
     }
 }
 
+/**
+ * Download Links Button Click Callback
+ * @function downloadFileClick
+ * @param {KeyboardEvent} event
+ * @return {String}
+ */
+function getTargetText(event) {
+    // console.log('getTargetText:', event)
+    const target = event.target?.closest('a')
+    console.log('target:', target)
+    const element = document.querySelector(target?.dataset?.target)
+    console.log('element:', element)
+    return element?.innerText?.trim()
+}
+
 /**
  * Download filename with text
  * @function download
@@ -256,14 +275,14 @@ function handleKeyboard(e) {
     if (['INPUT', 'TEXTAREA', 'SELECT', 'OPTION'].includes(e.target.tagName)) {
         return
     }
-    if (['KeyC', 'KeyL'].includes(e.code)) {
+    if (['KeyZ', 'KeyK'].includes(e.code)) {
+        bootstrap.Modal.getOrCreateInstance('#keybinds-modal').toggle()
+    } else if (['KeyC', 'KeyL'].includes(e.code)) {
         document.getElementById('copy-links').click()
     } else if (['KeyD', 'KeyM'].includes(e.code)) {
         document.getElementById('copy-domains').click()
     } else if (['KeyT', 'KeyO'].includes(e.code)) {
         chrome.runtime.openOptionsPage()
-    } else if (['KeyZ', 'KeyK'].includes(e.code)) {
-        bootstrap.Modal.getOrCreateInstance('#keybinds-modal').toggle()
     }
 }
 

diff --git a/src/js/main.js b/src/js/main.js
@@ -56,7 +56,7 @@ function onScroll() {
 function showToast(message, type = 'success') {
     const el = $('#toast-container')
     if (!message || !el.length) {
-        return
+        return console.log('No message or #toast-container', message, el)
     }
     const toast = $(
         '<div class="toast align-items-center border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">' +
@@ -75,15 +75,13 @@ function showToast(message, type = 'success') {
 /**
  * DeBounce Function
  * @function debounce
- * @param {Function} func
+ * @param {Function} fn
  * @param {Number} timeout
  */
-function debounce(func, timeout = 300) {
+function debounce(fn, timeout = 300) {
     let timeoutID
     return (...args) => {
         clearTimeout(timeoutID)
-        timeoutID = setTimeout(() => {
-            func.apply(this, args)
-        }, timeout)
+        timeoutID = setTimeout(() => fn(...args), timeout)
     }
 }
diff --git a/src/js/options.js b/src/js/options.js
@@ -11,7 +11,7 @@ document
 const optionsForm = document.getElementById('options-form')
 optionsForm.addEventListener('submit', (e) => e.preventDefault())
 optionsForm
-    .querySelectorAll('input')
+    .querySelectorAll('input, select')
     .forEach((el) => el.addEventListener('change', saveOptions))
 
 /**
@@ -192,14 +192,15 @@ async function saveOptions(event) {
         }
         element.value = flags
         value = flags
+    } else if (event.target.id === 'linksDisplay') {
+        key = event.target.id
+        value = parseInt(event.target.value)
     } else if (event.target.type === 'checkbox') {
         key = event.target.id
         value = event.target.checked
-    } else if (event.target.type === 'text') {
+    } else {
         key = event.target.id
         value = event.target.value
-    } else {
-        console.warn('Unknown event.target:', event.target)
     }
     if (value !== undefined) {
         options[key] = value
@@ -220,7 +221,7 @@ function updateOptions(options) {
         if (el) {
             if (typeof value === 'boolean') {
                 el.checked = value
-            } else if (typeof value === 'string') {
+            } else {
                 el.value = value
             }
             el.classList.remove('is-invalid')

diff --git a/src/js/service-worker.js b/src/js/service-worker.js
@@ -19,6 +19,7 @@ async function onInstalled(details) {
     const uninstallURL = 'https://link-extractor.cssnr.com/uninstall/'
     const [options, patterns] = await Promise.resolve(
         setDefaultOptions({
+            linksDisplay: -1,
             flags: 'ig',
             contextMenu: true,
             defaultFilter: true,