From 1735fe2cdcf20203e34c3003685e433f3125d7ed Mon Sep 17 00:00:00 2001 From: SmAsHeD <6071159+smashedr@users.noreply.github.com> Date: Wed, 19 Jun 2024 18:27:32 -0700 Subject: [PATCH] Update for Firefox Mobile (#50) * Update for Firefox Mobile * Fix Keyboard Shortcut Name * Cleanup --- manifest.json | 2 +- src/css/options.css | 2 +- src/css/popup.css | 1 - src/html/options.html | 2 +- src/html/popup.html | 30 ++++++++--------- src/js/options.js | 10 ++++-- src/js/popup.js | 71 +++++++++++++++++++++++++++++----------- src/js/service-worker.js | 9 +++-- 8 files changed, 83 insertions(+), 44 deletions(-) diff --git a/manifest.json b/manifest.json index 588af2e..0dbc7c2 100644 --- 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 index e3d8fa5..c2b7429 100644 --- 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 index 5c9a415..3ca91c2 100644 --- 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 index 4b02e2a..236057f 100644 --- a/src/html/options.html +++ b/src/html/options.html @@ -29,7 +29,7 @@

Django Files Options

v

- +
diff --git a/src/html/popup.html b/src/html/popup.html index e748a3b..9802b5b 100644 --- a/src/html/popup.html +++ b/src/html/popup.html @@ -14,7 +14,7 @@
-
+
@@ -25,9 +25,9 @@ -
+
Django Files -

Django Files

+

Django Files

@@ -90,31 +90,31 @@

Djan

diff --git a/src/js/options.js b/src/js/options.js index 0694137..68b48d0 100644 --- 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 index af174fa..6a8319b 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -73,14 +73,25 @@ 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 @@ -88,7 +99,7 @@ async function initPopup() { 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 index ad68597..31608d6 100644 --- 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']