rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Sync Bulk Edit and CharacterGroupOverlay state

This commit is contained in:
artisticMink 2023-10-23 17:30:07 +02:00
parent 171c20ee16
commit 7d90c38524
2 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/scripts/CharacterGroupOverlay.js
View File

@ -10,7 +10,7 @@ import {event_types, eventSource} from "../script.js";
*/ */
let characterGroupOverlayInstance = null; let characterGroupOverlayInstance = null;
class State { class CharacterGroupOverlayState {
static browse = 0; static browse = 0;
static select = 1; static select = 1;
} }
@ -22,9 +22,9 @@ class CharacterGroupOverlay {
static selectModeClass = 'group_overlay_mode_select'; static selectModeClass = 'group_overlay_mode_select';
static selectedClass = 'character_selected'; static selectedClass = 'character_selected';
#state = State.browse; #state = CharacterGroupOverlayState.browse;
#longPress = false; #longPress = false;
#longPressEndCallbacks = []; #stateChangeCallbacks = [];
#selectedCharacters = []; #selectedCharacters = [];
/** /**
@ -54,8 +54,8 @@ class CharacterGroupOverlay {
this.#longPress = longPress; this.#longPress = longPress;
} }
get longPressEndCallbacks() { get stateChangeCallbacks() {
return this.#longPressEndCallbacks; return this.#stateChangeCallbacks;
} }
get selectedCharacters() { get selectedCharacters() {
@ -73,14 +73,13 @@ class CharacterGroupOverlay {
characterGroupOverlayInstance = Object.freeze(this); characterGroupOverlayInstance = Object.freeze(this);
} }
browseState = () => this.state = State.browse; browseState = () => this.state = CharacterGroupOverlayState.browse;
selectState = () => this.state = State.select; selectState = () => this.state = CharacterGroupOverlayState.select;
/** /**
* Set up a Sortable grid for the loaded page * Set up a Sortable grid for the loaded page
*/ */
onPageLoad = () => { onPageLoad = () => {
let touchState = false;
const grid = document.getElementById(CharacterGroupOverlay.containerId); const grid = document.getElementById(CharacterGroupOverlay.containerId);
const sortable = new Sortable(grid, { const sortable = new Sortable(grid, {
@ -129,7 +128,7 @@ class CharacterGroupOverlay {
this.isLongPress = true; this.isLongPress = true;
setTimeout(() => { setTimeout(() => {
if (this.isLongPress) { if (this.isLongPress) {
this.state = State.select; this.state = CharacterGroupOverlayState.select;
} }
}, 3000); }, 3000);
} }
@ -139,25 +138,27 @@ class CharacterGroupOverlay {
} }
handleCancelClick = () => { handleCancelClick = () => {
this.state = State.browse; this.state = CharacterGroupOverlayState.browse;
} }
handleStateChange = () => { handleStateChange = () => {
switch (this.state) { switch (this.state) {
case State.browse: case CharacterGroupOverlayState.browse:
this.container.classList.remove(CharacterGroupOverlay.selectModeClass); this.container.classList.remove(CharacterGroupOverlay.selectModeClass);
[...this.container.getElementsByClassName(CharacterGroupOverlay.characterClass)] [...this.container.getElementsByClassName(CharacterGroupOverlay.characterClass)]
.forEach(element => element.removeEventListener('click', this.toggleCharacterSelected)); .forEach(element => element.removeEventListener('click', this.toggleCharacterSelected));
this.longPressEndCallbacks.forEach(callback => callback());
this.clearSelectedCharacters(); this.clearSelectedCharacters();
this.disableContextMenu(); this.disableContextMenu();
break; break;
case State.select: case CharacterGroupOverlayState.select:
this.container.classList.add(CharacterGroupOverlay.selectModeClass); this.container.classList.add(CharacterGroupOverlay.selectModeClass);
[...this.container.getElementsByClassName(CharacterGroupOverlay.characterClass)] [...this.container.getElementsByClassName(CharacterGroupOverlay.characterClass)]
.forEach(element => element.addEventListener('click', this.toggleCharacterSelected)); .forEach(element => element.addEventListener('click', this.toggleCharacterSelected));
this.enableContextMenu(); this.enableContextMenu();
break;
} }
this.stateChangeCallbacks.forEach(callback => callback(this.state));
} }
toggleCharacterSelected = event => { toggleCharacterSelected = event => {
@ -194,7 +195,9 @@ class CharacterGroupOverlay {
} }
} }
addLongPressEndCallback = callback => this.longPressEndCallbacks.push(callback); handleContextMenuFavorite = () => this.selectedCharacters.forEach(characterId => CharacterContextMenu.toggleFavorite(characterId));
addStateChangeCallback = callback => this.stateChangeCallbacks.push(callback);
selectCharacter = characterId => this.selectedCharacters.push(String(characterId)); selectCharacter = characterId => this.selectedCharacters.push(String(characterId));
@ -206,4 +209,4 @@ class CharacterGroupOverlay {
} }
} }
export {CharacterGroupOverlay}; export {CharacterGroupOverlayState, CharacterContextMenu, CharacterGroupOverlay};

43
public/scripts/bulk-edit.js
View File

@ -1,12 +1,36 @@
import { characters, getCharacters, handleDeleteCharacter, callPopup } from "../script.js"; import { characters, getCharacters, handleDeleteCharacter, callPopup } from "../script.js";
import {CharacterGroupOverlay} from "../../CharacterGroupOverlay.js"; import {CharacterGroupOverlay, CharacterGroupOverlayState} from "./CharacterGroupOverlay.js";
let is_bulk_edit = false; let is_bulk_edit = false;
(new CharacterGroupOverlay()).addLongPressEndCallback(() => { const enableBulkEdit = () => {
enableBulkSelect();
(new CharacterGroupOverlay()).selectState();
// show the delete button
$("#bulkDeleteButton").show();
is_bulk_edit = true;
}
const disableBulkEdit = () => {
disableBulkSelect(); disableBulkSelect();
(new CharacterGroupOverlay()).browseState();
// hide the delete button
$("#bulkDeleteButton").hide(); $("#bulkDeleteButton").hide();
is_bulk_edit = false; is_bulk_edit = false;
}
const toggleBulkEditMode = (isBulkEdit) => {
if (isBulkEdit) {
disableBulkEdit();
} else {
enableBulkEdit();
}
}
(new CharacterGroupOverlay()).addStateChangeCallback((state) => {
if (state === CharacterGroupOverlayState.select) enableBulkEdit();
if (state === CharacterGroupOverlayState.browse) disableBulkEdit();
}); });
/** /**
@ -14,20 +38,7 @@ let is_bulk_edit = false;
*/ */
function onEditButtonClick() { function onEditButtonClick() {
console.log("Edit button clicked"); console.log("Edit button clicked");
// toggle bulk edit mode toggleBulkEditMode(is_bulk_edit);
if (is_bulk_edit) {
disableBulkSelect();
(new CharacterGroupOverlay()).browseState();
// hide the delete button
$("#bulkDeleteButton").hide();
is_bulk_edit = false;
} else {
enableBulkSelect();
(new CharacterGroupOverlay()).selectState();
// show the delete button
$("#bulkDeleteButton").show();
is_bulk_edit = true;
}
} }
/** /**