Improve Popup and Options (#11)

smashedr · web-flow · commit 80206f80008d · 2023-12-02T15:12:56.000-08:00
* Add Loading Spinner to Popup

* Add Copy Indicator and Disable Ability

* Add openOptionsPage and update popLinks

* Fix Disabled Uploads and Error Messages

* Improve popLinks

* Update popLinks

* Improve processRemote Error Handling
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "version": "0.2.2",
+  "version": "0.2.3",
   "name": "Django Files",
   "description": "Django Files Web Extension designed to work with django-files/django-files.",
   "homepage_url": "https://github.com/django-files/web-extension",
diff --git a/src/html/options.html b/src/html/options.html
@@ -47,7 +47,7 @@ <h1 class="align-middle">Django Files Extension</h1>
                         <div class="mb-2">
                             <label for="recentFiles" class="form-label">Recent Files</label>
                             <input type="number" class="form-control" id="recentFiles" aria-describedby="recentFilesHelp" autocomplete="off">
-                            <div id="recentFilesHelp" class="form-text">Number of Recent Files in Popup.</div>
+                            <div id="recentFilesHelp" class="form-text">Number of Recent Files in Popup (0 to disable).</div>
                         </div>
                         <div class="form-check form-switch mb-2">
                             <input class="form-check-input" type="checkbox" role="switch" id="contextMenu">
diff --git a/src/html/popup.html b/src/html/popup.html
@@ -22,10 +22,17 @@ <h2>Django Files Extension</h2>
             <a role="button" class="btn btn-outline-success" data-href="" data-location="/gallery/">
                 <i class="fa-regular fa-images me-2"></i> Gallery</a>
         </div>
-        <a class="btn btn-outline-primary btn-sm my-1" role="button" data-href="../html/options.html">
+        <a class="btn btn-outline-primary btn-sm my-1" role="button" data-href="options">
             <i class="fa-solid fa-gear me-2"></i> Open Options</a>
     </div>
-    <p class="mb-0">Recent Uploads:</p>
+    <p class="mb-0" id="recent-uploads">Recent Uploads:</p>
+
+    <div class="d-flex justify-content-center mt-2" id="loading-spinner">
+        <span class="visually-hidden">Loading...</span>
+        <div class="spinner-grow mx-1" role="status"></div>
+        <div class="spinner-grow mx-1" role="status"></div>
+        <div class="spinner-grow mx-1" role="status"></div>
+    </div>
     <table id="recent" class="table table-striped table-sm mb-0 ">
         <caption class="visually-hidden">Recent Uploads</caption>
         <thead class="visually-hidden"><tr><th>Number</th><th>File URL</th></tr></thead>
diff --git a/src/js/exports.js b/src/js/exports.js
@@ -6,27 +6,21 @@
  */
 export function createContextMenus() {
     console.log('createContextMenus')
+    const ctx = ['link', 'image', 'video', 'audio']
     const contexts = [
-        [['link'], 'short', 'Create Short URL'],
-        [['image'], 'upload-image', 'Upload Image'],
-        [['video'], 'upload-video', 'Upload Video'],
-        [['audio'], 'upload-audio', 'Upload Audio'],
-        [['link', 'image', 'video', 'audio'], 'separator', 'separator-1'],
-        [['link', 'image', 'video', 'audio'], 'options', 'Open Options'],
+        [['link'], 'short', 'normal', 'Create Short URL'],
+        [['image'], 'upload-image', 'normal', 'Upload Image'],
+        [['video'], 'upload-video', 'normal', 'Upload Video'],
+        [['audio'], 'upload-audio', 'normal', 'Upload Audio'],
+        [ctx, 'separator-1', 'separator', 'separator'],
+        [ctx, 'options', 'normal', 'Open Options'],
     ]
-    for (const context of contexts) {
-        if (context[1].startsWith('separator')) {
-            chrome.contextMenus.create({
-                type: context[1],
-                contexts: context[0],
-                id: context[2],
-            })
-        } else {
-            chrome.contextMenus.create({
-                title: context[2],
-                contexts: context[0],
-                id: context[1],
-            })
-        }
-    }
+    contexts.forEach((context) => {
+        chrome.contextMenus.create({
+            contexts: context[0],
+            id: context[1],
+            type: context[2],
+            title: context[3],
+        })
+    })
 }
diff --git a/src/js/popup.js b/src/js/popup.js
@@ -2,9 +2,8 @@
 
 document.addEventListener('DOMContentLoaded', initPopup)
 
-document.querySelectorAll('[data-href]').forEach((el) => {
-    el.addEventListener('click', popupLink)
-})
+const popupLinks = document.querySelectorAll('[data-href]')
+popupLinks.forEach((el) => el.addEventListener('click', popLinks))
 
 /**
  * Popup Init Function
@@ -19,6 +18,16 @@ async function initPopup() {
         return displayError('Missing URL or Token.')
     }
     document.getElementById('django-files-links').style.display = 'flex'
+    console.log('options.recentFiles:', options.recentFiles)
+    if (options.recentFiles === '0') {
+        document
+            .getElementById('loading-spinner')
+            .classList.add('visually-hidden')
+        document
+            .getElementById('recent-uploads')
+            .classList.add('visually-hidden')
+        return console.log('Recent Files Disabled. Enable in Options.')
+    }
 
     let opts = {
         method: 'GET',
@@ -38,6 +47,8 @@ async function initPopup() {
     }
     console.log(`response.status: ${response.status}`, response, data)
 
+    document.getElementById('loading-spinner').classList.add('visually-hidden')
+
     if (!response.ok) {
         console.warn('error: ' + data['error'])
         return displayError(data['error'])
@@ -52,32 +63,42 @@ async function initPopup() {
     updateTable(data)
 
     const clipboard = new ClipboardJS('.clip') // eslint-disable-line
+    // Re-Initialize data-href after updateTable
     document.querySelectorAll('[data-href]').forEach((el) => {
-        el.addEventListener('click', popupLink)
+        el.addEventListener('click', popLinks)
     })
 }
 
 /**
- * Popup Links Callback
- * because firefox needs us to call window.close() from the popup
- * @function popupLink
+ * Popup Links Click Callback
+ * Firefox requires a call to window.close()
+ * @function popLinks
  * @param {MouseEvent} event
  */
-async function popupLink(event) {
-    console.log('popupLink:', event)
-    const { auth } = await chrome.storage.sync.get(['auth'])
-    let url
+async function popLinks(event) {
+    console.log('popLinks:', event)
+    event.preventDefault()
     const anchor = event.target.closest('a')
+    let url
     if (anchor?.dataset?.location) {
+        const { auth } = await chrome.storage.sync.get(['auth'])
         url = auth?.url + anchor.dataset.location
-    } else if (anchor?.dataset?.href.startsWith('http')) {
+    } else if (anchor.dataset.href.startsWith('http')) {
         url = anchor.dataset.href
-    } else {
+    } 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 if (anchor?.dataset?.href) {
         url = chrome.runtime.getURL(anchor.dataset.href)
     }
-    console.log(`url: ${url}`)
+    console.log('url:', url)
+    if (!url) {
+        return console.error('No dataset.href for anchor:', anchor)
+    }
     await chrome.tabs.create({ active: true, url })
-    window.close()
+    return window.close()
 }
 
 /**
@@ -117,18 +138,38 @@ function updateTable(data) {
         copyBtn.setAttribute('role', 'button')
         copyBtn.classList.add('clip')
         copyBtn.dataset.clipboardText = value
-        copyBtn.innerHTML = '<i class="fa-regular fa-clipboard text-white"></i>'
+        copyBtn.innerHTML = '<i class="fa-regular fa-clipboard"></i>'
+        copyBtn.classList.add('link-body-emphasis')
+        copyBtn.onclick = clipClick
         const cell3 = row.insertCell()
         cell3.appendChild(copyBtn)
     })
 }
 
+/**
+ * Clipboard Click Callback
+ * @function clipClick
+ * @param {MouseEvent} event
+ */
+function clipClick(event) {
+    console.log('clipClick:', event)
+    const element = event.target.closest('a')
+    console.log('element:', element)
+    element.classList.add('link-success')
+    element.classList.remove('link-body-emphasis')
+    setTimeout(() => {
+        element.classList.add('link-body-emphasis')
+        element.classList.remove('link-success')
+    }, 500)
+}
+
 /**
  * Display Popup Error Message
  * @function displayError
  * @param {String} message
  */
 function displayError(message) {
+    document.getElementById('loading-spinner').classList.add('visually-hidden')
     let div = document.getElementById('error-alert')
     div.innerHTML = message
     div.style.display = 'block'
diff --git a/src/js/service-worker.js b/src/js/service-worker.js
@@ -33,8 +33,7 @@ async function onInstalled(details) {
         createContextMenus()
     }
     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) {
@@ -68,8 +67,7 @@ async function contextMenuClick(ctx) {
             await processRemote('shorten', ctx.linkUrl, 'Short Created')
         }
     } else if (ctx.menuItemId === 'options') {
-        const url = chrome.runtime.getURL('/html/options.html')
-        await chrome.tabs.create({ active: true, url })
+        chrome.runtime.openOptionsPage()
     } else {
         console.warn('Action not handled.')
     }
@@ -102,17 +100,27 @@ async function processRemote(endpoint, url, message) {
     try {
         response = await postURL(endpoint, url)
     } catch (error) {
-        await sendNotification('Fetch Error', 'Error: ' + error.message)
+        console.log('error:', error)
+        return await sendNotification('Fetch Error', 'Error: ' + error.message)
     }
-    const data = await response.json()
-    console.log(data)
+    console.log('response:', response)
     if (response.ok) {
-        console.log(data['url'])
-        await clipboardWrite(data['url'])
-        await sendNotification(message, data['url'])
+        const data = await response.json()
+        console.log('data:', data)
+        await clipboardWrite(data.url)
+        await sendNotification(message, data.url)
     } else {
-        console.log(data['error'])
-        await sendNotification('Processing Error', 'Error: ' + data['error'])
+        try {
+            const data = await response.json()
+            console.log('data:', data)
+            await sendNotification('Processing Error', `Error: ${data.error}`)
+        } catch (error) {
+            console.log('error:', error)
+            await sendNotification(
+                'Processing Error',
+                `Error: Response Status: ${response.status}`
+            )
+        }
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"manifest_version": 3,`
`3`		`- "version": "0.2.2",`
	`3`	`+ "version": "0.2.3",`
`4`	`4`	`"name": "Django Files",`
`5`	`5`	`"description": "Django Files Web Extension designed to work with django-files/django-files.",`
`6`	`6`	`"homepage_url": "https://github.com/django-files/web-extension",`