fix: require long press to open swipe picker on phones (#5382) * fix: require long press to open swipe picker on phones * fix: clarify parameter description in assignLorebookToChat function * fix: update event parameter type in onSwipeCounterClick to include TouchEvent * fix: update event parameter types in onSwipeCounterClick and addLongPressEvent

d2b2b1b4a60eeea56b38f340e8f0d08faf4e240e

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

public/scripts/personas.js+3 -3 Viewed

 /**
  * Opens a popup to set the lorebook for the current persona.
- * @param {JQuery.ClickEvent} event Click event
+ * @param {Pick<JQuery.ClickEvent, 'shiftKey' | 'altKey'>} event Click event
  */
-async function onPersonaLoreButtonClick(event) {
+async function onPersonaLoreButtonClick({ shiftKey, altKey }) {
     const personaName = power_user.personas[user_avatar];
     const selectedLorebook = power_user.persona_description_lorebook;

@@ -1182,7 +1182,7 @@ async function onPersonaLoreButtonClick(event) {
1182	return;	1182	return;
1183	}	1183	}
1184		1184
1185	if (selectedLorebook && !event.shiftKey && !event.altKey) {	1185	if (selectedLorebook && !shiftKey && !altKey) {
1186	openWorldInfoEditor(selectedLorebook);	1186	openWorldInfoEditor(selectedLorebook);
1187	return;	1187	return;
1188	}	1188	}

public/scripts/swipe-picker.js+15 -7 Viewed

 import { t } from './i18n.js';
 import { callGenericPopup, Popup, POPUP_RESULT, POPUP_TYPE } from './popup.js';
 import { power_user } from './power-user.js';
+import { isMobile } from './RossAscends-mods.js';
 import { getTokenCountAsync } from './tokenizers.js';
-import { clamp, copyText, timestampToMoment } from './utils.js';
+import { addLongPressEvent, clamp, copyText, timestampToMoment } from './utils.js';
 import { chat, deleteSwipe, ensureSwipes, isMessageSwipeable, isSwipingAllowed, swipe, syncMesToSwipe } from '/script.js';
 /**

+}
 export function initSwipePicker() {
-    $(document).on('click', '.swipes-counter.swipe-picker-enabled', async function (e) {
+    /**
+     * Click handler for opening the swipe picker when clicking on the swipe counter.
+     * @param {JQuery.Event | Event} e Event object
+     */
+    async function onSwipeCounterClick(e) {
         e.preventDefault();
         e.stopPropagation();
         const mesId = Number($(this).closest('.mes').attr('mesid'));
         await openSwipePicker(mesId);
-    });
+    }
+    if (isMobile()) {
+        addLongPressEvent('.swipes-counter.swipe-picker-enabled', onSwipeCounterClick);
+    } else {
+        $(document).on('click', '.swipes-counter.swipe-picker-enabled', onSwipeCounterClick);
+    }
     $(document).on('keydown', '.swipes-counter.swipe-picker-enabled', async function (e) {
         if (e.key !== ' ') {
             return;
+        }
-        e.preventDefault();
+        onSwipeCounterClick.call(this, e);
-        e.stopPropagation();
-        const mesId = Number($(this).closest('.mes').attr('mesid'));
-        await openSwipePicker(mesId);
     });
     $(document).on('click', '.mes_swipe_picker', async function (e) {
         e.preventDefault();

public/scripts/utils.js+2 -1 Viewed

  * Registers a long-press (touch hold) event as an alternative to modifier+click.
  * Supports event delegation for dynamically created elements.
  * @param {string} selector CSS selector for target elements
- * @param {function} callback Callback to invoke on long-press, `this` is the matched element
+ * @param {(e: TouchEvent) => void} callback Callback to invoke on long-press, `this` is the matched element
  * @param {number} [delay=500] Long-press duration in ms
  */
 export function addLongPressEvent(selector, callback, delay = 500) {

     let target = null;
     document.addEventListener('touchstart', function (event) {
+        if (!(event.target instanceof Element)) return;
         const el = event.target.closest(selector);
         if (!el) return;
         target = el;

public/scripts/world-info.js+1 -3 Viewed

 /**
  * Assigns a lorebook to the current chat.
- * @param {Object} options - The options for assigning the lorebook.
+ * @param {Pick<JQuery.ClickEvent, 'shiftKey' | 'altKey'>} event Click event
- * @param {boolean} options.shiftKey - Whether the Shift key is pressed.
- * @param {boolean} options.altKey - Whether the Alt key is pressed.
  * @returns {Promise<void>}
  */
 export async function assignLorebookToChat({ shiftKey, altKey }) {