From 53ef671d344a25f6ec2ab42288ace5f632705dc8 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Sun, 21 Jan 2024 23:07:31 +1100
Subject: [PATCH] added a isMobile() function that adds a shift and ctrl key to
 the files view, which can be clicked to fake a shift or ctrl key selection
 event on a tablet/mobile - first pass at this, its fairly usable.  I might
 allow de-selecting the shift or ctrl key if they are pressed again before a
 selection is used, otherwise this is all functional.  Note, I also changed
 the contextmenu to a click not mouse down on selection of an item in the
 menu.  This is allows me to stop the propagation of the click event which was
 being trapped by the $(document).on( "click" ... and which we dont want -
 also exposes a BUG that when I click the context menu onto a different image
 it does not highlight the new image and some menu items process the original
 highlight, others the image under the context menu

---
 internal/js/files_support.js |  9 +++++++--
 templates/files.html         | 22 ++++++++++++++++++++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/internal/js/files_support.js b/internal/js/files_support.js
index 4e38b49..2def58a 100644
--- a/internal/js/files_support.js
+++ b/internal/js/files_support.js
@@ -223,12 +223,14 @@ function ChangeSize(clicked_button,sz)
 // whether you click after highlight or before
 function DoSel(e, el)
 {
-    if( e.ctrlKey )
+    if( e.ctrlKey || document.fake_ctrl === 1 )
     {
         $(el).toggleClass('highlight')
+        if( document.fake_ctrl === 1 )
+            document.fake_ctrl=0
         return
     }
-    if( e.shiftKey )
+    if( e.shiftKey || document.fake_shift === 1 )
     {
         st=Number($('.highlight').first().attr('ecnt'))
         end=Number($('.highlight').last().attr('ecnt'))
@@ -243,6 +245,9 @@ function DoSel(e, el)
             $('.entry').slice( end, clicked+1 ).addClass('highlight')
         else
             $('.entry').slice( clicked, st ).addClass('highlight')
+
+        if( document.fake_shift === 1 )
+            document.fake_shift=0
         return
     }
     $('.highlight').removeClass('highlight')
diff --git a/templates/files.html b/templates/files.html
index 888619a..87a47c6 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -5,6 +5,8 @@
     <script src="{{ url_for( 'internal', filename='js/files_transform.js')}}"></script>
 
     <script>
+        document.fake_shift=0
+        document.fake_ctrl=0
         var move_paths=[]
         {% for p in move_paths %}
             p = new Object()
@@ -83,6 +85,8 @@
                             <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash-fill"/></svg>
                     {% endif %}
                     </button>
+                    <button style="visibility:hidden" class="btn btn-outline-secondary" aria-label="shift-key" id="shift-key" onclick="document.fake_shift=1-document.fake_shift; event.stopPropagation(); return false">shift</button>
+                    <button style="visibility:hidden" class="btn btn-outline-secondary" aria-label="ctrl-key" id="ctrl-key" onclick="document.fake_ctrl=1-document.fake_ctrl; event.stopPropagation(); return false">ctrl</button>
                 </div>
                 <div class="d-flex col col-auto justify-content-end">
                     <div class="btn-group">
@@ -306,6 +310,7 @@ $('.figure').dblclick( CallViewRouteWrapper )
 // different context menu on files 
 $.contextMenu({
     selector: '.entry',
+    itemClickEvent: "click",
     build: function($triggerElement, e) {
         // when right-clicking & no selection add one OR deal with ctrl/shift right-lick as it always changes seln
         if( NoSel() || e.ctrlKey || e.shiftKey )
@@ -375,6 +380,8 @@ $.contextMenu({
                 if( key == "fliph" ) { Transform("fliph") }
                 if( key == "flipv" ) { Transform("flipv") }
                 if( key.startsWith("ai")) { RunAIOnSeln(key) }
+                // dont flow this event through the dom
+                e.stopPropagation()
             },
             items: item_list
         };
@@ -401,7 +408,18 @@ $( document ).keydown(function(event) {
                 if( ! NoSel() ) DelDBox('Delete');
             {% endif %}
             break;
-    }
-});
+    } })
+
+function isMobile() {
+    try{ document.createEvent("TouchEvent"); return true; }
+    catch(e){ return false; }
+}
+
+if( isMobile() )
+{
+    $('#shift-key').css('visibility', 'visible');
+    $('#ctrl-key').css('visibility', 'visible');
+}
+
 </script>
 {% endblock script_content %}