From e5d4f26fc2e6065fa844fa3431b0f4dc1486b9cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Marchal?= <me@theomarchal.com>
Date: Wed, 3 Aug 2022 12:30:56 +0200
Subject: [PATCH] Fix FancyBox in the list view of Explorer

---
 scripts/explorer.js |   2 +-
 scripts/fancybox.js | 133 ++++++++++++++++++++++++++------------------
 2 files changed, 80 insertions(+), 55 deletions(-)

diff --git a/scripts/explorer.js b/scripts/explorer.js
index d8c9bb7..7035a7d 100644
--- a/scripts/explorer.js
+++ b/scripts/explorer.js
@@ -447,7 +447,7 @@ jQuery(document).ready(function($)
                 else
                     result += '<td>&nbsp;</td>'
 
-                result += '<td><a data-fancybox="exposition-list" href="';
+                result += '<td><a class="list-preview" data-fancybox="exposition-list" href="';
                 if (i.photo == "none")
                     result += 'images/unknown.jpg';
                 else
diff --git a/scripts/fancybox.js b/scripts/fancybox.js
index 0a8413b..95e28f9 100644
--- a/scripts/fancybox.js
+++ b/scripts/fancybox.js
@@ -1,6 +1,6 @@
 function fancyboxInit(data, explorer)
 {
-    $('[data-fancybox="exposition"], [data-fancybox="exposition-list"]').fancybox(
+    $('[data-fancybox="exposition"]').fancybox(
     {
         selector: '.gallery a',
         infobar: false,
@@ -14,58 +14,83 @@ function fancyboxInit(data, explorer)
             preventCaptionOverlap: true,
         },
 
-        caption: function(instance, item)
-        {
-            var idx = 0; // search the index of the painting of filtered data
-            for (i = 0; i < data.length; i++)
-            {
-                if (data[i].number == item.opts.fancyboxIndex)
-                    idx = i;
-            }
-            
-            function generateCartel()
-            {
-                cartel = '<div id="info"><span class="info">';
-                cartel += '<a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>';
-                cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
-                if (data[idx].month != '—')
-                    cartel += data[idx].month + '&nbsp;';
-                if (data[idx].year != '—')
-                    cartel += data[idx].year;
-                cartel += '&nbsp;</span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
-                if (data[idx].dimension != '—')
-                    cartel += ' (' + data[idx].dimension + ')';
-                cartel += '</span>';
-                if (data[idx].comment != '—')
-                    cartel += '<span class="comment">' + data[idx].comment + '</span>';
-                cartel += '</div>';
-                return cartel;
-            }
-
-            return generateCartel();
-        },
-
-        beforeShow : function(instance, current)
-        {
-            if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
-                $('#pagination').pagination('next');
-
-            if (current.opts.fancyboxIndex < previousArray[0])
-                $('#pagination').pagination('previous');
-        },
-
-        afterClose : function(instance)
-        {
-            // after closing, changing the URL again. I guess there's no better way except by changing fancybox code...
-            // (apparently fancybox changes back to the original url it had when starting)
-            if (explorer)
-            {
-                urlParams = new URLSearchParams(window.location.search)
-                trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
-                window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
-            }
-            else
-                window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
-        }
+        caption: function(instance, item) { return caption(item, data); },
+        beforeShow : function(instance, current) { return beforeShow(instance, current); },
+        afterClose : function(instance) { return afterClose(instance); }
     });
+
+    $('[data-fancybox="exposition-list"]').fancybox(
+    {
+        selector: 'a.list-preview',
+        infobar: false,
+        toolbar: true,
+        smallBtn: false,
+        buttons: ["arrowLeft", "arrowRight", "close"],
+        arrows: false,
+        transitionEffect: "fade",
+        baseClass: 'fancybox-custom-layout',
+        mobile: {
+            preventCaptionOverlap: true,
+        },
+
+        caption: function(instance, item) { return caption(item, data); },
+        beforeShow : function(instance, current) { return beforeShow(instance, current); },
+        afterClose : function(instance) { return afterClose(instance); }
+    });
+
+    function caption(item, data)
+    {
+        var idx = 0; // search the index of the painting of filtered data
+        for (i = 0; i < data.length; i++)
+        {
+            if (data[i].number == item.opts.fancyboxIndex)
+                idx = i;
+        }
+                
+        function generateCartel()
+        {
+            cartel = '<div id="info"><span class="info">';
+            cartel += '<a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>';
+            cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
+            if (data[idx].month != '—')
+                cartel += data[idx].month + '&nbsp;';
+            if (data[idx].year != '—')
+                cartel += data[idx].year;
+            cartel += '&nbsp;</span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
+            if (data[idx].dimension != '—')
+                cartel += ' (' + data[idx].dimension + ')';
+            cartel += '</span>';
+            if (data[idx].comment != '—')
+                cartel += '<span class="comment">' + data[idx].comment + '</span>';
+            cartel += '</div>';
+
+            return cartel;
+        }
+    
+        return generateCartel();
+    }
+
+    function beforeShow(instance, current)
+    {
+        if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
+            $('#pagination').pagination('next');
+
+        if (current.opts.fancyboxIndex < previousArray[0])
+            $('#pagination').pagination('previous');
+    }
+
+    function afterClose(instance)
+    {
+        // after closing, changing the URL again. I guess there's no better way except by changing fancybox code...
+        // (apparently fancybox changes back to the original url it had when starting)
+        if (explorer)
+        {
+            urlParams = new URLSearchParams(window.location.search)
+            trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
+            window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
+        }
+        else
+            window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
+    }
+
 }
\ No newline at end of file