Add Background Option (#49)

* Add Background Option * Add Gallery Keybind
django-files · Jun 18, 2024 · 7de544b · 7de544b
1 parent fb73508
commit 7de544b
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 21 deletions.
diff --git a/manifest.json b/manifest.json
@@ -17,6 +17,12 @@
         "default": "Alt+Shift+A"
       },
       "description": "Upload Files"
+    },
+    "openGallery": {
+      "suggested_key": {
+        "default": "Alt+Shift+G"
+      },
+      "description": "Upload Files"
     }
   },
   "permissions": [

diff --git a/src/css/options.css b/src/css/options.css
@@ -1,10 +1,5 @@
 /* CSS for options.html */
 
-body {
-    margin: 0;
-    background: #000;
-}
-
 video {
     position: fixed;
     top: 50%;
@@ -15,16 +10,16 @@ video {
     height: auto;
     z-index: -100;
     transform: translateX(-50%) translateY(-50%);
-    background: url("../media/loop.jpg") no-repeat;
+    background: url('../media/loop.jpg') no-repeat;
     background-size: cover;
     filter: blur(150px);
 }
 
 .card {
     min-width: 400px;
+    background: rgba(0 0 0 / 70%);
 }
 
-.card,
 table tr {
     background: rgba(0 0 0 / 30%);
 }
diff --git a/src/html/options.html b/src/html/options.html
@@ -12,13 +12,13 @@
 </head>
 <body class="h-100">
 
-<video poster="../media/loop.jpg" id="bgvid" playsinline autoplay muted loop>
+<video poster="../media/loop.jpg" id="bgvid" class="d-none" playsinline autoplay muted loop>
     <source src="../media/loop.mp4" type="video/mp4">
 </video> <!-- video -->
 
 <div class="container-fluid p-2 h-100">
 <div class="d-flex align-items-center h-100">
-<div class="col-xxl-8 col-lg-10 col-12 m-auto">
+<div class="col-xl-8 col-lg-10 col-12 m-auto">
 <div class="card p-2 mb-2">
 <div class="card-body">
     <div class="d-flex justify-content-center align-items-center">
@@ -69,17 +69,17 @@ <h1>Django Files Options</h1>
         </div>
 
         <div class="row g-2">
-            <div class="col-sm-4 col-12 mb-2">
+            <div class="col-md-4 col-12 mb-2">
                 <label for="recentFiles" class="form-label"><i class="fa-solid fa-list-ol me-2"></i> Recent Files</label>
                 <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">
+            <div class="col-md-4 col-12 mb-2">
                 <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>
             </div>
-            <div class="col-sm-4 col-12 mb-2">
+            <div class="col-md-4 col-12 mb-2">
                 <label for="popupTimeout" class="form-label"><i class="fa-regular fa-clock me-2"></i> Preview Timeout</label>
                 <input id="popupTimeout" aria-describedby="popupTimeoutHelp" type="number" class="form-control" autocomplete="off">
                 <div class="form-text" id="popupTimeoutHelp">Popup Preview Timeout in Seconds.</div>
@@ -181,6 +181,35 @@ <h1>Django Files Options</h1>
                 </label>
             </div>
         </div>
+
+        <h5>
+            Options Page Background
+            <span class="small" data-bs-toggle="tooltip" data-bs-title="Disabled, Random Picture or Video Loop.">
+                <i class="fa-solid fa-circle-info ms-1"></i>
+            </span>
+        </h5>
+        <div id="backgroundOptions" class="ms-3">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="radioBackground" id="bgNone" value="none">
+                <label class="form-check-label" for="bgNone">
+                    <i class="fa-regular fa-square"></i> None
+                </label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="radioBackground" id="bgPicture" value="picture">
+                <label class="form-check-label" for="bgPicture">
+                    <i class="fa-regular fa-image"></i> Picture
+                </label>
+            </div>
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="radioBackground" id="bgVideo" value="video">
+                <label class="form-check-label" for="bgVideo">
+                    <i class="fa-solid fa-video"></i> Video
+                </label>
+            </div>
+        </div>
+
     </form>
 
     <hr>

diff --git a/src/js/options.js b/src/js/options.js
@@ -32,6 +32,7 @@ async function initOptions() {
 
     const { options } = await chrome.storage.sync.get(['options'])
     console.debug('options:', options)
+    setBackground(options)
     updateOptions(options)
     if (!options?.siteUrl) {
         const siteUrl = document.getElementById('siteUrl')
@@ -48,13 +49,37 @@ async function initOptions() {
  */
 function onChanged(changes, namespace) {
     // console.debug('onChanged:', changes, namespace)
-    for (const [key, { newValue }] of Object.entries(changes)) {
+    for (const [key, { oldValue, newValue }] of Object.entries(changes)) {
         if (namespace === 'sync' && key === 'options') {
             updateOptions(newValue)
+            if (oldValue.radioBackground !== newValue.radioBackground) {
+                setBackground(newValue)
+            }
         }
     }
 }
 
+function setBackground(options) {
+    if (options.radioBackground === 'bgPicture') {
+        console.debug('setBackground:', options)
+        document.body.style.background =
+            "url('https://picsum.photos/1920/1080') no-repeat center fixed"
+        document.body.style.webkitBackgroundSize = 'cover'
+        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 = ''
+        document.querySelector('video').classList.add('d-none')
+    }
+}
+
 /**
  * Save Options Callback
  * @function saveOptions
@@ -63,11 +88,13 @@ function onChanged(changes, namespace) {
 async function saveOptions(event) {
     // console.debug('saveOptions:', event)
     const { options } = await chrome.storage.sync.get(['options'])
+    let key = event.target.id
+    let value
     if (event.target.type === 'checkbox') {
-        options[event.target.id] = event.target.checked
+        value = event.target.checked
     } else if (event.target.id === 'siteUrl') {
         event.target.value = event.target.value.replace(/\/+$/, '')
-        options[event.target.id] = event.target.value
+        value = event.target.value
     } else if (event.target.type === 'number') {
         const number = parseInt(event.target.value, 10)
         let min = 0
@@ -80,18 +107,31 @@ async function saveOptions(event) {
         }
         if (!isNaN(number) && number >= min && number <= max) {
             event.target.value = number.toString()
-            options[event.target.id] = number
+            value = number
         } else {
             event.target.value = options[event.target.id]
             // TODO: Add Error Handling
             // showToast(`Value ${number} Out of Range for ${event.target.id}`,'warning')
         }
+    } else if (event.target.type === 'radio') {
+        key = event.target.name
+        const radios = document.getElementsByName(key)
+        for (const input of radios) {
+            if (input.checked) {
+                value = input.id
+                break
+            }
+        }
     } else {
-        options[event.target.id] = event.target.value
+        value = event.target.value
+    }
+    if (value !== undefined) {
+        options[key] = value
+        console.info(`Set: ${key}:`, value)
+        await chrome.storage.sync.set({ options })
+    } else {
+        console.warn('No Value for key:', key)
     }
-    console.info(`Set: "${event.target.id}" to target:`, event.target)
-    console.debug('options:', options)
-    await chrome.storage.sync.set({ options })
 }
 
 /**
@@ -117,7 +157,7 @@ function updateOptions(options) {
         }
         if (el.tagName !== 'INPUT') {
             el.textContent = value.toString()
-        } else if (el.type === 'checkbox') {
+        } else if (['checkbox', 'radio'].includes(el.type)) {
             el.checked = value
         } else {
             el.value = value

diff --git a/src/js/service-worker.js b/src/js/service-worker.js
@@ -49,6 +49,7 @@ async function onInstalled(details) {
             deleteConfirm: true,
             contextMenu: true,
             showUpdate: false,
+            radioBackground: 'bgPicture',
         })
     )
     console.log('options:', options)
@@ -89,6 +90,11 @@ async function onCommand(command) {
             const url = `${options.siteUrl}/uppy/`
             await chrome.tabs.create({ active: true, url })
         }
+    } else if (command === 'openGallery') {
+        if (options.siteUrl) {
+            const url = `${options.siteUrl}/gallery/`
+            await chrome.tabs.create({ active: true, url })
+        }
     } else {
         console.warn('Unknown Command:', command)
     }