change(save-selector): Improved save selector context menu access (po…

…keclicker#5394) * better context menu access for mobile * hide on profile preview --------- Co-authored-by: Danial <[email protected]>
EatPant2nd · Jul 7, 2024 · f16c9b8 · f16c9b8
1 parent 43dfd81
commit f16c9b8
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 deletions.
diff --git a/src/components/saveSelector.html b/src/components/saveSelector.html
@@ -38,6 +38,7 @@
     <div class="trainer-card-container mb-3 col-lg-4 col-md-6 col-sm-12 xol-xs-12">
         <div class="trainer-card clickable card font-weight-bold">
             <div class="card-body">
+                <div class="position-absolute context-menu-button px-1" style="top: 0; left: 2px; cursor: help;">⋮</div>
                 <div class="position-absolute small trainer-id" style="top: 0; right: 5px;"></div>
                 <h5 class="align-middle font-weight-bold">
                     <img class="trainer-image"/>

diff --git a/src/modules/SaveSelector.ts b/src/modules/SaveSelector.ts
@@ -24,27 +24,38 @@ export default class SaveSelector {
 
         $('[data-toggle="tooltip"]').tooltip();
 
+        const showContextMenu = (top: number, left: number, key: string) => {
+            $('#saveSelectorContextMenu').html(`
+                <a class="dropdown-item bg-success" href="#" onclick="Save.key = '${key}'; SaveSelector.Download('${key}')">Download (backup)</a>
+                <a class="dropdown-item bg-info" href="#" onclick="Save.key = '${key}'; document.querySelector('#saveSelector').remove(); App.start();">Load</a>
+                <a class="dropdown-item bg-warning" href="#"><label class="clickable my-0" for="import-save" onclick="Save.key = '${key}';">Import (overwrite)</label></a>
+                <a class="dropdown-item bg-danger" href="#" onclick="Save.key = '${key}'; Save.delete();">Delete</a>
+            `).css({
+                display: 'block',
+                position: 'absolute',
+                top,
+                left,
+            }).addClass('show');
+        };
+
         $(container).on('contextmenu', '.trainer-card.clickable', (e) => {
-            const top = e.pageY;
-            const left = e.pageX;
             const { key } = e.currentTarget.dataset;
             if (key) {
-                $('#saveSelectorContextMenu').html(`
-                    <a class="dropdown-item bg-success" href="#" onclick="Save.key = '${key}'; SaveSelector.Download('${key}')">Download (backup)</a>
-                    <a class="dropdown-item bg-info" href="#" onclick="Save.key = '${key}'; document.querySelector('#saveSelector').remove(); App.start();">Load</a>
-                    <a class="dropdown-item bg-warning" href="#"><label class="clickable my-0" for="import-save" onclick="Save.key = '${key}';">Import (overwrite)</label></a>
-                    <a class="dropdown-item bg-danger" href="#" onclick="Save.key = '${key}'; Save.delete();">Delete</a>
-                `).css({
-                    display: 'block',
-                    position: 'absolute',
-                    top,
-                    left,
-                }).addClass('show');
+                showContextMenu(e.pageY, e.pageX, key);
                 return false; // blocks default Webbrowser right click menu
             }
             return true;
         });
 
+        $(container).on('click', '.context-menu-button', (e) => {
+            const { key } = e.currentTarget.closest('.trainer-card.clickable').dataset;
+            if (key) {
+                showContextMenu(e.pageY, e.pageX, key);
+                return false;
+            }
+            return true;
+        });
+
         $('#saveSelector, #context-menu a').on('click', () => {
             $('#saveSelectorContextMenu').removeClass('show').hide();
         });

diff --git a/src/modules/profile/Profile.ts b/src/modules/profile/Profile.ts
@@ -68,7 +68,10 @@ export default class Profile implements Saveable {
         card.classList.add(`trainer-bg-${background}`);
         card.style.color = textColor;
         card.dataset.key = key;
-        card.addEventListener('click', () => {
+        card.addEventListener('click', (e) => {
+            if ((e.target as HTMLElement).classList.contains('context-menu-button')) {
+                return;
+            }
             // If no key provided, this is a preview
             if (key === undefined) {
                 Notifier.notify({ message: 'What a lovely profile!' });
@@ -110,6 +113,9 @@ export default class Profile implements Saveable {
             });
         const trainerId: HTMLElement = node.querySelector('.trainer-id');
         trainerId.innerText = id.length ? `#${id}` : '';
+        if (key === undefined) {
+            node.querySelector('.context-menu-button').remove();
+        }
         return container;
     }