// Waits for DOM content to be fully loaded and assigns critical elements to variables.
let initialPositions = [];
document.addEventListener("DOMContentLoaded", function() {
const blockContainer = document.getElementById('blockContainer');
let blockContainerPage = document.getElementById('block-page');
const pageContainer = document.getElementById('pages');
const trashArea = document.getElementById('trashArea');
const resetButton = document.getElementById('resetButton');
let currentPage = pageContainer.querySelector('.block.monster.frame.wide');
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImage');
const captionText = document.getElementById('caption');
const closeModal = document.getElementsByClassName('close')[0];
const MAX_COLUMN_HEIGHT = 847;
if (!blockContainer || !pageContainer || !trashArea || !currentPage) {
console.error('Required elements are null');
return;
}
if (!modal) {
console.error('modal element not found');
return;
}
if (!modalImg) {
console.error('modalImg element not found');
return;
}
if (!captionText) {
console.error('captionText element not found');
return;
}
if (!closeModal) {
console.error('closeModal element not found');
return;
}
// Event delegation for image clicks
blockContainer.addEventListener('click', function(event) {
console.log('Click detected in blockContainer:', event.target);
if (event.target.tagName === 'IMG' && event.target.id.startsWith('generated-image-')) {
console.log('Image clicked for modal display. Image ID:', event.target.id);
modal.style.display = 'block';
modalImg.src = event.target.src;
captionText.innerHTML = event.target.alt;
} else {
console.log('Clicked element is not an image or does not match ID pattern.');
}
});
// Function to close the modal
closeModal.onclick = function() {
modal.style.display = "none";
}
// Function to close the modal when clicking outside of the modal content
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
document.getElementById('submitDescription').addEventListener('click', function() {
const userInput = document.getElementById('user-description').value;
// Clear the block container before inserting new blocks
blockContainerPage.innerHTML = '';
document.getElementById('add-page-button').addEventListener('click', addPage);
document.getElementById('remove-page-button').addEventListener('click', removePage);
fetch('http://127.0.0.1:5000/process-description', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ user_input: userInput })
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
initialPositions.length = 0; // Clear the initialPositions array
insertHtmlBlocks(data.html_blocks);
const blocks = blockContainerPage.querySelectorAll('.block-item');
blocks.forEach(block => {
block.setAttribute('data-page-id', 'block-container');
block.setAttribute('draggable', true);
block.addEventListener('dragstart', handleDragStart);
block.addEventListener('dragend', handleDragEnd);
});
storeInitialPositions();
})
.catch((error) => {
console.error('Error:', error);
});
});
const headHTMLString = `
DnD Stat Block
`;
window.printPageContainer = function() {
var pageContainer = document.getElementById('brewRenderer');
if (pageContainer) {
var printWindow = window.open('', 'Print Preview', 'height=800,width=600');
printWindow.document.write(`
Print Preview - DnD Stat Block
${pageContainer.innerHTML}
`);
// Wait for the content to be fully loaded before printing
printWindow.onload = function() {
printWindow.print();
printWindow.close(); // Close the print window after printing
};
} else {
console.error('Element with ID "pages" not found.');
}
};
// Store initial positions of the blocks
function storeInitialPositions() {
const blocks = blockContainer.querySelectorAll('.block-item');
blocks.forEach((block, index) => {
const blockId = block.getAttribute('data-block-id');
if (!blockId) {
console.error(`Block at index ${index} is missing data-block-id`);
}
initialPositions.push({
id: blockId,
index: index
});
});
console.log('Initial positions:', initialPositions);
}
function sortBlocksById() {
// Select all blocks inside the block-container
const blocks = Array.from(blockContainerPage.querySelectorAll('.block-item'));
console.log('Blocks in blockContainerPage:', blocks);
// Sort the blocks based on their block-id attribute
blocks.sort((a, b) => {
const idA = parseInt(a.getAttribute('data-block-id'), 10);
const idB = parseInt(b.getAttribute('data-block-id'), 10);
return idA - idB; // Ascending order
});
// Clear the block-container before re-appending the sorted blocks
blockContainerPage.innerHTML = '';
// Re-append the blocks in the sorted order
blocks.forEach(block => blockContainerPage.appendChild(block));
console.log('Blocks have been sorted and re-appended based on block-id');
}
function reinsertBlock(blockContainerPage, blockId, innerHTML) {
const originalPosition = initialPositions.find(pos => pos.id === blockId);
console.log('Original position:', originalPosition);
if (originalPosition) {
const blocks = blockContainerPage.querySelectorAll('.block-item');
console.log('Blocks in blockContainerPage:', blocks);
// Adding debugging output for index details
console.log(`Attempting to insert block with ID: ${blockId} at original index: ${originalPosition.index}`);
const newBlock = document.createElement('div');
newBlock.classList.add('block-item');
newBlock.setAttribute('data-block-id', blockId);
newBlock.setAttribute('data-page-id', 'block-container');
newBlock.innerHTML = innerHTML;
newBlock.setAttribute('draggable', true);
newBlock.addEventListener('dragstart', handleDragStart);
newBlock.addEventListener('dragend', handleDragEnd);
if (originalPosition.index < blocks.length) {
const referenceNode = blocks[originalPosition.index];
// Debugging output to ensure the correct reference node is identified
console.log(`Reference node index: ${originalPosition.index}, Node:`, referenceNode);
if (referenceNode && referenceNode.parentNode === blockContainerPage) {
console.log(`Inserting before block at index: ${originalPosition.index}`);
blockContainerPage.insertBefore(newBlock, referenceNode);
} else {
console.warn('Reference node does not belong to blockContainerPage, appending to the end');
blockContainerPage.appendChild(newBlock);
}
} else {
console.log('Original index exceeds current blocks, appending block to the end');
blockContainerPage.appendChild(newBlock);
}
} else {
console.warn('Original position not found, appending block to the end of blockContainerPage');
const newBlock = document.createElement('div');
newBlock.classList.add('block-item');
newBlock.setAttribute('data-block-id', blockId);
newBlock.setAttribute('data-page-id', 'block-container');
newBlock.innerHTML = innerHTML;
newBlock.setAttribute('draggable', true);
newBlock.addEventListener('dragstart', handleDragStart);
newBlock.addEventListener('dragend', handleDragEnd);
blockContainerPage.appendChild(newBlock);
}
console.log(`Restored block with ID: ${blockId}`);
}
function insertHtmlBlocks(blocks) {
console.log('blockContainerPage = ', blockContainerPage)
console.log('List of blocks:', blocks);
const parser = new DOMParser();
blocks.forEach(blockHtml => {
console.log('Original blockHtml:', blockHtml);
// Parse the HTML string
const doc = parser.parseFromString(blockHtml, 'text/html');
const block = doc.body.firstChild;
if (block) {
blockContainerPage.appendChild(block); // Append the parsed block to the container
console.log('Appended block:', block);
}
});
// console.log('Final state of blockContainer:', blockContainer.innerHTML);
initializeTextareaResizing();
}
storeInitialPositions();
function adjustTextareaHeight(el) {
if (el.scrollHeight > 16){
el.style.height = 'auto';
el.style.height = (el.scrollHeight) + 'px';
}
}
function initializeTextareaResizing() {
const classes = [
'description-textarea',
'user-description-textarea',
'heading-textarea',
'properties-textarea',
'string-stat-textarea',
'string-action-description-textarea',
];
classes.forEach(className => {
const textareas = document.querySelectorAll(`.${className}`);
textareas.forEach(textarea => {
// Adjust height on page load
adjustTextareaHeight(textarea);
// Adjust height on input
textarea.addEventListener('input', function() {
adjustTextareaHeight(textarea);
console.log('Input event triggered for:', textarea.id); // Debugging line
});
});
});
}
// Initial run on page load
initializeTextareaResizing();
async function extractBlocks() {
try {
if (blockContainerPage.children.length > 0) {
console.log('Blocks already loaded, skipping fetch');
return;
}
const response = await fetch('template_update.html');
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
const text = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(text, 'text/html');
// Selecting all elements with the 'block-item' class
const blocks = doc.querySelectorAll('.block-item');
blocks.forEach((block, index) => {
const blockContent = block.innerHTML;
const blockItem = document.createElement('div');
blockItem.classList.add('block-item');
blockItem.innerHTML = blockContent;
// Assigning unique block ID
const blockId = `block-${index}`;
blockItem.setAttribute('data-block-id', blockId);
// Setting the page ID and other attributes
const pageId = 'block-container';
blockItem.setAttribute('data-page-id', pageId);
blockItem.setAttribute('draggable', true);
// Add event listeners for drag and drop functionality
blockItem.addEventListener('dragstart', handleDragStart);
blockItem.addEventListener('dragend', handleDragEnd);
console.log(`Loaded block with ID: ${blockId}`);
// Append block to the container
blockContainerPage.appendChild(blockItem);
});
// Store the initial positions of the blocks (if needed for drag and drop)
storeInitialPositions();
} catch (error) {
console.error('Error fetching and parsing template_update.html:', error);
}
}
blockContainer.addEventListener('click', function(event) {
if (event.target && event.target.classList.contains('generate-image-button')) {
const blockId = event.target.getAttribute('data-block-id');
generateImage(blockId);
}
});
// Function to generate image
function generateImage(blockId) {
const sdPromptElement = document.getElementById(`user-storefront-prompt-${blockId}`);
const imageElement = document.getElementById(`generated-image-${blockId}`);
if (!sdPromptElement) {
console.error('Element with ID user-storefront-prompt not found');
return;
}
if (!imageElement) {
console.error('Element with ID generated-image not found');
return;
}
const sdPrompt = sdPromptElement.value;
fetch('/generate-image', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ sd_prompt: sdPrompt })
})
.then(response => response.json())
.then(data => {
console.log('Received data:', data);
imageElement.src = data.image_url;
imageElement.style.display = 'block';
// Log the image element's HTML structure
console.log('Updated imageElement HTML:', imageElement.outerHTML);
})
.catch((error) => {
console.error('Error:', error);
});
}
function lockTextareas() {
const textareas = document.querySelectorAll('textarea');
textareas.forEach(textarea => {
textarea.setAttribute('disabled', true);
});
const descriptionTextareas = document.querySelectorAll('.description-textarea');
descriptionTextareas.forEach(descriptionTextarea => {
descriptionTextarea.removeAttribute('contenteditable');
});
console.log('All textareas have been locked.');
}
function unlockTextareas() {
const textareas = document.querySelectorAll('textarea');
textareas.forEach(textarea => {
textarea.removeAttribute('disabled');
});
const descriptionTextareas = document.querySelectorAll('.description-textarea');
descriptionTextareas.forEach(descriptionTextarea => {
descriptionTextarea.setAttribute('contenteditable', 'true');
});
console.log('All textareas have been unlocked.');
}
function handleDragStart(e) {
lockTextareas();
const target = e.target.closest('.block-item, .block-content');
if (!target) {
console.error('Drag started for an element without a valid target');
return;
}
const blockId = target.getAttribute('data-block-id');
const pageId = target.getAttribute('data-page-id');
if (!blockId) {
console.error('Drag started for an element without a data-block-id');
return;
}
if (!pageId) {
console.error('Drag started for an element without a data-page-id');
return;
}
// Store the block ID and inner HTML in the data transfer object
const innerHTML = target.innerHTML;
e.dataTransfer.setData('block-id', blockId);
e.dataTransfer.setData('text/plain', innerHTML); // Store inner HTML
e.dataTransfer.setData('data-page-id', pageId); // Store original page ID
e.dataTransfer.effectAllowed = 'move';
target.style.opacity = '0.4';
// Create an invisible drag image
const dragImage = document.createElement('div');
dragImage.style.width = '1px';
dragImage.style.height = '1px';
dragImage.style.opacity = '0';
document.body.appendChild(dragImage);
e.dataTransfer.setDragImage(dragImage, 0, 0);
console.log(`Drag started for block ID: ${blockId} page ID: ${pageId}`);
}
function handleDragEnd(e) {
const target = e.target.closest('.block-item, .block-content');
if (target) {
target.style.opacity = '1'; // Reset the opacity
const blockId = target.getAttribute('data-block-id');
console.log(`Drag ended for block ID: ${blockId}`);
}
// Remove highlight classes from pages and blocks
document.querySelectorAll('.highlight-page').forEach(el => el.classList.remove('highlight-page'));
document.querySelectorAll('.highlight-block').forEach(el => el.classList.remove('highlight-block'));
document.querySelectorAll('.highlight-block-top').forEach(el => el.classList.remove('highlight-block-top'));
unlockTextareas()
}
function handleDragOver(e) {
e.preventDefault();
// Get the element currently under the cursor
const elementUnderCursor = document.elementFromPoint(e.clientX, e.clientY);
if (elementUnderCursor) {
// Check if the element is a block or textarea
if (elementUnderCursor.classList.contains('block-item')) {
console.log('Dragging over a block-item:', elementUnderCursor);
console.log('Block ID:', elementUnderCursor.getAttribute('data-block-id'));
} else if (elementUnderCursor.tagName === 'TEXTAREA') {
console.log('Dragging over a textarea:', elementUnderCursor);
} else {
// Log other elements if needed
console.log('Dragging over another element:', elementUnderCursor.tagName);
}
}
// Check if the drop target is a TEXTAREA or any other non-droppable area
if (e.target.tagName === 'TEXTAREA' || e.target.closest('.block-item')) {
e.dataTransfer.dropEffect = 'none'; // Indicate that drop is not allowed
return;
}
e.dataTransfer.dropEffect = 'move'; // Indicate that drop is allowed
const targetPage = e.target.closest('.page');
if (targetPage) {
targetPage.classList.add('highlight-page'); // Add highlight class for pages
}
const targetBlock = e.target.closest('.block-item, .block-content');
if (targetBlock) {
const bounding = targetBlock.getBoundingClientRect();
const offset = e.clientY - bounding.top;
if (offset > bounding.height / 2) {
targetBlock.classList.add('highlight-block');
targetBlock.classList.remove('highlight-block-top');
} else {
targetBlock.classList.add('highlight-block-top');
targetBlock.classList.remove('highlight-block');
}
}
}
function handleDrop(e) {
e.preventDefault();
// Ensure we are not dropping into a textarea or another block
if (e.target.classList.contains('block-item', 'block-content', 'description-textarea') || e.target.tagName === 'TEXTAREA') {
console.log('Cannot drop block inside another block or textarea');
return;
}
const blockId = e.dataTransfer.getData('block-id');
const originalPageId = e.dataTransfer.getData('data-page-id');
const innerHTML = e.dataTransfer.getData('text/plain');
console.log(`Drop event for block ID: ${blockId} from page ID: ${originalPageId}`);
if (blockId && originalPageId) {
const originalBlock = document.querySelector(`[data-block-id="${blockId}"]`);
const newPage = e.target.closest('.page');
console.log(`Over page ${newPage} from page ID: ${originalPageId}`);
const newPageId = newPage.getAttribute('data-page-id');
// Ensure the original block exists before proceeding
if (!originalBlock || !newPage) {
console.error(`Block with ID ${blockId} on page ${originalPageId} not found`);
return;
}
const newBlockContent = document.createElement('div');
newBlockContent.classList.add('block-content');
newBlockContent.innerHTML = originalBlock.innerHTML; // Transfer inner content only
// Add necessary attributes and event listeners
newBlockContent.setAttribute('data-block-id', blockId);
newBlockContent.setAttribute('data-page-id', newPageId);
console.log('newPageID:', newPageId);
newBlockContent.setAttribute('draggable', true);
newBlockContent.addEventListener('dragstart', handleDragStart);
newBlockContent.addEventListener('dragend', handleDragEnd);
const target = e.target.closest('.block-item, .block-content');
let targetColumn = 1;
if (target) {
const bounding = target.getBoundingClientRect();
const offset = e.clientY - bounding.top;
console.log('Drop target found:', target);
console.log('Bounding rectangle:', bounding);
console.log('Offset from top:', offset);
console.log('Target height:', bounding.height);
console.log('Insert before or after decision point (height / 2):', bounding.height / 2);
targetColumn = getColumnFromOffset(target, offset);
if (offset > bounding.height / 2) {
console.log('Inserting after the target');
target.parentNode.insertBefore(newBlockContent, target.nextSibling);
} else {
console.log('Inserting before the target');
target.parentNode.insertBefore(newBlockContent, target);
}
// Remove highlight borders
target.style['border-bottom'] = '';
target.style['border-top'] = '';
} else {
console.log('No valid drop target found, appending to the end');
newPage.querySelector('.block.monster.frame.wide').appendChild(newBlockContent);
}
// Remove the original block from the original container
originalBlock.parentNode.removeChild(originalBlock);
// Reset opacity of dragged element
newBlockContent.style.opacity = '1';
console.log(`Moved existing block with ID: ${blockId} to page ID: ${newPageId}`);
initializeTextareaResizing();
// Adjust layouts
if (originalPageId !== 'block-container') {
adjustPageLayout(originalPageId);
}
adjustPageLayout(newPageId, targetColumn);
} else {
console.log('No data transferred');
}
}
function getColumnFromOffset(block, offset) {
const page = block.closest('.page');
if (!page) return 1;
const columnWrapper = page.querySelector('.columnWrapper');
const columnWrapperRect = columnWrapper.getBoundingClientRect();
const relativeOffset = offset - columnWrapperRect.left; // Calculate the offset relative to the column wrapper
const columnWidth = columnWrapper.clientWidth / 2; // Assuming two columns
// Log details for debugging
console.log('Block offset:', offset);
console.log('Relative offset:', relativeOffset);
const columnNumber = Math.ceil(relativeOffset / columnWidth);
// Ensure the column number is within valid bounds (1 or 2)
const validColumnNumber = Math.min(Math.max(columnNumber, 1), 2);
return validColumnNumber;
}
// Function to get the height of a column by index
function getColumnHeights(pageElement) {
const columns = [0, 0]; // Assuming two columns for simplicity
const blocks = pageElement.querySelectorAll('.block-content');
blocks.forEach(block => {
const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
columns[column - 1] += block.offsetHeight;
});
return columns;
}
function adjustPageLayout(pageId) {
const page = document.querySelector(`[data-page-id="${pageId}"]`);
if (!page) {
console.error(`Page with ID ${pageId} not found`);
return;
}
const columnHeights = getColumnHeights(page);
console.log(`Total height of columns in ${pageId}: ${columnHeights}`);
for (let i = 0; i < columnHeights.length; i++) {
if (columnHeights[i] > MAX_COLUMN_HEIGHT) {
console.log(`Column ${i + 1} in ${pageId} exceeds max height, total height: ${columnHeights[i]}px`);
handleColumnOverflow(page, i + 1);
}
}
}
let pageCounter = 1;
// Function to create new page
function addPage() {
const newPage = document.createElement('div');
newPage.classList.add('page');
newPage.setAttribute('data-page-id', `page-${pageCounter}`);
newPage.id = `page-${pageCounter}`;
const columnWrapper = document.createElement('div');
columnWrapper.classList.add('columnWrapper');
const newMonsterFrame = document.createElement('div');
newMonsterFrame.classList.add('block', 'monster', 'frame', 'wide');
columnWrapper.appendChild(newMonsterFrame);
newPage.appendChild(columnWrapper);
pageContainer.appendChild(newPage);
currentPage = newMonsterFrame;
console.log(`Created new page with ID: ${newPage.id}`);
// Add event listeners to the new currentPage
currentPage.addEventListener('dragover', handleDragOver);
currentPage.addEventListener('drop', handleDrop);
pageCounter++;
return newPage;
}
function removePage() {
const pages = pageContainer.querySelectorAll('.page');
if (pages.length > 1) { // Ensure at least one page remains
const lastPage = pages[pages.length - 1];
pageContainer.removeChild(lastPage);
console.log(`Page removed with ID: ${lastPage.id}`);
} else {
console.log('Cannot remove the last page.');
}
}
function handleColumnOverflow(page, targetColumn) {
console.log(`Handling overflow for page ID: ${page.getAttribute('data-page-id')} in column ${targetColumn}`);
const blocks = Array.from(page.querySelectorAll('.block-content'));
let columnHeights = [0, 0];
let overflowStartIndex = -1;
// Find the start index where overflow begins in the target column
blocks.forEach((block, index) => {
const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
columnHeights[column - 1] += block.offsetHeight;
if (column === 2 && columnHeights[1] > MAX_COLUMN_HEIGHT && overflowStartIndex === -1) {
overflowStartIndex = index;
}
});
// If no overflow, return early
if (overflowStartIndex === -1) {
return;
}
const overflowBlocks = blocks.slice(overflowStartIndex);
const overflowHeight = overflowBlocks.reduce((acc, block) => acc + block.offsetHeight, 0);
// Get the next page if it exists
const nextPage = getNextPage(page);
if (nextPage) {
const nextPageBlocks = nextPage.querySelectorAll('.block-content, .block-item');
let nextPageColumnHeights = [0, 0];
nextPageBlocks.forEach(block => {
const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
nextPageColumnHeights[column - 1] += block.offsetHeight;
});
// Check if there's enough space in the target column of the next page
if (nextPageColumnHeights[targetColumn - 1] + overflowHeight <= MAX_COLUMN_HEIGHT) {
const nextPageContainer = nextPage.querySelector('.block.monster.frame.wide');
overflowBlocks.forEach(block => {
nextPageContainer.appendChild(block);
block.setAttribute('data-page-id', nextPage.getAttribute('data-page-id'));
});
return;
}
}
// Otherwise, create a new page and move the overflowing blocks there
const newPage = addPage();
if (!newPage) {
console.error('Failed to create a new page');
return;
}
const newMonsterFrame = newPage.querySelector('.block.monster.frame.wide');
if (!newMonsterFrame) {
console.error('New monster frame not found in the new page');
return;
}
overflowBlocks.forEach(block => {
newMonsterFrame.appendChild(block);
block.setAttribute('data-page-id', newPage.getAttribute('data-page-id'));
});
console.log(`Moved overflowing blocks to new page with ID: ${newPage.getAttribute('data-page-id')}`);
}
// Utility function to get the next page element
function getNextPage(currentPage) {
const nextPageId = parseInt(currentPage.getAttribute('data-page-id').split('-')[1]) + 1;
return document.querySelector(`[data-page-id="page-${nextPageId}"]`);
}
// Handle the drop event on the trash area
function handleTrashDrop(e) {
e.preventDefault();
const innerHTML = e.dataTransfer.getData('text/plain');
const blockId = e.dataTransfer.getData('block-id');
console.log('Trash Drop event:', e);
console.log('Dragged block ID to trash:', blockId);
if (innerHTML && blockId) {
// Find the dragged element and remove it from the DOM
let draggedElement = document.querySelector(`[data-block-id="${blockId}"].block-content`);
if (!draggedElement) {
draggedElement = document.querySelector(`[data-block-id="${blockId}"].block-item`);
}
if (draggedElement && draggedElement.parentElement) {
draggedElement.parentElement.removeChild(draggedElement);
console.log(`Removed block with ID: ${blockId} from the page`);
}
// Check if the block already exists in the block-container and remove it if it does
let existingBlock = blockContainer.querySelector(`[data-block-id="${blockId}"].block-content`);
if (!existingBlock) {
existingBlock = blockContainer.querySelector(`[data-block-id="${blockId}"].block-item`);
}
if (existingBlock && existingBlock.parentElement) {
existingBlock.parentElement.removeChild(existingBlock);
console.log(`Removed duplicate block with ID: ${blockId} from block-container`);
}
// Ensure the block is appended to the page wrapper inside blockContainer
let blockContainerPage = blockContainer.querySelector('.page');
if (!blockContainerPage) {
blockContainerPage = document.createElement('div');
blockContainerPage.classList.add('page');
blockContainerPage.setAttribute('data-page-id', 'block-container');
blockContainer.appendChild(blockContainerPage);
}
// Reinsert the block using the refactored function
reinsertBlock(blockContainerPage, blockId, innerHTML);
sortBlocksById();
} else {
console.log('No data transferred');
}
// Remove the "over" class and reset the background image
trashArea.classList.remove('over');
trashArea.style.backgroundImage = "url('./closed-mimic-trashcan.png')";
initializeTextareaResizing();
}
function handleTrashOver(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
trashArea.classList.add('over');
trashArea.style.backgroundImage = "url('./mimic_trashcan.png')";
console.log('Trash over event');
}
function handleTrashLeave(e) {
trashArea.classList.remove('over');
trashArea.style.backgroundImage = "url('./closed-mimic-trashcan.png')";
console.log('Trash leave event');
}
function handleReset() {
console.log('Reset button clicked');
// Collect all blocks from all pages
const allBlocks = [];
const pages = document.querySelectorAll('.page');
pages.forEach(page => {
const blocksOnPage = page.querySelectorAll('[data-block-id]');
blocksOnPage.forEach(block => {
const blockId = block.getAttribute('data-block-id');
allBlocks.push({
id: blockId,
innerHTML: block.innerHTML
});
block.remove();
console.log(`Removed block with ID: ${blockId} from page ID: ${page.getAttribute('data-page-id')}`);
});
});
// Clear all pages
pages.forEach(page => page.remove());
// Clear blockContainer before reinserting blocks
blockContainer.innerHTML = '';
// Reinsert blocks back into the blockContainer in their original order
if (!blockContainerPage) {
blockContainerPage = document.createElement('div');
blockContainerPage.classList.add('page');
blockContainerPage.setAttribute('id', 'block-page');
blockContainer.appendChild(blockContainerPage);
}
// Reassign blockContainerPage to the newly created block-page element
blockContainerPage = document.getElementById('block-page');
initialPositions.forEach(pos => {
const blockData = allBlocks.find(block => block.id === pos.id);
if (blockData) {
reinsertBlock(blockContainerPage, blockData.id, blockData.innerHTML);
sortBlocksById();
}
});
addPage();
console.log('Reset complete, all blocks moved back to block-container');
initializeTextareaResizing();
}
blockContainer.addEventListener('dragover', handleDragOver);
blockContainer.addEventListener('drop', handleDrop);
pageContainer.addEventListener('dragover', handleDragOver);
pageContainer.addEventListener('drop', handleDrop);
trashArea.addEventListener('dragover', handleTrashOver);
trashArea.addEventListener('dragleave', handleTrashLeave);
trashArea.addEventListener('drop', handleTrashDrop);
resetButton.addEventListener('click', handleReset);
extractBlocks();
});