First test of separation of javascript

scripts/explorer.js

@@ -391,8 +391,8 @@ jQuery(document).ready(function($)
         }
 
         // gallery vars
-        var pageSize = 14;
+        window.pageSize = 14;
-        var paintingList = [];
+        window.paintingList = [];
 
         function generateTable()
         {
@@ -471,6 +471,7 @@ jQuery(document).ready(function($)
                         paintingHtml += 'active">';
                 else
                     paintingHtml += 'inactive">';
+
                 if (i.photo == "none")
                 {
                     paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
@@ -481,6 +482,7 @@ jQuery(document).ready(function($)
                     paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
                     paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>'
                 }
+                
                 paintingHtml += '<span class="item-title">' + i.title;
                 if (i.year != '—')
                     paintingHtml += ' (' + i.year + ')';
@@ -508,70 +510,15 @@ jQuery(document).ready(function($)
             $("form").slideUp(200);
             $("article.explorer p.result").css("display", "block");
 
-
+            // pagination configuration
-            // pagination
+            window.currentPage = 0;
-            function getPageRange()
+            window.previousArray = []
-            {
+            $.getScript("scripts/pagination.js", function() {
-                if (window.innerWidth >= 600)
+                paginationInit(data, paintingList, true);
-                    return 6;
-                else if (window.innerWidth < 600 && window.innerWidth > 450)
-                    return 4;
-                else
-                    return 1;
-            }
-
-            var currentPage = 0;
-            var previousArray = []
-            var options = 
-            {
-                dataSource: paintingList,
-                pageSize: pageSize,
-                pageRange: getPageRange(),
-                className: 'paginationjs-theme-ginou',
-                hideWhenLessThanOnePage: true,
-                callback: function (response, pagination)
-                {
-                    currentPage = pagination.pageNumber;
-                    urlParams = new URLSearchParams(window.location.search)
-                    if (urlParams.get('page') == undefined)
-                    {
-                        window.history.replaceState('', '', window.location.pathname + window.location.search + '&page=' + currentPage + window.location.hash);
-                    }
-                    else
-                    {
-                        trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
-                        window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
-                    }
-
-                    if (previousArray.length > 0)
-                    {
-                        for (i of previousArray)
-                            $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
-                    }
-
-                    previousArray = response;
-
-                    $.each(response, function(index, item)
-                    {
-                        $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active");
-                        
-                        idx = item-1;
-                        if (item >= 1000)
-                            idx = item - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
-
-                        if (data[idx].photo != "none")
-                            $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg");
-                        else
-                            $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"] img').attr("src", "images/unknown.jpg");
-                    });
-                }
-            };
-
-            $('#pagination').pagination(options);
 
                 if (targetPage > 0)
                     $("#pagination").pagination('go', targetPage);
-
+            });
         }
         else
         {
@@ -603,66 +550,9 @@ jQuery(document).ready(function($)
             $("table").show();
         })
 
-
         // fancybox configuration
-        $('[data-fancybox="exposition"], [data-fancybox="exposition-list"]').fancybox(
+        $.getScript("scripts/fancybox.js", function() {
-        {
+            fancyboxInit(data, true);
-            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)
-            {
-                var idx = item.opts.fancyboxIndex - 1; // painting number
-                if (item.opts.fancyboxIndex >= 1000)
-                    idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
-                
-                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)
-                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);
-            }
         });
     });
 });

scripts/exposition.js

@@ -2,7 +2,7 @@ jQuery(document).ready(function($)
 {
     $.getJSON("data.json", function(data)
     {
-        var pageSize = 14;
+        window.pageSize = 14;
         var paintingList = [];
 
         canDisplay = true;
@@ -38,110 +38,19 @@ jQuery(document).ready(function($)
         if (urlParams.get('page') != "")
             targetPage = urlParams.get('page');
 
-        function getPageRange()
+        // pagination configuration
-        {
+        window.currentPage = 0;
-            if (window.innerWidth >= 600)
+        window.previousArray = [];
-                return null;
+        $.getScript("scripts/pagination.js", function() {
-            else if (window.innerWidth < 600 && window.innerWidth > 450)
+            paginationInit(data, paintingList, false);
-                return 4;
-            else
-                return 1;
-        }
-        
-        var currentPage = 0;
-        var previousArray = []
-        var options = 
-        {
-            dataSource: paintingList,
-            pageSize: pageSize,
-            pageRange: getPageRange(),
-            className: 'paginationjs-theme-ginou',
-            hideWhenLessThanOnePage: true,
-            callback: function (response, pagination)
-            {
-                currentPage = pagination.pageNumber;
-                window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
-
-                if (previousArray.length > 0)
-                {
-                    for (i of previousArray)
-                        $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
-                }
-
-                previousArray = response;
-
-                $.each(response, function(index, item)
-                {
-                    $('[data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active");
-                    $('[data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg");
-                });
-            }
-        };
-
-        $('#pagination').pagination(options);
 
             if (targetPage > 0)
                 $("#pagination").pagination('go', targetPage);
+        });
 
-
+        // fancybox configuration
-        $('[data-fancybox="exposition"]').fancybox(
+        $.getScript("scripts/fancybox.js", function() {
-            {
+            fancyboxInit(data, false);
-                selector: '.gallery a',
-                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)
-                {
-                    var idx = item.opts.fancyboxIndex - 1; // painting number
-                    if (item.opts.fancyboxIndex >= 1000)
-                        idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
-    
-                    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)
-                    window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
-                }
-
         });
     });
 });

scripts/fancybox.js

@@ -0,0 +1,68 @@
+function fancyboxInit(data, explorer)
+{
+    $('[data-fancybox="exposition"], [data-fancybox="exposition-list"]').fancybox(
+    {
+        selector: '.gallery a',
+        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)
+        {
+            var idx = item.opts.fancyboxIndex - 1; // painting number
+            if (item.opts.fancyboxIndex >= 1000)
+                idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
+            
+            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);
+        }
+    });
+}

scripts/pagination.js

@@ -0,0 +1,62 @@
+function paginationInit(data, paintingList, explorer)
+{
+    function getPageRange()
+    {
+        if (window.innerWidth >= 600)
+            return explorer ? 6 : null;
+        else if (window.innerWidth < 600 && window.innerWidth > 450)
+            return 4;
+        else
+            return 1;
+    }
+
+    var options = 
+    {
+        dataSource: paintingList,
+        pageSize: pageSize,
+        pageRange: getPageRange(),
+        className: 'paginationjs-theme-ginou',
+        hideWhenLessThanOnePage: true,
+        callback: function (response, pagination)
+        {
+            currentPage = pagination.pageNumber;
+            // url handling
+            if (explorer)
+            {
+                urlParams = new URLSearchParams(window.location.search)
+                if (urlParams.get('page') == undefined)
+                {
+                    window.history.replaceState('', '', window.location.pathname + window.location.search + '&page=' + currentPage + window.location.hash);
+                }
+                else
+                {
+                    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);
+            }
+
+            if (previousArray.length > 0)
+            {
+                for (i of previousArray)
+                    $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
+            }
+
+            previousArray = response;
+
+            $.each(response, function(index, item)
+            {
+                $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active");
+                if (data[item >= 1000 ? (item - 1000 + 383 - 1) : (item - 1)].photo != "none") // inédit: index starts at 1000 // 383: total number of paintings except inédit
+                    $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg");
+                else
+                    $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"] img').attr("src", "images/unknown.jpg");
+            });
+        }
+    };
+
+    $('#pagination').pagination(options);
+}