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

Fix gallery duplicate uploads

Browse Source
This commit is contained in:
Cohee 2024-07-27 18:00:30 +03:00
parent e1700f9a14
commit 8dd5d9321d
2 changed files with 56 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/global.d.ts vendored
View File

@ -16,6 +16,8 @@ declare var ai;
// Jquery plugins
interface JQuery {
nanogallery2(options?: any): JQuery;
nanogallery2(method: string, options?: any): JQuery;
pagination(method: 'getCurrentPageNum'): number;
pagination(method: string, options?: any): JQuery;
pagination(options?: any): JQuery;

88
public/scripts/extensions/gallery/index.js
View File

@ -3,6 +3,7 @@ import {
this_chid,
characters,
getRequestHeaders,
event_types,
} from '../../../script.js';
import { groups, selected_group } from '../../group-chats.js';
import { loadFileToDocument, delay } from '../../utils.js';
@ -25,6 +26,27 @@ let paginationVisiblePages = 10;
let paginationMaxLinesPerPage = 2;
let galleryMaxRows = 3;
$('body').on('click', '.dragClose', function () {
const relatedId = $(this).data('related-id'); // Get the ID of the related draggable
$(`body > .draggable[id="${relatedId}"]`).remove(); // Remove the associated draggable
});
const CUSTOM_GALLERY_REMOVED_EVENT = 'galleryRemoved';
const mutationObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.removedNodes.forEach((node) => {
if (node instanceof HTMLElement && node.tagName === 'DIV' && node.id === 'gallery') {
eventSource.emit(CUSTOM_GALLERY_REMOVED_EVENT);
}
});
});
});
mutationObserver.observe(document.body, {
childList: true,
subtree: false,
});
/**
* Retrieves a list of gallery items based on a given URL. This function calls an API endpoint
@ -59,7 +81,9 @@ async function getGalleryItems(url) {
* @returns {Promise<void>} - Promise representing the completion of the gallery initialization.
*/
async function initGallery(items, url) {
const nonce = `nonce-${Math.random().toString(36).substring(2, 15)}`;
const gallery = $('#dragGallery');
gallery.addClass(nonce);
gallery.nanogallery2({
'items': items,
thumbnailWidth: 'auto',
@ -82,16 +106,26 @@ async function initGallery(items, url) {
fnThumbnailOpen: viewWithDragbox,
});
eventSource.on('resizeUI', function (elmntName) {
gallery.nanogallery2('resize');
});
const dragDropHandler = new DragAndDropHandler('#dragGallery', async (files, event) => {
const dragDropHandler = new DragAndDropHandler(`#dragGallery.${nonce}`, async (files, event) => {
let file = files[0];
uploadFile(file, url); // Added url parameter to know where to upload
});
const resizeHandler = function () {
gallery.nanogallery2('resize');
};
eventSource.on('resizeUI', resizeHandler);
eventSource.once(event_types.CHAT_CHANGED, function () {
gallery.closest('#gallery').remove();
});
eventSource.once(CUSTOM_GALLERY_REMOVED_EVENT, function () {
gallery.nanogallery2('destroy');
dragDropHandler.destroy();
eventSource.removeListener('resizeUI', resizeHandler);
});
// Set dropzone height to be the same as the parent
gallery.css('height', gallery.parent().css('height'));
@ -140,16 +174,10 @@ async function showCharGallery() {
const items = await getGalleryItems(url);
// if there already is a gallery, destroy it and place this one in its place
if ($('#dragGallery').length) {
$('#dragGallery').nanogallery2('destroy');
initGallery(items, url);
} else {
makeMovable();
setTimeout(async () => {
await initGallery(items, url);
}, 100);
}
$('#dragGallery').closest('#gallery').remove();
makeMovable();
await delay(100);
await initGallery(items, url);
} catch (err) {
console.trace();
console.error(err);
@ -202,11 +230,11 @@ async function uploadFile(file, url) {
toastr.success('File uploaded successfully. Saved at: ' + result.path);
// Refresh the gallery
$('#dragGallery').nanogallery2('destroy'); // Destroy old gallery
const newItems = await getGalleryItems(url); // Fetch the latest items
initGallery(newItems, url); // Reinitialize the gallery with new items and pass 'url'
$('#dragGallery').closest('#gallery').remove(); // Destroy old gallery
makeMovable();
await delay(100);
await initGallery(newItems, url); // Reinitialize the gallery with new items and pass 'url'
} catch (error) {
console.error('There was an issue uploading the file:', error);
@ -273,11 +301,6 @@ function makeMovable(id = 'gallery') {
e.preventDefault();
return false;
});
$('body').on('click', '.dragClose', function () {
const relatedId = $(this).data('related-id'); // Get the ID of the related draggable
$(`#${relatedId}`).remove(); // Remove the associated draggable
});
}
/**
@ -358,11 +381,6 @@ function makeDragImg(id, url) {
} else {
console.error('Failed to append the template content or retrieve the appended content.');
}
$('body').on('click', '.dragClose', function () {
const relatedId = $(this).data('related-id'); // Get the ID of the related draggable
$(`#${relatedId}`).remove(); // Remove the associated draggable
});
}
/**
@ -401,7 +419,8 @@ function viewWithDragbox(items) {
// Registers a simple command for opening the char gallery.
SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'show-gallery',
SlashCommandParser.addCommandObject(SlashCommand.fromProps({
name: 'show-gallery',
aliases: ['sg'],
callback: () => {
showCharGallery();
@ -409,7 +428,8 @@ SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'show-gallery
},
helpString: 'Shows the gallery.',
}));
SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'list-gallery',
SlashCommandParser.addCommandObject(SlashCommand.fromProps({
name: 'list-gallery',
aliases: ['lg'],
callback: listGalleryCommand,
returns: 'list of images',
@ -432,14 +452,14 @@ SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'list-gallery
async function listGalleryCommand(args) {
try {
let url = args.char ?? (args.group ? groups.find(it=>it.name == args.group)?.id : null) ?? (selected_group || this_chid);
let url = args.char ?? (args.group ? groups.find(it => it.name == args.group)?.id : null) ?? (selected_group || this_chid);
if (!args.char && !args.group && !selected_group && this_chid) {
const char = characters[this_chid];
url = char.avatar.replace('.png', '');
}
const items = await getGalleryItems(url);
return JSON.stringify(items.map(it=>it.src));
return JSON.stringify(items.map(it => it.src));
} catch (err) {
console.trace();