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;
}
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')}`
); */
})
lastVisibleIndex = index;
}
$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?")) {

4
public/scripts/power-user.js
View File

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

14
public/scripts/tags.js
View File

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

4
public/style.css
View File

@ -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;