improved char list dynamic hide/show on scroll

public/script.js

@@ -204,7 +204,7 @@ export {
     talkativeness_default,
     default_ch_mes,
     extension_prompt_types,
-    setCharListVisible,
+    updateVisibleDivs
 }
 
 // API OBJECT FOR EXTERNAL WIRING
@@ -802,7 +802,7 @@ function printCharacters() {
     printGroups();
     sortCharactersList();
     favsToHotswap();
-    setCharListVisible();
+    updateVisibleDivs();
 }
 
 async function getCharacters() {
@@ -4769,31 +4769,37 @@ const swipe_right = () => {
     }
 }
 
-function setCharListVisible() {
+function updateVisibleDivs() {
-    const $children = $("#rm_print_characters_block").children();
+    var $container = $('#rm_print_characters_block');
+    var $children = $container.children();
+    var totalHeight = 0;
     $children.each(function () {
-        if (isElementInViewport($(this))) {
+        totalHeight += $(this).outerHeight();
-            $(this)
+    });
-                //.css('opacity', 1);
+    $container.css({
-                //.css('display', 'flex');
+        height: totalHeight,
-                .stop(true, false).animate({ opacity: 1 }, { duration: 50, queue: false });
+    });
+    var scrollTop = $container.scrollTop();
+    var containerTop = $container.offset().top;
+    var containerBottom = containerTop + $container.height();
+    //console.log(`${scrollTop},${containerTop},${containerBottom}`);
+    var firstVisibleIndex = null;
+    var lastVisibleIndex = null;
+    $children.each(function (index) {
+        var $child = $(this);
+        var childTop = $child.offset().top - containerTop;
+        var childBottom = childTop + $child.outerHeight();
+        if (childTop <= $container.height() && childBottom >= 0) {
+            if (firstVisibleIndex === null) {
+                firstVisibleIndex = index;
+            }
+            lastVisibleIndex = index;
         }
-
+        $child.toggleClass('hiddenByCharListScroll', childTop > $container.height() || childBottom < 0);
-        if (!isElementInViewport($(this)) &&
+    });
-            ($(this).css('opacity') === '1' || $(this).css('opacity') === undefined)) {
+    var visibleStart = firstVisibleIndex !== null ? firstVisibleIndex : 0;
-            //.css('opacity', 0);
+    var visibleEnd = lastVisibleIndex !== null ? lastVisibleIndex + 1 : 0;
-
+    //console.log(`${visibleStart},${visibleEnd}`);
-            $(this)
-                //.css('opacity', 0);
-                //.css('display', 'none');
-                .stop(true, false).animate({ opacity: 0 }, { duration: 50, queue: false });
-        };
-        /* console.log(`chid ${$(elem).find('.ch_name').text()}
-      inview? ${isElementInViewport($(elem))}
-      opacity? ${$(elem).css('opacity')}`
-
-    ); */
-    })
 }
 
 $(document).ready(function () {
@@ -4948,6 +4954,7 @@ $(document).ready(function () {
 
         if (!searchValue) {
             $(selector).removeClass('hiddenBySearch');
+            updateVisibleDivs();
         } else {
             $(selector).each(function () {
                 const isValidSearch = $(this)
@@ -4958,7 +4965,9 @@ $(document).ready(function () {
 
                 $(this).toggleClass('hiddenBySearch', !isValidSearch);
             });
+            updateVisibleDivs();
         }
+
     });
 
     $("#send_but").click(function () {
@@ -6192,22 +6201,9 @@ $(document).ready(function () {
     });
 
     setTimeout(function () {
-        const $children = $("#rm_print_characters_block").children();
+        $("#rm_print_characters_block").on('scroll',
-        const originalHeight = $children.length * $children.first().outerHeight();
+            debounce(updateVisibleDivs, 50));
-        $("#rm_print_characters_block").css('height', originalHeight);
+    }, 3000)
-        //show and hide charlist divs on pageload (causes load lag)
-        //$children.each(function () { setCharListVisible($(this)) });
-
-        $("#rm_print_characters_block").on('scroll', debounce(function () {
-            const containerHeight = $children.length * $children.first().outerHeight();
-            $("#rm_print_characters_block").css('height', containerHeight);
-            //show and hide on scroll
-            setCharListVisible();
-        }, 1));
-        //delay timer to allow for charlist to populate, 
-        //should be set to an onload for rm_print_characters or windows?
-    }, 1000);
-
 
     $(document).on("click", ".mes_edit_delete", function () {
         if (!confirm("Are you sure you want to delete this message?")) {

public/scripts/power-user.js

@@ -8,7 +8,7 @@ import {
     reloadCurrentChat,
     getRequestHeaders,
     substituteParams,
-    setCharListVisible,
+    updateVisibleDivs,
 } from "../script.js";
 import { favsToHotswap } from "./RossAscends-mods.js";
 import {
@@ -719,7 +719,7 @@ function sortCharactersList() {
     for (const item of array) {
         $(`${item.selector}[${item.attribute}="${item.id}"]`).css({ 'order': orderedList.indexOf(item) });
     }
-    setCharListVisible();
+    updateVisibleDivs();
 }
 
 function sortGroupMembers(selector) {

public/scripts/tags.js

@@ -1,4 +1,12 @@
-import { characters, saveSettingsDebounced, this_chid, callPopup, menu_type } from "../script.js";
+import {
+    characters,
+    saveSettingsDebounced,
+    this_chid,
+    callPopup,
+    menu_type,
+    updateVisibleDivs,
+} from "../script.js";
+
 import { selected_group } from "./group-chats.js";
 
 export {
@@ -49,7 +57,9 @@ function applyFavFilter() {
                 $(this).toggleClass('hiddenByFav', !shouldBeDisplayed);
             }
         }
+
     });
+    updateVisibleDivs();
 }
 
 function filterByGroups() {
@@ -61,6 +71,7 @@ function filterByGroups() {
     $(CHARACTER_SELECTOR).each((_, element) => {
         $(element).toggleClass('hiddenByGroup', displayGroupsOnly && !$(element).hasClass('group_select'));
     });
+    updateVisibleDivs();
 }
 
 function loadTagsSettings(settings) {
@@ -234,6 +245,7 @@ function onTagFilterClick(listElement) {
 
     const tagIds = [...($(listElement).find(".tag.selected:not(.actionable)").map((_, el) => $(el).attr("id")))];
     $(CHARACTER_SELECTOR).each((_, element) => applyFilterToElement(tagIds, element));
+    updateVisibleDivs();
 }
 
 function applyFilterToElement(tagIds, element) {

public/style.css

@@ -134,6 +134,10 @@ table.responsiveTable {
     border-top: 2px solid grey;
 }
 
+.hiddenByCharListScroll {
+    visibility: hidden !important;
+}
+
 .animated {
     -webkit-animation-duration: 3s !important;
     animation-duration: 3s !important;