drakosfire
commited on
Commit
•
26d1f1c
1
Parent(s):
b5f325d
simplified handleColumnOverflow to only detect and act during second column overflow, trusting page css to handle two column balancing, works pretty good
Browse files- scripts.js +31 -31
scripts.js
CHANGED
@@ -669,7 +669,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
669 |
blocks.forEach((block, index) => {
|
670 |
const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
|
671 |
columnHeights[column - 1] += block.offsetHeight;
|
672 |
-
if (columnHeights[
|
673 |
overflowStartIndex = index;
|
674 |
}
|
675 |
});
|
@@ -681,22 +681,22 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
681 |
const overflowBlocks = blocks.slice(overflowStartIndex);
|
682 |
const overflowHeight = overflowBlocks.reduce((acc, block) => acc + block.offsetHeight, 0);
|
683 |
|
684 |
-
// If the target column is the first column, check if the second column has enough space
|
685 |
-
if (targetColumn === 1) {
|
686 |
-
|
687 |
|
688 |
-
|
689 |
-
|
690 |
-
|
691 |
-
|
692 |
-
|
693 |
-
|
694 |
-
|
695 |
-
|
696 |
-
|
697 |
-
|
698 |
-
|
699 |
-
}
|
700 |
|
701 |
// Get the next page if it exists
|
702 |
const nextPage = getNextPage(page);
|
@@ -719,15 +719,15 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
719 |
return;
|
720 |
}
|
721 |
|
722 |
-
// If the next page's second column has enough space for overflow from the first column
|
723 |
-
if (targetColumn === 1 && nextPageColumnHeights[1] + overflowHeight <= MAX_COLUMN_HEIGHT) {
|
724 |
-
|
725 |
-
|
726 |
-
|
727 |
-
|
728 |
-
|
729 |
-
|
730 |
-
}
|
731 |
}
|
732 |
|
733 |
// Otherwise, create a new page and move the overflowing blocks there
|
@@ -741,19 +741,19 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
741 |
console.error('New monster frame not found in the new page');
|
742 |
return;
|
743 |
}
|
744 |
-
|
745 |
|
746 |
overflowBlocks.forEach(block => {
|
747 |
newMonsterFrame.appendChild(block);
|
|
|
748 |
});
|
749 |
console.log(`Moved overflowing blocks to new page with ID: ${newPage.getAttribute('data-page-id')}`);
|
750 |
}
|
751 |
|
752 |
-
|
753 |
-
|
754 |
-
|
755 |
-
|
756 |
-
|
757 |
|
758 |
// Handle the drop event on the trash area
|
759 |
function handleTrashDrop(e) {
|
|
|
669 |
blocks.forEach((block, index) => {
|
670 |
const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
|
671 |
columnHeights[column - 1] += block.offsetHeight;
|
672 |
+
if (column === 2 && columnHeights[1] > MAX_COLUMN_HEIGHT && overflowStartIndex === -1) {
|
673 |
overflowStartIndex = index;
|
674 |
}
|
675 |
});
|
|
|
681 |
const overflowBlocks = blocks.slice(overflowStartIndex);
|
682 |
const overflowHeight = overflowBlocks.reduce((acc, block) => acc + block.offsetHeight, 0);
|
683 |
|
684 |
+
// // If the target column is the first column, check if the second column has enough space
|
685 |
+
// if (targetColumn === 1) {
|
686 |
+
// const secondColumnAvailableHeight = MAX_COLUMN_HEIGHT - columnHeights[1];
|
687 |
|
688 |
+
// if (overflowHeight <= secondColumnAvailableHeight) {
|
689 |
+
// // Move the overflowing blocks to the second column within the same page
|
690 |
+
// overflowBlocks.forEach(block => {
|
691 |
+
// const blockWrapper = block.closest('.block.monster.frame.wide');
|
692 |
+
// if (blockWrapper) {
|
693 |
+
// blockWrapper.appendChild(block);
|
694 |
+
// block.setAttribute('data-page-id', page.getAttribute('data-page-id'));
|
695 |
+
// }
|
696 |
+
// });
|
697 |
+
// return;
|
698 |
+
// }
|
699 |
+
// }
|
700 |
|
701 |
// Get the next page if it exists
|
702 |
const nextPage = getNextPage(page);
|
|
|
719 |
return;
|
720 |
}
|
721 |
|
722 |
+
// // If the next page's second column has enough space for overflow from the first column
|
723 |
+
// if (targetColumn === 1 && nextPageColumnHeights[1] + overflowHeight <= MAX_COLUMN_HEIGHT) {
|
724 |
+
// const nextPageContainer = nextPage.querySelector('.block.monster.frame.wide');
|
725 |
+
// overflowBlocks.forEach(block => {
|
726 |
+
// nextPageContainer.appendChild(block);
|
727 |
+
// block.setAttribute('data-page-id', nextPage.getAttribute('data-page-id'));
|
728 |
+
// });
|
729 |
+
// return;
|
730 |
+
// }
|
731 |
}
|
732 |
|
733 |
// Otherwise, create a new page and move the overflowing blocks there
|
|
|
741 |
console.error('New monster frame not found in the new page');
|
742 |
return;
|
743 |
}
|
|
|
744 |
|
745 |
overflowBlocks.forEach(block => {
|
746 |
newMonsterFrame.appendChild(block);
|
747 |
+
block.setAttribute('data-page-id', newPage.getAttribute('data-page-id'));
|
748 |
});
|
749 |
console.log(`Moved overflowing blocks to new page with ID: ${newPage.getAttribute('data-page-id')}`);
|
750 |
}
|
751 |
|
752 |
+
// Utility function to get the next page element
|
753 |
+
function getNextPage(currentPage) {
|
754 |
+
const nextPageId = parseInt(currentPage.getAttribute('data-page-id').split('-')[1]) + 1;
|
755 |
+
return document.querySelector(`[data-page-id="page-${nextPageId}"]`);
|
756 |
+
}
|
757 |
|
758 |
// Handle the drop event on the trash area
|
759 |
function handleTrashDrop(e) {
|