Fixed print support

corbindavenport · Mar 27, 2023 · b946243 · b946243
1 parent 07198e4
commit b946243
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/css/photostack.css b/css/photostack.css
@@ -95,6 +95,7 @@ body {
  background: #ffffff;
  color: #000;
  font-size: 18px;
+ padding: 0;
  }
 
 }

diff --git a/edit/index.html b/edit/index.html
@@ -29,7 +29,7 @@
 
 <body>
  <!-- Navbar -->
- <nav class="navbar fixed-top navbar-expand-sm bg-dark border-bottom">
+ <nav class="navbar fixed-top navbar-expand-sm bg-dark border-bottom d-print-none">
  <div class="container-fluid">
  <a class="navbar-brand d-sm-none" href="#">PhotoStack</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -181,7 +181,7 @@
  </div>
  </div>
  <!-- Other options card-->
- <div class="card mt-3">
+ <div class="card mt-3 mb-3">
  <div class="card-header">
  Miscellaneous
  </div>
@@ -192,9 +192,12 @@
  </div>
  </div>
  </div>
- <div class="mt-3 mb-3">
+ <p>
  <a href="#" data-bs-toggle="modal" data-bs-target="#photostack-keyboard-modal" data-backdrop="static" data-keyboard="false">Keyboard shortcuts</a>
- </div>
+ </p>
+ <p>
+ <a href="#" id="photostack-print-btn">Print preview</a>
+ </p>
  </div>
  </div>
  </div>
@@ -235,13 +238,21 @@ <h5 class="modal-title" id="photostack-export-modal-label">Keyboard shortcuts</h
  </thead>
  <tbody>
  <tr>
- <td>Import local images</td>
+ <td>Import images</td>
  <td>Shift + O</td>
  </tr>
  <tr>
  <td>Clear imported images</td>
  <td>Shift + X</td>
  </tr>
+ <tr>
+ <td>Print the preview</td>
+ <td>
+ Ctrl + P
+ <br>
+ Cmd + P
+ </td>
+ </tr>
  </tbody>
  </table>
  </p>
@@ -389,7 +400,7 @@ <h5 class="modal-title" id="photostack-export-modal-label">Export images</h5>
  </div>
  </div>
  <!-- Import toast -->
- <div class="toast-container position-fixed bottom-0 end-0 p-3">
+ <div class="toast-container position-fixed bottom-0 end-0 p-3 d-print-none">
  <!-- Import toast -->
  <div id="photostack-import-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
@@ -401,7 +412,7 @@ <h5 class="modal-title" id="photostack-export-modal-label">Export images</h5>
  </div>
  </div>
  <!-- Error toast -->
- <div class="toast-container position-fixed bottom-0 end-0 p-3">
+ <div class="toast-container position-fixed bottom-0 end-0 p-3 d-print-none">
  <!-- Import toast -->
  <div id="photostack-error-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
@@ -413,7 +424,7 @@ <h5 class="modal-title" id="photostack-export-modal-label">Export images</h5>
  </div>
  </div>
  <!-- Print UI -->
- <div class="d-none d-print-block">
+ <div class="d-none d-print-block text-center">
  <img id="photostack-print-preview">
  </div>
  <!-- File pickers -->

diff --git a/js/editor.js b/js/editor.js
@@ -607,6 +607,10 @@ document.getElementById('photostack-reset-image-width-button').addEventListener(
  renderPreviewCanvas()
 })
 
+document.getElementById('photostack-print-btn').addEventListener('click', function () {
+ window.print()
+})
+
 // Drag and drop file upload
 
 const dragModal = new bootstrap.Modal(document.getElementById('photostack-drag-modal'))