Add Toasts and Keybinds to Links (#13)

* Add Toasts and Keybinds to Links

* Added left/right hand keybinds

.github/workflows/build.yaml

@@ -81,3 +81,25 @@ jobs:
           tag: ${{ github.ref }}
           overwrite: true
           file_glob: true
+
+#      - name: "Upload to Mozilla Addons"
+#        # https://github.com/marketplace/actions/firefox-addon-action
+#        if: ${{ github.event_name == 'release' }}
+#        uses: trmcnvn/firefox-addon@v1
+#        with:
+#          uuid: link-extractor@cssnr.com
+#          xpi: web-ext-artifacts/${{ steps.manifest.outputs.package_name }}-${{ steps.manifest.outputs.version }}.xpi
+#          manifest: src/manifest.json
+#          api-key: ${{ secrets.FIREFOX_API_KEY }}
+#          api-secret: ${{ secrets.FIREFOX_API_SECRET }}
+#
+#      - name: "Upload to Chrome Web Store"
+#        # https://github.com/marketplace/actions/chrome-extension-upload-action
+#        if: ${{ github.event_name == 'release' }}
+#        uses: mnao305/chrome-extension-upload@v4.0.1
+#        with:
+#          file-path: web-ext-artifacts/${{ steps.manifest.outputs.package_name }}-${{ steps.manifest.outputs.version }}.zip
+#          extension-id: ifefifghpkllfibejafbakmflidjcjfp
+#          client-id: ${{ secrets.CLIENT_ID }}
+#          client-secret: ${{ secrets.CLIENT_SECRET }}
+#          refresh-token: ${{ secrets.REFRESH_TOKEN }}

src/css/main.css

@@ -0,0 +1,8 @@
+.toast {
+    max-width: 260px;
+}
+
+#bottom-container {
+    margin-bottom: 50px;
+    margin-right: 25px;
+}

src/css/options.css

@@ -1,8 +0,0 @@
-#bottom-container {
-    margin-bottom: 50px;
-    margin-right: 25px;
-}
-
-.toast {
-    max-width: 260px;
-}

src/css/popup.css

@@ -1,7 +1,7 @@
 body {
-  width: 280px;
+    width: 280px;
 }
 
 input::placeholder {
-  text-align: center;
+    text-align: center;
 }

src/html/links.html

@@ -4,6 +4,7 @@
     <title>Link Extractor</title>
     <link rel="icon" href="../images/logo16.png" sizes="any">
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../css/main.css">
     <link rel="stylesheet" type="text/css" href="../css/links.css">
     <script type="text/javascript" src="../js/theme.js"></script>
 </head>
@@ -12,30 +13,56 @@
 <div class="container-fluid p-3">
     <h2 id="message">Loading...</h2>
 
-    <div id="links-div" style="display: none">
+    <div class="links" style="display: none">
         <h2>Links</h2>
         <a id="links-clip" class="clip btn btn-sm btn-outline-success mb-2" role="button" data-clipboard-text="">
-            Copy Links</a>
+            Copy Links</a> Press <kbd>C</kbd> or <kbd>L</kbd> to Copy Links.
         <table id="links" class="table table-sm table-striped table-hover">
             <caption class="visually-hidden">Links</caption>
             <tbody></tbody>
         </table>
     </div>
 
-    <div id="domains-div" style="display: none">
+    <div class="domains" style="display: none">
     <h2>Domains</h2>
         <a id="domains-clip" class="clip btn btn-sm btn-outline-primary mb-2" role="button" data-clipboard-text="">
-            Copy Domains</a>
+            Copy Domains</a> Press <kbd>D</kbd> or <kbd>M</kbd> to Copy Domains.
         <table id="domains" class="table table-sm table-striped table-hover">
             <caption class="visually-hidden">Domains</caption>
             <tbody></tbody>
         </table>
     </div>
 </div>
 
+<div id="bottom-container" class="position-fixed bottom-0 end-0">
+    <div id="toast-container" class=""></div>
+</div>
+
+<div id="keybinds-modal" class="modal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Keyboard Shortcuts</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col">
+                        <p><kbd>C</kbd> or <kbd>L</kbd> Copy All Links</p>
+                        <p><kbd>D</kbd> or <kbd>M</kbd> Copy All Domains</p>
+                        <p><kbd>T</kbd> or <kbd>O</kbd> Open Options</p>
+                        <p><kbd>Z</kbd> or <kbd>K</kbd> Keyboard Shortcuts</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>
 <script type="text/javascript" src="../dist/bootstrap/bootstrap.bundle.min.js"></script>
 <script type="text/javascript" src="../dist/clipboard/clipboard.min.js"></script>
+<script type="text/javascript" src="../js/main.js"></script>
 <script type="text/javascript" src="../js/links.js"></script>
 
 </body>

src/html/options.html

@@ -4,6 +4,7 @@
     <title>Link Extractor Options</title>
     <link rel="icon" href="../images/logo16.png" sizes="any">
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../css/main.css">
     <link rel="stylesheet" type="text/css" href="../css/options.css">
     <script type="text/javascript" src="../js/theme.js"></script>
 </head>
@@ -61,6 +62,7 @@ <h1 class="text-center">Link Extractor Options</h1>
 <script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>
 <script type="text/javascript" src="../dist/bootstrap/bootstrap.bundle.min.js"></script>
 <script type="text/javascript" src="../dist/clipboard/clipboard.min.js"></script>
+<script type="text/javascript" src="../js/main.js"></script>
 <script type="text/javascript" src="../js/options.js"></script>
 
 </body>

src/js/links.js

@@ -1,6 +1,6 @@
 // JS for links.html
 
-new ClipboardJS('.clip')
+window.addEventListener('keydown', checkKey)
 
 const urlParams = new URLSearchParams(window.location.search)
 const tabId = parseInt(urlParams.get('tab'))
@@ -57,7 +57,8 @@ async function processLinks(links) {
         document
             .getElementById('links-clip')
             .setAttribute('data-clipboard-text', items.join('\n'))
-        document.getElementById('links-div').style.display = 'block'
+        const linksElements = document.querySelectorAll('.links')
+        linksElements.forEach((el) => (el.style.display = 'block'))
         updateTable(items, 'links')
     }
 
@@ -67,12 +68,13 @@ async function processLinks(links) {
         .getElementById('domains-clip')
         .setAttribute('data-clipboard-text', domains.join('\n'))
     if (domains.length) {
-        document.getElementById('domains-div').style.display = 'block'
+        const domainsElements = document.querySelectorAll('.domains')
+        domainsElements.forEach((el) => (el.style.display = 'block'))
         updateTable(domains, 'domains')
     }
 
     // Hide Loading message
-    document.getElementById('message').style.display = 'None'
+    document.getElementById('message').style.display = 'none'
 }
 
 /**
@@ -85,7 +87,7 @@ function updateTable(data, elementId) {
     const tbody = document
         .getElementById(elementId)
         .getElementsByTagName('tbody')[0]
-    data.forEach(function (url, i) {
+    data.forEach(function (url) {
         const link = document.createElement('a')
         link.text = url
         link.href = url
@@ -110,3 +112,25 @@ function getBaseURL(link) {
         return `http://${result[2] || result[3]}/`
     }
 }
+
+/**
+ * Keyboard Callback
+ * @function checkKey
+ * @param {onkeydown} event
+ */
+function checkKey(event) {
+    const formElements = ['INPUT', 'TEXTAREA', 'SELECT', 'OPTION']
+    if (!formElements.includes(event.target.tagName)) {
+        console.log(event.keyCode)
+        if (event.keyCode === 67 || event.keyCode === 76) {
+            document.getElementById('links-clip').click() // C|L
+        } else if (event.keyCode === 68 || event.keyCode === 77) {
+            document.getElementById('domains-clip').click() // D|M
+        } else if (event.keyCode === 84 || event.keyCode === 79) {
+            const url = chrome.runtime.getURL('../html/options.html')
+            chrome.tabs.create({ active: true, url: url }).then() // T|O
+        } else if (event.keyCode === 90 || event.keyCode === 75) {
+            $('#keybinds-modal').modal('toggle') // Z|K
+        }
+    }
+}

src/js/main.js

@@ -0,0 +1,43 @@
+// JS for links.html and options.html
+
+const clipboard = new ClipboardJS('.clip')
+
+clipboard.on('success', function (event) {
+    console.info('event:', event)
+    if (event.trigger.id === 'links-clip') {
+        showToast('Links Copied')
+    } else if (event.trigger.id === 'domains-clip') {
+        showToast('Domains Copied')
+    } else {
+        showToast('Copied to Clipboard')
+    }
+})
+
+clipboard.on('error', function (event) {
+    console.error('event:', event)
+    showToast('Clipboard Copy Failed', 'warning')
+})
+
+/**
+ * Show Bootstrap Toast
+ * Requires: jQuery
+ * @function showToast
+ * @param {String} message
+ * @param {String} bsClass
+ */
+function showToast(message, bsClass = 'success') {
+    // TODO: Remove jQuery Dependency
+    const toastEl = $(
+        '<div class="toast align-items-center border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">\n' +
+            '    <div class="d-flex">\n' +
+            '        <div class="toast-body">Options Saved</div>\n' +
+            '        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>\n' +
+            '    </div>\n' +
+            '</div>'
+    )
+    toastEl.find('.toast-body').text(message)
+    toastEl.addClass('text-bg-' + bsClass)
+    $('#toast-container').append(toastEl)
+    const toast = new bootstrap.Toast(toastEl)
+    toast.show()
+}

src/js/options.js

@@ -126,30 +126,6 @@ async function saveOptions(event) {
     showToast('Options Saved')
 }
 
-/**
- * Show Bootstrap Toast
- * Requires: jQuery
- * @function showToast
- * @param {String} message
- * @param {String} bsClass
- */
-function showToast(message, bsClass = 'success') {
-    // TODO: Remove jQuery Dependency
-    const toastEl = $(
-        '<div class="toast align-items-center border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">\n' +
-            '    <div class="d-flex">\n' +
-            '        <div class="toast-body">Options Saved</div>\n' +
-            '        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>\n' +
-            '    </div>\n' +
-            '</div>'
-    )
-    toastEl.find('.toast-body').text(message)
-    toastEl.addClass('text-bg-' + bsClass)
-    $('#toast-container').append(toastEl)
-    const toast = new bootstrap.Toast(toastEl)
-    toast.show()
-}
-
 /**
  * Reset Options Form Click Callback
  * @function resetForm

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "Link Extractor",
   "description": "Modern Chrome and Firefox Addon to extract all links from a web page with optional filters.",
   "homepage_url": "https://github.com/cssnr/link-extractor",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "manifest_version": 3,
   "permissions": [
     "activeTab",