From 398280cb1529a0fc94f0d9834c8e959e79aef85c Mon Sep 17 00:00:00 2001
From: 7r0u8l3 <daniel.oreno@gmail.com>
Date: Tue, 16 Jan 2024 11:24:05 -0700
Subject: [PATCH] Issue 367 - Tagger - Added global array to track the tag
 order (#368)

* This script now includes a global array selectedOrder to track the order of selected tags. The toggleTag function has been modified to update this array when a tag is selected or deselected. The displaySelected function uses this array to display the tags in the order they were selected, ensuring that the selection order is consistent regardless of their DOM order.

The toggleTag function now considers both the title and the category of a tag when toggling its selection.
The displaySelected function uses the updated selectedOrder array, which contains objects with title and category properties, to display the selected tags.
The clear button event listener in the init function now resets the selectedOrder array when clearing the selection.
This should ensure that tags with duplicate names in different categories are handled correctly, and their selection order is maintained as expected.

Instead of using querySelector with :contains, it iterates over all categories and checks their h2 text content to find the matching category.
Once the correct category is found, it searches for the tag with the matching title within that category.
This approach should resolve the error and correctly handle the selection and display of tags, even when they have duplicate names in different categories.

Each tag is identified by both its title and its category, allowing for proper handling of duplicate tag names in different categories.
The selectedOrder array now stores objects with title and category properties.
The displaySelected function has been updated to use this additional information when displaying selected tags.
This approach should resolve the issue with duplicate tag names and ensure that tags are correctly identified and displayed based on both their title and category.

* Fixed linting errors.

* Removed "category" from buffer.
---
 tools/tagger/tagger.js | 53 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/tools/tagger/tagger.js b/tools/tagger/tagger.js
index 43e9d27a..7b44bc26 100644
--- a/tools/tagger/tagger.js
+++ b/tools/tagger/tagger.js
@@ -1,3 +1,5 @@
+let selectedOrder = [];
+
 function renderItems(items, catId) {
   let html = '';
   items.forEach((tag) => {
@@ -66,6 +68,17 @@ function filter() {
 
 function toggleTag(target) {
   target.classList.toggle('selected');
+  const { title } = target.querySelector('.tag').dataset;
+  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,
+    );
+  }
   // eslint-disable-next-line no-use-before-define
   displaySelected();
 }
@@ -76,9 +89,20 @@ function displaySelected() {
   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');
@@ -86,10 +110,12 @@ function displaySelected() {
       clone.addEventListener('click', () => {
         toggleTag(path);
       });
-      toCopyBuffer.push(tag.dataset.title);
+      toCopyBuffer.push(`${tag.dataset.title}`);
       selTagsEl.append(clone);
-    });
+    }
+  });
 
+  if (selectedOrder.length > 0) {
     selEl.classList.remove('hidden');
   } else {
     selEl.classList.add('hidden');
@@ -113,11 +139,20 @@ async function init() {
     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;
   });