Context Menu (#35)

* Update Toast Container

* Add Context Menu

* Update Context Menu

* Update Error Handling

* Tweak Context Menu

* Re-Work CTX Menu for New Files Endpoint

* Fixes and Backwards Compatibility

* Bump Version

* Add Expire to CTX

* Add Password and Private

* Tweaks

* Fix

* Cleanup

Author: smashedr

manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "version": "0.3.6",
+  "version": "0.4.0",
   "name": "Django Files",
   "description": "Django Files Web Extension designed to work with github.com/django-files/django-files.",
   "homepage_url": "https://github.com/django-files/web-extension",

src/css/main.css

@@ -5,3 +5,7 @@ svg {
     width: 1em;
     margin-bottom: 0.15em;
 }
+
+#toast-container {
+    z-index: 4;
+}

src/css/options.css

@@ -21,7 +21,7 @@ video {
 }
 
 .card {
-    min-width: 380px;
+    min-width: 400px;
 }
 
 .card,

src/css/popup.css

@@ -1,7 +1,7 @@
 /* CSS for popup.html */
 
 body {
-    width: 380px;
+    width: 400px;
     overflow-x: hidden;
 }
 
@@ -14,6 +14,7 @@ body {
     background-color: #303030;
 }
 
-#toast-container {
-    z-index: 4;
+ul.dropdown-menu {
+    max-width: 320px;
+    min-width: 180px;
 }

src/html/popup.html

@@ -24,10 +24,10 @@
 
 <div class="container-fluid p-2">
     <div class=" mb-1">
-        <div class="form-check form-switch float-start form-select-lg me-2" style="padding-top: 1px; padding-bottom: 0;"
+        <div class="form-check form-switch float-start form-select-lg me-2 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">
-            <label class="form-check-label visually-hidden" for="popupPreview" aria-describedby="popupPreviewHelp"></label>
+            <label class="form-check-label visually-hidden" for="popupPreview" aria-describedby="popupPreviewHelp">Popup Preview</label>
         </div>
         <a id="always-auth" class="d-none btn btn-sm btn-outline-warning float-start add-auth" role="button"
            data-bs-title="Update Authentication with Current Site." data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-trigger="hover">
@@ -57,42 +57,113 @@ <h3 class="my-0">Django Files</h3>
 
     <table id="files-table" class="d-none table table-striped table-hover table-sm small align-middle mb-0">
         <caption class="visually-hidden">Recent Uploads</caption>
-        <thead class="visually-hidden"><tr><th>Copy</th><th>File URL</th><th>Delete</th></tr></thead>
+        <thead class="visually-hidden"><tr><th>Menu</th><th>File URL</th></tr></thead>
         <tbody></tbody>
         <tfoot class="d-none">
         <tr>
             <td colspan="align-middle" style="width: 20px;"><i class="fa-solid fa-spinner fa-spin"></i></td>
             <td class="placeholder-glow"><span class="placeholder" style="width: 100%;"></span></td>
-            <td class="placeholder-glow" style="width: 20px;"><i class="fa-solid fa-circle-dot fa-xs"></i></td>
         </tr>
         </tfoot>
     </table>
 </div>
 
 <div aria-live="polite" aria-atomic="true" class="">
-    <div id="toast-container" class="toast-container bottom-0 end-0 p-3"></div>
+    <div id="toast-container" class="toast-container d-flex flex-column-reverse top-0 start-0 p-3"></div>
 </div>
 
 <div class="d-none">
-    <div class="toast align-items-center border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
-        <div class="d-flex">
-            <div class="toast-body small"></div>
-            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-        </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>
-</div>
+
+    <input id="ctx-menu-row" type="hidden" value="">
+
+    <ul class="dropdown-menu py-1">
+        <li class="small"><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"><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><hr class="dropdown-divider my-1"></li>
+        <li class="small"><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">
+            <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 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>
+            <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>
+        </li>
+    </ul>
+</div> <!-- d-none -->
 
 <div class="modal fade" id="delete-modal" tabindex="-1" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered">
 <div class="modal-content">
     <div class="modal-body text-center">
         <p>Are you sure you want to delete this file?</p>
-        <p><kbd id="delete-name" class="text-break"></kbd></p>
+        <p class="text-break"><kbd class="file-name"></kbd></p>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-danger me-auto" id="confirm-delete">
+            <i class="fa-regular fa-trash-can me-2"></i> Delete</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+            Close <i class="fa-solid fa-xmark ms-2"></i></button>
+    </div>
+</div> <!-- modal-content -->
+</div> <!-- modal-dialog -->
+</div> <!-- modal -->
+
+<div class="modal fade" id="expire-modal" tabindex="-1" aria-hidden="true">
+<div class="modal-dialog modal-dialog-centered">
+<div class="modal-content">
+    <div class="modal-body">
+        <p class="text-center">
+            Set the file's expiration. <br>
+            For examples, see
+            <a href="https://github.com/onegreyonewhite/pytimeparse2#pytimeparse2-time-expression-parser" target="_blank" rel="noopener">
+                this README.md</a>.
+        </p>
+        <p class="text-center text-break"><kbd class="file-name"></kbd></p>
+        <form id="expire-form">
+            <label for="expire-input" class="form-label"><i class="fa-solid fa-hourglass-start me-1"></i> Expiration</label>
+            <input id="expire-input" aria-describedby="expire-input-help" class="form-control" type="text" autocomplete="off">
+            <div class="form-text" id="expire-input-help" >File Expiration (Blank to Disable Expiration).</div>
+        </form>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" form="expire-form" class="btn btn-success me-auto">
+            <i class="fa-regular fa-floppy-disk me-2"></i> Save</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+            Close <i class="fa-solid fa-xmark ms-2"></i></button>
+    </div>
+</div> <!-- modal-content -->
+</div> <!-- modal-dialog -->
+</div> <!-- modal -->
+
+<div class="modal fade" id="password-modal" tabindex="-1" aria-hidden="true">
+<div class="modal-dialog modal-dialog-centered">
+<div class="modal-content">
+    <div class="modal-body">
+        <p class="text-center">Set the file's Password.</p>
+        <p class="text-center text-break"><kbd class="file-name"></kbd></p>
+        <form id="password-form">
+            <label for="password-input" class="form-label"><i class="fa-solid fa-key me-1"></i> Password</label>
+            <input id="password-input" aria-describedby="password-input-help" class="form-control" type="text" autocomplete="off">
+            <div class="form-text" id="password-input-help" >File Password (Blank to Disable Password).</div>
+        </form>
     </div>
     <div class="modal-footer">
-        <button type="button" class="btn btn-danger" id="confirm-delete">
-            Delete <i class="fa-regular fa-trash-can ms-1"></i></button>
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="submit" form="password-form" class="btn btn-success me-auto">
+            <i class="fa-regular fa-floppy-disk me-2"></i> Save</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+            Close <i class="fa-solid fa-xmark ms-2"></i></button>
     </div>
 </div> <!-- modal-content -->
 </div> <!-- modal-dialog -->

src/js/options.js

@@ -17,12 +17,12 @@ document
  * @function initOptions
  */
 async function initOptions() {
-    // console.log('initOptions')
+    // console.debug('initOptions')
     document.getElementById('version').textContent =
         chrome.runtime.getManifest().version
 
     const { options } = await chrome.storage.sync.get(['options'])
-    console.log('options:', options)
+    console.debug('options:', options)
     updateOptions(options)
     if (!options?.siteUrl) {
         const siteUrl = document.getElementById('siteUrl')
@@ -42,10 +42,10 @@ async function initOptions() {
  * @param {String} namespace
  */
 function onChanged(changes, namespace) {
-    // console.log('onChanged:', changes, namespace)
+    // console.debug('onChanged:', changes, namespace)
     for (const [key, { newValue }] of Object.entries(changes)) {
         if (namespace === 'sync' && key === 'options') {
-            console.log('newValue:', newValue)
+            console.debug('newValue:', newValue)
             updateOptions(newValue)
         }
     }
@@ -57,7 +57,7 @@ function onChanged(changes, namespace) {
  * @param {FormDataEvent} event
  */
 async function saveOptions(event) {
-    // console.log('saveOptions:', event)
+    // console.debug('saveOptions:', event)
     const { options } = await chrome.storage.sync.get(['options'])
     if (event.target.type === 'checkbox') {
         options[event.target.id] = event.target.checked
@@ -75,8 +75,8 @@ async function saveOptions(event) {
     } else {
         options[event.target.id] = event.target.value
     }
-    console.log(`Set: "${event.target.id}" to target:`, event.target)
-    console.log('options:', options)
+    console.info(`Set: "${event.target.id}" to target:`, event.target)
+    console.debug('options:', options)
     await chrome.storage.sync.set({ options })
 }
 
@@ -87,7 +87,7 @@ async function saveOptions(event) {
  */
 function updateOptions(options) {
     for (const [key, value] of Object.entries(options)) {
-        // console.log(`${key}: ${value}`)
+        // console.debug(`${key}: ${value}`)
         const element = document.getElementById(key)
         if (element) {
             if (typeof value === 'boolean') {