Infinite Scrolling breaks clicking the Gaseous Games logo to return to library (#326)

Closes #316

Overhauled how infinite scrolling works. Should be more reliable now.

gaseous-server/Classes/Database.cs

@@ -149,6 +149,9 @@ namespace gaseous_server.Classes
 
 											// run post-upgrade code
 											DatabaseMigration.PostUpgradeScript(i, _ConnectorType);
+
+											// update schema version variable
+											Database.schema_version = i;
 										}
 										catch (Exception ex)
 										{

gaseous-server/Classes/Metadata/Games.cs

@@ -561,6 +561,7 @@ namespace gaseous_server.Classes.Metadata
             }
 
             public long? Id { get; set; }
+            public long Index { get; set; }
             public string Name { get; set; }
             public string Slug { get; set; }
             public double? TotalRating { get; set; }

gaseous-server/Controllers/V1.1/GamesController.cs

@@ -569,6 +569,7 @@ FROM
 
                 Game retGame = Storage.BuildCacheObject<Game>(new Game() , dbResponse.Rows[i]);
                 Games.MinimalGameItem retMinGame = new Games.MinimalGameItem(retGame);
+                retMinGame.Index = i;
                 if (dbResponse.Rows[i]["RomSaveCount"] != DBNull.Value || dbResponse.Rows[i]["MediaGroupSaveCount"] != DBNull.Value)
                 {
                     retMinGame.HasSavedGame = true;

gaseous-server/wwwroot/pages/dialogs/userprofile.html

@@ -220,7 +220,8 @@
         SetPreference_Batch(model);
         
         if (getQueryString('page', 'string') == 'home' ||  getQueryString('page', 'string') == undefined) {
-            executeFilter1_1(1);
+            setCookie('games_library_last_page', 1);
+            location.reload();
         }
 
         closeDialog();

gaseous-server/wwwroot/scripts/filterformating.js

@@ -27,7 +27,7 @@ function formatFilterPanel(containerElement, result) {
             // Cancel the default action, if needed
             event.preventDefault();
             // Trigger the button element with a click
-            executeFilter1_1();
+            applyFilters();
         }
     });
     containerPanelSearch.appendChild(containerPanelSearchField);
@@ -99,7 +99,7 @@ function formatFilterPanel(containerElement, result) {
     // add filter button
     var searchButton = document.createElement('div');
     searchButton.id = 'games_library_searchbutton';
-    searchButton.setAttribute('onclick', 'executeFilter1_1();');
+    searchButton.setAttribute('onclick', 'applyFilters();');
     searchButton.innerHTML = 'Apply';
 
     buttonsDiv.appendChild(searchButton);
@@ -365,6 +365,12 @@ function filter_panel_range_value(name) {
     }
 }
 
+function applyFilters() {
+    document.getElementById('games_library').innerHTML = '';
+
+    executeFilter1_1();
+}
+
 function resetFilters() {
     // clear name
     document.getElementById('filter_panel_search').value = '';
@@ -381,6 +387,7 @@ function resetFilters() {
         filter_panel_range_enabled_check(rangeCheckboxes[i].getAttribute('data-name'));
     }
 
+    document.getElementById('games_library').innerHTML = '';
     executeFilter1_1();
 }
 
@@ -393,8 +400,18 @@ function executeFilter1_1(pageNumber, pageSize) {
         existingSearchModel = undefined;
     }
 
+    let pageMode = GetPreference('LibraryPagination', 'paged');
+
     if (!pageSize) {
+        switch (pageMode) {
+            case "infinite":
+                pageSize = 5;
+                break;
+            case "paged":
+            default:
                 pageSize = 30;
+                break;
+        }
     }
 
     var model;

gaseous-server/wwwroot/scripts/gamesformating.js

@@ -56,30 +56,75 @@ var ClassificationRatings = {
 };
 
 var pageReloadInterval;
+var firstLoad = true;
 
 function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScrollTop) {
-    console.log("Displaying page: " + pageNumber);
-    console.log("Page size: " + pageSize);
-
     var pageMode = GetPreference('LibraryPagination', 'paged');
 
-    if (pageNumber == 1 || pageMode == 'paged') {
+    if (pageNumber == 1) {
-        targetElement.innerHTML = ''; 
+        localStorage.setItem("gaseous-library-scrollpos", 0);
     }
 
     if (pageMode == 'paged') {
+        targetElement.innerHTML = '';
+    }
+
+    switch (pageMode) {
+        case 'paged':
             if (forceScrollTop == true) {
                 window.scrollTo(0, 0);
             }
+            break;
+        case 'infinite':
+            var gamePlaceholders = document.getElementsByName('GamePlaceholder');
+            let currentPageValue = 0;
+            let nextPageThreshold = -1;
+            for (var i = 0; i < result.count; i++) {
+                if (i >= nextPageThreshold) {
+                    // new page
+                    currentPageValue ++;
+                    nextPageThreshold = i + pageSize;
+
+                    if (currentPageValue > 0) {
+                        if (!document.getElementById('pageFooterAnchor' + (currentPageValue - 1))) {
+                            let newFooterPageAnchor = document.createElement('a');
+                            newFooterPageAnchor.id = 'pageFooterAnchor' + (currentPageValue - 1);
+                            newFooterPageAnchor.setAttribute('name', 'pageAnchor' + (currentPageValue - 1));
+                            newFooterPageAnchor.className = 'pageFooterAnchor';
+                            newFooterPageAnchor.setAttribute('data-page', (currentPageValue - 1));
+                            newFooterPageAnchor.setAttribute('data-loaded', "0");
+                            targetElement.appendChild(newFooterPageAnchor);
+                        }
                     }
 
-    var pagerCheck = document.getElementById('games_library_pagerstore');
+                    if (!document.getElementById('pageAnchor' + currentPageValue)) {
-    if (pageNumber == 1) {
+                        let newPageAnchor = document.createElement('a');
-        pagerCheck.innerHTML = "0";
+                        newPageAnchor.id = 'pageAnchor' + currentPageValue;
+                        newPageAnchor.setAttribute('name', 'pageAnchor' + currentPageValue);
+                        newPageAnchor.className = 'pageAnchor';
+                        newPageAnchor.setAttribute('data-page', currentPageValue);
+                        newPageAnchor.setAttribute('data-loaded', "0");
+                        targetElement.appendChild(newPageAnchor);
+                    }
                 }
 
-    if (pageNumber > Number(pagerCheck.innerHTML) || pageMode == 'paged') {
+                var placeHolderpresent = false;
-        pagerCheck.innerHTML = pageNumber;
+                for (var x = 0; x < gamePlaceholders.length; x++) {
+                    if (gamePlaceholders[x].getAttribute('data-index') == i) {
+                        placeHolderpresent = true;
+                    }
+                }
+                if (placeHolderpresent == false) {
+                    var gamePlaceholder = document.createElement('div');
+                    gamePlaceholder.setAttribute('name', 'GamePlaceholder');
+                    gamePlaceholder.id = 'GamePlaceholder' + i;
+                    gamePlaceholder.setAttribute('data-index', i);
+                    gamePlaceholder.className = 'game_tile';
+                    targetElement.appendChild(gamePlaceholder);
+                }
+            }
+            break;
+    }
 
     document.getElementById('games_library_recordcount').innerHTML = result.count + ' games';
 
@@ -100,14 +145,22 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
 
     for (var i = 0; i < result.games.length; i++) {
         var game = renderGameIcon(result.games[i], showTitle, showRatings, showClassification, classificationDisplayOrder, false);
+        switch (pageMode) {
+            case "paged":
                 targetElement.appendChild(game);
-        }
+                break;
 
-        $('.lazy').Lazy({
+            case "infinite":
-            scrollDirection: 'vertical',
+                var placeholderElement = document.getElementById('GamePlaceholder' + result.games[i].index);
-            effect: 'fadeIn',
+                if (placeholderElement.className != 'game_tile_wrapper') {
-            visibleOnly: true
+                    placeholderElement.className = 'game_tile_wrapper';
-        });
+                    placeholderElement.innerHTML = '';
+                    placeholderElement.appendChild(game);
+                }
+                break;
+
+        }
+    }
 
     var pager = document.getElementById('games_pager');
     pager.style.display = 'none';
@@ -117,15 +170,23 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
 
     switch(pageMode) {
         case 'infinite':
-                if (result.games.length == pageSize) {
+            for (const [key, value] of Object.entries(result.alphaList)) {
-                    var loadPageButton = document.createElement("div");
+                var letterPager = document.createElement('span');
-                    loadPageButton.id = 'games_library_loadmore';
+                letterPager.className = 'games_library_alpha_pager_letter';
-                    loadPageButton.innerHTML = 'Load More';
+                letterPager.setAttribute('onclick', 'document.location.hash = "#pageAnchor' + value + '"; executeFilter1_1(' + value + ');');
-                    loadPageButton.setAttribute('onclick', 'executeFilter1_1(' + (pageNumber + 1) + ', ' + pageSize + ');');
+                letterPager.innerHTML = key;
-                    loadPageButton.setAttribute('data-pagenumber', Number(pageNumber + 1));
+                alphaPager.appendChild(letterPager);
-                    loadPageButton.setAttribute('data-pagesize', pageSize);
-                    targetElement.appendChild(loadPageButton);
             }
+            
+            if (firstLoad == true) {
+                if (localStorage.getItem("gaseous-library-scrollpos") != null) {
+                    $(window).scrollTop(localStorage.getItem("gaseous-library-scrollpos"));
+                }
+                firstLoad = false;
+            }
+
+            IsInView();
+
             break;
 
         case 'paged':
@@ -138,11 +199,6 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
             }
 
             if (result.count > pageSize) {
-                    // add some padding to the bottom of the games list
-                    var loadPageButton = document.createElement("div");
-                    loadPageButton.id = 'games_library_padding';
-                    targetElement.appendChild(loadPageButton);
-
                 var pageCount = Math.ceil(result.count / pageSize);
 
                 // add first page button
@@ -167,7 +223,8 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
 
                 // add page numbers
                 var pageEitherSide = 4;
-                    var currentPage = Number(pagerCheck.innerHTML);
+                // var currentPage = Number(pagerCheck.innerHTML);
+                var currentPage = pageNumber;
                 var pageNumbers = document.createElement('span');
                 for (var i = 1; i <= pageCount; i++) {
                     if (
@@ -187,7 +244,7 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
                         )
                     ) {
                         var pageNum = document.createElement('span');
-                            if (Number(pagerCheck.innerHTML) == i) {
+                        if (pageNumber == i) {
                             pageNum.className = 'games_pager_number_disabled';
                         } else {
                             pageNum.className = 'games_pager_number';
@@ -229,19 +286,12 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
             }
             break;
     }
-    }
 
-    // var pageReloadFunction = function() {
+    $('.lazy').Lazy({
-    //     formatGamesPanel(targetElement, result, pageNumber, pageSize, false);
+        effect: 'show',
-
+        effectTime: 100,
-    //     ajaxCall('/api/v1.1/Filter', 'GET', function (result) {
+        visibleOnly: true
-    //         var scrollerElement = document.getElementById('games_filter_scroller');
+    });
-    //         formatFilterPanel(scrollerElement, result);
-    //     })
-    // };
-
-    // window.clearTimeout(pageReloadInterval);
-    // pageReloadInterval = setTimeout(pageReloadFunction, 10000);
 }
 
 function isScrolledIntoView(elem) {
@@ -257,14 +307,40 @@ function isScrolledIntoView(elem) {
 }
 
 function IsInView() {
+    var pageMode = GetPreference('LibraryPagination', 'paged');
+    switch (pageMode) {
+        case "paged":
             var loadElement = document.getElementById('games_library_loadmore');
             if (loadElement) {
                 if (isScrolledIntoView(loadElement)) {
                     var pageNumber = Number(document.getElementById('games_library_loadmore').getAttribute('data-pagenumber'));
                     var pageSize = document.getElementById('games_library_loadmore').getAttribute('data-pagesize');
-            executeFilter1_1(pageNumber, pageSize);
+                    executeFilter1_1(pageNumber);
                 }
             }
+            break;
+
+        case "infinite":
+            // store scroll location
+            localStorage.setItem("gaseous-library-scrollpos", $(window).scrollTop());
+
+            // load page
+            let anchors = document.getElementsByClassName('pageAnchor');
+            let footAnchors = document.getElementsByClassName('pageFooterAnchor');
+            for (let i = 0; i < anchors.length; i++) {
+                if (isScrolledIntoView(anchors[i]) && anchors[i].getAttribute('data-loaded') == "0") {
+                    document.getElementById(anchors[i].id).setAttribute('data-loaded', "1");
+                    executeFilter1_1(Number(anchors[i].getAttribute('data-page')));
+                }
+            }
+            for (let i = 0; i < footAnchors.length; i++) {
+                if (isScrolledIntoView(footAnchors[i]) && footAnchors[i].getAttribute('data-loaded') == "0") {
+                    document.getElementById(footAnchors[i].id).setAttribute('data-loaded', "1");
+                    executeFilter1_1(Number(footAnchors[i].getAttribute('data-page')));
+                }
+            }
+            break;
+    }
 }
 
 $(window).scroll(IsInView);
@@ -279,26 +355,28 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
     var gameBox = document.createElement('div');
     gameBox.id = "game_tile_" + gameObject.id;
     if (useSmallCover == true) {
-        gameBox.className = classes['game_tile game_tile_small'];
+        gameBox.classList.add(...classes['game_tile game_tile_small']);
     } else {
-        gameBox.className = classes['game_tile'];
+        gameBox.classList.add(...classes['game_tile']);
     }
     gameBox.setAttribute('onclick', 'window.location.href = "/index.html?page=game&id=' + gameObject.id + '";');
 
     var gameImageBox = document.createElement('div');
-    gameImageBox.className = classes['game_tile_box'];
+    gameImageBox.classList.add(...classes['game_tile_box']);
 
     var gameImage = document.createElement('img');
+    gameImage.id = 'game_tile_cover_' + gameObject.id;
     if (useSmallCover == true) {
-        gameImage.className = classes['game_tile_image game_tile_image_small lazy'];
+        gameImage.classList.add(...classes['game_tile_image game_tile_image_small lazy']);
     } else {
-        gameImage.className = classes['game_tile_image lazy'];
+        gameImage.classList.add(...classes['game_tile_image lazy']);
     }
-    gameImage.src = '/images/unknowngame.png';
+    // gameImage.src = '/images/unknowngame.png';
     if (gameObject.cover) {
         gameImage.setAttribute('data-src', '/api/v1.1/Games/' + gameObject.id + '/cover/image/cover_big/' + gameObject.cover.imageId + '.jpg');
     } else {
-        gameImage.className = classes['game_tile_image unknown'];
+        gameImage.classList.add(...classes['game_tile_image unknown']);
+        gameImage.setAttribute('data-src', '/images/unknowngame.png');
     }
     gameImageBox.appendChild(gameImage);
 
@@ -312,7 +390,6 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
                     if (gameObject.ageRatings[c].category == classificationDisplayOrder[b]) {
                         shownClassificationBoard = classificationDisplayOrder[b];
                         displayClassification = true;
-                        //classificationPath = '/api/v1.1/Ratings/Images/' + classificationDisplayOrder[b] + '/' + getKeyByValue(AgeRatingStrings, gameObject.ageRatings[c].rating) + '/image.svg';
                         classificationPath = '/images/Ratings/' + classificationDisplayOrder[b] + '/' + gameObject.ageRatings[c].rating + '.svg';
                     }
                 }
@@ -326,7 +403,7 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
     if (gameObject.hasSavedGame == true) {
         var gameSaveIcon = document.createElement('img');
         gameSaveIcon.src = '/images/SaveStates.png';
-        gameSaveIcon.className = classes['game_tile_box_savedgame savedstateicon'];
+        gameSaveIcon.classList.add(...classes['game_tile_box_savedgame savedstateicon']);
         gameImageBox.appendChild(gameSaveIcon);
     }
 
@@ -334,13 +411,13 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
     if (gameObject.isFavourite == true) {
         var gameFavIcon = document.createElement('img');
         gameFavIcon.src = '/images/favourite-filled.svg';
-        gameFavIcon.className = classes['game_tile_box_favouritegame favouriteicon'];
+        gameFavIcon.classList.add(...classes['game_tile_box_favouritegame favouriteicon']);
         gameImageBox.appendChild(gameFavIcon);
     }
 
     if (gameObject.totalRating || displayClassification == true) {
         var gameImageRatingBanner = document.createElement('div');
-        gameImageRatingBanner.className = classes['game_tile_box_ratingbanner'];
+        gameImageRatingBanner.classList.add(...classes['game_tile_box_ratingbanner']);
 
         if (showRatings == true || displayClassification == true) {
             if (showRatings == true) {
@@ -361,7 +438,7 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
             if (displayClassification == true) {
                 var gameImageClassificationLogo = document.createElement('img');
                 gameImageClassificationLogo.src = classificationPath;
-                gameImageClassificationLogo.className = classes['rating_image_overlay'];
+                gameImageClassificationLogo.classList.add(...classes['rating_image_overlay']);
                 gameImageBox.appendChild(gameImageClassificationLogo);
             }
         }
@@ -370,7 +447,7 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
 
     if (showTitle == true) {
         var gameBoxTitle = document.createElement('div');
-        gameBoxTitle.className = classes['game_tile_label'];
+        gameBoxTitle.classList.add(...classes['game_tile_label']);
         gameBoxTitle.innerHTML = gameObject.name;
         gameBox.appendChild(gameBoxTitle);
     }
@@ -381,31 +458,31 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
 function getViewModeClasses(listView) {
     if (listView == false) {
         return {
-            "game_tile game_tile_small": "game_tile game_tile_small",
+            "game_tile game_tile_small": [ "game_tile", "game_tile_small" ],
-            "game_tile": "game_tile",
+            "game_tile": [ "game_tile" ],
-            "game_tile_box": "game_tile_box",
+            "game_tile_box": [ "game_tile_box" ],
-            "game_tile_image game_tile_image_small lazy": "game_tile_image game_tile_image_small lazy",
+            "game_tile_image game_tile_image_small lazy": [ "game_tile_image", "game_tile_image_small", "lazy" ],
-            "game_tile_image lazy": "game_tile_image lazy",
+            "game_tile_image lazy": [ "game_tile_image", "lazy" ],
-            "game_tile_image unknown": "game_tile_image unknown",
+            "game_tile_image unknown": [ "game_tile_image", "unknown" ],
-            "game_tile_box_savedgame savedstateicon": "game_tile_box_savedgame savedstateicon",
+            "game_tile_box_savedgame savedstateicon": [ "game_tile_box_savedgame", "savedstateicon" ],
-            "game_tile_box_favouritegame favouriteicon": "game_tile_box_favouritegame favouriteicon",
+            "game_tile_box_favouritegame favouriteicon": [ "game_tile_box_favouritegame", "favouriteicon" ],
-            "game_tile_box_ratingbanner": "game_tile_box_ratingbanner",
+            "game_tile_box_ratingbanner": [ "game_tile_box_ratingbanner" ],
-            "rating_image_overlay": "rating_image_overlay",
+            "rating_image_overlay": [ "rating_image_overlay" ],
-            "game_tile_label": "game_tile_label"
+            "game_tile_label": [ "game_tile_label" ]
         };
     } else {
         return {
-            "game_tile game_tile_small": "game_tile_row game_tile_small",
+            "game_tile game_tile_small": [ "game_tile_row", "game_tile_small" ],
-            "game_tile": "game_tile_row",
+            "game_tile": [ "game_tile_row" ],
-            "game_tile_box": "game_tile_box_row",
+            "game_tile_box": [ "game_tile_box_row" ],
-            "game_tile_image game_tile_image_small lazy": "game_tile_image_row game_tile_image_small lazy",
+            "game_tile_image game_tile_image_small lazy": [ "game_tile_image_row", "game_tile_image_small", "lazy" ],
-            "game_tile_image lazy": "game_tile_image_row lazy",
+            "game_tile_image lazy": [ "game_tile_image_row", "lazy" ],
-            "game_tile_image unknown": "game_tile_image_row unknown",
+            "game_tile_image unknown": [ "game_tile_image_row", "unknown" ],
-            "game_tile_box_savedgame savedstateicon": "game_tile_box_savedgame_row savedstateicon",
+            "game_tile_box_savedgame savedstateicon": [ "game_tile_box_savedgame_row", "savedstateicon" ],
-            "game_tile_box_favouritegame favouriteicon": "game_tile_box_favouritegame_row favouriteicon",
+            "game_tile_box_favouritegame favouriteicon": [ "game_tile_box_favouritegame_row", "favouriteicon" ],
-            "game_tile_box_ratingbanner": "game_tile_box_ratingbanner_row",
+            "game_tile_box_ratingbanner": [ "game_tile_box_ratingbanner_row" ],
-            "rating_image_overlay": "rating_image_overlay_row",
+            "rating_image_overlay": [ "rating_image_overlay_row" ],
-            "game_tile_label": "game_tile_label_row"
+            "game_tile_label": [ "game_tile_label_row" ]
         };
     }
 }

gaseous-server/wwwroot/styles/style.css

@@ -548,11 +548,25 @@ input[name='filter_panel_range_max'] {
     background-color: blue;
 }
 
+.game_tile_wrapper {
+    display: inline-block;
+}
+
+.game_tile_placeholder {
+    display: inline-block;
+    min-height: 243px;
+    width: 232px;
+    margin-bottom: 10px;
+}
+
 .game_tile {
-    padding: 5px;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
     display: inline-block;
     width: 220px;
-    min-height: 200px;
+    min-height: 243px;
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -689,6 +703,9 @@ input[name='filter_panel_range_max'] {
     max-height: 200px;
     min-height: 200px;
     background-color: transparent;
+}
+
+.game_tile_image_shadow {
     box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
     -webkit-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
     -moz-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
@@ -701,9 +718,6 @@ input[name='filter_panel_range_max'] {
     min-height: 75px;
     margin-left: 10px;
     background-color: transparent;
-    box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
-    -webkit-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
-    -moz-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
 }
 
 .game_tile_image, .unknown {