Skip to content

Instantly share code, notes, and snippets.

@jonashw
Created June 11, 2026 23:53
Show Gist options
  • Select an option

  • Save jonashw/ea4d4fb6c9f32e1dbd90b0afd1bd83db to your computer and use it in GitHub Desktop.

Select an option

Save jonashw/ea4d4fb6c9f32e1dbd90b0afd1bd83db to your computer and use it in GitHub Desktop.
(function() {
/* Grabs the images for all OVERDUE materials on the WPL "Checked Out" page,
** assembles them in a new page, and invokes the system print dialog.
** Run from https://woodland.aspendiscovery.org/MyAccount/CheckedOut
*/
'use strict';
printImages(Array.from(document.querySelectorAll('.striped > div.result.bg-overdue img')));
function printImages(imgElements) {
const w = window.open('', '_blank');
const hasNoBooks = imgElements.length === 0;
w.document.write(`
<html>
<head>
<title>Print Images</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@page {
size: auto;
margin: 5mm;
}
body {
margin: 0;
background: #fff;
font-family: sans-serif;
}
/* Centered text styling for the empty state */
.message {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-top: 50px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px;
}
img {
width: 100%;
height: auto;
object-fit: contain;
page-break-inside: avoid;
break-inside: avoid;
}
@media print {
.no-print {
display: none !important;
}
}
</style>
</head>
<body></body>
</html>
`);
w.document.body.innerHTML =
hasNoBooks
? `<div class="message">No overdue books!</div>`
: `<div>
<div class="no-print" style="display: grid; padding:1em;">
<button onClick="print()" style="display: block; padding: 0.5em;">Print</button>
</div>
<div class="grid-container">${imgElements.map(img => `<img src="${img.src}">`).join('')}</div>
</div>`;
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment