django-files · smashedr · Jul 6, 2025 · Jul 6, 2025 · Jul 6, 2025
diff --git a/src/html/options.html b/src/html/options.html
@@ -76,7 +76,7 @@ <h2>Django Files Options</h2>
                 <input id="recentFiles" aria-describedby="recentFilesHelp" type="number" class="form-control" autocomplete="off">
                 <div class="form-text" id="recentFilesHelp">Popup Recent Files. <span class="d-inline-block">0 to Disable.</span></div>
             </div>
-            <div class="col-sm-4 col-12 mb-2 non-mobile">
+            <div class="col-sm-4 col-12 mb-2" data-mobile-add="d-none">
                 <label for="popupWidth" class="form-label"><i class="fa-solid fa-arrows-left-right-to-line me-2"></i> Popup Width</label>
                 <input id="popupWidth" aria-describedby="popupWidthHelp" type="number" class="form-control" autocomplete="off" step="10">
                 <div class="form-text" id="popupWidthHelp">Popup Width in Pixels. <span class="d-inline-block">320-600.</span></div>
@@ -141,7 +141,7 @@ <h2>Django Files Options</h2>
             </label>
         </div>
 
-        <div class="form-check form-switch mb-2 non-mobile">
+        <div class="form-check form-switch mb-2" data-mobile-add="d-none">
             <input class="form-check-input" id="popupSidePanel" type="checkbox" role="switch">
             <label class="form-check-label" for="popupSidePanel" aria-describedby="popupSidePanelHelp">
                 Show SidePanel Button in Popup
@@ -171,7 +171,7 @@ <h2>Django Files Options</h2>
             </label>
         </div>
 
-        <div class="form-check form-switch mb-2 non-mobile">
+        <div class="form-check form-switch mb-2" data-mobile-add="d-none">
             <input class="form-check-input" id="contextMenu" type="checkbox" role="switch" data-related="reloadMenu">
             <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
                 Enable Context Menu
@@ -180,7 +180,7 @@ <h2>Django Files Options</h2>
                 </span>
             </label>
         </div><!-- data-related #reloadMenu -->
-        <div id="reloadMenu" class="ms-5 mb-2 non-mobile" style="display: none;">
+        <div id="reloadMenu" class="ms-5 mb-2" style="display: none;" data-mobile-add="d-none">
             <div class="form-check form-switch mb-2">
                 <input class="form-check-input" id="ctxSidePanel" type="checkbox" role="switch">
                 <label class="form-check-label" for="ctxSidePanel" aria-describedby="ctxSidePanelHelp">

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -45,9 +45,9 @@
                 <i class="fa-solid fa-key"></i></a>
             <a id="pop-in" class="btn btn-sm btn-outline-body d-inline-block d-none" role="button" title="Pop In">
                 <i class="fa-regular fa-window-restore"></i></a>
-            <a id="pop-out" class="btn btn-sm btn-outline-body d-inline-block" role="button" title="Pop Out">
+            <a id="pop-out" class="btn btn-sm btn-outline-body d-inline-block" role="button" title="Pop Out" data-mobile-add="d-none">
                 <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
-            <button id="side-panel" class="btn btn-sm btn-outline-info d-none" type="button" title="Side Panel">
+            <button id="side-panel" class="btn btn-sm btn-outline-info d-none" type="button" title="Side Panel" data-mobile-add="d-none">
                 <i class="fa-solid fa-table-columns"></i></button>
             <a class="btn btn-sm btn-outline-primary" role="button" href="../html/options.html" title="Options">
                 <i class="fa-solid fa-gears"></i></a>

diff --git a/src/js/exports.js b/src/js/exports.js
@@ -124,6 +124,48 @@ export function debounce(fn, timeout = 250) {
     }
 }
 
+/**
+ * @function updatePlatform
+ * @return {Promise<any>}
+ */
+export async function updatePlatform() {
+    const platform = await chrome.runtime.getPlatformInfo()
+    console.debug('updatePlatform:', platform)
+    const splitCls = (cls) => cls.split(' ').filter(Boolean)
+    if (platform.os === 'android' && typeof document !== 'undefined') {
+        // document.querySelectorAll('[class*="mobile-"]').forEach((el) => {
+        document
+            .querySelectorAll(
+                '[data-mobile-add],[data-mobile-remove],[data-mobile-replace]'
+            )
+            .forEach((el) => {
+                if (el.dataset.mobileAdd) {
+                    for (const cls of splitCls(el.dataset.mobileAdd)) {
+                        // console.debug('mobileAdd:', cls)
+                        el.classList.add(cls)
+                    }
+                }
+                if (el.dataset.mobileRemove) {
+                    for (const cls of splitCls(el.dataset.mobileRemove)) {
+                        // console.debug('mobileAdd:', cls)
+                        el.classList.remove(cls)
+                    }
+                }
+                if (el.dataset.mobileReplace) {
+                    const split = splitCls(el.dataset.mobileReplace)
+                    // console.debug('mobileReplace:', split)
+                    for (let i = 0; i < split.length; i += 2) {
+                        const one = split[i]
+                        const two = split[i + 1]
+                        // console.debug(`replace: ${one} >> ${two}`)
+                        el.classList.replace(one, two)
+                    }
+                }
+            })
+    }
+    return platform
+}
+
 // /**
 //  *
 //  * @param {String} type

diff --git a/src/js/options.js b/src/js/options.js
@@ -1,6 +1,6 @@
 // JS for options.html
 
-import { showToast } from './exports.js'
+import { showToast, updatePlatform } from './exports.js'
 
 chrome.storage.onChanged.addListener(onChanged)
 document.addEventListener('DOMContentLoaded', initOptions)
@@ -50,13 +50,8 @@ async function initOptions() {
         siteUrl.focus()
     }
 
-    const platform = await chrome.runtime.getPlatformInfo()
-    if (platform.os === 'android') {
-        document.querySelectorAll('.non-mobile').forEach((el) => {
-            console.log('non-mobile el:', el)
-            el.classList.add('d-none')
-        })
-    }
+    const platform = await updatePlatform()
+    console.debug('platform:', platform)
 }
 
 /**

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -6,6 +6,7 @@ import {
     openPopup,
     openSidePanel,
     showToast,
+    updatePlatform,
 } from './exports.js'
 
 import {
@@ -123,7 +124,9 @@ async function initPopup(event) /* NOSONAR */ {
     const { options } = await chrome.storage.sync.get(['options'])
     console.debug('options:', options)
     document.getElementById('popupPreview').checked = options.popupPreview
-    const platform = await chrome.runtime.getPlatformInfo()
+    const platform = await updatePlatform()
+    console.debug('platform:', platform)
+
     if (platform.os !== 'android' && popupView === 'popup') {
         document.body.style.width = `${options.popupWidth}px`
         console.debug(`%c SET: width: ${options.popupWidth}`, 'color: Yellow')
@@ -132,11 +135,11 @@ async function initPopup(event) /* NOSONAR */ {
         }
     }
     if (platform.os === 'android') {
+        console.debug('%c SET: fontSize: 1.3rem + px-1', 'color: Orange')
         document.documentElement.style.fontSize = '1.3rem'
         document
             .querySelectorAll('.hover-menu > a')
             .forEach((el) => el.classList.add('px-1'))
-        console.debug('%c SET: fontSize: 1.3rem + px-1', 'color: Orange')
     }
 
     // Manifest
@@ -1107,6 +1110,10 @@ function onMouseLeave() {
  */
 async function popOutClick(event, close = true) {
     console.debug('popOutClick:', event)
+    const platform = await chrome.runtime.getPlatformInfo()
+    if (platform.os === 'android') {
+        return console.warn('Blocking Popout on Android.')
+    }
     await chrome.storage.local.set({ popupView: 'panel' })
     await chrome.action.setPopup({ popup: '' })
     await openExtPanel()

diff --git a/src/js/service-worker.js b/src/js/service-worker.js
@@ -20,37 +20,37 @@ async function actionOnClicked(event) {
 /**
  * On Installed Callback
  * @function onInstalled
- * @param {InstalledDetails} details
+ * @param {chrome.runtime.InstalledDetails} details
  */
 async function onInstalled(details) {
     console.log('onInstalled:', details)
     const githubURL = 'https://github.com/django-files/web-extension'
     const installURL = 'https://django-files.github.io/extension/#configure'
-    const options = await Promise.resolve(
-        setDefaultOptions({
-            siteUrl: '',
-            authToken: '',
-            recentFiles: 14,
-            popupWidth: 380,
-            popupTimeout: 10,
-            popupPreview: true,
-            popupIcons: true,
-            iconPrivate: true,
-            iconPassword: true,
-            iconExpire: false,
-            popupLinks: true,
-            popupSidePanel: true,
-            checkAuth: true,
-            deleteConfirm: true,
-            ctxSidePanel: true,
-            contextMenu: true,
-            showUpdate: false,
-            radioBackground: 'bgPicture',
-            pictureURL: 'https://picsum.photos/1920/1080',
-            videoURL: '',
-        })
-    )
+    const options = await setDefaultOptions({
+        siteUrl: '',
+        authToken: '',
+        recentFiles: 14,
+        popupWidth: 380,
+        popupTimeout: 10,
+        popupPreview: true,
+        popupIcons: true,
+        iconPrivate: true,
+        iconPassword: true,
+        iconExpire: false,
+        popupLinks: true,
+        popupSidePanel: true,
+        checkAuth: true,
+        deleteConfirm: true,
+        ctxSidePanel: true,
+        contextMenu: true,
+        showUpdate: false,
+        radioBackground: 'bgPicture',
+        pictureURL: 'https://picsum.photos/1920/1080',
+        videoURL: '',
+    })
     console.log('options:', options)
+    await setStorageDefaults(chrome.storage.local, { popupView: 'popup' })
+
     if (options.contextMenu) {
         // noinspection ES6MissingAwait
         createContextMenus(options)
@@ -60,7 +60,6 @@ async function onInstalled(details) {
         // noinspection ES6MissingAwait
         chrome.runtime.openOptionsPage()
         await chrome.tabs.create({ active: false, url: installURL })
-        await chrome.storage.local.set({ popupView: 'popup' })
     } else if (details.reason === 'update' && options.showUpdate) {
         if (manifest.version !== details.previousVersion) {
             let { internal } = await chrome.storage.sync.get(['internal'])
@@ -149,7 +148,7 @@ async function onCommand(command) {
 /**
  * Context Menus On Clicked Callback
  * @function contextMenusClicked
- * @param {OnClickData} ctx
+ * @param {chrome.contextMenus.OnClickData} ctx
  */
 async function contextMenusClicked(ctx) {
     console.debug('contextMenusClicked:', ctx)
@@ -230,7 +229,7 @@ function onChanged(changes, namespace) {
  * On Message Callback
  * @function onMessage
  * @param {Object} message
- * @param {MessageSender} sender
+ * @param {chrome.runtime.MessageSender} sender
  */
 function onMessage(message, sender) {
     console.debug('onMessage: message, sender:', message, sender)
@@ -519,7 +518,7 @@ async function clipboardWrite(value) {
  * Set Default Options
  * @function setDefaultOptions
  * @param {Object} defaultOptions
- * @return {Object}
+ * @return {Promise<Object>}
  */
 async function setDefaultOptions(defaultOptions) {
     console.log('setDefaultOptions')
@@ -536,7 +535,28 @@ async function setDefaultOptions(defaultOptions) {
     }
     if (changed) {
         await chrome.storage.sync.set({ options })
-        console.log('options:', options)
+        console.log('changed options:', options)
     }
     return options
 }
+
+/**
+ * @function setStorageDefaults
+ * @param {chrome.storage.LocalStorageArea|chrome.storage.SyncStorageArea} storageArea
+ * @param {Object} defaultOptions
+ * @return {Promise<void>}
+ */
+async function setStorageDefaults(storageArea, defaultOptions) {
+    console.log('%c setStorageDefaults:', 'color: Lime', defaultOptions)
+    const current = await storageArea.get()
+    const data = {}
+    for (const [key, value] of Object.entries(defaultOptions)) {
+        if (current[key] === undefined) {
+            data[key] = value
+        }
+    }
+    if (Object.keys(data).length > 0) {
+        console.log('%c Set data:', 'color: Yellow', data)
+        await storageArea.set(data)
+    }
+}