From 3c56cac1ef199941a12c28d484b225f99647c5af Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Tue, 6 Jul 2021 17:40:53 +1000
Subject: [PATCH] fix up selections to work with ctrl/shift and right-click --
 its a bit clunky but works, redid numbering to make that work and condensed
 down to 1 common code block for context menu for figures and dirs now

---
 templates/files.html | 96 +++++++++++++++++++++++---------------------
 1 file changed, 50 insertions(+), 46 deletions(-)

diff --git a/templates/files.html b/templates/files.html
index 2802bc4..8affac7 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -121,7 +121,7 @@
         {# rare event of empty folder, still need to show back button #}
         {% if folders and entry_data|length == 0 %}
             {% if cwd != root %}
-                <figure class="px-1 dir" dir="{{cwd|ParentPath}}">
+                <figure class="px-1 dir entry" ecnt="1" dir="{{cwd|ParentPath}}">
                     <span style="font-size:{{(size|int-22)/2}}" class="fa-stack">
                         <i style="color:grey" class="fas fa-folder fa-stack-2x"></i>
                         <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
@@ -139,7 +139,7 @@
         {% for obj in entry_data %}
             {% if loop.index==1 and folders %}
                 {% if cwd != root %}
-                    <figure class="px-1 dir" dir="{{cwd|ParentPath}}">
+                    <figure class="px-1 dir entry" ecnt="{{loop.index}}" dir="{{cwd|ParentPath}}">
                         <span style="font-size:{{(size|int-22)/2}}" class="fa-stack">
                             <i style="color:grey" class="fas fa-folder fa-stack-2x"></i>
                             <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
@@ -187,7 +187,7 @@
             {% endif %}
             {% if obj.type.name != "Directory" %}
                 {% if (not folders) or ((obj.in_dir.in_path.path_prefix+'/'+obj.in_dir.rel_path+'/'+obj.name) | TopLevelFolderOf(cwd)) %}
-                    <figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1" path_type="{{obj.in_dir.in_path.type.name}}" size="{{obj.file_details.size_mb}}" hash="{{obj.file_details.hash}}" in_dir="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" pretty_date="{{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}}">
+                    <figure id="{{obj.id}}" ecnt="{{loop.index}}" class="figure entry mx-1" path_type="{{obj.in_dir.in_path.type.name}}" size="{{obj.file_details.size_mb}}" hash="{{obj.file_details.hash}}" in_dir="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" pretty_date="{{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}}">
                         {% if obj.type.name=="Image" %}
                             <div style="position:relative; width:100%">
                                 <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
@@ -222,7 +222,7 @@
                     {% endif %}
                     {# if this dir is the toplevel of the cwd, show the folder icon #}
                     {% if dirname| TopLevelFolderOf(cwd) %}
-                        <figure class="px-1 dir" id={{obj.id}} dir="{{dirname}}">
+                        <figure class="px-1 dir entry" id={{obj.id}} ecnt={{loop.index}} dir="{{dirname}}">
                             <i style="font-size:{{size|int-22}};" class="fas fa-folder"></i>
                             <figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
                         </figure class="figure">
@@ -404,19 +404,25 @@ function DoSel(e, el)
     }
     if( e.shiftKey )
     {
-        st=Number($('.highlight').first().attr('img'))
-        end=Number($('.highlight').last().attr('img'))
-        clicked=Number($(el).attr('img'))
+        st=Number($('.highlight').first().attr('ecnt'))
+        end=Number($('.highlight').last().attr('ecnt'))
+        clicked=Number($(el).attr('ecnt'))
+        if( ! folders )
+        {
+            st -= 1
+            end -= 1
+            clicked -= 1
+        }
         // if we shift-click first element, then st/end are NaN, so just highlightthe one clicked
         if( isNaN(st) )
         {
-            $('.figure').slice( clicked, clicked+1 ).addClass('highlight')
+            $('.entry').slice( clicked, clicked+1 ).addClass('highlight')
             return
         }
         if( clicked > end )
-            $('.figure').slice( end, clicked+1 ).addClass('highlight')
+            $('.entry').slice( end, clicked+1 ).addClass('highlight')
         else
-            $('.figure').slice( clicked, st ).addClass('highlight')
+            $('.entry').slice( clicked, st ).addClass('highlight')
         return
     }
     $('.highlight').removeClass('highlight')
@@ -435,6 +441,24 @@ function SetButtonState() {
     }
 }
 
+function FiguresOrDirsOrBoth() {
+    var figure=false
+    var dir=false
+    $('.highlight').each(function( index ) { 
+        if( $(this).hasClass('figure') ) {
+            figure=true
+        } 
+        if( $(this).hasClass('dir') ) {
+            dir=true
+        } 
+    } )
+    if( figure & ! dir )
+        return "figure"
+    if( ! figure & dir )
+        return "dir"
+    return "both"
+}
+
 function SelContainsBinAndNotBin() {
     var bin=false
     var not_bin=false
@@ -465,45 +489,25 @@ $('.figure').click( function(e) { DoSel(e, this ); SetButtonState(); return fals
 $(document).on('click', function(e) { $('.highlight').removeClass('highlight') ; SetButtonState() });
 
 
-// different context menu on directory 
-$.contextMenu({
-    selector: '.dir',
-    build: function($triggerElement, e){
-        if( NoSel() )
-            DoSel(e, e.currentTarget )
-        item_list = {
-            ai: {
-                name: "Scan file for faces",
-                items: {
-                    {% for p in people %}
-                        "ai-{{p.tag}}": {"name": "{{p.tag}}"},
-                    {% endfor %}
-                    "ai-all": {"name": "all"},
-                }
-            }
-        }
-        return {
-            callback: function( key, options) {
-                if( key.startsWith("ai")) { RunAIOnSeln(key) }
-            },
-            items: item_list
-        };
-    }
-});
-
 // different context menu on files 
 $.contextMenu({
-    selector: '.figure',
+    selector: '.entry',
     build: function($triggerElement, e){
-        if( NoSel() )
+        // 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 )
             DoSel(e, e.currentTarget )
-        item_list = {
-            details: { name: "Details..." },
-            view: { name: "View File" },
-            sep: "---",
-            move: { name: "Move selected file(s) to new storage folder" },
-            sep2: "---",
-            ai: {
+        
+        if( FiguresOrDirsOrBoth() == "figure" )
+            item_list = {
+                details: { name: "Details..." },
+                view: { name: "View File" },
+                sep: "---",
+                move: { name: "Move selected file(s) to new storage folder" },
+                sep2: "---" }
+        else
+            item_list = {}
+        
+        item_list['ai'] = {
                 name: "Scan file for faces",
                 items: {
                     {% for p in people %}
@@ -512,7 +516,7 @@ $.contextMenu({
                     "ai-all": {"name": "all"},
                 }
             }
-        }
+        
         if( SelContainsBinAndNotBin() ) {
             item_list['both']= { name: 'Cannot delete and restore at same time', disabled: true }
         } else {