Char List Tags Collapsable

This commit is contained in:
RossAscends
2023-06-09 00:21:13 +09:00
parent 87125cb3b5
commit 59c09d90c7
4 changed files with 46 additions and 7 deletions

View File

@ -26,9 +26,14 @@ const TAG_LOGIC_AND = true; // switch to false to use OR logic for combining tag
const CHARACTER_SELECTOR = '#rm_print_characters_block > div';
const ACTIONABLE_TAGS = {
VIEW: { id: 2, name: 'Manage tags', color: 'rgba(150, 100, 100, 0.5)', action: onViewTagsListClick, icon: 'fa-solid fa-tags' },
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' },
HINT: { id: 3, name: 'Show Tag List', color: 'rgba(150, 100, 100, 0.5)', action: onTagListHintClick, icon: 'fa-solid fa-tags' },
}
const InListActionable = {
VIEW: { id: 2, name: 'Manage tags', color: 'rgba(150, 100, 100, 0.5)', action: onViewTagsListClick, icon: 'fa-solid fa-gear' },
}
const DEFAULT_TAGS = [
@ -233,6 +238,9 @@ function appendTagToList(listElement, tag, { removable, selectable, action }) {
tagElement.on('click', () => action.bind(tagElement)());
tagElement.addClass('actionable');
}
if (action && tag.id === 2) {
tagElement.addClass('innerActionable hidden');
}
$(listElement).append(tagElement);
}
@ -291,6 +299,9 @@ function printTags() {
$(FILTER_SELECTOR).find('.actionable').last().addClass('margin-right-10px');
for (const tag of Object.values(InListActionable)) {
appendTagToList(FILTER_SELECTOR, tag, { removable: false, selectable: false, action: tag.action });
}
for (const tag of tagsToDisplay) {
appendTagToList(FILTER_SELECTOR, tag, { removable: false, selectable: true, });
}
@ -437,6 +448,13 @@ function onTagColorize(evt) {
saveSettingsDebounced();
}
function onTagListHintClick() {
console.log($(this));
$(this).toggleClass('selected');
$(this).siblings(".tag:not(.actionable)").toggle(100);
$(this).siblings(".innerActionable").toggleClass('hidden');
}
$(document).ready(() => {
createTagInput('#tagInput', '#tagList');
createTagInput('#groupTagInput', '#groupTagList');