rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix dropzones

Browse Source
This commit is contained in:
city-unit
2023-08-30 15:33:30 -04:00
parent feb19a603c
commit dfd6961c2a
1 changed files with 26 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,7 +48,7 @@ async function getGalleryItems(url) {
* @returns {Promise<void>} - Promise representing the completion of the gallery initialization. * @returns {Promise<void>} - Promise representing the completion of the gallery initialization.
*/ */
async function initGallery(items, url) { async function initGallery(items, url) {
$("#zoomFor_test").nanogallery2({ $("#dragGallery").nanogallery2({
"items": items, "items": items,
thumbnailWidth: 'auto', thumbnailWidth: 'auto',
thumbnailHeight: 150, thumbnailHeight: 150,
@@ -75,12 +75,17 @@ async function initGallery(items, url) {
// Your logic here // Your logic here
// If you want to resize the nanogallery2 instance when this event is triggered: // If you want to resize the nanogallery2 instance when this event is triggered:
jQuery("#zoomFor_test").nanogallery2('resize'); jQuery("#dragGallery").nanogallery2('resize');
}); });
const dropZone = $('#dragGallery');
//remove any existing handlers
dropZone.off('dragover');
dropZone.off('dragleave');
dropZone.off('drop');
// Initialize dropzone handlers // Initialize dropzone handlers
const dropZone = $('#zoomFor_test');
dropZone.on('dragover', function (e) { dropZone.on('dragover', function (e) {
e.stopPropagation(); // Ensure this event doesn't propagate e.stopPropagation(); // Ensure this event doesn't propagate
e.preventDefault(); e.preventDefault();
@@ -135,27 +140,17 @@ async function showCharGallery() {
} }
const items = await getGalleryItems(url); const items = await getGalleryItems(url);
makeMovable(); // if there already is a gallery, destroy it and place this one in its place
console.log("close", close); if ($(`#dragGallery`).length) {
if ($("body").css("position") === "fixed") { $(`#dragGallery`).nanogallery2("destroy");
$("body").css("position", "static"); initGallery(items, url);
} else {
makeMovable();
setTimeout(async () => {
await initGallery(items, url);
}, 100);
} }
setTimeout(async () => {
await initGallery(items, url);
}, 100);
//next, we add `<div id="" class="fa-solid fa-grip drag-grabber"></div>` to zoomFor_test
//document.getElementById(`zoomFor_test`).innerHTML += `<div id="" class="fa-solid fa-grip drag-grabber"></div>`;
// close.then(() => {
// $("#my-gallery").nanogallery2("destroy");
// if ($("body").css("position") === "static") {
// $("body").css("position", "fixed");
// }
// const dropZone = $('#dialogue_popup');
// dropZone.off('dragover dragleave drop');
// });
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
@@ -207,7 +202,7 @@ async function uploadFile(file, url) {
toastr.success('File uploaded successfully. Saved at: ' + result.path); toastr.success('File uploaded successfully. Saved at: ' + result.path);
// Refresh the gallery // Refresh the gallery
$("#my-gallery").nanogallery2("destroy"); // Destroy old gallery $("#dragGallery").nanogallery2("destroy"); // Destroy old gallery
const newItems = await getGalleryItems(url); // Fetch the latest items const newItems = await getGalleryItems(url); // Fetch the latest items
initGallery(newItems, url); // Reinitialize the gallery with new items and pass 'url' initGallery(newItems, url); // Reinitialize the gallery with new items and pass 'url'
@@ -245,31 +240,29 @@ $(document).ready(function () {
* The cloned element has its attributes set, a new child div appended, and is made visible on the body. * The cloned element has its attributes set, a new child div appended, and is made visible on the body.
* Additionally, it sets up the element to prevent dragging on its images. * Additionally, it sets up the element to prevent dragging on its images.
*/ */
function makeMovable(){ function makeMovable(id="gallery"){
let charname = "gallery"
console.debug('making new container from template') console.debug('making new container from template')
const template = $('#generic_draggable_template').html(); const template = $('#generic_draggable_template').html();
const newElement = $(template); const newElement = $(template);
newElement.attr('forChar', charname); newElement.attr('forChar', id);
newElement.attr('id', `zoomFor_${charname}`); newElement.attr('id', `${id}`);
newElement.find('.drag-grabber').attr('id', `zoomFor_${charname}header`); newElement.find('.drag-grabber').attr('id', `${id}header`);
//add a div for the gallery //add a div for the gallery
newElement.append(`<div id="zoomFor_test"></div>`); newElement.append(`<div id="dragGallery"></div>`);
// add no-scrollbar class to this element // add no-scrollbar class to this element
newElement.addClass('no-scrollbar'); newElement.addClass('no-scrollbar');
$(`#zoomFor_test`).css('display', 'block'); $(`#dragGallery`).css('display', 'block');
$('body').append(newElement); $('body').append(newElement);
loadMovingUIState(); loadMovingUIState();
$(`.draggable[forChar="${charname}"]`).css('display', 'block'); $(`.draggable[forChar="${id}"]`).css('display', 'block');
dragElement(newElement); dragElement(newElement);
$(`.draggable[forChar="${charname}"] img`).on('dragstart', (e) => { $(`.draggable[forChar="${id}"] img`).on('dragstart', (e) => {
console.log('saw drag on avatar!'); console.log('saw drag on avatar!');
e.preventDefault(); e.preventDefault();
return false; return false;