print

css/style-7.css

@@ -438,7 +438,14 @@ textarea.input {
 	width: 100%;
 	height: 100%;
 }
-
+/*drop to upload*/
+.drop-area {
+	border: 2px dashed gray;
+	transition: 0.25s;
+}
+.drop-area.hover {
+	border-color: var(--color-selected);
+}
 
 
 /*Animated cards*/

js/main-1.js

@@ -33,3 +33,53 @@ window.onload = function() {
 		element.autocomplete = 'off';
 	});
 }
+
+// Drop to upload
+const droppables = document.querySelectorAll('.drop-area');
+Array.from(droppables).forEach(element => {
+	element.addEventListener('dragenter', dropEnter, false);
+	element.addEventListener('dragleave', dropLeave, false);
+	element.addEventListener('dragover', dropOver, false);
+	element.addEventListener('drop', dropDrop, false);
+})
+function dropEnter(e) {
+	e.preventDefault();
+	e.stopPropagation();
+	e.target.closest('.drop-area').classList.add('hover');
+}
+function dropLeave(e) {
+	e.preventDefault();
+	e.stopPropagation();
+	e.target.closest('.drop-area').classList.remove('hover');
+}
+function dropOver(e) {
+	e.preventDefault();
+	e.stopPropagation();
+	e.target.closest('.drop-area').classList.add('hover');
+}
+function dropDrop(e) {
+	e.preventDefault();
+	e.stopPropagation();
+	e.target.closest('.drop-area').classList.remove('hover');
+	destination = window[e.target.closest('.drop-area').children[1].getAttribute('data-dropFunction')];
+	otherParams = window[e.target.closest('.drop-area').children[1].getAttribute('data-otherParams')];
+	uploadFiles(e.dataTransfer.files, destination, otherParams);
+}
+async function uploadFiles(filesRaw, destination, otherParams) {
+	var files = ([...filesRaw]);
+	if (files.length > 9) {
+		if (!confirm('You are uploading ' + files.length + ' images. Would you like to continue?')) {
+			return;
+		}
+	}
+	files.forEach(file => {
+		var reader = new FileReader();
+		reader.onloadend = function () {
+			destination(reader.result, otherParams);
+		}
+		reader.onerror = function () {
+			destination('/img/blank.png', otherParams);
+		}
+		reader.readAsDataURL(file);
+	})
+}

print/index.php

@@ -0,0 +1,33 @@
+<?php
+$title = 'Print Page Setup';
+$desc = 'Upload card images and download a fully prepared page for printing';
+include('../globalHTML/header-1.php');
+?>
+    <h2 class='readable-background header-extension title center margin-bottom-large'>Print Page Setup</h2>
+    <style>
+        
+    </style>
+    <div class="layer">
+        <div class='padding margin-bottom readable-background drop-area'>
+            <h5 class='margin-bottom padding input-description'>Drag and drop the images that you'd like to print</h5>
+            <input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, uploadCard);' data-dropFunction='uploadCard' data-otherParams=''>
+        </div>
+    </div>
+    <div class="layer margin-bottom-large center">
+        <canvas style='height: auto; max-width:850px; width: 100%;'></canvas>
+    </div>
+    <div class='readable-background padding layer margin-bottom-large'>
+		<h3 class='download padding' onclick='downloadSheet();'>Download your Sheet</h3>
+		<h4 class='padding center'>(Can take a few seconds)</h4>
+	</div>
+    <div class="readable-background layer margin-bottom-large">
+        <h3 class='padding margin-bottom center'>
+            Want to see your custom cards on the kitchen table?
+        </h3>
+        <h4 class='padding'>
+        	Upload up to nine images, and they will automatically arrange themselves on an 8.5" by 11" sheet, so you can print them at home at up to 600PPI.
+        </h4>
+    </div>
+	<!-- <script defer src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js'></script> -->
+    <script defer src="/print/print.js"></script>
+<?php include('../globalHTML/footer.php'); ?>

print/print.js

@@ -0,0 +1,54 @@
+//Configure sizes
+const ppi = 600;
+const pageWidth = 8.5 * ppi;
+const pageHeight = 11 * ppi;
+const cardWidth = 2.5 * ppi;
+const cardHeight = 3.5 * ppi;
+const cardMarginX = 10;
+const cardMarginY = 10;
+//Prepare variables/canvas/context
+var imageList = [];
+var canvas = document.querySelector('canvas');
+canvas.width = pageWidth;
+canvas.height = pageHeight;
+var context = canvas.getContext('2d');
+//Prepare pdf
+// const doc = new jsPDF({
+//     orientation: 'portrait',
+//     unit: 'in',
+//     format: [pageWidth / ppi, pageHeight / ppi]
+// });
+//Draw blank page
+drawSheet();
+
+function uploadCard(card) {
+    var img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = function() {imageList.push(this); drawSheet();}
+    img.src = card;
+}
+
+function drawSheet() {
+    context.fillStyle = 'white';
+    context.fillRect(0, 0, pageWidth, pageHeight);
+    const cardsX = Math.floor(pageWidth / cardWidth);
+    const cardsY = Math.floor(pageHeight / cardHeight);
+    var count = 0;
+    for (var i = imageList.length - 1; i >= 0 && count < 9; i --) {
+        if (imageList[i].width > 1) {
+            context.drawImage(imageList[i], (pageWidth - cardsX * cardWidth - cardMarginX) / 2 + (count % cardsX) * (cardWidth + cardMarginX), (pageHeight - cardsY * cardHeight - cardMarginY) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY), cardWidth, cardHeight);
+        }
+        count ++;
+    }
+}
+
+async function downloadSheet() {
+    // doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 8.5, 11);
+    // doc.save('print.pdf');
+    var download = document.createElement('a');
+    download.download = 'print.png';
+    download.href = canvas.toDataURL();
+    document.body.appendChild(download);
+    await download.click();
+    download.remove();
+}