Improve phone usability of sortable drags

This commit is contained in:
Cohee 2023-08-18 13:41:46 +03:00
parent 1e0e5225ca
commit c4d8d70103
6 changed files with 19 additions and 7 deletions

View File

@ -2,7 +2,7 @@ import {callPopup, event_types, eventSource, is_send_press, main_api, substitute
import { is_group_generating } from "./group-chats.js"; import { is_group_generating } from "./group-chats.js";
import {TokenHandler} from "./openai.js"; import {TokenHandler} from "./openai.js";
import {power_user} from "./power-user.js"; import {power_user} from "./power-user.js";
import { debounce, waitUntilCondition } from "./utils.js"; import { debounce, getSortableDelay, waitUntilCondition } from "./utils.js";
function debouncePromise(func, delay) { function debouncePromise(func, delay) {
let timeoutId; let timeoutId;
@ -1511,6 +1511,7 @@ PromptManagerModule.prototype.getFormattedDate = function() {
*/ */
PromptManagerModule.prototype.makeDraggable = function () { PromptManagerModule.prototype.makeDraggable = function () {
$(`#${this.configuration.prefix}prompt_manager_list`).sortable({ $(`#${this.configuration.prefix}prompt_manager_list`).sortable({
delay: getSortableDelay(),
items: `.${this.configuration.prefix}prompt_manager_prompt_draggable`, items: `.${this.configuration.prefix}prompt_manager_prompt_draggable`,
update: ( event, ui ) => { update: ( event, ui ) => {
const promptOrder = this.getPromptOrderForCharacter(this.activeCharacter); const promptOrder = this.getPromptOrderForCharacter(this.activeCharacter);

View File

@ -1,6 +1,6 @@
import { callPopup, eventSource, event_types, getCurrentChatId, reloadCurrentChat, saveSettingsDebounced } from "../../../script.js"; import { callPopup, getCurrentChatId, reloadCurrentChat, saveSettingsDebounced } from "../../../script.js";
import { extension_settings } from "../../extensions.js"; import { extension_settings } from "../../extensions.js";
import { uuidv4, waitUntilCondition } from "../../utils.js"; import { getSortableDelay, uuidv4 } from "../../utils.js";
import { regex_placement } from "./engine.js"; import { regex_placement } from "./engine.js";
async function saveRegexScript(regexScript, existingScriptIndex) { async function saveRegexScript(regexScript, existingScriptIndex) {
@ -236,6 +236,7 @@ jQuery(async () => {
}); });
$('#saved_regex_scripts').sortable({ $('#saved_regex_scripts').sortable({
delay: getSortableDelay(),
stop: function () { stop: function () {
let newScripts = []; let newScripts = [];
$('#saved_regex_scripts').children().each(function () { $('#saved_regex_scripts').children().each(function () {

View File

@ -7,6 +7,7 @@ import {
import { import {
power_user, power_user,
} from "./power-user.js"; } from "./power-user.js";
import { getSortableDelay } from "./utils.js";
export { export {
kai_settings, kai_settings,
@ -243,7 +244,7 @@ function sortItemsByOrder(orderArray) {
} }
} }
$(document).ready(function () { jQuery(function () {
sliders.forEach(slider => { sliders.forEach(slider => {
$(document).on("input", slider.sliderId, function () { $(document).on("input", slider.sliderId, function () {
const value = $(this).val(); const value = $(this).val();
@ -267,6 +268,7 @@ $(document).ready(function () {
}); });
$('#kobold_order').sortable({ $('#kobold_order').sortable({
delay: getSortableDelay(),
stop: function () { stop: function () {
const order = []; const order = [];
$('#kobold_order').children().each(function () { $('#kobold_order').children().each(function () {

View File

@ -10,8 +10,9 @@ import {
import { getCfg } from "./extensions/cfg/util.js"; import { getCfg } from "./extensions/cfg/util.js";
import { MAX_CONTEXT_DEFAULT, tokenizers } from "./power-user.js"; import { MAX_CONTEXT_DEFAULT, tokenizers } from "./power-user.js";
import { import {
getSortableDelay,
getStringHash, getStringHash,
uuidv4 uuidv4,
} from "./utils.js"; } from "./utils.js";
export { export {
@ -638,7 +639,7 @@ $("#nai_preamble_restore").on('click', function () {
saveSettingsDebounced(); saveSettingsDebounced();
}); });
$(document).ready(function () { jQuery(function () {
sliders.forEach(slider => { sliders.forEach(slider => {
$(document).on("input", slider.sliderId, function () { $(document).on("input", slider.sliderId, function () {
const value = $(this).val(); const value = $(this).val();
@ -677,6 +678,7 @@ $(document).ready(function () {
}); });
$('#novel_order').sortable({ $('#novel_order').sortable({
delay: getSortableDelay(),
stop: saveSamplingOrder, stop: saveSamplingOrder,
}); });

View File

@ -8,6 +8,11 @@ export function isDigitsOnly(str) {
return /^\d+$/.test(str); return /^\d+$/.test(str);
} }
// Increase delay on touch screens
export function getSortableDelay() {
return navigator.maxTouchPoints > 0 ? 750 : 100;
}
export function shuffle(array) { export function shuffle(array) {
let currentIndex = array.length, let currentIndex = array.length,
randomIndex; randomIndex;

View File

@ -1,5 +1,5 @@
import { saveSettings, callPopup, substituteParams, getTokenCount, getRequestHeaders, chat_metadata, this_chid, characters, saveCharacterDebounced, menu_type, eventSource, event_types } from "../script.js"; import { saveSettings, callPopup, substituteParams, getTokenCount, getRequestHeaders, chat_metadata, this_chid, characters, saveCharacterDebounced, menu_type, eventSource, event_types } from "../script.js";
import { download, debounce, initScrollHeight, resetScrollHeight, parseJsonFile, extractDataFromPng, getFileBuffer, delay, getCharaFilename, deepClone } from "./utils.js"; import { download, debounce, initScrollHeight, resetScrollHeight, parseJsonFile, extractDataFromPng, getFileBuffer, getCharaFilename, deepClone, getSortableDelay } from "./utils.js";
import { getContext } from "./extensions.js"; import { getContext } from "./extensions.js";
import { NOTE_MODULE_NAME, metadata_keys, shouldWIAddPrompt } from "./authors-note.js"; import { NOTE_MODULE_NAME, metadata_keys, shouldWIAddPrompt } from "./authors-note.js";
import { registerSlashCommand } from "./slash-commands.js"; import { registerSlashCommand } from "./slash-commands.js";
@ -302,6 +302,7 @@ function displayWorldEntries(name, data) {
} }
$("#world_popup_entries_list").sortable({ $("#world_popup_entries_list").sortable({
delay: getSortableDelay(),
handle: ".drag-handle", handle: ".drag-handle",
stop: async function (event, ui) { stop: async function (event, ui) {
$('#world_popup_entries_list .world_entry').each(function (index) { $('#world_popup_entries_list .world_entry').each(function (index) {