Issue 367 - Tagger - Added global array to track the tag order #368

7r0u8l3 · 2024-01-10T17:05:41Z

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.

#367

Issue

Fixes #367

Description

Test URLs

Before (Changes from main): https://main--merative2--hlxsites.hlx.page/tools/tagger/index.html
After (Changes from this PR): https://Issue-367---tagger--merative2--hlxsites.hlx.page/tools/tagger/index.html
Before (Changes from main): https://main--merative2--hlxsites.hlx.page
After (Changes from this PR): https://Issue-367---tagger--merative2--hlxsites.hlx.page

…der 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.

aem-code-sync · 2024-01-10T17:05:45Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

Re-run PSI checks
Re-sync branch

Commits

9b476bc ❌ (latest)
f22efc7 ❌
8a9d1b8 ✅

aem-code-sync · 2024-01-10T17:14:22Z

Page	Scores	Audits	Google
/
/tools/tagger/index.html

tools/tagger/tagger.js

helms-charity · 2024-01-16T18:18:05Z

tools/tagger/tagger.js

+    selectedOrder = selectedOrder.filter(
+      (item) => item.title !== title || item.category !== category,
+    );
+  }
  // eslint-disable-next-line no-use-before-define


Good idea leaving this comment in here

tools/tagger/tagger.js

7r0u8l3 changed the title ~~This script now includes a global array selectedOrder to track the or…~~ Issue 367 - Tagger - Added global array to track the tag order Jan 10, 2024