Introduce multiple thumbnail strips, and select one in a sensible way.

Significantly, there are now multiple thumbnail strips and `focus'
thumbnails, so we need to be more intelligent about scrolling them.

diff --git a/mason/.perl-lib/TrivGal.pm b/mason/.perl-lib/TrivGal.pm
index 838de97..5b5cbfa 100644 (file)
--- a/mason/.perl-lib/TrivGal.pm
+++ b/mason/.perl-lib/TrivGal.pm
@@ -138,7 +138,10 @@ our $STATICURL //= "$ROOTURL/tgal-static";
 our $SCRIPTURL;
 
 export qw{%SIZE};
-our %SIZE = (bigthumb => 228, view => 1200);
+our %SIZE = (smallthumb => 96,
+            medthumb => 144,
+            bigthumb => 228,
+            view => 1200);
 
 export qw{init};
 my $initp = 0;

diff --git a/mason/dhandler b/mason/dhandler
index 011c561..813e637 100755 (executable)
--- a/mason/dhandler
+++ b/mason/dhandler
@@ -107,7 +107,7 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 %
 % if (@$dd) {
 <h2>Subfolders</h2>
-%   for my $size (qw{bigthumb}) {
+%   for my $size (qw{medthumb}) {
 <div class="gallery <% $size %>">
 %     for my $d (@$dd) {
   <& .thumbnail, target => $d->name . "/", comment => $d->comment,
@@ -120,7 +120,7 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 %
 % if (@$ff) {
 <h2>Images</h2>
-%   for my $size (qw{bigthumb}) {
+%   for my $size (qw{medthumb}) {
 <div class="gallery <% $size %>">
 %     for my $f (@$ff) {
   <& .thumbnail, target => $f->name, comment => $f->comment,
@@ -200,7 +200,7 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 </div>
 %
 % my %img = map { $_ => TrivGal::Image->new($dir . "/" . $_->name) } @$ff;
-% for my $size (qw{bigthumb}) {
+% for my $size (qw{smallthumb medthumb bigthumb}) {
 <div class="thumbstrip <% $size %>">
 %   for my $f (@$ff) {
   <& .thumbnail, target => $f->name, img => $img{$f}, size => $size,
@@ -251,7 +251,7 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 % if (defined $img) { $tn = $img->scale($size); }
 % else { $tn = "$STATICURL/folder.svg"; }
 % if ($focus) {
-  <figure class="thumb <% $size %>" id=focusthumb>
+  <figure class="thumb focusthumb <% $size %>">
     <img class="thumb <% $size %>" load=lazy src="<% $tn |u %>">
     <figcaption><span class=name><% $caption %></span></figcaption>
 % } else {

diff --git a/static/tgal.css b/static/tgal.css
index 0cbae14..b94038e 100644 (file)
--- a/static/tgal.css
+++ b/static/tgal.css
@@ -79,7 +79,7 @@ div.gallery {
        flex-direction: row; flex-wrap: wrap;
        align-items: start; justify-content: space-evenly;
 }
-div.gallery.bigthumb { display: flex; }
+div.gallery.medthumb { display: flex; }
 
 figure.thumb {
        display: inline-block;
@@ -92,6 +92,12 @@ img.thumb { object-fit: contain; }
 figure.bigthumb { width: 228px; }
 img.bigthumb { width: 228px; height: 228px; }
 
+figure.medthumb { width: 144px; }
+img.medthumb { width: 144px; height: 144px; }
+
+figure.smallthumb { width: 96px; }
+img.smallthumb { width: 96px; height: 96px; }
+
 div.comment {
        border: thin black solid;
        max-width: 40em;
@@ -145,6 +151,19 @@ div.thumbstrip {
        text-align: center;
        flex-direction: row; align-self: center;
 }
-div.thumbstrip.bigthumb { display: flex; }
+
+div.thumbstrip.smallthumb { display: flex; }
+div.thumbstrip.medthumb { display: none; }
+div.thumbstrip.bigthumb { display: none; }
+@media (min-height: 1200px) and (max-height: 1599px) {
+       div.thumbstrip.smallthumb { display: none; }
+       div.thumbstrip.medthumb { display: flex; }
+       div.thumbstrip.bigthumb { display: none; }
+}
+@media (min-height: 1600px) {
+       div.thumbstrip.smallthumb { display: none; }
+       div.thumbstrip.medthumb { display: none; }
+       div.thumbstrip.bigthumb { display: flex; }
+}
 
 /*----- That's all, folks -------------------------------------------------*/

diff --git a/static/tgal.js b/static/tgal.js
index de05593..e77973b 100644 (file)
--- a/static/tgal.js
+++ b/static/tgal.js
@@ -42,14 +42,34 @@ addEventListener("keydown", function (ev) {
 
 /* Scroll the thumbnail strip so that the current image is in the middle. */
 (function () {
-  var strip = document.querySelector("div.thumbstrip");
-  var focus = document.querySelector("#focusthumb");
-  if (strip && focus) {
-    var stripbox = strip.getBoundingClientRect();
-    var focusbox = focus.getBoundingClientRect();
-    strip.scrollLeft +=
-      (focusbox.x - stripbox.x) -
-      (stripbox.width - focusbox.width)/2;
+  var obs = null;
+
+  var scroll = function(strip) {
+    var focus = strip.querySelector("figure.focusthumb");
+    if (focus) {
+      var stripbox = strip.getBoundingClientRect();
+      var focusbox = focus.getBoundingClientRect();
+      strip.scrollLeft +=
+       (focusbox.x - stripbox.x) -
+       (stripbox.width - focusbox.width)/2;
+    }
+  };
+
+  var strips = document.querySelectorAll("div.thumbstrip");
+  if (window.IntersectionObserver) {
+    obs = new IntersectionObserver(function (ee) {
+      ee.forEach(function (e) {
+       if (e.isIntersecting) {
+         obs.unobserve(e.target);
+         scroll(e.target);
+       }
+      });
+    }, {
+      root: document.querySelector("html")
+    });
+    strips.forEach(function (strip) { obs.observe(strip); });
+  } else {
+    strips.forEach(scroll);
   }
 })();