From 81264bd50d6bab19b294ad8c4171091170029153 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Fri, 24 Sep 2021 21:39:35 +1000
Subject: [PATCH] stop trying to use loop.index for which ecnt, just use a
 dedicated var... stops the weirdness between folders/no folders when
 highlighting too -- fixed last bug with incorrect selections

---
 templates/files.html | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/templates/files.html b/templates/files.html
index 02a09c6..55ba2e1 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -117,15 +117,17 @@
             <input name="eids" id="eids" type="hidden" value="{{eids.str}}">
         </form>
     </div>
+    {% set ecnt=namespace( val=0 ) %}
     <div class="row ms-2">
         {% set last = namespace(printed=0) %}
         {# rare event of empty folder, still need to show back button #}
         {% if OPT.folders and entry_data|length == 0 %}
             {% if OPT.cwd != OPT.root %}
-                <figure id="_back" class="dir entry m-1" ecnt="1" dir="{{OPT.cwd|ParentPath}}" type="Directory">
+                <figure id="_back" class="dir entry m-1" ecnt="{{ecnt.val}}" dir="{{OPT.cwd|ParentPath}}" type="Directory">
                     <svg class="svg" width="{{OPT.size|int-22}}" height="{{OPT.size|int-22}}"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#folder_back"/></svg>
                     <figcaption class="figure-caption text-center">Back</figcaption>
                 </figure class="figure">
+                {% set ecnt.val=ecnt.val+1 %}
                 <script>f=$('#_back'); w=f.find('svg').width(); f.find('figcaption').width(w);</script>
             {% else %}
                 <div class="col col-auto g-0 m-1">
@@ -136,11 +138,12 @@
         {% for obj in entry_data %}
             {% if loop.index==1 and OPT.folders %}
                 {% if OPT.cwd != OPT.root %}
-                    <figure class="col col-auto g-0 dir entry m-1" ecnt="{{loop.index}}" dir="{{OPT.cwd|ParentPath}}" type="Directory">
+                    <figure class="col col-auto g-0 dir entry m-1" ecnt="{{ecnt.val}}" dir="{{OPT.cwd|ParentPath}}" type="Directory">
                         <svg class="svg" width="{{OPT.size|int-22}}" height="{{OPT.size|int-22}}" fill="currentColor">
                             <use xlink:href="{{url_for('internal', filename='icons.svg')}}#folder_back"/></svg>
                         <figcaption class="svg_cap figure-caption text-center">Back</figcaption>
                     </figure class="figure">
+                    {% set ecnt.val=ecnt.val+1 %}
                 {% else %}
                     {# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #}
                     <div class="col col-auto g-0 m-1">
@@ -169,7 +172,7 @@
             {% endif %}
             {% if obj.type.name == "Image" or obj.type.name == "Video" %}
                 {% if (not OPT.folders) or ((obj.in_dir.in_path.path_prefix+'/'+obj.in_dir.rel_path+'/'+obj.name) | TopLevelFolderOf(OPT.cwd)) %}
-                    <figure id="{{obj.id}}" ecnt="{{loop.index}}" class="col col-auto g-0 figure entry m-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}}" type="{{obj.type.name}}">
+                    <figure id="{{obj.id}}" ecnt="{{ecnt.val}}" class="col col-auto g-0 figure entry m-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}}" type="{{obj.type.name}}">
                         {% 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 alt="{{obj.name}}" class="thumb" height="{{OPT.size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
@@ -196,6 +199,7 @@
                             </div>
                         {% endif %}
                     </figure>
+                    {% set ecnt.val=ecnt.val+1 %}
                 {% endif %}
             {% elif obj.type.name == "Directory" %}
                 {% if OPT.folders %}
@@ -206,11 +210,12 @@
                     {% endif %}
                     {# if this dir is the toplevel of the cwd, show the folder icon #}
                     {% if dirname| TopLevelFolderOf(OPT.cwd) %}
-                        <figure class="col col-auto g-0 dir entry m-1" id={{obj.id}} ecnt={{loop.index}} dir="{{dirname}}" type="Directory">
+                        <figure class="col col-auto g-0 dir entry m-1" id={{obj.id}} ecnt={{ecnt.val}} dir="{{dirname}}" type="Directory">
                             <svg class="svg" width="{{OPT.size|int-22}}" height="{{OPT.size|int-22}}" fill="currentColor">
                                 <use xlink:href="{{url_for('internal', filename='icons.svg')}}#Directory"/></svg>
                             <figcaption class="svg_cap figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
                         </figure class="figure">
+                        {% set ecnt.val=ecnt.val+1 %}
                         <script>f=$('#{{obj.id}}'); w=f.find('svg').width(); f.find('figcaption').width(w);</script>
                     {% endif %}
                 {% endif %}