Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

print page - bleed edge color

Browse Source
This commit is contained in:
Kyle
2022-06-06 13:19:37 -07:00
parent 8a8f58da3c
commit 6f814e2e61
2 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
print/index.php
View File

@@ -40,6 +40,8 @@ include('../globalHTML/header-1.php');
<input id='bleedEdgeCheckbox' type='checkbox' onchange='setBleedEdge(this.checked);' checked> <input id='bleedEdgeCheckbox' type='checkbox' onchange='setBleedEdge(this.checked);' checked>
<span class='checkmark'></span> <span class='checkmark'></span>
</label> </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> <h5 class='margin-bottom padding input-description'>Save your current configurations as default</h5>
<button onclick='saveDefaults();' class='input margin-bottom'>Save configuration</button> <button onclick='saveDefaults();' class='input margin-bottom'>Save configuration</button>
</div> </div>

10
print/print.js
View File

@@ -12,6 +12,7 @@ var cardMarginX = parseInt(document.querySelector("#cardMargin").value);
var cardMarginY = cardMarginX; var cardMarginY = cardMarginX;
//booleans //booleans
var imgIncludesBleedEdge = true; var imgIncludesBleedEdge = true;
var bleedEdgeColor = "black";
var useCuttingAids = false; var useCuttingAids = false;
//Prepare variables/canvas/context //Prepare variables/canvas/context
var imageList = []; var imageList = [];
@@ -62,6 +63,7 @@ function drawSheetReal() {
if (imgIncludesBleedEdge) { if (imgIncludesBleedEdge) {
context.drawImage(imageList[i], x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY); context.drawImage(imageList[i], x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY);
} else { } else {
context.fillStyle = bleedEdgeColor;
context.fillRect(x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY); context.fillRect(x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY);
context.drawImage(imageList[i], x, y, w, h); context.drawImage(imageList[i], x, y, w, h);
} }
@@ -100,6 +102,7 @@ function downloadPDF() {
defaultPadding.width = 1; defaultPadding.width = 1;
defaultPadding.height = 1; defaultPadding.height = 1;
var defaultPaddingContext = defaultPadding.getContext("2d"); var defaultPaddingContext = defaultPadding.getContext("2d");
defaultPaddingContext.fillStyle = bleedEdgeColor;
defaultPaddingContext.fillRect(0, 0, 1, 1); defaultPaddingContext.fillRect(0, 0, 1, 1);
//Calc actual card size //Calc actual card size
const cw = cardWidth + 2 * cardPaddingX + cardMarginX; const cw = cardWidth + 2 * cardPaddingX + cardMarginX;
@@ -180,6 +183,10 @@ function setBleedEdge(bool) {
imgIncludesBleedEdge = bool; imgIncludesBleedEdge = bool;
drawSheet(); drawSheet();
} }
function setBleedEdgeColor(color) {
bleedEdgeColor = color;
drawSheet();
}
function setCuttingAids(bool) { function setCuttingAids(bool) {
useCuttingAids = bool; useCuttingAids = bool;
drawSheet(); drawSheet();
@@ -196,6 +203,7 @@ function saveDefaults() {
cardPaddingX:cardPaddingX, cardPaddingX:cardPaddingX,
cardPaddingY:cardPaddingY, cardPaddingY:cardPaddingY,
bleedEdge:imgIncludesBleedEdge, bleedEdge:imgIncludesBleedEdge,
bleedEdgeColor:bleedEdgeColor,
cuttingAids:useCuttingAids cuttingAids:useCuttingAids
} }
localStorage.setItem("cardPrintConfig", JSON.stringify(cardObject)); localStorage.setItem("cardPrintConfig", JSON.stringify(cardObject));
@@ -218,6 +226,8 @@ function loadDefaults() {
document.querySelector("#cardPadding").value = cardPaddingX; document.querySelector("#cardPadding").value = cardPaddingX;
imgIncludesBleedEdge = cardObject.bleedEdge; imgIncludesBleedEdge = cardObject.bleedEdge;
document.querySelector("#bleedEdgeCheckbox").checked = imgIncludesBleedEdge; document.querySelector("#bleedEdgeCheckbox").checked = imgIncludesBleedEdge;
bleedEdgeColor = cardObject.bleedEdgeColor;
document.querySelector("#bleedEdgeColor").value = bleedEdgeColor;
useCuttingAids = cardObject.cuttingAids; useCuttingAids = cardObject.cuttingAids;
document.querySelector("#cuttingAidsCheckbox").checked = useCuttingAids; document.querySelector("#cuttingAidsCheckbox").checked = useCuttingAids;
} }