Tagger feature for copy/paste order #367

tools/tagger/tagger.js

@@ -1,3 +1,5 @@
+let selectedOrder = [];
+
 function renderItems(items, catId) {
   let html = '';
   items.forEach((tag) => {
@@ -66,8 +68,16 @@
 
 function toggleTag(target) {
   target.classList.toggle('selected');
-  // eslint-disable-next-line no-use-before-define
+  const title = target.querySelector('.tag').dataset.title;
+  const category = target.closest('.category').querySelector('h2').textContent; // Assuming category title is in h2
+  const tagIdentifier = { title, category };
+
+  if (target.classList.contains('selected')) {
+    selectedOrder.push(tagIdentifier); // Add to the selection order
+  } else {
+    selectedOrder = selectedOrder.filter(item => item.title !== title || item.category !== category); // Remove from the selection order
+  }
   displaySelected();
 }
 
 function displaySelected() {
@@ -76,20 +86,33 @@
   const toCopyBuffer = [];
 
   selTagsEl.innerHTML = '';
-  const selectedTags = document.querySelectorAll('#results .path.selected');
-  if (selectedTags.length > 0) {
-    selectedTags.forEach((path) => {
+  selectedOrder.forEach(({ title, category }) => {
+    // Find the category element
+    const categories = document.querySelectorAll('#results .category');
+    let path;
+    categories.forEach(cat => {
+      if (cat.querySelector('h2').textContent === category) {
+        const tag = Array.from(cat.querySelectorAll('.tag')).find(t => t.dataset.title === title);
+        if (tag) {
+          path = tag.closest('.path');
+        }
+      }
+    });
+
+    if (path) {
       const clone = path.cloneNode(true);
       clone.classList.remove('filtered', 'selected');
       const tag = clone.querySelector('.tag');
       tag.innerHTML = tag.dataset.title;
       clone.addEventListener('click', () => {
         toggleTag(path);
       });
-      toCopyBuffer.push(tag.dataset.title);
+      toCopyBuffer.push(`${category}: ${tag.dataset.title}`);
       selTagsEl.append(clone);
-    });
+    }
+  });
 
+  if (selectedOrder.length > 0) {
     selEl.classList.remove('hidden');
   } else {
     selEl.classList.add('hidden');
@@ -99,6 +122,7 @@
   copybuffer.value = toCopyBuffer.join(', ');
 }
 
+
 async function init() {
   const tax = await getTaxonomy();
 
@@ -113,11 +137,20 @@
     copyButton.disabled = true;
   });
 
-  selEl.querySelector('button.clear').addEventListener('click', () => {
-    const selectedTags = document.querySelectorAll('#results .path.selected');
-    selectedTags.forEach((tag) => {
-      toggleTag(tag);
+  const clearButton = selEl.querySelector('button.clear');
+  clearButton.addEventListener('click', () => {
+    // Remove the 'filtered' class from all tags
+    document.querySelectorAll('#results .tag').forEach((tag) => {
+      tag.closest('.path').classList.remove('filtered');
+    });
+
+    // Remove the 'selected' class from all selected tags
+    document.querySelectorAll('.selected').forEach((selectedTag) => {
+      selectedTag.classList.remove('selected');
     });
+
+    selectedOrder = [];
+    displaySelected();
     copyButton.disabled = false;
   });
 
@@ -131,4 +164,4 @@
   });
 }
 
-init();
+init();