Hugging Face's logo

Spaces:
TheDrakosfire
/
StoreGenerator
Sleeping

App Files Community
drakosfire commited on
Commit
4ba412e
·
1 Parent(s): 3bf0a70

Fixed print function having weird blank pages. @media print added to pop up print window

Browse files
Files changed (1) hide show
  1. scripts.js +47 -46
scripts.js CHANGED
@@ -108,25 +108,53 @@ document.addEventListener("DOMContentLoaded", function() {
108
  <script src="https://unpkg.com/htmx.org@1.7.0/dist/htmx.min.js"></script>
109
  </head>
110
  <body>`;
111
- window.printPageContainer = function() {
112
- var pageContainer = document.getElementById('pages');
113
- if (pageContainer) {
114
- var printWindow = window.open('', '', 'height=800,width=600');
115
- printWindow.document.write(headHTMLString);
116
- printWindow.document.write(pageContainer.innerHTML);
117
- printWindow.document.write('</body></html>');
118
- printWindow.document.close();
119
- printWindow.focus();
120
-
121
- // Wait for the content to be fully loaded before printing
122
- printWindow.onload = function() {
123
- printWindow.print();
124
- printWindow.close(); // Close the print window after printing
125
- };
126
- } else {
127
- console.error('Element with ID "pages" not found.');
128
- }
129
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
130
 
131
 
132
  // Store initial positions of the blocks
@@ -702,23 +730,6 @@ document.addEventListener("DOMContentLoaded", function() {
702
  const overflowBlocks = blocks.slice(overflowStartIndex);
703
  const overflowHeight = overflowBlocks.reduce((acc, block) => acc + block.offsetHeight, 0);
704
 
705
- // // If the target column is the first column, check if the second column has enough space
706
- // if (targetColumn === 1) {
707
- // const secondColumnAvailableHeight = MAX_COLUMN_HEIGHT - columnHeights[1];
708
-
709
- // if (overflowHeight <= secondColumnAvailableHeight) {
710
- // // Move the overflowing blocks to the second column within the same page
711
- // overflowBlocks.forEach(block => {
712
- // const blockWrapper = block.closest('.block.monster.frame.wide');
713
- // if (blockWrapper) {
714
- // blockWrapper.appendChild(block);
715
- // block.setAttribute('data-page-id', page.getAttribute('data-page-id'));
716
- // }
717
- // });
718
- // return;
719
- // }
720
- // }
721
-
722
  // Get the next page if it exists
723
  const nextPage = getNextPage(page);
724
  if (nextPage) {
@@ -739,16 +750,6 @@ document.addEventListener("DOMContentLoaded", function() {
739
  });
740
  return;
741
  }
742
-
743
- // // If the next page's second column has enough space for overflow from the first column
744
- // if (targetColumn === 1 && nextPageColumnHeights[1] + overflowHeight <= MAX_COLUMN_HEIGHT) {
745
- // const nextPageContainer = nextPage.querySelector('.block.monster.frame.wide');
746
- // overflowBlocks.forEach(block => {
747
- // nextPageContainer.appendChild(block);
748
- // block.setAttribute('data-page-id', nextPage.getAttribute('data-page-id'));
749
- // });
750
- // return;
751
- // }
752
  }
753
 
754
  // Otherwise, create a new page and move the overflowing blocks there
 
108
  <script src="https://unpkg.com/htmx.org@1.7.0/dist/htmx.min.js"></script>
109
  </head>
110
  <body>`;
111
+ window.printPageContainer = function() {
112
+ var pageContainer = document.getElementById('brewRenderer');
113
+ if (pageContainer) {
114
+ var printWindow = window.open('', 'Print Preview', 'height=800,width=600');
115
+
116
+ printWindow.document.write(`
117
+ <!DOCTYPE html>
118
+ <html lang="en">
119
+ <head>
120
+ <meta charset="UTF-8">
121
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
122
+ <link href="./dependencies/all.css" rel="stylesheet">
123
+ <link href="./dependencies/css.css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css">
124
+ <link href="./dependencies/bundle.css" rel="stylesheet">
125
+ <link href="./dependencies/style.css" rel="stylesheet">
126
+ <link href="./dependencies/5ePHBstyle.css" rel="stylesheet">
127
+ <link href="./storeUI.css" rel="stylesheet">
128
+ <title>Print Preview - DnD Stat Block</title>
129
+ <link rel="stylesheet" href="styles.css">
130
+ <style>
131
+ @media print {
132
+
133
+ .page {
134
+ page-break-before: auto;
135
+ page-break-after: avoid;
136
+ page-break-inside: avoid;
137
+
138
+ }
139
+ .columnWrapper {
140
+ overflow: visible;
141
+ }
142
+
143
+ }
144
+ </style>
145
+ </head>
146
+ <body>
147
+ ${pageContainer.innerHTML}
148
+ </body>
149
+ </html>
150
+ `);
151
+
152
+ printWindow.document.close();
153
+ printWindow.focus(); // Optional: Bring the window to the front
154
+ } else {
155
+ console.error('Element with ID "pages" not found.');
156
+ }
157
+ };
158
 
159
 
160
  // Store initial positions of the blocks
 
730
  const overflowBlocks = blocks.slice(overflowStartIndex);
731
  const overflowHeight = overflowBlocks.reduce((acc, block) => acc + block.offsetHeight, 0);
732
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
733
  // Get the next page if it exists
734
  const nextPage = getNextPage(page);
735
  if (nextPage) {
 
750
  });
751
  return;
752
  }
 
 
 
 
 
 
 
 
 
 
753
  }
754
 
755
  // Otherwise, create a new page and move the overflowing blocks there