=OperationQueue refactor to the JVBase/managers/queue namespace

Jake Vanderwerf

2026-01-20 7a9054bb3f033c98067b3196378311dae54c5fbf

 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) {