2023-12-02 19:04:51 +01:00
|
|
|
'use strict';
|
2023-10-21 15:12:09 +02:00
|
|
|
|
|
|
|
import {
|
|
|
|
callPopup,
|
2023-11-04 19:33:15 +01:00
|
|
|
characters,
|
|
|
|
deleteCharacter,
|
2023-10-21 15:12:09 +02:00
|
|
|
event_types,
|
|
|
|
eventSource,
|
2023-12-09 15:09:10 +01:00
|
|
|
getCharacters,
|
|
|
|
getPastCharacterChats,
|
2023-11-04 19:33:15 +01:00
|
|
|
getRequestHeaders,
|
2023-11-07 19:43:24 +01:00
|
|
|
printCharacters,
|
2023-12-02 19:04:51 +01:00
|
|
|
} from '../script.js';
|
2023-11-05 18:23:14 +01:00
|
|
|
|
2023-12-02 19:04:51 +01:00
|
|
|
import { favsToHotswap } from './RossAscends-mods.js';
|
|
|
|
import { hideLoader, showLoader } from './loader.js';
|
|
|
|
import { convertCharacterToPersona } from './personas.js';
|
2024-03-07 23:48:50 +01:00
|
|
|
import { createTagInput, getTagKeyForEntity, tag_map } from './tags.js';
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
// Utility object for popup messages.
|
2023-10-21 15:12:09 +02:00
|
|
|
const popupMessage = {
|
|
|
|
deleteChat(characterCount) {
|
|
|
|
return `<h3>Delete ${characterCount} characters?</h3>
|
|
|
|
<b>THIS IS PERMANENT!<br><br>
|
|
|
|
<label for="del_char_checkbox" class="checkbox_label justifyCenter">
|
|
|
|
<input type="checkbox" id="del_char_checkbox" />
|
|
|
|
<span>Also delete the chat files</span>
|
|
|
|
</label><br></b>`;
|
|
|
|
},
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
* Static object representing the actions of the
|
|
|
|
* character context menu override.
|
|
|
|
*/
|
2023-10-21 15:12:09 +02:00
|
|
|
class CharacterContextMenu {
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
* Tag one or more characters,
|
|
|
|
* opens a popup.
|
|
|
|
*
|
|
|
|
* @param selectedCharacters
|
|
|
|
*/
|
2023-11-04 19:33:15 +01:00
|
|
|
static tag = (selectedCharacters) => {
|
|
|
|
BulkTagPopupHandler.show(selectedCharacters);
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-11-04 19:33:15 +01:00
|
|
|
|
2023-10-21 15:12:09 +02:00
|
|
|
/**
|
2023-11-05 18:23:14 +01:00
|
|
|
* Duplicate one or more characters
|
2023-10-21 15:12:09 +02:00
|
|
|
*
|
|
|
|
* @param characterId
|
|
|
|
* @returns {Promise<Response>}
|
|
|
|
*/
|
|
|
|
static duplicate = async (characterId) => {
|
2023-11-05 18:23:14 +01:00
|
|
|
const character = CharacterContextMenu.#getCharacter(characterId);
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-12-04 12:51:45 +01:00
|
|
|
return fetch('/api/characters/duplicate', {
|
2023-10-21 15:12:09 +02:00
|
|
|
method: 'POST',
|
|
|
|
headers: getRequestHeaders(),
|
|
|
|
body: JSON.stringify({ avatar_url: character.avatar }),
|
|
|
|
});
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Favorite a character
|
2023-11-05 18:23:14 +01:00
|
|
|
* and highlight it.
|
2023-10-21 15:12:09 +02:00
|
|
|
*
|
|
|
|
* @param characterId
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
*/
|
|
|
|
static favorite = async (characterId) => {
|
2023-11-05 18:23:14 +01:00
|
|
|
const character = CharacterContextMenu.#getCharacter(characterId);
|
2023-12-06 00:56:07 +01:00
|
|
|
const newFavState = !character.data.extensions.fav;
|
2023-11-05 18:23:14 +01:00
|
|
|
|
2023-10-21 15:12:09 +02:00
|
|
|
const data = {
|
|
|
|
name: character.name,
|
|
|
|
avatar: character.avatar,
|
|
|
|
data: {
|
|
|
|
extensions: {
|
2023-12-06 00:56:07 +01:00
|
|
|
fav: newFavState,
|
2023-12-02 21:06:57 +01:00
|
|
|
},
|
|
|
|
},
|
2023-12-06 00:56:07 +01:00
|
|
|
fav: newFavState,
|
2023-10-21 15:12:09 +02:00
|
|
|
};
|
|
|
|
|
2023-12-06 00:56:07 +01:00
|
|
|
const mergeResponse = await fetch('/api/characters/merge-attributes', {
|
2023-12-02 19:04:51 +01:00
|
|
|
method: 'POST',
|
2023-10-21 15:12:09 +02:00
|
|
|
headers: getRequestHeaders(),
|
|
|
|
body: JSON.stringify(data),
|
|
|
|
});
|
2023-12-06 00:56:07 +01:00
|
|
|
|
|
|
|
if (!mergeResponse.ok) {
|
|
|
|
mergeResponse.json().then(json => toastr.error(`Character not saved. Error: ${json.message}. Field: ${json.error}`));
|
|
|
|
}
|
|
|
|
|
|
|
|
const element = document.getElementById(`CharID${characterId}`);
|
|
|
|
element.classList.toggle('is_fav');
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-05 17:43:35 +01:00
|
|
|
/**
|
2023-11-05 18:23:14 +01:00
|
|
|
* Convert one or more characters to persona,
|
|
|
|
* may open a popup for one or more characters.
|
2023-11-05 17:43:35 +01:00
|
|
|
*
|
|
|
|
* @param characterId
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
*/
|
|
|
|
static persona = async (characterId) => await convertCharacterToPersona(characterId);
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
* Delete one or more characters,
|
|
|
|
* opens a popup.
|
|
|
|
*
|
|
|
|
* @param characterId
|
|
|
|
* @param deleteChats
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
*/
|
2023-10-21 15:12:09 +02:00
|
|
|
static delete = async (characterId, deleteChats = false) => {
|
2023-11-05 18:23:14 +01:00
|
|
|
const character = CharacterContextMenu.#getCharacter(characterId);
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-12-04 12:51:45 +01:00
|
|
|
return fetch('/api/characters/delete', {
|
2023-10-21 15:12:09 +02:00
|
|
|
method: 'POST',
|
|
|
|
headers: getRequestHeaders(),
|
2023-12-09 15:09:10 +01:00
|
|
|
body: JSON.stringify({ avatar_url: character.avatar, delete_chats: deleteChats }),
|
2023-10-21 15:12:09 +02:00
|
|
|
cache: 'no-cache',
|
|
|
|
}).then(response => {
|
|
|
|
if (response.ok) {
|
2023-12-09 13:21:46 +01:00
|
|
|
return deleteCharacter(character.name, character.avatar, false).then(() => {
|
2023-12-09 15:09:10 +01:00
|
|
|
eventSource.emit('characterDeleted', { id: characterId, character: characters[characterId] });
|
2023-12-09 14:36:37 +01:00
|
|
|
if (deleteChats) getPastCharacterChats(characterId).then(pastChats => {
|
|
|
|
for (const chat of pastChats) {
|
|
|
|
const name = chat.file_name.replace('.jsonl', '');
|
|
|
|
eventSource.emit(event_types.CHAT_DELETED, name);
|
|
|
|
}
|
|
|
|
});
|
2023-12-02 20:11:06 +01:00
|
|
|
});
|
2023-10-21 15:12:09 +02:00
|
|
|
}
|
|
|
|
});
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
static #getCharacter = (characterId) => characters[characterId] ?? null;
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
* Show the context menu at the given position
|
|
|
|
*
|
|
|
|
* @param positionX
|
|
|
|
* @param positionY
|
|
|
|
*/
|
2023-10-21 15:12:09 +02:00
|
|
|
static show = (positionX, positionY) => {
|
2023-10-30 19:26:41 +01:00
|
|
|
let contextMenu = document.getElementById(BulkEditOverlay.contextMenuId);
|
2023-10-21 15:12:09 +02:00
|
|
|
contextMenu.style.left = `${positionX}px`;
|
|
|
|
contextMenu.style.top = `${positionY}px`;
|
|
|
|
|
2023-10-30 19:26:41 +01:00
|
|
|
document.getElementById(BulkEditOverlay.contextMenuId).classList.remove('hidden');
|
2023-11-09 22:55:14 +01:00
|
|
|
|
|
|
|
// Adjust position if context menu is outside of viewport
|
|
|
|
const boundingRect = contextMenu.getBoundingClientRect();
|
|
|
|
if (boundingRect.right > window.innerWidth) {
|
|
|
|
contextMenu.style.left = `${positionX - (boundingRect.right - window.innerWidth)}px`;
|
|
|
|
}
|
|
|
|
if (boundingRect.bottom > window.innerHeight) {
|
|
|
|
contextMenu.style.top = `${positionY - (boundingRect.bottom - window.innerHeight)}px`;
|
|
|
|
}
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
* Hide the context menu
|
|
|
|
*/
|
2023-10-30 19:26:41 +01:00
|
|
|
static hide = () => document.getElementById(BulkEditOverlay.contextMenuId).classList.add('hidden');
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
* Sets up the context menu for the given overlay
|
|
|
|
*
|
|
|
|
* @param characterGroupOverlay
|
|
|
|
*/
|
2023-10-21 15:12:09 +02:00
|
|
|
constructor(characterGroupOverlay) {
|
|
|
|
const contextMenuItems = [
|
2023-11-08 00:10:51 +01:00
|
|
|
{ id: 'character_context_menu_favorite', callback: characterGroupOverlay.handleContextMenuFavorite },
|
|
|
|
{ id: 'character_context_menu_duplicate', callback: characterGroupOverlay.handleContextMenuDuplicate },
|
|
|
|
{ id: 'character_context_menu_delete', callback: characterGroupOverlay.handleContextMenuDelete },
|
|
|
|
{ id: 'character_context_menu_persona', callback: characterGroupOverlay.handleContextMenuPersona },
|
2023-12-02 21:06:57 +01:00
|
|
|
{ id: 'character_context_menu_tag', callback: characterGroupOverlay.handleContextMenuTag },
|
2023-10-21 15:12:09 +02:00
|
|
|
];
|
|
|
|
|
2023-12-02 20:11:06 +01:00
|
|
|
contextMenuItems.forEach(contextMenuItem => document.getElementById(contextMenuItem.id).addEventListener('click', contextMenuItem.callback));
|
2023-10-21 15:12:09 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-11-04 19:33:15 +01:00
|
|
|
/**
|
2023-11-05 18:23:14 +01:00
|
|
|
* Represents a tag control not bound to a single character
|
2023-11-04 19:33:15 +01:00
|
|
|
*/
|
|
|
|
class BulkTagPopupHandler {
|
|
|
|
static #getHtml = (characterIds) => {
|
2023-11-08 00:10:51 +01:00
|
|
|
const characterData = JSON.stringify({ characterIds: characterIds });
|
2023-11-04 19:33:15 +01:00
|
|
|
return `<div id="bulk_tag_shadow_popup">
|
|
|
|
<div id="bulk_tag_popup">
|
|
|
|
<div id="bulk_tag_popup_holder">
|
|
|
|
<h3 class="m-b-1">Add tags to ${characterIds.length} characters</h3>
|
|
|
|
<br>
|
|
|
|
<div id="bulk_tags_div" class="marginBot5" data-characters='${characterData}'>
|
|
|
|
<div class="tag_controls">
|
|
|
|
<input id="bulkTagInput" class="text_pole tag_input wide100p margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="25" />
|
|
|
|
<div class="tags_view menu_button fa-solid fa-tags" title="View all tags" data-i18n="[title]View all tags"></div>
|
|
|
|
</div>
|
|
|
|
<div id="bulkTagList" class="m-t-1 tags"></div>
|
|
|
|
</div>
|
|
|
|
<div id="dialogue_popup_controls" class="m-t-1">
|
|
|
|
<div id="bulk_tag_popup_cancel" class="menu_button" data-i18n="Cancel">Close</div>
|
|
|
|
<div id="bulk_tag_popup_reset" class="menu_button" data-i18n="Cancel">Remove all</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-12-02 20:11:06 +01:00
|
|
|
`;
|
2023-11-04 19:33:15 +01:00
|
|
|
};
|
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
* Append and show the tag control
|
|
|
|
*
|
|
|
|
* @param characters - The characters assigned to this control
|
|
|
|
*/
|
2023-11-04 19:33:15 +01:00
|
|
|
static show(characters) {
|
|
|
|
document.body.insertAdjacentHTML('beforeend', this.#getHtml(characters));
|
|
|
|
createTagInput('#bulkTagInput', '#bulkTagList');
|
|
|
|
document.querySelector('#bulk_tag_popup_cancel').addEventListener('click', this.hide.bind(this));
|
|
|
|
document.querySelector('#bulk_tag_popup_reset').addEventListener('click', this.resetTags.bind(this, characters));
|
|
|
|
}
|
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
* Hide and remove the tag control
|
|
|
|
*/
|
2023-11-04 19:33:15 +01:00
|
|
|
static hide() {
|
|
|
|
let popupElement = document.querySelector('#bulk_tag_shadow_popup');
|
|
|
|
if (popupElement) {
|
|
|
|
document.body.removeChild(popupElement);
|
|
|
|
}
|
2023-11-07 19:43:24 +01:00
|
|
|
|
|
|
|
printCharacters(true);
|
2023-11-04 19:33:15 +01:00
|
|
|
}
|
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
* Empty the tag map for the given characters
|
|
|
|
*
|
|
|
|
* @param characterIds
|
|
|
|
*/
|
2023-11-04 19:33:15 +01:00
|
|
|
static resetTags(characterIds) {
|
|
|
|
characterIds.forEach((characterId) => {
|
2024-03-07 23:48:50 +01:00
|
|
|
const key = getTagKeyForEntity(characterId);
|
2023-11-04 19:33:15 +01:00
|
|
|
if (key) tag_map[key] = [];
|
|
|
|
});
|
2023-11-07 19:43:24 +01:00
|
|
|
|
|
|
|
printCharacters(true);
|
2023-11-04 19:33:15 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-11-06 17:20:18 +01:00
|
|
|
class BulkEditOverlayState {
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @type {number}
|
|
|
|
*/
|
|
|
|
static browse = 0;
|
|
|
|
|
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @type {number}
|
|
|
|
*/
|
|
|
|
static select = 1;
|
|
|
|
}
|
|
|
|
|
2023-11-04 19:33:15 +01:00
|
|
|
/**
|
|
|
|
* Implement a SingletonPattern, allowing access to the group overlay instance
|
|
|
|
* from everywhere via (new CharacterGroupOverlay())
|
|
|
|
*
|
|
|
|
* @type BulkEditOverlay
|
|
|
|
*/
|
|
|
|
let bulkEditOverlayInstance = null;
|
|
|
|
|
2023-10-30 19:26:41 +01:00
|
|
|
class BulkEditOverlay {
|
2023-10-21 15:12:09 +02:00
|
|
|
static containerId = 'rm_print_characters_block';
|
|
|
|
static contextMenuId = 'character_context_menu';
|
|
|
|
static characterClass = 'character_select';
|
2023-11-08 20:48:48 +01:00
|
|
|
static groupClass = 'group_select';
|
2023-11-10 21:18:48 +01:00
|
|
|
static bogusFolderClass = 'bogus_folder_select';
|
2023-10-21 15:12:09 +02:00
|
|
|
static selectModeClass = 'group_overlay_mode_select';
|
|
|
|
static selectedClass = 'character_selected';
|
2023-11-05 17:18:46 +01:00
|
|
|
static legacySelectedClass = 'bulk_select_checkbox';
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-08 00:10:51 +01:00
|
|
|
static longPressDelay = 2500;
|
2023-11-06 15:31:27 +01:00
|
|
|
|
2023-11-06 17:20:18 +01:00
|
|
|
#state = BulkEditOverlayState.browse;
|
2023-10-21 15:12:09 +02:00
|
|
|
#longPress = false;
|
|
|
|
#stateChangeCallbacks = [];
|
|
|
|
#selectedCharacters = [];
|
|
|
|
|
2023-11-08 21:08:31 +01:00
|
|
|
/**
|
2023-11-09 15:24:24 +01:00
|
|
|
* Locks other pointer actions when the context menu is open
|
2023-11-08 21:08:31 +01:00
|
|
|
*
|
|
|
|
* @type {boolean}
|
|
|
|
*/
|
2023-11-09 15:18:59 +01:00
|
|
|
#contextMenuOpen = false;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Whether the next character select should be skipped
|
|
|
|
*
|
|
|
|
* @type {boolean}
|
|
|
|
*/
|
|
|
|
#cancelNextToggle = false;
|
2023-11-08 21:08:31 +01:00
|
|
|
|
2023-10-21 15:12:09 +02:00
|
|
|
/**
|
|
|
|
* @type HTMLElement
|
|
|
|
*/
|
|
|
|
container = null;
|
|
|
|
|
|
|
|
get state() {
|
|
|
|
return this.#state;
|
|
|
|
}
|
|
|
|
|
|
|
|
set state(newState) {
|
|
|
|
if (this.#state === newState) return;
|
|
|
|
|
|
|
|
eventSource.emit(event_types.CHARACTER_GROUP_OVERLAY_STATE_CHANGE_BEFORE, newState)
|
|
|
|
.then(() => {
|
|
|
|
this.#state = newState;
|
2023-12-02 20:11:06 +01:00
|
|
|
eventSource.emit(event_types.CHARACTER_GROUP_OVERLAY_STATE_CHANGE_AFTER, this.state);
|
2023-10-21 15:12:09 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
get isLongPress() {
|
|
|
|
return this.#longPress;
|
|
|
|
}
|
|
|
|
|
|
|
|
set isLongPress(longPress) {
|
|
|
|
this.#longPress = longPress;
|
|
|
|
}
|
|
|
|
|
|
|
|
get stateChangeCallbacks() {
|
|
|
|
return this.#stateChangeCallbacks;
|
|
|
|
}
|
|
|
|
|
2023-11-04 19:33:15 +01:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @returns {*[]}
|
|
|
|
*/
|
2023-10-21 15:12:09 +02:00
|
|
|
get selectedCharacters() {
|
|
|
|
return this.#selectedCharacters;
|
|
|
|
}
|
|
|
|
|
|
|
|
constructor() {
|
2023-11-04 19:33:15 +01:00
|
|
|
if (bulkEditOverlayInstance instanceof BulkEditOverlay)
|
2023-12-02 20:11:06 +01:00
|
|
|
return bulkEditOverlayInstance;
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-10-30 19:26:41 +01:00
|
|
|
this.container = document.getElementById(BulkEditOverlay.containerId);
|
2023-10-21 15:12:09 +02:00
|
|
|
|
|
|
|
eventSource.on(event_types.CHARACTER_GROUP_OVERLAY_STATE_CHANGE_AFTER, this.handleStateChange);
|
2023-11-04 19:33:15 +01:00
|
|
|
bulkEditOverlayInstance = Object.freeze(this);
|
2023-10-21 15:12:09 +02:00
|
|
|
}
|
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
* Set the overlay to browse mode
|
|
|
|
*/
|
2023-11-06 17:20:18 +01:00
|
|
|
browseState = () => this.state = BulkEditOverlayState.browse;
|
2023-11-05 18:23:14 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Set the overlay to select mode
|
|
|
|
*/
|
2023-11-06 17:20:18 +01:00
|
|
|
selectState = () => this.state = BulkEditOverlayState.select;
|
2023-10-21 15:12:09 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Set up a Sortable grid for the loaded page
|
|
|
|
*/
|
|
|
|
onPageLoad = () => {
|
2023-10-30 19:24:45 +01:00
|
|
|
this.browseState();
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-06 15:31:27 +01:00
|
|
|
const elements = this.#getEnabledElements();
|
2023-10-21 15:12:09 +02:00
|
|
|
elements.forEach(element => element.addEventListener('touchstart', this.handleHold));
|
|
|
|
elements.forEach(element => element.addEventListener('mousedown', this.handleHold));
|
2023-11-08 00:10:51 +01:00
|
|
|
elements.forEach(element => element.addEventListener('contextmenu', this.handleDefaultContextMenu));
|
2023-11-02 17:54:17 +01:00
|
|
|
|
2023-10-21 15:12:09 +02:00
|
|
|
elements.forEach(element => element.addEventListener('touchend', this.handleLongPressEnd));
|
|
|
|
elements.forEach(element => element.addEventListener('mouseup', this.handleLongPressEnd));
|
|
|
|
elements.forEach(element => element.addEventListener('dragend', this.handleLongPressEnd));
|
2023-11-08 00:10:51 +01:00
|
|
|
elements.forEach(element => element.addEventListener('touchmove', this.handleLongPressEnd));
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-09 22:55:14 +01:00
|
|
|
// Cohee: It only triggers when clicking on a margin between the elements?
|
|
|
|
// Feel free to fix or remove this, I'm not sure how to.
|
|
|
|
//this.container.addEventListener('click', this.handleCancelClick);
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-05 18:23:14 +01:00
|
|
|
/**
|
|
|
|
* Handle state changes
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
handleStateChange = () => {
|
|
|
|
switch (this.state) {
|
2023-11-06 17:20:18 +01:00
|
|
|
case BulkEditOverlayState.browse:
|
2023-11-05 18:23:14 +01:00
|
|
|
this.container.classList.remove(BulkEditOverlay.selectModeClass);
|
2023-11-09 15:18:59 +01:00
|
|
|
this.#contextMenuOpen = false;
|
2023-11-05 18:23:14 +01:00
|
|
|
this.#enableClickEventsForCharacters();
|
2023-11-08 20:48:48 +01:00
|
|
|
this.#enableClickEventsForGroups();
|
2023-11-05 18:23:14 +01:00
|
|
|
this.clearSelectedCharacters();
|
|
|
|
this.disableContextMenu();
|
|
|
|
this.#disableBulkEditButtonHighlight();
|
|
|
|
CharacterContextMenu.hide();
|
|
|
|
break;
|
2023-11-06 17:20:18 +01:00
|
|
|
case BulkEditOverlayState.select:
|
2023-11-05 18:23:14 +01:00
|
|
|
this.container.classList.add(BulkEditOverlay.selectModeClass);
|
|
|
|
this.#disableClickEventsForCharacters();
|
2023-11-08 20:48:48 +01:00
|
|
|
this.#disableClickEventsForGroups();
|
2023-11-05 18:23:14 +01:00
|
|
|
this.enableContextMenu();
|
|
|
|
this.#enableBulkEditButtonHighlight();
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.stateChangeCallbacks.forEach(callback => callback(this.state));
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-11-05 18:23:14 +01:00
|
|
|
|
2023-10-21 15:12:09 +02:00
|
|
|
/**
|
|
|
|
* Block the browsers native context menu and
|
|
|
|
* set a click event to hide the custom context menu.
|
|
|
|
*/
|
|
|
|
enableContextMenu = () => {
|
2023-11-08 19:29:50 +01:00
|
|
|
this.container.addEventListener('contextmenu', this.handleContextMenuShow);
|
2023-10-21 15:12:09 +02:00
|
|
|
document.addEventListener('click', this.handleContextMenuHide);
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Remove event listeners, allowing the native browser context
|
|
|
|
* menu to be opened.
|
|
|
|
*/
|
|
|
|
disableContextMenu = () => {
|
2023-11-08 19:29:50 +01:00
|
|
|
this.container.removeEventListener('contextmenu', this.handleContextMenuShow);
|
2023-10-21 15:12:09 +02:00
|
|
|
document.removeEventListener('click', this.handleContextMenuHide);
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-08 00:10:51 +01:00
|
|
|
handleDefaultContextMenu = (event) => {
|
|
|
|
if (this.isLongPress) {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
return false;
|
|
|
|
}
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-11-08 00:10:51 +01:00
|
|
|
|
2023-11-08 15:18:53 +01:00
|
|
|
/**
|
|
|
|
* Opens menu on long-press.
|
|
|
|
*
|
|
|
|
* @param event - Pointer event
|
|
|
|
*/
|
2023-10-31 19:18:31 +01:00
|
|
|
handleHold = (event) => {
|
2023-11-06 15:31:27 +01:00
|
|
|
if (0 !== event.button && event.type !== 'touchstart') return;
|
2023-11-09 15:18:59 +01:00
|
|
|
if (this.#contextMenuOpen) {
|
|
|
|
this.#contextMenuOpen = false;
|
|
|
|
this.#cancelNextToggle = true;
|
2023-11-09 15:03:49 +01:00
|
|
|
CharacterContextMenu.hide();
|
|
|
|
return;
|
|
|
|
}
|
2023-11-06 15:31:27 +01:00
|
|
|
|
2023-11-08 15:18:53 +01:00
|
|
|
let cancel = false;
|
|
|
|
|
|
|
|
const cancelHold = (event) => cancel = true;
|
2023-11-08 19:29:50 +01:00
|
|
|
this.container.addEventListener('mouseup', cancelHold);
|
|
|
|
this.container.addEventListener('touchend', cancelHold);
|
2023-11-08 15:18:53 +01:00
|
|
|
|
2023-10-21 15:12:09 +02:00
|
|
|
this.isLongPress = true;
|
2023-11-08 15:18:53 +01:00
|
|
|
|
2023-10-21 15:12:09 +02:00
|
|
|
setTimeout(() => {
|
2023-12-09 15:09:10 +01:00
|
|
|
if (this.isLongPress && !cancel) {
|
|
|
|
if (this.state === BulkEditOverlayState.browse) {
|
|
|
|
this.selectState();
|
|
|
|
} else if (this.state === BulkEditOverlayState.select) {
|
|
|
|
this.#contextMenuOpen = true;
|
|
|
|
CharacterContextMenu.show(...this.#getContextMenuPosition(event));
|
2023-11-08 21:08:31 +01:00
|
|
|
}
|
2023-12-09 15:09:10 +01:00
|
|
|
}
|
2023-11-08 15:18:53 +01:00
|
|
|
|
2023-12-09 15:09:10 +01:00
|
|
|
this.container.removeEventListener('mouseup', cancelHold);
|
|
|
|
this.container.removeEventListener('touchend', cancelHold);
|
|
|
|
},
|
2023-12-06 00:56:07 +01:00
|
|
|
BulkEditOverlay.longPressDelay);
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-09 23:04:16 +01:00
|
|
|
handleLongPressEnd = (event) => {
|
2023-10-21 15:12:09 +02:00
|
|
|
this.isLongPress = false;
|
2023-11-09 15:18:59 +01:00
|
|
|
if (this.#contextMenuOpen) event.stopPropagation();
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
|
|
|
handleCancelClick = () => {
|
2023-11-09 15:18:59 +01:00
|
|
|
if (false === this.#contextMenuOpen) this.state = BulkEditOverlayState.browse;
|
|
|
|
this.#contextMenuOpen = false;
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-06 15:31:27 +01:00
|
|
|
/**
|
|
|
|
* Returns the position of the mouse/touch location
|
|
|
|
*
|
|
|
|
* @param event
|
|
|
|
* @returns {(boolean|number|*)[]}
|
|
|
|
*/
|
|
|
|
#getContextMenuPosition = (event) => [
|
|
|
|
event.clientX || event.touches[0].clientX,
|
|
|
|
event.clientY || event.touches[0].clientY,
|
|
|
|
];
|
|
|
|
|
2023-11-09 23:04:16 +01:00
|
|
|
#stopEventPropagation = (event) => {
|
|
|
|
if (this.#contextMenuOpen) {
|
|
|
|
this.handleContextMenuHide(event);
|
|
|
|
}
|
|
|
|
event.stopPropagation();
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-11-08 20:48:48 +01:00
|
|
|
|
|
|
|
#enableClickEventsForGroups = () => this.#getDisabledElements().forEach((element) => element.removeEventListener('click', this.#stopEventPropagation));
|
|
|
|
|
|
|
|
#disableClickEventsForGroups = () => this.#getDisabledElements().forEach((element) => element.addEventListener('click', this.#stopEventPropagation));
|
|
|
|
|
2023-11-06 15:31:27 +01:00
|
|
|
#enableClickEventsForCharacters = () => this.#getEnabledElements().forEach(element => element.removeEventListener('click', this.toggleCharacterSelected));
|
2023-10-28 12:50:42 +02:00
|
|
|
|
2023-11-06 15:31:27 +01:00
|
|
|
#disableClickEventsForCharacters = () => this.#getEnabledElements().forEach(element => element.addEventListener('click', this.toggleCharacterSelected));
|
2023-10-28 12:50:42 +02:00
|
|
|
|
2023-10-30 19:33:18 +01:00
|
|
|
#enableBulkEditButtonHighlight = () => document.getElementById('bulkEditButton').classList.add('bulk_edit_overlay_active');
|
|
|
|
|
|
|
|
#disableBulkEditButtonHighlight = () => document.getElementById('bulkEditButton').classList.remove('bulk_edit_overlay_active');
|
|
|
|
|
2023-11-06 15:31:27 +01:00
|
|
|
#getEnabledElements = () => [...this.container.getElementsByClassName(BulkEditOverlay.characterClass)];
|
|
|
|
|
2023-12-06 00:56:07 +01:00
|
|
|
#getDisabledElements = () => [...this.container.getElementsByClassName(BulkEditOverlay.groupClass), ...this.container.getElementsByClassName(BulkEditOverlay.bogusFolderClass)];
|
2023-11-08 20:48:48 +01:00
|
|
|
|
2023-10-21 15:12:09 +02:00
|
|
|
toggleCharacterSelected = event => {
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
const character = event.currentTarget;
|
|
|
|
const characterId = character.getAttribute('chid');
|
|
|
|
|
2023-12-02 20:11:06 +01:00
|
|
|
const alreadySelected = this.selectedCharacters.includes(characterId);
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-06 15:31:27 +01:00
|
|
|
const legacyBulkEditCheckbox = character.querySelector('.' + BulkEditOverlay.legacySelectedClass);
|
|
|
|
|
2023-11-09 15:24:24 +01:00
|
|
|
// Only toggle when context menu is closed and wasn't just closed.
|
2023-11-09 15:18:59 +01:00
|
|
|
if (!this.#contextMenuOpen && !this.#cancelNextToggle)
|
2023-11-08 21:08:31 +01:00
|
|
|
if (alreadySelected) {
|
|
|
|
character.classList.remove(BulkEditOverlay.selectedClass);
|
|
|
|
if (legacyBulkEditCheckbox) legacyBulkEditCheckbox.checked = false;
|
|
|
|
this.dismissCharacter(characterId);
|
|
|
|
} else {
|
2023-12-02 20:11:06 +01:00
|
|
|
character.classList.add(BulkEditOverlay.selectedClass);
|
2023-11-08 21:08:31 +01:00
|
|
|
if (legacyBulkEditCheckbox) legacyBulkEditCheckbox.checked = true;
|
|
|
|
this.selectCharacter(characterId);
|
|
|
|
}
|
2023-11-09 15:18:59 +01:00
|
|
|
|
|
|
|
this.#cancelNextToggle = false;
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
|
|
|
handleContextMenuShow = (event) => {
|
|
|
|
event.preventDefault();
|
2023-11-06 15:31:27 +01:00
|
|
|
CharacterContextMenu.show(...this.#getContextMenuPosition(event));
|
2023-11-09 15:18:59 +01:00
|
|
|
this.#contextMenuOpen = true;
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
|
|
|
handleContextMenuHide = (event) => {
|
2023-10-30 19:26:41 +01:00
|
|
|
let contextMenu = document.getElementById(BulkEditOverlay.contextMenuId);
|
2023-10-21 15:12:09 +02:00
|
|
|
if (false === contextMenu.contains(event.target)) {
|
|
|
|
CharacterContextMenu.hide();
|
|
|
|
}
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-06 15:31:27 +01:00
|
|
|
/**
|
|
|
|
* Concurrently handle character favorite requests.
|
|
|
|
*
|
2023-12-06 00:56:07 +01:00
|
|
|
* @returns {Promise<void>}
|
2023-11-06 15:31:27 +01:00
|
|
|
*/
|
2023-12-06 00:56:07 +01:00
|
|
|
handleContextMenuFavorite = async () => {
|
|
|
|
const promises = [];
|
|
|
|
|
|
|
|
for (const characterId of this.selectedCharacters) {
|
|
|
|
promises.push(CharacterContextMenu.favorite(characterId));
|
|
|
|
}
|
|
|
|
|
|
|
|
await Promise.allSettled(promises);
|
|
|
|
await getCharacters();
|
|
|
|
await favsToHotswap();
|
|
|
|
this.browseState();
|
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-06 15:31:27 +01:00
|
|
|
/**
|
|
|
|
* Concurrently handle character duplicate requests.
|
|
|
|
*
|
|
|
|
* @returns {Promise<number>}
|
|
|
|
*/
|
2023-10-21 15:12:09 +02:00
|
|
|
handleContextMenuDuplicate = () => Promise.all(this.selectedCharacters.map(async characterId => CharacterContextMenu.duplicate(characterId)))
|
|
|
|
.then(() => getCharacters())
|
2023-12-02 20:11:06 +01:00
|
|
|
.then(() => this.browseState());
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-05 17:43:35 +01:00
|
|
|
/**
|
|
|
|
* Sequentially handle all character-to-persona conversions.
|
|
|
|
*
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
*/
|
|
|
|
handleContextMenuPersona = async () => {
|
|
|
|
for (const characterId of this.selectedCharacters) {
|
2023-12-02 20:11:06 +01:00
|
|
|
await CharacterContextMenu.persona(characterId);
|
2023-11-05 17:43:35 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
this.browseState();
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-06 15:31:27 +01:00
|
|
|
/**
|
|
|
|
* Request user input before concurrently handle deletion
|
|
|
|
* requests.
|
|
|
|
*
|
|
|
|
* @returns {Promise<number>}
|
|
|
|
*/
|
2023-10-21 15:12:09 +02:00
|
|
|
handleContextMenuDelete = () => {
|
|
|
|
callPopup(
|
|
|
|
popupMessage.deleteChat(this.selectedCharacters.length), null)
|
2023-11-06 15:56:47 +01:00
|
|
|
.then((accept) => {
|
|
|
|
if (true !== accept) return;
|
|
|
|
|
|
|
|
const deleteChats = document.getElementById('del_char_checkbox').checked ?? false;
|
|
|
|
|
2023-11-12 20:58:43 +01:00
|
|
|
showLoader();
|
2023-12-02 19:04:51 +01:00
|
|
|
toastr.info('We\'re deleting your characters, please wait...', 'Working on it');
|
2023-12-09 14:36:37 +01:00
|
|
|
Promise.allSettled(this.selectedCharacters.map(async characterId => CharacterContextMenu.delete(characterId, deleteChats)))
|
2023-10-21 15:12:09 +02:00
|
|
|
.then(() => getCharacters())
|
2023-11-08 00:10:51 +01:00
|
|
|
.then(() => this.browseState())
|
2023-11-12 20:58:43 +01:00
|
|
|
.finally(() => hideLoader());
|
2023-12-09 14:36:37 +01:00
|
|
|
});
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
|
2023-11-06 15:31:27 +01:00
|
|
|
/**
|
|
|
|
* Attaches and opens the tag menu
|
|
|
|
*/
|
2023-11-04 19:33:15 +01:00
|
|
|
handleContextMenuTag = () => {
|
|
|
|
CharacterContextMenu.tag(this.selectedCharacters);
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-11-04 19:33:15 +01:00
|
|
|
|
2023-10-21 15:12:09 +02:00
|
|
|
addStateChangeCallback = callback => this.stateChangeCallbacks.push(callback);
|
|
|
|
|
|
|
|
selectCharacter = characterId => this.selectedCharacters.push(String(characterId));
|
|
|
|
|
|
|
|
dismissCharacter = characterId => this.#selectedCharacters = this.selectedCharacters.filter(item => String(characterId) !== item);
|
|
|
|
|
2023-11-05 16:57:14 +01:00
|
|
|
/**
|
|
|
|
* Clears internal character storage and
|
|
|
|
* removes visual highlight.
|
|
|
|
*/
|
2023-10-21 15:12:09 +02:00
|
|
|
clearSelectedCharacters = () => {
|
2023-11-05 16:57:14 +01:00
|
|
|
document.querySelectorAll('#' + BulkEditOverlay.containerId + ' .' + BulkEditOverlay.selectedClass)
|
2023-11-08 00:10:51 +01:00
|
|
|
.forEach(element => element.classList.remove(BulkEditOverlay.selectedClass));
|
2023-10-21 15:12:09 +02:00
|
|
|
this.selectedCharacters.length = 0;
|
2023-12-02 20:11:06 +01:00
|
|
|
};
|
2023-10-21 15:12:09 +02:00
|
|
|
}
|
|
|
|
|
2023-11-08 00:10:51 +01:00
|
|
|
export { BulkEditOverlayState, CharacterContextMenu, BulkEditOverlay };
|