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

Move filter by favorites to an actionable tag

Browse Source
This commit is contained in:
SillyLossy
2023-05-08 13:47:51 +03:00
parent d3d8f2ced6
commit 5203c2a8b6
5 changed files with 46 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@@ -1865,7 +1865,6 @@
</div>
<form id="form_character_search_form" action="javascript:void(null);">
<input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." maxlength="50" />
<div id="filter_by_fav" title="Filter By Favorite" class="menu_button fa-solid fa-star"></div>
<select id="character_sort_order" title="Characters sorting order">
<option data-field="name" data-order="asc">Name, A-Z</option>
<option data-field="name" data-order="desc">Name, Z-A</option>

31
public/script.js
View File

@@ -238,7 +238,6 @@ let chat_metadata = {};
let streamingProcessor = null;
let fav_ch_checked = false;
window.filterByFav = false;
const durationSaveEdit = 200;
const saveSettingsDebounced = debounce(() => saveSettings(), durationSaveEdit);
@@ -1367,24 +1366,6 @@ function isStreamingEnabled() {
|| (main_api == 'textgenerationwebui' && textgenerationwebui_settings.streaming);
}
function applyFavFilter(enabled) {
const selector = ['#rm_print_characters_block .character_select', '#rm_print_characters_block .group_select'].join(',');
if (enabled) {
$(selector).each(function () {
if ($(this).find(".ch_fav").length !== 0) {
const shouldBeDisplayed = $(this).find(".ch_fav").val().toLowerCase().includes(true);
$(this).toggleClass('hiddenByFav', !shouldBeDisplayed);
}
});
}
else {
$(selector).removeClass('hiddenByFav');
}
}
class StreamingProcessor {
showStopButton(messageId) {
if (messageId == -1) {
@@ -3642,7 +3623,6 @@ function select_rm_characters() {
menu_type = "characters";
selectRightMenuWithAnimation('rm_characters_block');
setRightTabSelectedClass('rm_button_characters');
applyFavFilter(window.filterByFav);
}
function restoreSelectedCharacter() {
@@ -4256,17 +4236,6 @@ $(document).ready(function () {
}
});
$("#filter_by_fav").click(function () {
filterByFav = !filterByFav;
if (filterByFav) {
applyFavFilter(true);
$("#filter_by_fav").addClass("fav_on");
} else {
applyFavFilter(false);
$("#filter_by_fav").removeClass("fav_on");
}
});
$("#send_but").click(function () {
if (is_send_press == false) {
is_send_press = true;

3
public/scripts/group-chats.js
View File

@@ -1016,9 +1016,6 @@ async function selectGroup() {
updateChatMetadata({}, true);
chat.length = 0;
await getGroupChat(groupId);
//to avoid the filter being lit up yellow and left at true while the list of character and group reseted.
$("#filter_by_fav").removeClass("fav_on");
filterByFav = false;
}
select_group_chats(groupId);

59
public/scripts/tags.js
View File

@@ -15,9 +15,11 @@ export {
const random_id = () => Math.round(Date.now() * Math.random()).toString();
const TAG_LOGIC_AND = true; // switch to false to use OR logic for combining tags
const CHARACTER_SELECTOR = '#rm_print_characters_block > div';
const ACTIONABLE_TAGS = {
GROUP: { id: 0, name: 'Groups', color: 'rgba(100, 100, 100, 0.4)', action: filterByGroups },
FAV: { id: 1, name: 'Show only favorites', color: 'rgba(255, 255, 0, 0.5)', action: applyFavFilter, icon: 'fa-solid fa-star' },
GROUP: { id: 0, name: 'Show only groups', color: 'rgba(100, 100, 100, 0.5)', action: filterByGroups, icon: 'fa-solid fa-users' },
}
const DEFAULT_TAGS = [
@@ -32,13 +34,30 @@ const DEFAULT_TAGS = [
let tags = [];
let tag_map = {};
function applyFavFilter() {
const isSelected = $(this).hasClass('selected');
const displayFavoritesOnly = !isSelected;
$(this).toggleClass('selected', displayFavoritesOnly);
$(CHARACTER_SELECTOR).removeClass('hiddenByFav');
$(CHARACTER_SELECTOR).each(function () {
if (displayFavoritesOnly) {
if ($(this).find(".ch_fav").length !== 0) {
const shouldBeDisplayed = $(this).find(".ch_fav").val().toLowerCase().includes(true);
$(this).toggleClass('hiddenByFav', !shouldBeDisplayed);
}
}
});
}
function filterByGroups() {
const isSelected = $(this).hasClass('selected');
const displayGroupsOnly = !isSelected;
$(this).toggleClass('selected', displayGroupsOnly);
$('#rm_print_characters_block > div').removeClass('hiddenByGroup');
$(CHARACTER_SELECTOR).removeClass('hiddenByGroup');
$('#rm_print_characters_block > div').each((_, element) => {
$(CHARACTER_SELECTOR).each((_, element) => {
$(element).toggleClass('hiddenByGroup', displayGroupsOnly && !$(element).hasClass('group_select'));
});
}
@@ -152,7 +171,7 @@ function selectTag(event, ui, listSelector) {
}
// unfocus and clear the input
$(event.target).val("").blur();
$(event.target).val("").trigger('blur');
// add tag to the UI and internal map
appendTagToList(listSelector, tag, { removable: true });
@@ -190,9 +209,8 @@ function appendTagToList(listElement, tag, { removable, selectable, action }) {
const removeButton = tagElement.find(".tag_remove");
removable ? removeButton.show() : removeButton.hide();
if (tag.name === 'Groups') {
tagElement.find('.tag_name').addClass('fa-solid fa-users');
tagElement.find('.tag_name').text('');
if (tag.icon) {
tagElement.find('.tag_name').text('').attr('title', tag.name).addClass(tag.icon);
}
if (selectable) {
@@ -200,7 +218,7 @@ function appendTagToList(listElement, tag, { removable, selectable, action }) {
}
if (action) {
tagElement.on('click', () => action.bind(tagElement)(listElement));
tagElement.on('click', () => action.bind(tagElement)());
tagElement.addClass('actionable');
}
@@ -209,12 +227,12 @@ function appendTagToList(listElement, tag, { removable, selectable, action }) {
function onTagFilterClick(listElement) {
const wasSelected = $(this).hasClass('selected');
$('#rm_print_characters_block > div').removeClass('hiddenByTag');
$(CHARACTER_SELECTOR).removeClass('hiddenByTag');
$(this).toggleClass('selected', !wasSelected);
const tagIds = [...($(listElement).find(".tag.selected:not(.actionable)").map((_, el) => $(el).attr("id")))];
$('#rm_print_characters_block > div').each((_, element) => applyFilterToElement(tagIds, element));
$(CHARACTER_SELECTOR).each((_, element) => applyFilterToElement(tagIds, element));
}
function applyFilterToElement(tagIds, element) {
@@ -242,23 +260,30 @@ function isElementTagged(element, tagId) {
function clearTagsFilter() {
$('#rm_tag_filter .tag').removeClass('selected');
$('#rm_print_characters_block > div').removeClass('hiddenByTag');
$(CHARACTER_SELECTOR).removeClass('hiddenByTag');
}
function printTags() {
$('#rm_tag_filter').empty();
const FILTER_SELECTOR = '#rm_tag_filter';
const selectedTagIds = [...($(FILTER_SELECTOR).find(".tag.selected").map((_, el) => $(el).attr("id")))];
$(FILTER_SELECTOR).empty();
const characterTagIds = Object.values(tag_map).flat();
const tagsToDisplay = tags
.filter(x => characterTagIds.includes(x.id))
.sort((a, b) => a.name.localeCompare(b.name));
for (const tag of Object.values(ACTIONABLE_TAGS)) {
appendTagToList('#rm_tag_filter', tag, { removable: false, selectable: false, action: tag.action });
appendTagToList(FILTER_SELECTOR, tag, { removable: false, selectable: false, action: tag.action });
}
$(FILTER_SELECTOR).find('.actionable').last().addClass('margin-right-10px');
for (const tag of tagsToDisplay) {
appendTagToList('#rm_tag_filter', tag, { removable: false, selectable: true, });
appendTagToList(FILTER_SELECTOR, tag, { removable: false, selectable: true, });
}
for (const tagId of selectedTagIds) {
$(`${FILTER_SELECTOR} .tag[id="${tagId}"]`).trigger('click');
}
}
@@ -293,7 +318,7 @@ function onGroupCreateClick() {
}
export function applyTagsOnCharacterSelect() {
clearTagsFilter();
//clearTagsFilter();
const chid = Number($(this).attr('chid'));
const key = characters[chid].avatar;
const tags = getTagsList(key);
@@ -306,7 +331,7 @@ export function applyTagsOnCharacterSelect() {
}
function applyTagsOnGroupSelect() {
clearTagsFilter();
//clearTagsFilter();
const key = $(this).attr('grid');
const tags = getTagsList(key);

5
public/style.css
View File

@@ -2526,7 +2526,10 @@ h5 {
}
.tag.actionable {
border-style: dotted;
border-radius: 50%;
}
.margin-right-10px {
margin-right: 10px;
}