drakosfire
commited on
Commit
•
3fbe35b
1
Parent(s):
7e57aff
added button to toggle visibility of image text and generate button while on page-container
Browse files- scripts.js +26 -4
- storeUI.html +1 -1
scripts.js
CHANGED
@@ -5,6 +5,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
5 |
let blockContainerPage = document.getElementById('block-page');
|
6 |
const pageContainer = document.getElementById('pages');
|
7 |
const trashArea = document.getElementById('trashArea');
|
|
|
8 |
const resetButton = document.getElementById('resetButton');
|
9 |
let currentPage = pageContainer.querySelector('.block.monster.frame.wide');
|
10 |
const modal = document.getElementById('imageModal');
|
@@ -35,7 +36,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
35 |
}
|
36 |
|
37 |
// Event delegation for image clicks
|
38 |
-
|
39 |
console.log('Click detected in blockContainer:', event.target);
|
40 |
if (event.target.tagName === 'IMG' && event.target.id.startsWith('generated-image-')) {
|
41 |
console.log('Image clicked for modal display. Image ID:', event.target.id);
|
@@ -101,6 +102,27 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
101 |
console.error('Failed to open a new tab. It may have been blocked by the browser.');
|
102 |
}
|
103 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
104 |
window.printPageContainer = function(newTab) {
|
105 |
var pageContainer = document.getElementById('brewRenderer');
|
106 |
|
@@ -356,7 +378,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
356 |
}
|
357 |
|
358 |
|
359 |
-
|
360 |
if (event.target && event.target.classList.contains('generate-image-button')) {
|
361 |
const blockId = event.target.getAttribute('data-block-id');
|
362 |
generateImage(blockId);
|
@@ -890,8 +912,8 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
890 |
console.log('Reset complete, all blocks moved back to block-container');
|
891 |
initializeTextareaResizing();
|
892 |
}
|
893 |
-
|
894 |
-
|
895 |
blockContainer.addEventListener('dragover', handleDragOver);
|
896 |
blockContainer.addEventListener('drop', handleDrop);
|
897 |
pageContainer.addEventListener('dragover', handleDragOver);
|
|
|
5 |
let blockContainerPage = document.getElementById('block-page');
|
6 |
const pageContainer = document.getElementById('pages');
|
7 |
const trashArea = document.getElementById('trashArea');
|
8 |
+
const toggleButton = document.getElementById('toggle-text-block-button');
|
9 |
const resetButton = document.getElementById('resetButton');
|
10 |
let currentPage = pageContainer.querySelector('.block.monster.frame.wide');
|
11 |
const modal = document.getElementById('imageModal');
|
|
|
36 |
}
|
37 |
|
38 |
// Event delegation for image clicks
|
39 |
+
document.addEventListener('click', function(event) {
|
40 |
console.log('Click detected in blockContainer:', event.target);
|
41 |
if (event.target.tagName === 'IMG' && event.target.id.startsWith('generated-image-')) {
|
42 |
console.log('Image clicked for modal display. Image ID:', event.target.id);
|
|
|
102 |
console.error('Failed to open a new tab. It may have been blocked by the browser.');
|
103 |
}
|
104 |
});
|
105 |
+
|
106 |
+
function toggleAllTextBlocks() {
|
107 |
+
const pageContainer = document.querySelector('.page-container');
|
108 |
+
const textareas = pageContainer.querySelectorAll('.image-textarea');
|
109 |
+
const generateButtons = pageContainer.querySelectorAll('.generate-image-button');
|
110 |
+
|
111 |
+
let isAnyVisible = Array.from(textareas).some(textarea => textarea.style.display === 'block');
|
112 |
+
|
113 |
+
if (isAnyVisible) {
|
114 |
+
// Hide all textareas and buttons
|
115 |
+
textareas.forEach(textarea => textarea.style.display = 'none');
|
116 |
+
generateButtons.forEach(btn => btn.style.display = 'none');
|
117 |
+
document.querySelector('.toggle-text-block-button').textContent = 'Show All Image Descriptions';
|
118 |
+
} else {
|
119 |
+
// Show all textareas and buttons
|
120 |
+
textareas.forEach(textarea => textarea.style.display = 'block');
|
121 |
+
generateButtons.forEach(btn => btn.style.display = 'inline-block');
|
122 |
+
document.querySelector('.toggle-text-block-button').textContent = 'Hide All Image Descriptions';
|
123 |
+
}
|
124 |
+
}
|
125 |
+
|
126 |
window.printPageContainer = function(newTab) {
|
127 |
var pageContainer = document.getElementById('brewRenderer');
|
128 |
|
|
|
378 |
}
|
379 |
|
380 |
|
381 |
+
document.addEventListener('click', function(event) {
|
382 |
if (event.target && event.target.classList.contains('generate-image-button')) {
|
383 |
const blockId = event.target.getAttribute('data-block-id');
|
384 |
generateImage(blockId);
|
|
|
912 |
console.log('Reset complete, all blocks moved back to block-container');
|
913 |
initializeTextareaResizing();
|
914 |
}
|
915 |
+
|
916 |
+
toggleButton.addEventListener('click', toggleAllTextBlocks);
|
917 |
blockContainer.addEventListener('dragover', handleDragOver);
|
918 |
blockContainer.addEventListener('drop', handleDrop);
|
919 |
pageContainer.addEventListener('dragover', handleDragOver);
|
storeUI.html
CHANGED
@@ -29,7 +29,7 @@
|
|
29 |
hx-target="#user-description" hx-swap="outerHTML"
|
30 |
title="As much or as little description as you want to provide. You can provide specific employees, inventory etc">A very standard gear store run by a fae potted plant named Gorgeous</textarea>
|
31 |
<button id="submitDescription">Submit</button>
|
32 |
-
<button id="
|
33 |
<button id="resetButton">Reset</button>
|
34 |
<button id="printButton">Open Tab to print</button>
|
35 |
<div class="brewRenderer" id="brewRenderer">
|
|
|
29 |
hx-target="#user-description" hx-swap="outerHTML"
|
30 |
title="As much or as little description as you want to provide. You can provide specific employees, inventory etc">A very standard gear store run by a fae potted plant named Gorgeous</textarea>
|
31 |
<button id="submitDescription">Submit</button>
|
32 |
+
<button id="toggle-text-block-button">Toggle Image Descriptions</button>
|
33 |
<button id="resetButton">Reset</button>
|
34 |
<button id="printButton">Open Tab to print</button>
|
35 |
<div class="brewRenderer" id="brewRenderer">
|