ninja_hippo/card-grader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a dedicated Take Photo button alongside the library picker

Browse source
This commit is contained in:
Barely Removable 2026-08-22 09:32:10 -07:00
parent e74bcee35f
commit 6b247794db
2 changed files with 24 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

20
static/app.js
View file

@ -277,13 +277,9 @@ function resetGradeState() {
renderGradeReview();
}
$('#btn-grade').addEventListener('click', () => {
resetGradeState();
$('#grade-file').click();
});
$('#grade-file').addEventListener('change', async (e) => {
async function addPickedFrom(input) {
try {
const picked = await readPickedImages(e.target, 6 - gradeState.files.length);
const picked = await readPickedImages(input, 6 - gradeState.files.length);
if (!picked.length) return;
gradeState.files.push(...picked);
renderGradeReview();
@ -291,7 +287,19 @@ $('#grade-file').addEventListener('change', async (e) => {
$('#grade-status').hidden = false;
$('#grade-status').textContent = err.message;
}
}
$('#btn-grade').addEventListener('click', () => {
resetGradeState();
$('#grade-file').click();
});
$('#grade-file').addEventListener('change', (e) => addPickedFrom(e.target));
// Camera shots add onto whatever's already picked (front, then flip to the
// back for a second shot) rather than resetting — resetGradeState() is only
// for starting a fresh card, which the library button already does.
$('#btn-camera').addEventListener('click', () => $('#grade-camera').click());
$('#grade-camera').addEventListener('change', (e) => addPickedFrom(e.target));
$('#grade-review').addEventListener('click', (e) => {
if (e.target.closest('#grade-add-more')) { $('#grade-file').click(); return; }
if (e.target.closest('#grade-cancel') || e.target.closest('#grade-discard')) {

11
static/index.html
View file

@ -44,10 +44,19 @@
back centering, and it can only tell a print line from a crease — about five PSA
grades apart — if it can check both sides.</div>
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:12px">
<button id="btn-grade" class="btn">Choose photo(s)…</button>
<button id="btn-camera" class="btn">Take photo…</button>
<button id="btn-grade" class="btn btn-quiet">Choose from library…</button>
<input id="grade-label" class="input" placeholder="Card name (optional, for your history)" style="flex:1 1 220px">
</div>
<input id="grade-file" type="file" accept="image/*" multiple hidden>
<!-- capture="environment" is what skips straight to the rear camera
instead of showing the OS's photo-library picker — the library
input above already offers a camera option buried in that picker
on most phones, but a dedicated button is one tap instead of two,
and makes "take a fresh photo" the obvious default rather than
something you have to notice. Desktop browsers just ignore
`capture` and fall back to a normal file picker. -->
<input id="grade-camera" type="file" accept="image/*" capture="environment" hidden>
<div id="grade-status" class="search-status" hidden></div>
<div id="grade-review"></div>
</section>