mirror of
https://github.com/Growstuff/growstuff.git
synced 2026-10-29 10:18:29 -04:00
Brenda Wallace
240de4fac2
- Replace the modal dialog for editing seed details with an inline form within the packet sheet. - Introduce a new partial for edit fields to streamline the editing process. - Update the seed facts display to utilize a new fact row partial for better organization and readability. - Implement a packet panel to show packet photos and text side by side, enhancing the user interface. - Modify the hero section to include source information as a ribbon or badge based on the presence of a photo. - Adjust tests to reflect changes in the editing process and the new layout of the seed show page.
52 lines
1.9 KiB
JavaScript
52 lines
1.9 KiB
JavaScript
// A seed's packet sheet edits in place: "Edit all", and the Edit item in the page's
|
|
// menu, swap the list of facts for a form in the same spot, with the packet still
|
|
// beside it. Without JavaScript the menu's Edit goes to the form's own page.
|
|
|
|
export function setEditing(sheet, editing) {
|
|
sheet.classList.toggle('is-editing', editing);
|
|
if (!editing) return;
|
|
// Editing is when the text is wanted beside the fields, so it opens by itself.
|
|
sheet.querySelector('.seed-packet-text-toggle[aria-expanded="false"]')?.click();
|
|
sheet.querySelector('.packet-sheet-form [name^="seed["]')?.focus({ preventScroll: true });
|
|
}
|
|
|
|
// A packet photo fits the panel; a click shows it full size inside the panel, which
|
|
// scrolls, to read the small print. The bigger copy is fetched when first asked for.
|
|
export function toggleZoom(link) {
|
|
const photos = link.closest('.seed-packet-photos');
|
|
const image = link.querySelector('img');
|
|
const zoomed = photos.classList.toggle('is-zoomed');
|
|
image.dataset.fit ||= image.getAttribute('src');
|
|
if (zoomed && image.dataset.large) {
|
|
image.onerror = () => { image.src = image.dataset.fit; };
|
|
image.src = image.dataset.large;
|
|
} else {
|
|
image.src = image.dataset.fit;
|
|
}
|
|
}
|
|
|
|
export function initPacketSheet(root = document) {
|
|
root.addEventListener('click', (event) => {
|
|
const photo = event.target.closest('.seed-packet-photos a');
|
|
if (photo && !(event.ctrlKey || event.metaKey || event.shiftKey)) {
|
|
event.preventDefault();
|
|
toggleZoom(photo);
|
|
return;
|
|
}
|
|
|
|
const sheet = root.querySelector('[data-packet-sheet]');
|
|
if (!sheet) return;
|
|
|
|
if (event.target.closest('[data-packet-sheet-edit]')) {
|
|
event.preventDefault();
|
|
setEditing(sheet, true);
|
|
sheet.scrollIntoView({ block: 'start', behavior: 'smooth' });
|
|
} else if (event.target.closest('[data-packet-sheet-cancel]')) {
|
|
event.preventDefault();
|
|
setEditing(sheet, false);
|
|
}
|
|
});
|
|
}
|
|
|
|
initPacketSheet();
|