rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

improved char list dynamic hide/show on scroll

Browse Source
This commit is contained in:
RossAscends
2023-05-22 05:08:30 +09:00
parent ef394f7f03
commit 9a4f90d4d6
4 changed files with 56 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
public/script.js
View File

@ -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?")) {