rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-09 08:38:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix mobile scrolling. Increase press timeout. Cancel longpress on scroll

Browse Source
This commit is contained in:
Cohee 2023-11-08 01:10:51 +02:00
parent 48e41d89cb
commit 44f77f3bb3
1 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
public/scripts/BulkEditOverlay.js
View File

@ -12,9 +12,9 @@ import {
this_chid this_chid
} from "../script.js"; } from "../script.js";
import {favsToHotswap} from "./RossAscends-mods.js"; import { favsToHotswap } from "./RossAscends-mods.js";
import {convertCharacterToPersona} from "./personas.js"; import { convertCharacterToPersona } from "./personas.js";
import {createTagInput, getTagKeyForCharacter, tag_map} from "./tags.js"; import { createTagInput, getTagKeyForCharacter, tag_map } from "./tags.js";
// Utility object for popup messages. // Utility object for popup messages.
const popupMessage = { const popupMessage = {
@ -117,7 +117,7 @@ class CharacterContextMenu {
return fetch('/deletecharacter', { return fetch('/deletecharacter', {
method: 'POST', method: 'POST',
headers: getRequestHeaders(), headers: getRequestHeaders(),
body: JSON.stringify({ avatar_url: character.avatar , delete_chats: deleteChats }), body: JSON.stringify({ avatar_url: character.avatar, delete_chats: deleteChats }),
cache: 'no-cache', cache: 'no-cache',
}).then(response => { }).then(response => {
if (response.ok) { if (response.ok) {
@ -127,7 +127,7 @@ class CharacterContextMenu {
method: 'POST', method: 'POST',
body: JSON.stringify({ avatar_url: character.avatar }), body: JSON.stringify({ avatar_url: character.avatar }),
headers: getRequestHeaders(), headers: getRequestHeaders(),
}).then( (response) => { }).then((response) => {
let data = response.json(); let data = response.json();
data = Object.values(data); data = Object.values(data);
const pastChats = data.sort((a, b) => a["file_name"].localeCompare(b["file_name"])).reverse(); const pastChats = data.sort((a, b) => a["file_name"].localeCompare(b["file_name"])).reverse();
@ -173,11 +173,11 @@ class CharacterContextMenu {
*/ */
constructor(characterGroupOverlay) { constructor(characterGroupOverlay) {
const contextMenuItems = [ const contextMenuItems = [
{id: 'character_context_menu_favorite', callback: characterGroupOverlay.handleContextMenuFavorite}, { id: 'character_context_menu_favorite', callback: characterGroupOverlay.handleContextMenuFavorite },
{id: 'character_context_menu_duplicate', callback: characterGroupOverlay.handleContextMenuDuplicate}, { id: 'character_context_menu_duplicate', callback: characterGroupOverlay.handleContextMenuDuplicate },
{id: 'character_context_menu_delete', callback: characterGroupOverlay.handleContextMenuDelete}, { id: 'character_context_menu_delete', callback: characterGroupOverlay.handleContextMenuDelete },
{id: 'character_context_menu_persona', callback: characterGroupOverlay.handleContextMenuPersona}, { id: 'character_context_menu_persona', callback: characterGroupOverlay.handleContextMenuPersona },
{id: 'character_context_menu_tag', callback: characterGroupOverlay.handleContextMenuTag} { id: 'character_context_menu_tag', callback: characterGroupOverlay.handleContextMenuTag }
]; ];
contextMenuItems.forEach(contextMenuItem => document.getElementById(contextMenuItem.id).addEventListener('click', contextMenuItem.callback)) contextMenuItems.forEach(contextMenuItem => document.getElementById(contextMenuItem.id).addEventListener('click', contextMenuItem.callback))
@ -189,7 +189,7 @@ class CharacterContextMenu {
*/ */
class BulkTagPopupHandler { class BulkTagPopupHandler {
static #getHtml = (characterIds) => { static #getHtml = (characterIds) => {
const characterData = JSON.stringify({characterIds: characterIds}); const characterData = JSON.stringify({ characterIds: characterIds });
return `<div id="bulk_tag_shadow_popup"> return `<div id="bulk_tag_shadow_popup">
<div id="bulk_tag_popup"> <div id="bulk_tag_popup">
<div id="bulk_tag_popup_holder"> <div id="bulk_tag_popup_holder">
@ -281,7 +281,7 @@ class BulkEditOverlay {
static selectedClass = 'character_selected'; static selectedClass = 'character_selected';
static legacySelectedClass = 'bulk_select_checkbox'; static legacySelectedClass = 'bulk_select_checkbox';
static longPressDelay = 1500; static longPressDelay = 2500;
#state = BulkEditOverlayState.browse; #state = BulkEditOverlayState.browse;
#longPress = false; #longPress = false;
@ -357,10 +357,12 @@ class BulkEditOverlay {
const elements = this.#getEnabledElements(); const elements = this.#getEnabledElements();
elements.forEach(element => element.addEventListener('touchstart', this.handleHold)); elements.forEach(element => element.addEventListener('touchstart', this.handleHold));
elements.forEach(element => element.addEventListener('mousedown', this.handleHold)); elements.forEach(element => element.addEventListener('mousedown', this.handleHold));
elements.forEach(element => element.addEventListener('contextmenu', this.handleDefaultContextMenu));
elements.forEach(element => element.addEventListener('touchend', this.handleLongPressEnd)); elements.forEach(element => element.addEventListener('touchend', this.handleLongPressEnd));
elements.forEach(element => element.addEventListener('mouseup', this.handleLongPressEnd)); elements.forEach(element => element.addEventListener('mouseup', this.handleLongPressEnd));
elements.forEach(element => element.addEventListener('dragend', this.handleLongPressEnd)); elements.forEach(element => element.addEventListener('dragend', this.handleLongPressEnd));
elements.forEach(element => element.addEventListener('touchmove', this.handleLongPressEnd));
const grid = document.getElementById(BulkEditOverlay.containerId); const grid = document.getElementById(BulkEditOverlay.containerId);
grid.addEventListener('click', this.handleCancelClick); grid.addEventListener('click', this.handleCancelClick);
@ -410,13 +412,17 @@ class BulkEditOverlay {
document.removeEventListener('click', this.handleContextMenuHide); document.removeEventListener('click', this.handleContextMenuHide);
} }
handleDefaultContextMenu = (event) => {
if (this.isLongPress) {
event.preventDefault();
event.stopPropagation();
return false;
}
}
handleHold = (event) => { handleHold = (event) => {
if (0 !== event.button && event.type !== 'touchstart') return; if (0 !== event.button && event.type !== 'touchstart') return;
// Prevent call for mobile browser context menu on long-press.
event.preventDefault();
event.stopPropagation();
this.isLongPress = true; this.isLongPress = true;
setTimeout(() => { setTimeout(() => {
if (this.isLongPress) { if (this.isLongPress) {
@ -540,7 +546,8 @@ class BulkEditOverlay {
Promise.all(this.selectedCharacters.map(async characterId => CharacterContextMenu.delete(characterId, deleteChats))) Promise.all(this.selectedCharacters.map(async characterId => CharacterContextMenu.delete(characterId, deleteChats)))
.then(() => getCharacters()) .then(() => getCharacters())
.then(() => this.browseState())} .then(() => this.browseState())
}
); );
} }
@ -563,9 +570,9 @@ class BulkEditOverlay {
*/ */
clearSelectedCharacters = () => { clearSelectedCharacters = () => {
document.querySelectorAll('#' + BulkEditOverlay.containerId + ' .' + BulkEditOverlay.selectedClass) document.querySelectorAll('#' + BulkEditOverlay.containerId + ' .' + BulkEditOverlay.selectedClass)
.forEach( element => element.classList.remove(BulkEditOverlay.selectedClass)); .forEach(element => element.classList.remove(BulkEditOverlay.selectedClass));
this.selectedCharacters.length = 0; this.selectedCharacters.length = 0;
} }
} }
export {BulkEditOverlayState, CharacterContextMenu, BulkEditOverlay}; export { BulkEditOverlayState, CharacterContextMenu, BulkEditOverlay };