b/dry-fire-target-maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add caption to output

Browse Source
This commit is contained in:
Brandon Dyck 2023-02-14 00:18:26 -07:00
parent 1fc9460074
commit 32ed10cbe7
1 changed files with 55 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
index.html
View File

@ -6,8 +6,10 @@
<style>
body {
max-width: 70em;
max-width: 50em;
margin: 1.5em auto;
}
input {
margin-left: 1em;
}
@ -22,6 +24,15 @@
width: 10em;
}
.vanish {
display: none;
}
#print [id^=caption-] {
text-align: center;
font-family: sans-serif;
}
#print {
width: 100%;
}
@ -59,7 +70,8 @@
to 3.
</p>
<p>
The target <strong>will not</strong> fit on US letter paper if <em>Actual distance</em> is more than ~35% of <em>Simulated distance</em>.
The target <strong>will not</strong> fit on US letter paper if <em>Actual distance</em> is more than ~35% of
<em>Simulated distance</em>.
</p>
<hr>
<p>
@ -68,6 +80,13 @@
<p>
<label>Actual distance<input id="actual-range" type="number" value="3"></label>
</p>
<fieldset id="caption-settings">
<legend>Caption</legend>
<label><input type="radio" name="caption-pos" value="none" checked>None</label>
<label><input type="radio" name="caption-pos" value="above">Above</label>
<label><input type="radio" name="caption-pos" value="below">Below</label>
<p><label>Text<input id="caption-input"></label></p>
</fieldset>
<fieldset role="radiogroup" id="target-styles">
<legend>Target style</legend>
@ -91,8 +110,11 @@
<button id="print-button">Print</button>
</p>
</div>
<div id="print">
<h1 id="caption-above"></h1>
<img class="target">
<h1 id="caption-below"></h1>
</div>
<script>
@ -104,7 +126,7 @@
const updateScale = () => {
let scale = actualRange.value / simulatedRange.value;
target.style.width = target.naturalWidth * scale + "mm";
}
};
simulatedRange.addEventListener("change", updateScale);
actualRange.addEventListener("change", updateScale);
target.addEventListener("load", updateScale);
@ -117,10 +139,39 @@
target.src = src;
};
document.querySelectorAll("#target-styles label").forEach((label) => {
document.querySelectorAll("#target-styles label").forEach(label => {
label.addEventListener("change", updateTargetStyle);
});
updateTargetStyle();
let captionInput = document.getElementById("caption-input");
let captionAbove = document.getElementById("caption-above");
let captionBelow = document.getElementById("caption-below");
const updateCaptionPosition = () => {
let value = document.querySelector("#caption-settings input[name=caption-pos]:checked").value;
captionInput.disabled = value === "none";
if (value === "above") {
captionAbove.classList.remove("vanish");
captionBelow.classList.add("vanish");
} else if (value === "below") {
captionAbove.classList.add("vanish");
captionBelow.classList.remove("vanish");
} else {
captionAbove.classList.add("vanish");
captionBelow.classList.add("vanish");
}
};
const updateCaptionText = () => {
captionAbove.innerText = captionBelow.innerText = captionInput.value;
}
document.querySelectorAll("#caption-settings input[name=caption-pos]").forEach(radio => {
radio.addEventListener("change", updateCaptionPosition);
});
captionInput.addEventListener("change", updateCaptionText);
captionInput.addEventListener("keydown", updateCaptionText);
updateCaptionText();
updateCaptionPosition();
}
</script>
</body>