-
`;
});
+ manageGallery.innerHTML = cards.join('');
}
function openEditModal(photoId) {
@@ -543,37 +546,84 @@ document.addEventListener('DOMContentLoaded', () => {
}
manageGallery.addEventListener('click', (e) => {
- if (e.target.classList.contains('edit-button')) {
+ if (dragMoved) return; // suppress click after a drag
+ const editBtn = e.target.closest('.edit-button');
+ const deleteBtn = e.target.closest('.delete-button');
+ const header = e.target.closest('.select-header');
+ if (editBtn) {
e.preventDefault();
- const photoId = e.target.closest('.card').dataset.photoId;
- openEditModal(photoId);
+ openEditModal(editBtn.closest('.card').dataset.photoId);
+ return;
}
- if (e.target.classList.contains('delete-button')) {
+ if (deleteBtn) {
e.preventDefault();
- const photoId = e.target.closest('.card').dataset.photoId;
- deletePhoto(photoId);
+ deletePhoto(deleteBtn.closest('.card').dataset.photoId);
+ return;
}
- if (e.target.classList.contains('select-photo-checkbox')) {
- const id = e.target.dataset.photoId;
- if (e.target.checked) {
- selectedPhotoIds.add(id);
- } else {
- selectedPhotoIds.delete(id);
- }
+ if (header) {
+ const id = header.dataset.photoId;
+ if (selectedPhotoIds.has(id)) selectedPhotoIds.delete(id);
+ else selectedPhotoIds.add(id);
+ renderManageGallery();
updateBulkUI();
}
});
- manageGallery.addEventListener('change', (e) => {
- if (e.target.classList.contains('select-photo-checkbox')) {
- const id = e.target.dataset.photoId;
- if (e.target.checked) {
- selectedPhotoIds.add(id);
- } else {
- selectedPhotoIds.delete(id);
+ // ── Drag-to-select ────────────────────────────────────────────────────────
+ let dragRect = null;
+ let dragOrigin = { x: 0, y: 0 };
+ let dragMoved = false;
+
+ manageGallery.addEventListener('mousedown', (e) => {
+ if (e.button !== 0) return;
+ if (e.target.closest('.card-footer-item') || e.target.closest('.card-image')) return;
+ dragOrigin = { x: e.clientX, y: e.clientY };
+ dragMoved = false;
+ dragRect = null;
+
+ const onMove = (ev) => {
+ const dx = ev.clientX - dragOrigin.x;
+ const dy = ev.clientY - dragOrigin.y;
+ if (!dragMoved && Math.abs(dx) < 6 && Math.abs(dy) < 6) return;
+ dragMoved = true;
+
+ if (!dragRect) {
+ dragRect = document.createElement('div');
+ dragRect.id = 'drag-select-rect';
+ document.body.appendChild(dragRect);
}
- updateBulkUI();
- }
+ const x = Math.min(ev.clientX, dragOrigin.x);
+ const y = Math.min(ev.clientY, dragOrigin.y);
+ const w = Math.abs(dx);
+ const h = Math.abs(dy);
+ Object.assign(dragRect.style, { left: x + 'px', top: y + 'px', width: w + 'px', height: h + 'px' });
+
+ const selBounds = { left: x, top: y, right: x + w, bottom: y + h };
+ manageGallery.querySelectorAll('[data-photo-id]').forEach(card => {
+ const b = card.getBoundingClientRect();
+ const hit = b.right > selBounds.left && b.left < selBounds.right &&
+ b.bottom > selBounds.top && b.top < selBounds.bottom;
+ card.classList.toggle('drag-over', hit);
+ });
+ };
+
+ const onUp = () => {
+ document.removeEventListener('mousemove', onMove);
+ document.removeEventListener('mouseup', onUp);
+ if (dragRect) { dragRect.remove(); dragRect = null; }
+ if (dragMoved) {
+ manageGallery.querySelectorAll('.card.drag-over').forEach(card => {
+ selectedPhotoIds.add(card.dataset.photoId);
+ card.classList.remove('drag-over');
+ });
+ renderManageGallery();
+ updateBulkUI();
+ }
+ setTimeout(() => { dragMoved = false; }, 0);
+ };
+
+ document.addEventListener('mousemove', onMove);
+ document.addEventListener('mouseup', onUp);
});
if (manageSearchInput) {
-
+
- `;
- manageGallery.innerHTML += photoCard;
+
+
- 
+ 
-
+
+
+
${tagCount} tag${tagCount === 1 ? '' : 's'}${tagCount <= 2 ? ' • add more' : ''}
-
Caption: ${photo.caption}
-Tags: ${readableTags.join(', ')}
+Caption: ${photo.caption}
+Tags: ${readableTags.join(', ')}