From 7a9054bb3f033c98067b3196378311dae54c5fbf Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Tue, 20 Jan 2026 01:31:53 +0000
Subject: [PATCH] =OperationQueue refactor to the JVBase/managers/queue namespace
---
assets/js/concise/UploadManager.js | 490 +++++++++++++++++++++++++++++------------------------
1 files changed, 269 insertions(+), 221 deletions(-)
diff --git a/assets/js/concise/UploadManager.js b/assets/js/concise/UploadManager.js
index ebc4209..f2e9188 100644
--- a/assets/js/concise/UploadManager.js
+++ b/assets/js/concise/UploadManager.js
@@ -3,6 +3,7 @@
this.a11y = window.jvbA11y;
this.queue = window.jvbQueue;
this.error = window.jvbError;
+ this.templates = window.jvbTemplates;
this.subscribers = new Set();
@@ -21,6 +22,232 @@
this.previewUrls = new Set();
this.initElements();
this.initListeners();
+ this.defineTemplates();
+ }
+
+ defineTemplates() {
+ const T = this.templates;
+ const images = this;
+
+ T.define('uploadItem', {
+ refs: {
+ select: '[name="select-item"]',
+ featured: '[name="featured"]',
+ img: 'img',
+ video: 'video',
+ file: 'label > span',
+ details: 'details',
+ },
+ manyRefs: {
+ inputs: 'input',
+ },
+ setup({el, refs, manyRefs, data}) {
+ const isNewUpload = Object.hasOwn(data, 'file');
+ let mimeType;
+ let url;
+ let alt;
+ let previewUrl = false;
+ if (isNewUpload) {
+ el.dataset.uploadId = data.uploadId;
+ mimeType = images.getSubtypeFromMime(data.file.type)||'image';
+ url = (mimeType !== 'document') ? images.createPreviewUrl(data.file) : false;
+ previewUrl = url;
+ alt = data.file.name||'';
+ } else {
+ el.dataset.id = data.id;
+ mimeType = images.getSubtypeFromURL(data.medium??data.src);
+ url = data.medium??data.src;
+ alt = data['image-alt-text']??'';
+ }
+
+
+ el.dataset.subtype = mimeType;
+
+ if (refs.featured) {
+ refs.featured.value = data.uploadId;
+ }
+ switch (mimeType) {
+ case 'image':
+ if (refs.img) {
+ refs.img.src = url;
+ refs.img.alt = alt;
+
+ if (previewUrl) refs.img.dataset.previewUrl = previewUrl;
+ }
+ if (refs.video) refs.video.remove();
+ if (refs.file) refs.file.remove();
+ break;
+ case 'video':
+ if (refs.video) {
+ refs.video.src = url;
+ refs.video.alt = alt;
+ if (previewUrl) refs.video.dataset.previewUrl = previewUrl;
+ }
+ if (refs.img) refs.img.remove();
+ if (refs.file) refs.file.remove();
+ break;
+ case 'document':
+ if (refs.preview) {
+ let ext = data.file.name.split('.').pop()?.toLowerCase()??'';
+ let map = {
+ 'pdf': 'file-pdf', 'csv': 'file-csv',
+ 'doc': 'file-doc', 'docx': 'file-doc',
+ 'txt': 'file-txt', 'xls': 'file-xls', 'xlsx': 'file-xls'
+ };
+ let icon = window.getIcon(map[ext]??'file');
+ refs.preview.innerText = data.file.name??data.title;
+ refs.preview.prepend(icon);
+ }
+ if (refs.img) refs.img.remove();
+ if (refs.video) refs.video.remove();
+ break;
+ }
+ if (refs.details) {
+ refs.details.append(T.create('uploadMeta'));
+ }
+
+
+ el.draggable = el.dataset.mode !== 'single';
+
+ if (manyRefs.inputs) {
+ for (let input of manyRefs.inputs) {
+ window.prefixInput(input, `${data.uploadId}-`);
+ }
+ }
+ }
+ });
+
+ T.define('uploadMeta', {
+ refs: {
+ alt: '[name="alt_text"]',
+ title: '[name="image-title"]',
+ description: '[name="image-caption"]',
+ },
+ setup({el, refs, manyRefs, data}) {
+ if (Object.hasOwn(data, 'alt') && refs.alt) {
+ refs.alt.value = data.alt;
+ }
+ if (Object.hasOwn(data, 'title') && refs.title) {
+ refs.title.value = data.title;
+ }
+ if (Object.hasOwn(data, 'description') && refs.description) {
+ refs.description.value = data.description;
+ }
+ }
+ });
+
+ T.define('imageGroup', {
+ refs: {
+ selectAll: '[data-select-all]',
+ fields: '.fields',
+ details: 'details',
+ grid: '.item-grid',
+ },
+ setup({el, refs, manyRefs, data}) {
+ el.dataset.groupId = data.groupId;
+ if (refs.selectAll) {
+ window.prefixInput(refs.selectAll, `select-all-${data.groupId}`, true);
+ }
+ let fields = T.create('groupMetadata', {groupId: data.groupId});
+ if (fields) {
+ refs.fields.append(fields);
+ } else {
+ refs.details.remove();
+ }
+ if (refs.grid) {
+ refs.grid.dataset.groupId = data.groupId;
+ }
+ }
+ });
+
+ T.define('groupMetadata', {
+ manyRefs: {
+ inputs: 'input,textarea,select'
+ },
+ setup({el, refs, manyRefs, data}) {
+ if (refs.inputs) {
+ refs.inputs.forEach(input => {
+ window.prefixInput(input, `${data.groupId}-`);
+ });
+ }
+ }
+ });
+
+ T.define('restoreNotification', {
+ refs: {
+ details: '.details',
+ wrap: '.wrap',
+ },
+ setup({el, refs, manyRefs, data}) {
+ if (refs.details) {
+ let source = data.bySource.size > 1 ? ` across ${data.bySource.size} pages` : '';
+ let upload = data.pendingUploads.length > 1 ? 'uploads' : 'upload';
+ refs.details.textContent = `${data.pendingUploads.length} ${upload} can be recovered${source}`;
+ }
+ if (!refs.wrap) {
+ console.warn('No wrap element in template');
+ return;
+ }
+ let i = 1;
+ for (const [src, uploads] of data.bySource) {
+ let data = {
+ index: i,
+ isCurrent: src === window.location.href,
+ src: src,
+ uploads: uploads
+ };
+ refs.wrap.append(T.create('restoreField', data));
+ i++;
+ }
+ }
+ });
+
+ T.define('restoreField', {
+ refs: {
+ h3: 'h3',
+ a: 'h3 a',
+ grid: '.item-grid'
+ },
+ async setup({el, refs, manyRefs, data}) {
+ let fieldId = images.registerField(el, false, `recovery_${data.index}`);
+ if (data.isCurrent) {
+ el.open = true;
+
+ refs.a?.remove();
+ if (refs.h3) {
+ refs.h3.textContent = 'From this page:';
+ }
+
+ } else {
+ if (refs.a) {
+ refs.a.href = data.src;
+ refs.a.title = 'Navigate to page and restore';
+ refs.a.textContent = data.src;
+ }
+ }
+
+ let filtered = [... new Set(data.uploads.map(upload => upload.group??'preview'))];
+ for (let groupId of filtered) {
+ let group = (groupId === 'preview') ? true : images.stores.groups.get(groupId);
+ if (!group) continue;
+
+ let element = await images.createGroupElement(groupId, fieldId);
+ let groupGrid = element.querySelector('.item-grid');
+ let groupUploads = data.uploads.filter(upload => upload.group === (groupId === 'preview') ? null : groupId);
+
+ for (const [key, value] of Object.entries(group.fields??{})) {
+ let field = element.querySelector(`input[name*="${key}"]`);
+ if (field) field.value = value;
+ }
+
+ for (let upload of groupUploads) {
+ let item = await images.createUpload(upload.id, images.formatFile(upload), fieldId);
+ groupGrid.append(item);
+ }
+ refs.grid.append(element);
+ }
+ }
+ });
}
initStores() {
@@ -62,7 +289,7 @@
const data = operation.data instanceof FormData
? this.stores.uploads.formDataToObject(operation.data)
: operation.data;
- console.log(data);
+
let uploads = data['upload_ids'];
if (!uploads || uploads.length === 0) return;
if (event === 'cancel-operation') return this.handleOperationCancelled(uploads);
@@ -895,17 +1122,6 @@
const pendingUploads = this.stores.uploads.filterByIndex({status: ['local_processing', 'queued', 'uploading']});
if (pendingUploads.length === 0) return;
- let notification = window.getTemplate('restoreNotification');
- if (!notification) {
- this.error.log(
- 'No restore notification',
- {
- component: 'UploadManager',
- src: window.location.href
- }
- );
- return;
- }
// Group by source page
const bySource = new Map();
pendingUploads.forEach(upload => {
@@ -914,75 +1130,21 @@
bySource.get(src).push(upload);
});
- const currentSrc = window.location.href;
+ let data = {
+ bySource: bySource,
+ pendingUploads: pendingUploads
+ };
-
- let source = bySource.size > 1 ? ` across ${bySource.size} pages` : '';
- let upload = pendingUploads.length > 1 ? 'uploads' : 'upload';
- let message = `${pendingUploads.length} ${upload} can be recovered${source}`;
-
- let details = notification.querySelector('.details');
- if (details) {
- details.textContent = message;
- }
-
- let i = 1;
- for (const [src, uploads] of bySource) {
- let template = window.getTemplate('restoreField');
- if (!template) continue;
- let fieldId = this.registerField(template,false, 'recovery_'+i);
- let field = this.fields.get(fieldId);
- i++;
- let isCurrent = src === currentSrc;
- let [
- h3,
- a,
- grid
- ] = [
- template.querySelector('h3'),
- template.querySelector('h3 a'),
- template.querySelector('.item-grid')
- ];
-
- template.open = isCurrent;
- if (!isCurrent) {
- [a.href, a.title,a.textContent] =
- [src, 'Navigate to Page and Restore', src];
- } else {
- a.remove();
- h3.textContent = 'From this page:';
- }
-
- let filteredGroupIds = [...new Set(uploads.map(upload => upload.group??'preview'))];
-
- for (let groupId of filteredGroupIds) {
- let group = (groupId === 'preview') ? true : this.stores.groups.get(groupId);
- if (!group) continue;
-
- let groupElement = await this.createGroupElement(groupId,field.id);
- let groupGrid = groupElement.querySelector('.item-grid');
- let theseUploads = uploads.filter(upload => upload.group === (groupId === 'preview') ? null : groupId);
- for (const [key, value] of Object.entries(group.fields ?? {})) {
- let field = groupElement.querySelector(`input[name*="${key}"]`);
- if (field) field.value = value;
- }
- for (let upload of theseUploads) {
- let item = await this.createUpload(upload.id, this.formatFile(upload), field.id);
- groupGrid.append(item);
- }
-
- grid.append(groupElement);
- }
- notification.querySelector('.wrap').append(template);
- }
- document.body.append(notification);
- notification = document.querySelector('dialog.restore-uploads');
+ document.body.append(this.templates.create('restoreNotification', data));
+ let notification = document.querySelector('dialog.restore-uploads');
this.restoreModal = new window.jvbModal(notification);
this.restoreSelection = new window.jvbHandleSelection(notification,
{
wrapper: {
- wrapper: '.wrap'
+ wrapper: '.restore-field',
+ id: 'selection'
},
+ items: '.item-grid.restore',
selectAll: {
bulkControls: '.selection-actions',
checkbox: '#select-all-restore',
@@ -1116,82 +1278,27 @@
UPLOAD METHODS
*******************************************************************************/
async createUpload(uploadId, file, fieldId) {
- let image = window.getTemplate('uploadItem');
- if (!image) return null;
-
let field = this.fields.get(fieldId);
if (!field) return null;
- image.dataset.uploadId = uploadId;
- let mimeType = this.getSubtypeFromMime(file.type)||'image';
- image.dataset.subtype = mimeType;
-
- let [featured, img, video, preview, details] = [
- image.querySelector('[name="featured"]'),
- image.querySelector('img'),
- image.querySelector('video'),
- image.querySelector('label > span'),
- image.querySelector('details')
- ];
-
- if (featured) featured.value = uploadId;
- switch (mimeType) {
- case 'image':
- if (img) {
- const previewUrl = this.createPreviewUrl(file);
- img.src = previewUrl;
- img.alt = file.name || '';
- img.dataset.previewUrl = previewUrl;
- }
- video?.remove();
- preview?.remove();
- break;
- case 'video':
- if (video){
- const previewUrl = this.createPreviewUrl(file);
- video.src = previewUrl;
- video.dataset.previewUrl = previewUrl;
- }
- img?.remove();
- preview?.remove();
- break;
- case 'document':
- let ext = file.name.split('.').pop()?.toLowerCase()??'';
- let map = {
- 'pdf': 'file-pdf', 'csv': 'file-csv',
- 'doc': 'file-doc', 'docx': 'file-doc',
- 'txt': 'file-txt', 'xls': 'file-xls', 'xlsx': 'file-xls'
- };
- let icon = window.getIcon(map[ext]??'file');
- if (preview) {
- preview.innerText = file.name;
- preview.prepend(icon);
- }
- img?.remove();
- video?.remove();
- break;
- }
-
- if (details) {
- let template = window.getTemplate('uploadMeta');
- if (template) details.append(template);
- }
-
- image.draggable = field.config.type !== 'single'??false;
-
- image.querySelectorAll('input').forEach(input => {
- let id = input.id;
- if (id) {
- let newId = id + uploadId;
- let label = input.parentNode.querySelector(`label[for="${id}"]`);
- input.id = newId;
- if (label) label.htmlFor = newId;
- }
- });
-
- return image;
+ let data = {
+ uploadId: uploadId,
+ file: file,
+ field: field,
+ };
+ return this.templates.create('uploadItem', data);
}
+ getSubtypeFromURL(url) {
+ const imgs = ['.webp', '.jpg', '.jpeg', '.png', '.gif', '.svg'];
+ const videos = ['.mp4', '.ogg', '.mov', '.webm', '.avi'];
+
+ const path = url.split('?')[0].toLowerCase();
+
+ if (imgs.some(ext => path.endsWith(ext))) return 'image';
+ if (videos.some(ext => path.endsWith(ext))) return 'video';
+ return 'document';
+ }
getSubtypeFromMime(mimeType) {
if (mimeType.startsWith('image/')) return 'image';
if (mimeType.startsWith('video/')) return 'video';
@@ -1299,7 +1406,12 @@
const element = this.createGroupElement(groupId, fieldId);
if (!element) return null;
- field.groupUI.grid.append(element);
+ const emptyGroup = field.groupUI.empty;
+ if (emptyGroup?.nextSibling) {
+ field.groupUI.grid.insertBefore(element, emptyGroup.nextSibling);
+ } else {
+ field.groupUI.grid.append(element);
+ }
// Create Sortable for this group's grid
const grid = element.querySelector('.item-grid');
@@ -1318,49 +1430,12 @@
}
createGroupElement(groupId, fieldId = null) {
- let element = window.getTemplate('imageGroup');
- if (!element) return;
- element.dataset.groupId = groupId;
- if (fieldId) {
- element.dataset.fieldId = fieldId;
+ let data = {
+ groupId: groupId,
+ fieldId: fieldId,
}
-
- const selectAll = element.querySelector('[data-select-all]');
- if (selectAll) {
- const newId = `select-all-${groupId}`;
- const label = element.querySelector(`label[for="${selectAll.id}"]`);
- selectAll.id = newId;
- selectAll.name = newId;
- if (label) label.htmlFor = newId;
- }
-
- let fields = window.getTemplate('groupMetadata');
- let container = element.querySelector('.fields');
- if (fields && container) {
- container.append(fields);
-
- let title = container.querySelector('[name="post_title"]');
- let excerpt = container.querySelector('[name="post_excerpt"]');
-
- if (title) {
- title.dataset.groupId = groupId;
- title.id = `${groupId}_title`;
- title.name = `${groupId}[post_title]`;
- }
- if (excerpt) {
- title.dataset.groupId = groupId;
- excerpt.id = `${groupId}_excerpt`;
- excerpt.name = `${groupId}[post_excerpt]`;
- }
- } else {
- element.querySelector('details')?.remove();
- }
-
- const grid = element.querySelector('.item-grid');
- if (grid) {
- grid.dataset.groupId = groupId;
- }
+ let element = this.templates.create('imageGroup', data);
this.groups.set(groupId, {
element: element,
@@ -1573,7 +1648,6 @@
handler.subscribe((event, data) => {
this.selected.set(fieldId, data.selectedItems);
- this.syncSortableSelection(fieldId);
});
this.selectionHandlers.set(key, handler);
@@ -1624,8 +1698,6 @@
selectedClass: 'selected',
avoidImplicitDeselect: true,
group: { name: fieldId, pull: true, put: true },
- ghostClass: 'ghost',
- chosenClass: 'chosen',
dragClass: 'dragging',
onStart: (evt) => {
@@ -1643,9 +1715,6 @@
handler.select(uploadId);
}
}
-
- // Sync all selections to Sortable
- this.syncSortableSelection(fieldId);
},
onEnd: (evt) => this.sortableDrop(evt, fieldId),
});
@@ -1699,34 +1768,13 @@
const targetGroupId = dropTarget.dataset.groupId || null;
- await Promise.all(
- uploadIds.map(uploadId => this.addToGroup(uploadId, targetGroupId))
- );
-
- // After all moves complete, sync order from DOM
- await this.handleReorder(fieldId, targetGroupId);
-
- this.selectionHandlers.get(fieldId)?.clearSelection();
- }
-
- syncSortableSelection(fieldId) {
- const selectedItems = this.selected.get(fieldId) || new Set();
-
- for (const [uploadId, uploadData] of this.uploads) {
- const upload = this.stores.uploads.get(uploadId);
- if (!upload || upload.field !== fieldId) continue;
-
- const element = uploadData.element;
- if (!element) continue;
-
- const shouldBeSelected = selectedItems.has(uploadId);
-
- if (shouldBeSelected && !element.classList.contains('selected')) {
- Sortable.utils.select(element);
- } else if (!shouldBeSelected && element.classList.contains('selected')) {
- Sortable.utils.deselect(element);
- }
+ // Process sequentially to avoid race conditions
+ for (const uploadId of uploadIds) {
+ await this.addToGroup(uploadId, targetGroupId);
}
+
+ await this.handleReorder(fieldId, targetGroupId);
+ this.selectionHandlers.get(fieldId)?.clearSelection();
}
handleReorder(fieldId, groupId = null) {
--
Gitblit v1.10.0