Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2024-12-21 19:08:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix drop on self bug

Browse Source 
Fix highlight fadeout bug
UI tweaks
This commit is contained in:
Reece Browne 2024-12-17 13:47:44 +00:00
parent ca3002f925
commit 2bdda9acba
2 changed files with 46 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/main/resources/static/css/dragdrop.css
View File

@ -85,12 +85,12 @@ html[dir="rtl"] .drag-manager_draghover img {
width: 80px; width: 80px;
} }
} }
.moved-element { .moved-element img {
background-color: darkgreen; border: 8px solid #198754;
border-radius: 8px; border-radius: 3px;
transition: background-color 0.5s ease-out; transition: border 0.5s ease-out;
} }
.moved-element.remove { .moved-element.remove img{
background-color: transparent; border: 8px solid transparent;
} }

56
src/main/resources/static/js/multitool/DragDropManager.js
View File

@ -8,6 +8,7 @@ class DragDropManager {
this.draggedImageEl = undefined; this.draggedImageEl = undefined;
this.draggedEl = undefined; this.draggedEl = undefined;
this.selectedPageElements = []; // Store selected pages for multi-page mode this.selectedPageElements = []; // Store selected pages for multi-page mode
this.elementTimeouts = new Map();
// Add CSS dynamically // Add CSS dynamically
const styleElement = document.createElement('link'); const styleElement = document.createElement('link');
@ -101,55 +102,78 @@ class DragDropManager {
if (window.selectPage) { if (window.selectPage) {
// Multi-page drop logic // Multi-page drop logic
if (!this.hoveredEl || !this.hoveredEl.classList.contains('page-container')) { if (
!this.hoveredEl ||
!this.hoveredEl.classList.contains('page-container') ||
this.selectedPageElements.includes(this.hoveredEl)
) {
this.selectedPageElements.forEach((pageEl) => { this.selectedPageElements.forEach((pageEl) => {
pageEl.style.transform = pageEl.initialTransform || 'translate(0px, 0px)'; pageEl.style.transform = pageEl.initialTransform || 'translate(0px, 0px)';
pageEl.classList.remove('drag-manager_dragging'); pageEl.classList.remove('drag-manager_dragging');
this.pageDragging = false;
return;
}); });
} else { } else {
this.selectedPageElements.forEach((pageEl) => { this.selectedPageElements.forEach((pageEl) => {
pageEl.classList.remove('drag-manager_dragging'); pageEl.classList.remove('drag-manager_dragging');
if (this.hoveredEl === this.endInsertionElement) { if (this.hoveredEl === this.endInsertionElement) {
this.movePageTo(pageEl); this.movePageTo(pageEl);
} else { } else {
this.movePageTo(pageEl, this.hoveredEl); this.movePageTo(pageEl, this.hoveredEl);
} }
pageEl.classList.remove('moved-element', 'remove');
pageEl.classList.add('moved-element'); // Handle timeout for the current element
setTimeout(() => { this.handleTimeoutForElement(pageEl);
pageEl.classList.add('remove');
}, 2000);
}); });
} }
this.selectedPageElements = []; this.selectedPageElements = [];
window.resetPages(); window.resetPages();
} else { } else {
// Single-page drop logic // Single-page drop logic
if (!this.hoveredEl || !this.hoveredEl.classList.contains('page-container')) { if (
!this.hoveredEl ||
!this.hoveredEl.classList.contains('page-container') ||
this.hoveredEl === this.draggedEl
) {
this.draggedEl.style.transform = this.draggedEl.initialTransform || 'translate(0px, 0px)'; this.draggedEl.style.transform = this.draggedEl.initialTransform || 'translate(0px, 0px)';
this.draggedEl.classList.remove('drag-manager_dragging'); this.draggedEl.classList.remove('drag-manager_dragging');
this.pageDragging = false;
return; return;
} }
if (!this.hoveredEl) return;
this.draggedEl.classList.remove('drag-manager_dragging'); this.draggedEl.classList.remove('drag-manager_dragging');
if (this.hoveredEl === this.endInsertionElement) { if (this.hoveredEl === this.endInsertionElement) {
this.movePageTo(this.draggedEl); this.movePageTo(this.draggedEl);
} else { } else {
this.movePageTo(this.draggedEl, this.hoveredEl); this.movePageTo(this.draggedEl, this.hoveredEl);
} }
this.draggedEl.classList.remove('moved-element', 'remove');
this.draggedEl.classList.add('moved-element'); // Handle timeout for the current element
setTimeout(() => { this.handleTimeoutForElement(this.draggedEl);
this.draggedEl.classList.add('remove');
}, 2000);
} }
this.pageDragging = false; this.pageDragging = false;
} }
// Helper function to manage independent timeouts
handleTimeoutForElement(element) {
// Clear existing timeout if present
if (this.elementTimeouts.has(element)) {
clearTimeout(this.elementTimeouts.get(element));
}
// Add the moved-element class and set a new timeout
element.classList.remove('remove');
element.classList.add('moved-element');
const timeoutId = setTimeout(() => {
element.classList.add('remove');
this.elementTimeouts.delete(element); // Cleanup the timeout map
}, 2000);
// Store the timeout ID for this element
this.elementTimeouts.set(element, timeoutId);
}
setActions({movePageTo}) { setActions({movePageTo}) {
this.movePageTo = movePageTo; this.movePageTo = movePageTo;
} }