Update for Firefox Mobile (#50)

* Update for Firefox Mobile * Fix Keyboard Shortcut Name * Cleanup
django-files · Jun 20, 2024 · 1735fe2 · 1735fe2
1 parent 7de544b
commit 1735fe2
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 44 deletions.
diff --git a/manifest.json b/manifest.json
@@ -22,7 +22,7 @@
       "suggested_key": {
         "default": "Alt+Shift+G"
       },
-      "description": "Upload Files"
+      "description": "Open Gallery"
     }
   },
   "permissions": [

diff --git a/src/css/options.css b/src/css/options.css
@@ -16,7 +16,7 @@ video {
 }
 
 .card {
-    min-width: 400px;
+    min-width: 360px;
     background: rgba(0 0 0 / 70%);
 }
 

diff --git a/src/css/popup.css b/src/css/popup.css
@@ -1,7 +1,6 @@
 /* CSS for popup.html */
 
 body {
-    width: 380px;
     overflow-x: hidden;
 }
 

diff --git a/src/html/options.html b/src/html/options.html
@@ -29,7 +29,7 @@ <h1>Django Files Options</h1>
     <div class="clearfix"></div>
     <p class="text-center lead">v<span id="version"></span></p>
 
-    <table id="keyboard-shortcuts" class="table table-sm table-borderless table-hover">
+    <table id="keyboard-shortcuts" class="table table-sm table-borderless table-hover d-none">
         <caption class="visually-hidden">Keyboard Shortcuts</caption>
         <thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
         <tbody>

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -14,7 +14,7 @@
 <body>
 
 <div class="container-fluid p-2">
-    <div class="head mb-1">
+    <div class="head mb-2">
         <div class="form-check form-switch float-start form-select-lg pb-0" style="padding-top: 1px;"
              data-bs-title="Disable/Enable Mouseover Preview." data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-trigger="hover">
             <input class="form-check-input" id="popupPreview" type="checkbox" role="switch">
@@ -25,9 +25,9 @@
         <a id="always-auth" class="d-none btn btn-sm btn-outline-warning float-end add-auth" role="button"
            data-bs-title="Update Authentication with Current Site." data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-trigger="hover">
             <i class="fa-solid fa-key"></i></a>
-        <div class="d-flex align-items-center justify-content-center">
+        <div class="d-flex align-items-center overflow-hidden text-nowrap">
             <a href=""><img src="../media/logo32.png" class="me-1" height="32" width="32" alt="Django Files"></a>
-            <h3 class="my-0"><a class="link-body-emphasis text-decoration-none" href="">Django Files</a></h3>
+            <h4 class="my-0"><a class="link-body-emphasis text-decoration-none" href="">Django Files</a></h4>
         </div>
     </div>
 
@@ -90,31 +90,31 @@ <h3 class="my-0"><a class="link-body-emphasis text-decoration-none" href="">Djan
     </div>
 
     <div class="toast align-items-center border-0 mb-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
-        <div class="toast-body text-break small"></div>
+        <div class="toast-body text-break"></div>
     </div>
 
     <input id="ctx-menu-row" type="hidden" value="">
 
     <ul class="dropdown-menu py-1">
-        <li class="small d-none "><a class="dropdown-item clip copy-link">
+        <li class="d-none "><a class="dropdown-item clip copy-link">
             <i class="fa-solid fa-copy link-body-emphasis me-3"></i> Copy Share Link</a></li>
-        <li class="small d-none "><a class="dropdown-item clip copy-raw">
+        <li class="d-none "><a class="dropdown-item clip copy-raw">
             <i class="fa-regular fa-copy link-body-emphasis me-3"></i> Copy Raw Link</a></li>
         <li class="d-none "><hr class="dropdown-divider my-1"></li>
-        <li class="small"><a class="dropdown-item clip raw" href="">
+        <li class=""><a class="dropdown-item clip raw" href="">
             <i class="fa-solid fa-arrow-up-right-from-square link-body-emphasis me-3"></i> Open Raw File</a></li>
-        <li class="small"><a class="dropdown-item" data-action="delete">
+        <li class=""><a class="dropdown-item" data-action="delete">
             <i class="fa-regular fa-trash-can link-danger me-3"></i> Delete File</a></li>
         <li><hr class="dropdown-divider my-1"></li>
-        <li class="dropdown-item-text text-center text-break small clip mouse-link py-0"></li>
+        <li class="dropdown-item-text text-center text-break  clip mouse-link py-0"></li>
         <li class="dropdown-item-text text-center file-icons">
-            <span class="text-body-tertiary view-text">0</span>
-            <i class="fa-solid fa-eye text-body-tertiary mx-1"></i>
-            <a  data-action="private"><i class="fa-solid fa-lock mx-1 text-body-tertiary"></i></a>
-            <a class="pass-link" data-action="password"><i class="fa-solid fa-key mx-1 text-body-tertiary"></i></a>
+            <span class="text-body-tertiary view-text me-1">0</span>
+            <i class="fa-solid fa-eye text-body-tertiary me-2"></i>
+            <a  data-action="private"><i class="fa-solid fa-lock mx-2 text-body-tertiary"></i></a>
+            <a class="pass-link" data-action="password"><i class="fa-solid fa-key mx-2 text-body-tertiary"></i></a>
             <a class="text-decoration-none link-body-emphasis" data-action="expire">
-                <i class="fa-solid fa-hourglass-start mx-1 text-body-tertiary"></i>
-                <span class="expr-text"></span></a>
+                <i class="fa-solid fa-hourglass-start ms-2 text-body-tertiary"></i>
+                <span class="expr-text ms-1"></span></a>
         </li>
     </ul>
     <i class="fa-solid fa-hourglass ms-1 d-none"></i>

diff --git a/src/js/options.js b/src/js/options.js
@@ -68,11 +68,9 @@ function setBackground(options) {
         document.body.style.mozBackgroundSize = 'cover'
         document.body.style.oBackgroundSize = 'cover'
         document.body.style.backgroundSize = 'cover'
-
         document.querySelector('video').classList.add('d-none')
     } else if (options.radioBackground === 'bgVideo') {
         document.querySelector('video').classList.remove('d-none')
-
         document.body.style.cssText = ''
     } else {
         document.body.style.cssText = ''
@@ -112,6 +110,7 @@ async function saveOptions(event) {
             event.target.value = options[event.target.id]
             // TODO: Add Error Handling
             // showToast(`Value ${number} Out of Range for ${event.target.id}`,'warning')
+            return
         }
     } else if (event.target.type === 'radio') {
         key = event.target.name
@@ -184,7 +183,12 @@ function hideShowElement(selector, show, speed = 'fast') {
  * @param {String} selector
  */
 async function setShortcuts(selector = '#keyboard-shortcuts') {
-    const tbody = document.querySelector(selector).querySelector('tbody')
+    if (!chrome.commands) {
+        return console.debug('Skipping: chrome.commands')
+    }
+    const table = document.querySelector(selector)
+    table.classList.remove('d-none')
+    const tbody = table.querySelector('tbody')
     const source = tbody.querySelector('tr.d-none').cloneNode(true)
     source.classList.remove('d-none')
     const commands = await chrome.commands.getAll()

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -73,22 +73,33 @@ async function initPopup() {
     const { options } = await chrome.storage.sync.get(['options'])
     console.debug('options:', options)
     document.getElementById('popupPreview').checked = options.popupPreview
-    document.body.style.width = `${options.popupWidth}px`
-
-    // Table Max Height
     const wrapper = document.getElementById('table-wrapper')
-    if (options.popupLinks) {
-        wrapper.style.maxHeight = '500px'
+    const platform = await chrome.runtime.getPlatformInfo()
+    if (platform.os !== 'android') {
+        document.body.style.width = `${options.popupWidth}px`
+        if (options.popupLinks) {
+            wrapper.style.maxHeight = '500px'
+        } else {
+            wrapper.style.maxHeight = '540px'
+        }
     } else {
-        wrapper.style.maxHeight = '540px'
+        if (options.popupLinks) {
+            wrapper.style.maxHeight = '82vh'
+        } else {
+            wrapper.style.maxHeight = '88vh'
+        }
+        document.documentElement.style.fontSize = '1.3rem'
+        document
+            .querySelectorAll('.hover-menu > a')
+            .forEach((el) => el.classList.add('px-1'))
     }
 
     // Manifest
     const manifest = chrome.runtime.getManifest()
     const imgLink = document.querySelector('.head img').closest('a')
     imgLink.href = manifest.homepage_url
     imgLink.title = `v${manifest.version}`
-    const titleLink = document.querySelector('.head h3 a')
+    const titleLink = document.querySelector('.head h4 a')
     titleLink.href = manifest.homepage_url
 
     // Title Link
@@ -377,6 +388,11 @@ function updateTable(data, options) {
             thumbURL.searchParams.append('token', options.authToken)
         }
 
+        // Set mouseOver data on row
+        row.classList.add('mouse-link')
+        row.dataset.thumb = thumbURL?.href || rawURL.href
+        row.dataset.name = data[i].name
+
         // File Link -> 1
         const link = document.createElement('a')
         link.text = data[i].name
@@ -387,8 +403,8 @@ function updateTable(data, options) {
             'link-underline',
             'link-underline-opacity-0',
             'link-underline-opacity-75-hover',
-            'file-link',
-            'mouse-link'
+            'file-link'
+            // 'mouse-link'
         )
         link.target = '_blank'
         link.dataset.name = data[i].name
@@ -609,7 +625,7 @@ async function ctxMenu(event) {
 }
 
 async function togglePrivate() {
-    console.debug('togglePrivate')
+    console.debug(`togglePrivate: ${ctxMenuRow.value}`)
     // event.preventDefault()
     const file = fileData[ctxMenuRow.value]
     console.debug('file:', file)
@@ -641,7 +657,7 @@ async function togglePrivate() {
  * @param {SubmitEvent} event
  */
 async function passwordForm(event) {
-    console.debug('passwordForm:', event)
+    console.debug(`passwordForm: ${ctxMenuRow.value}:`, event)
     event.preventDefault()
     const file = fileData[ctxMenuRow.value]
     console.debug('file:', file)
@@ -679,7 +695,7 @@ async function passwordForm(event) {
  * @param {SubmitEvent} event
  */
 async function expireForm(event) {
-    console.debug('expireForm:', event)
+    console.debug(`expireForm: ${ctxMenuRow.value}:`, event)
     event.preventDefault()
     const file = fileData[ctxMenuRow.value]
     console.debug('file:', file)
@@ -717,7 +733,7 @@ async function expireForm(event) {
  * @param {MouseEvent} event
  */
 async function deleteConfirm(event) {
-    console.debug('deleteConfirm:', event)
+    console.debug(`deleteConfirm: ${ctxMenuRow.value}:`, event)
     event.preventDefault()
     const file = fileData[ctxMenuRow.value]
     console.debug('file:', file)
@@ -842,6 +858,8 @@ function initPopupMouseover() {
     })
 }
 
+let mouseRow
+
 function onMouseOver(event) {
     // console.debug('onMouseOver:', event)
     mediaError.classList.add('d-none')
@@ -853,12 +871,19 @@ function onMouseOver(event) {
         mediaOuter.classList.remove('bottom-0')
         mediaOuter.classList.add('top-0')
     }
-    const str = event.target.innerText
+    const tr = event.target.closest('tr')
+    if (tr.id === mouseRow) {
+        // console.debug('onMouseOver: return')
+        return
+    }
+    mouseRow = tr.id
+    // console.debug('tr:', tr)
     const imageExtensions = /\.(gif|ico|jpeg|jpg|png|svg|webp)$/i
-    if (str.match(imageExtensions)) {
+    if (tr.dataset.name.match(imageExtensions)) {
+        // console.log('onMouseOver: UPDATE SRC')
         mediaImage.src = loadingImage
-        mediaImage.src = event.target.dataset.thumb
-        // console.debug('dataset.thumb', event.target.dataset.thumb)
+        mediaImage.src = tr.dataset.thumb
+        // console.debug('dataset.thumb', tr.dataset.thumb)
         mediaOuter.classList.remove('d-none')
     } else {
         mediaOuter.classList.add('d-none')
@@ -869,8 +894,16 @@ function onMouseOver(event) {
     }
 }
 
-function onMouseOut() {
-    // console.debug('onMouseOut')
+function onMouseOut(event) {
+    // console.debug('onMouseOut:', event)
+    const tr = event.target.closest('tr')
+    // console.debug('tr:', tr)
+    // console.debug('mouseRow:', mouseRow)
+    if (tr.id === mouseRow) {
+        // console.debug('onMouseOut: return')
+        return
+    }
+    // console.debug('onMouseOut: START TIMEOUT')
     timeoutID = setTimeout(function () {
         mediaOuter.classList.add('d-none')
         mediaImage.src = loadingImage

diff --git a/src/js/service-worker.js b/src/js/service-worker.js
@@ -2,8 +2,8 @@
 
 chrome.runtime.onStartup.addListener(onStartup)
 chrome.runtime.onInstalled.addListener(onInstalled)
-chrome.commands.onCommand.addListener(onCommand)
-chrome.contextMenus.onClicked.addListener(contextMenusClicked)
+chrome.commands?.onCommand.addListener(onCommand)
+chrome.contextMenus?.onClicked.addListener(contextMenusClicked)
 chrome.notifications.onClicked.addListener(notificationsClicked)
 chrome.storage.onChanged.addListener(onChanged)
 
@@ -38,7 +38,7 @@ async function onInstalled(details) {
             authToken: '',
             recentFiles: 14,
             popupWidth: 380,
-            popupTimeout: 5,
+            popupTimeout: 10,
             popupPreview: true,
             popupIcons: true,
             iconPrivate: true,
@@ -169,6 +169,9 @@ function onChanged(changes, namespace) {
  * @function createContextMenus
  */
 function createContextMenus() {
+    if (!chrome.contextMenus) {
+        return console.debug('Skipping: chrome.contextMenus')
+    }
     console.debug('createContextMenus')
     chrome.contextMenus.removeAll()
     const ctx = ['link', 'image', 'video', 'audio']
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,7 @@ video { @@
     }
     .card {
-        min-width: 400px;
+        min-width: 360px;
         background: rgba(0 0 0 / 70%);
     }
@@ Expand Down @@