From 6f814e2e616e84483dde14aa1cefa6c6dd237af1 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Mon, 6 Jun 2022 13:19:37 -0700
Subject: [PATCH] print page - bleed edge color

---
 print/index.php |  2 ++
 print/print.js  | 10 ++++++++++
 2 files changed, 12 insertions(+)

diff --git a/print/index.php b/print/index.php
index 019906f4..ab7b6a79 100644
--- a/print/index.php
+++ b/print/index.php
@@ -40,6 +40,8 @@ include('../globalHTML/header-1.php');
                 <input id='bleedEdgeCheckbox' type='checkbox' onchange='setBleedEdge(this.checked);' checked>
                 <span class='checkmark'></span>
             </label>
+            <h5 class='margin-bottom padding input-description'>Bleed Edge Color</h5>
+            <input id='bleedEdgeColor' type='color' class='input margin-bottom' onchange='setBleedEdgeColor(this.value);'>
             <h5 class='margin-bottom padding input-description'>Save your current configurations as default</h5>
             <button onclick='saveDefaults();' class='input margin-bottom'>Save configuration</button>
         </div>
diff --git a/print/print.js b/print/print.js
index 3d7c83a0..1d4e9aa1 100644
--- a/print/print.js
+++ b/print/print.js
@@ -12,6 +12,7 @@ var cardMarginX =  parseInt(document.querySelector("#cardMargin").value);
 var cardMarginY = cardMarginX;
 //booleans
 var imgIncludesBleedEdge = true;
+var bleedEdgeColor = "black";
 var useCuttingAids = false;
 //Prepare variables/canvas/context
 var imageList = [];
@@ -62,6 +63,7 @@ function drawSheetReal() {
                 if (imgIncludesBleedEdge) {
                     context.drawImage(imageList[i], x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY);
                 } else {
+                    context.fillStyle = bleedEdgeColor;
                     context.fillRect(x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY);
                     context.drawImage(imageList[i], x, y, w, h);
                 }
@@ -100,6 +102,7 @@ function downloadPDF() {
     defaultPadding.width = 1;
     defaultPadding.height = 1;
     var defaultPaddingContext = defaultPadding.getContext("2d");
+    defaultPaddingContext.fillStyle = bleedEdgeColor;
     defaultPaddingContext.fillRect(0, 0, 1, 1);
     //Calc actual card size
     const cw =  cardWidth + 2 * cardPaddingX + cardMarginX;
@@ -180,6 +183,10 @@ function setBleedEdge(bool) {
     imgIncludesBleedEdge = bool;
     drawSheet();
 }
+function setBleedEdgeColor(color) {
+    bleedEdgeColor = color;
+    drawSheet();
+}
 function setCuttingAids(bool) {
     useCuttingAids = bool;
     drawSheet();
@@ -196,6 +203,7 @@ function saveDefaults() {
         cardPaddingX:cardPaddingX,
         cardPaddingY:cardPaddingY,
         bleedEdge:imgIncludesBleedEdge,
+        bleedEdgeColor:bleedEdgeColor,
         cuttingAids:useCuttingAids
     }
     localStorage.setItem("cardPrintConfig", JSON.stringify(cardObject));
@@ -218,6 +226,8 @@ function loadDefaults() {
         document.querySelector("#cardPadding").value = cardPaddingX;
         imgIncludesBleedEdge = cardObject.bleedEdge;
         document.querySelector("#bleedEdgeCheckbox").checked = imgIncludesBleedEdge;
+        bleedEdgeColor = cardObject.bleedEdgeColor;
+        document.querySelector("#bleedEdgeColor").value = bleedEdgeColor;
         useCuttingAids = cardObject.cuttingAids;
         document.querySelector("#cuttingAidsCheckbox").checked = useCuttingAids;
     }