=Refactored window.getTemplate into a full templating class window.jvbTempl...

Jake Vanderwerf

2026-01-19 0113d2e9c9ff34a6ffb10707cc76d34b67a0c367

 assets/js/concise/Queue.js

@@ -15,6 +15,8 @@
      this.api = jvbSettings.api;
      this.endpoint = 'queue';

      this.queueItems = new Map();

      this.init();
   }
   init() {
@@ -31,6 +33,7 @@
            name: 'Queue Panel',
         });
      }
      this.defineTemplates();
   }

   initElements() {
@@ -138,6 +141,17 @@
      if (!this.ui.panel) this.canUpdateUI = false;
   }

   defineTemplates() {
      const T = window.jvbTemplates;

      T.define('emptyState');
      T.define('queueItem', {
         setup({el, refs, manyRefs, data}) {
            el.dataset.id = data.id;
         }
      });
   }


   initListeners() {
      this.activityListeners = null;
@@ -173,9 +187,12 @@
         if (!window.targetCheck(e, this.selectors.panel+', '+this.selectors.toggle.button)) return;
         const refresh = window.targetCheck(e, this.selectors.refresh.button);
         if (refresh) {
            this.ui.refresh.button.classList.add('fetching');
            this.store.clearCache();
            this.store.clearFilters();
            this.store.fetch();
            this.store.fetch().finally(() => {
               this.ui.refresh.button.classList.remove('fetching');
            });
            return;
         }

@@ -366,9 +383,12 @@
      }
      if (statusOrId.length ===0) return;
      if (!['cancel', 'dismiss', 'retry'].includes(action)) return;

      const shouldRemove = ['cancel', 'dismiss'].includes(action);
      if (shouldRemove) {
         statusOrId.forEach(id => this.removeOperationUI(id));
         statusOrId.forEach(id => {
            this.removeOperationUI(id)
         });
      }

      try {
@@ -396,7 +416,10 @@
         }
         statusOrId.forEach(id => {
            let item = this.getQueue(id);
            this.notify(`${action}-operation`, item);
            if (item) {
               this.notify(`${action}-operation`, item);
            }

            if (shouldRemove) {
               this.clearQueue(id);
            } else {
@@ -633,8 +656,10 @@
      if (!this.isPolling) return;

      try {
         this.ui.refresh.button.classList.add('fetching');
         this.store.clearCache();
         await this.store.fetch();
         this.ui.refresh.button.classList.remove('fetching');
         if (!this.maybeStartPolling()) {
            this.stopPolling();
            this.updatePanel('synced');
@@ -649,6 +674,10 @@
   }

   startCountdown(count, onComplete) {
      if (!this.ui.refresh.countdown) {
         console.warn('Countdown element not found');
         return;
      }
      this.ui.refresh.countdown.classList.add('counting');
      this.ui.refresh.countdown.textContent = count;

@@ -727,7 +756,7 @@

      if (sortedOps.length === 0) {
         window.removeChildren(this.ui.items.container);
         const empty = window.getTemplate('emptyQueue');
         const empty = window.jvbTemplates.create('emptyQueue');
         this.ui.items.container.append(empty);
         this.a11y.announce('No items in queue');
         return;
@@ -761,9 +790,7 @@
   }

   createOperationElement(op) {
      const el = window.getTemplate('queueItem');
      el.dataset.id = op.id;

      const el = window.jvbTemplates.create('queueItem', op);
      const item = {
         element: el,
         ui: window.uiFromSelectors(this.selectors.item, el)