Add post image upload interface (#12)
Adds accessible drag-and-drop and browse controls, staged attachment editing, responsive lazy-loaded thread image grids, and UI regression coverage. Reviewed-on: #12 Co-authored-by: codegirl-007 <s.raide@gmail.com>
This commit was merged in pull request #12.
This commit is contained in:
+245
@@ -749,6 +749,243 @@ input:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .vote-btn:
|
||||
|
||||
.post-form-actions .btn { flex: 1 1 10rem; }
|
||||
|
||||
.image-picker {
|
||||
min-width: 0;
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.image-picker legend {
|
||||
margin-bottom: 6px;
|
||||
padding: 0;
|
||||
font-family: var(--mono);
|
||||
font-weight: 500;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.image-picker-hint {
|
||||
margin: 0 0 8px;
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.5;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.image-dropzone {
|
||||
position: relative;
|
||||
min-height: 108px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
gap: 8px;
|
||||
padding: 18px 72px 18px 18px;
|
||||
border: 1px dashed var(--zinc);
|
||||
border-radius: 3px;
|
||||
background: #181a1d;
|
||||
transition: border-color 140ms ease, background-color 140ms ease;
|
||||
}
|
||||
|
||||
.image-dropzone:hover,
|
||||
.image-dropzone.is-dragging {
|
||||
border-color: var(--signal);
|
||||
background: #202124;
|
||||
}
|
||||
|
||||
.image-dropzone:focus-within {
|
||||
outline: 2px solid var(--signal);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.image-input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-dropzone-label {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.image-dropzone-label strong {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.image-dropzone-label span {
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.image-picker-count {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 3px 6px;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
background: var(--panel);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.06em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.image-picker-error {
|
||||
margin: 8px 0 0;
|
||||
color: #ffd0d0;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.image-preview-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
background: #141516;
|
||||
}
|
||||
|
||||
.image-preview[hidden] { display: none; }
|
||||
|
||||
.image-preview-media {
|
||||
position: relative;
|
||||
aspect-ratio: 4 / 3;
|
||||
background: var(--bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-preview-media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-preview-tag {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 3px 6px;
|
||||
background: rgba(20, 21, 22, 0.9);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--ink);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.image-preview-fields {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 7px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.image-preview-fields label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.image-preview-name {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.68rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-remove {
|
||||
width: fit-content;
|
||||
min-height: 44px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-decoration: underline;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-remove:hover { color: #ffd0d0; }
|
||||
.image-remove:focus-visible {
|
||||
outline: 2px solid var(--signal);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.post-image-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.post-image-grid-1 { grid-template-columns: minmax(0, 1fr); }
|
||||
|
||||
.post-image {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 3px;
|
||||
background: #141516;
|
||||
}
|
||||
|
||||
.post-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 32rem;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.post-image-grid-1 .post-image img {
|
||||
height: auto;
|
||||
aspect-ratio: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.post-image figcaption {
|
||||
padding: 8px 10px;
|
||||
border-top: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.post-permalink {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -797,8 +1034,16 @@ input:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .vote-btn:
|
||||
.panel-wrap { padding: 32px; }
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.image-preview-list,
|
||||
.post-image-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.btn-primary:hover { filter: none; }
|
||||
.image-dropzone { transition: none; }
|
||||
.submit-progress-bar {
|
||||
width: 100%;
|
||||
animation: none;
|
||||
|
||||
+194
@@ -1,5 +1,9 @@
|
||||
(() => {
|
||||
const formSelector = "form[data-submit-once]";
|
||||
const pickerSelector = "[data-image-picker]";
|
||||
const allowedImageTypes = new Set(["image/jpeg", "image/png", "image/webp"]);
|
||||
const maxImageBytes = 5 * 1024 * 1024;
|
||||
const pickerStates = new WeakMap();
|
||||
|
||||
function progressIndicator() {
|
||||
return document.getElementById("submit-progress");
|
||||
@@ -21,6 +25,193 @@
|
||||
}
|
||||
}
|
||||
|
||||
function existingImageCount(picker) {
|
||||
return picker.querySelectorAll("[data-existing-image]:not([hidden])").length;
|
||||
}
|
||||
|
||||
function updateImageCount(picker, state) {
|
||||
const count = existingImageCount(picker) + state.entries.length;
|
||||
const status = picker.querySelector("[data-image-count]");
|
||||
if (status) {
|
||||
status.textContent = `${count} of ${state.max}`;
|
||||
}
|
||||
}
|
||||
|
||||
function showImageError(picker, message) {
|
||||
const error = picker.querySelector("[data-image-error]");
|
||||
if (!error) {
|
||||
return;
|
||||
}
|
||||
error.textContent = message;
|
||||
error.hidden = !message;
|
||||
}
|
||||
|
||||
function imageFileAllowed(file) {
|
||||
if (allowedImageTypes.has(file.type)) {
|
||||
return true;
|
||||
}
|
||||
if (file.type) {
|
||||
return false;
|
||||
}
|
||||
return /\.(jpe?g|png|webp)$/i.test(file.name);
|
||||
}
|
||||
|
||||
function sameImageFile(left, right) {
|
||||
return left.name === right.name &&
|
||||
left.size === right.size &&
|
||||
left.lastModified === right.lastModified;
|
||||
}
|
||||
|
||||
function syncImageInput(state) {
|
||||
const transfer = new DataTransfer();
|
||||
state.entries.forEach((entry) => transfer.items.add(entry.file));
|
||||
state.input.files = transfer.files;
|
||||
}
|
||||
|
||||
function removeNewImage(picker, state, entry) {
|
||||
const index = state.entries.indexOf(entry);
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
state.entries.splice(index, 1);
|
||||
URL.revokeObjectURL(entry.previewURL);
|
||||
entry.card.remove();
|
||||
syncImageInput(state);
|
||||
showImageError(picker, "");
|
||||
updateImageCount(picker, state);
|
||||
}
|
||||
|
||||
function addImageFiles(picker, state, files) {
|
||||
showImageError(picker, "");
|
||||
const uniqueFiles = files.filter((file) =>
|
||||
!state.entries.some((entry) => sameImageFile(entry.file, file))
|
||||
);
|
||||
const available = state.max - existingImageCount(picker) - state.entries.length;
|
||||
if (uniqueFiles.length > available) {
|
||||
showImageError(
|
||||
picker,
|
||||
available > 0
|
||||
? `You can add ${available} more ${available === 1 ? "image" : "images"}.`
|
||||
: "You already have 4 images selected."
|
||||
);
|
||||
syncImageInput(state);
|
||||
return;
|
||||
}
|
||||
for (const file of uniqueFiles) {
|
||||
if (!imageFileAllowed(file)) {
|
||||
showImageError(picker, "Images must be JPEG, PNG, or WebP.");
|
||||
syncImageInput(state);
|
||||
return;
|
||||
}
|
||||
if (file.size > maxImageBytes) {
|
||||
showImageError(picker, `${file.name} is larger than 5 MB.`);
|
||||
syncImageInput(state);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
uniqueFiles.forEach((file) => {
|
||||
const fragment = state.template.content.cloneNode(true);
|
||||
const card = fragment.querySelector("[data-new-image]");
|
||||
const preview = fragment.querySelector("[data-image-preview]");
|
||||
const name = fragment.querySelector("[data-image-name]");
|
||||
const previewURL = URL.createObjectURL(file);
|
||||
preview.src = previewURL;
|
||||
if (name) {
|
||||
name.textContent = file.name;
|
||||
}
|
||||
const entry = { file, card, previewURL };
|
||||
const removeButton = card.querySelector("[data-remove-image]");
|
||||
removeButton.setAttribute("aria-label", `Remove selected image: ${file.name}`);
|
||||
removeButton.addEventListener("click", () => {
|
||||
removeNewImage(picker, state, entry);
|
||||
});
|
||||
state.list.appendChild(fragment);
|
||||
state.entries.push(entry);
|
||||
});
|
||||
syncImageInput(state);
|
||||
updateImageCount(picker, state);
|
||||
}
|
||||
|
||||
function resetImagePicker(picker) {
|
||||
const state = pickerStates.get(picker);
|
||||
if (!state) {
|
||||
return;
|
||||
}
|
||||
state.entries.forEach((entry) => {
|
||||
URL.revokeObjectURL(entry.previewURL);
|
||||
entry.card.remove();
|
||||
});
|
||||
state.entries = [];
|
||||
state.input.value = "";
|
||||
picker.querySelectorAll("[data-existing-image]").forEach((card) => {
|
||||
card.hidden = false;
|
||||
card.querySelectorAll("input").forEach((input) => {
|
||||
input.disabled = false;
|
||||
});
|
||||
});
|
||||
showImageError(picker, "");
|
||||
updateImageCount(picker, state);
|
||||
}
|
||||
|
||||
function initializeImagePicker(picker) {
|
||||
if (
|
||||
pickerStates.has(picker) ||
|
||||
typeof DataTransfer === "undefined" ||
|
||||
typeof URL.createObjectURL !== "function"
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const input = picker.querySelector("[data-image-input]");
|
||||
const dropzone = picker.querySelector("[data-image-dropzone]");
|
||||
const list = picker.querySelector("[data-image-list]");
|
||||
const template = picker.querySelector("[data-image-template]");
|
||||
if (!input || !dropzone || !list || !template) {
|
||||
return;
|
||||
}
|
||||
const state = {
|
||||
input,
|
||||
list,
|
||||
template,
|
||||
entries: [],
|
||||
max: Number.parseInt(picker.dataset.maxImages, 10) || 4,
|
||||
};
|
||||
pickerStates.set(picker, state);
|
||||
updateImageCount(picker, state);
|
||||
|
||||
input.addEventListener("change", () => {
|
||||
addImageFiles(picker, state, Array.from(input.files));
|
||||
});
|
||||
picker.querySelectorAll("[data-existing-image]").forEach((card) => {
|
||||
card.querySelector("[data-remove-image]").addEventListener("click", () => {
|
||||
card.hidden = true;
|
||||
card.querySelectorAll("input").forEach((existingInput) => {
|
||||
existingInput.disabled = true;
|
||||
});
|
||||
showImageError(picker, "");
|
||||
updateImageCount(picker, state);
|
||||
});
|
||||
});
|
||||
["dragenter", "dragover"].forEach((eventName) => {
|
||||
dropzone.addEventListener(eventName, (event) => {
|
||||
event.preventDefault();
|
||||
dropzone.classList.add("is-dragging");
|
||||
});
|
||||
});
|
||||
["dragleave", "drop"].forEach((eventName) => {
|
||||
dropzone.addEventListener(eventName, (event) => {
|
||||
event.preventDefault();
|
||||
dropzone.classList.remove("is-dragging");
|
||||
});
|
||||
});
|
||||
dropzone.addEventListener("drop", (event) => {
|
||||
addImageFiles(picker, state, Array.from(event.dataTransfer.files));
|
||||
});
|
||||
picker.closest("form")?.addEventListener("reset", () => {
|
||||
window.setTimeout(() => resetImagePicker(picker), 0);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("submit", (event) => {
|
||||
const form = event.target.closest(formSelector);
|
||||
if (!form) {
|
||||
@@ -50,9 +241,12 @@
|
||||
|
||||
window.addEventListener("pageshow", () => {
|
||||
document.querySelectorAll(formSelector).forEach(resetForm);
|
||||
document.querySelectorAll(pickerSelector).forEach(resetImagePicker);
|
||||
const progress = progressIndicator();
|
||||
if (progress) {
|
||||
progress.hidden = true;
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll(pickerSelector).forEach(initializeImagePicker);
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user