diff --git a/public/script.js b/public/script.js index c660a995f..f98e32a6a 100644 --- a/public/script.js +++ b/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() { - const $children = $("#rm_print_characters_block").children(); +function updateVisibleDivs() { + var $container = $('#rm_print_characters_block'); + var $children = $container.children(); + var totalHeight = 0; $children.each(function () { - if (isElementInViewport($(this))) { - $(this) - //.css('opacity', 1); - //.css('display', 'flex'); - .stop(true, false).animate({ opacity: 1 }, { duration: 50, queue: false }); + totalHeight += $(this).outerHeight(); + }); + $container.css({ + height: totalHeight, + }); + 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; } - - if (!isElementInViewport($(this)) && - ($(this).css('opacity') === '1' || $(this).css('opacity') === undefined)) { - //.css('opacity', 0); - - $(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')}` - - ); */ - }) + $child.toggleClass('hiddenByCharListScroll', childTop > $container.height() || childBottom < 0); + }); + var visibleStart = firstVisibleIndex !== null ? firstVisibleIndex : 0; + var visibleEnd = lastVisibleIndex !== null ? lastVisibleIndex + 1 : 0; + //console.log(`${visibleStart},${visibleEnd}`); } $(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(); - const originalHeight = $children.length * $children.first().outerHeight(); - $("#rm_print_characters_block").css('height', originalHeight); - //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); - + $("#rm_print_characters_block").on('scroll', + debounce(updateVisibleDivs, 50)); + }, 3000) $(document).on("click", ".mes_edit_delete", function () { if (!confirm("Are you sure you want to delete this message?")) { diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index 6e9d9d6d0..d8ad93162 100644 --- a/public/scripts/power-user.js +++ b/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) { diff --git a/public/scripts/tags.js b/public/scripts/tags.js index 796a8f0d3..4d0c182e4 100644 --- a/public/scripts/tags.js +++ b/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) { diff --git a/public/style.css b/public/style.css index ff8bbfb6d..8c148a4ee 100644 --- a/public/style.css +++ b/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;