feat(nav): Retain original menu attributes

Previous iterations of the library used the original menu as a guide to
construct a clone. This resulted in any existing classes or attributes
not being carried over.

This commit now clones the original menu directly, enhancing it with our
desired classes/data-attributes. Event listeners are not preserved due
to the cloning.

Author: jayfreestone

README.md

@@ -302,3 +302,15 @@ If your menu is part of an auto-sized flex-child, it will probably need a positi
   flex-grow: 1;
 }
 ```
+
+### Navigation event listeners
+
+priorityPlus makes a copy of your menu, rather than reusing the original. Classes and attributes are carried over, but not event listeners. This means that any additional libraries or JavaScript which operate on the menu and its children needs to be run (or re-run) after initialization:
+
+```javascript
+priorityPlus(document.querySelector('.js-p-target'));
+// .js-p-target is *not* the same element, but has been cloned and replaced
+loadLibrary(document.querySelector('.js-p-target'));
+```
+
+If your use-case is not covered by this, please raise an issue.

cypress/integration/clonedMenu.ts

@@ -0,0 +1,71 @@
+import priorityPlus from '../../src/priorityPlus';
+
+describe('Cloned menu', () => {
+  it('should preserve the original menu\'s attributes', () => {
+    const original = document.createRange().createContextualFragment(`
+      <nav>
+        <ul class="menu-items test" data-depth="1" data-test>
+            <li class="menu-items__item menu-items__item_article menu-items__item_active" data-custom>
+              <a href="#">
+                Item One
+              </a>
+            </li>
+        </ul>
+      </nav>
+   `);
+
+    const [menu, items] = getMenuElements(original);
+
+    priorityPlus(menu);
+
+    const [instanceMenu, instanceItems] = getMenuElements(original);
+
+    assertEnhancedContainsAttributes(menu, instanceMenu);
+    assertEnhancedContainsClasses(menu, instanceMenu);
+
+    items.forEach((item, i) => {
+      assertEnhancedContainsAttributes(item, instanceItems[i]);
+      assertEnhancedContainsClasses(item, instanceItems[i]);
+    });
+  });
+});
+
+function getMenuElements(elem: DocumentFragment): [HTMLElement, HTMLLIElement[]] {
+  const menu = elem.querySelector('ul') as HTMLElement;
+  const items = Array.from(elem.querySelectorAll('li')) as HTMLLIElement[];
+  return [menu, items];
+}
+
+// Assert that each class on the original element is present on the copy.
+function assertEnhancedContainsClasses(original: HTMLElement, enhanced: HTMLElement) {
+  Array.from(original.classList).forEach(className => {
+    expect(Array.from(enhanced.classList), 'class').to.contain(className)
+  });
+}
+
+// Assert that every easily comparable attribute (e.g. not class) on the
+// original is present on the copy.
+function assertEnhancedContainsAttributes(original: HTMLElement, enhanced: HTMLElement) {
+  const [originalAttrs, enhancedAttrs] = [original, enhanced]
+    .map(getAttributes)
+    .map(retainComparable);
+  const originalDict = Object.fromEntries(originalAttrs);
+
+  // Filter out attributes added by priorityPlus.
+  const preserved = enhancedAttrs.filter(([key]) => key in originalDict);
+
+  expect(preserved, 'attributes').to.deep.equal(originalAttrs);
+}
+
+// Filter out hard to compare attributes.
+function retainComparable(attrList: string[][]) {
+  return attrList.filter(([name]) => name !== 'class');
+}
+
+function getAttributes(elem: HTMLElement) {
+  return Object.keys(elem.attributes).map(key => {
+    const attr = elem.attributes[Number(key)] as Attr;
+    return [attr.name, attr.value];
+  });
+}
+

src/priorityPlus.ts

@@ -38,8 +38,9 @@ interface ElementRefs {
   };
   primary: {
     [El.Main]: HTMLElement;
+    [El.PrimaryNavWrapper]: HTMLElement;
     [El.PrimaryNav]: HTMLElement;
-    [El.NavItems]: HTMLElement[];
+    [El.NavItems]: HTMLLIElement[];
     [El.OverflowNav]: HTMLElement;
     [El.ToggleBtn]: HTMLElement;
   };
@@ -144,21 +145,12 @@ function priorityPlus(targetElem: HTMLElement, userOptions: DeepPartial<Options>
   }
 
   /**
-   * Generates the HTML to use in-place of the user's supplied element.
+   * Generates the HTML wrapper to use in-place of the user's supplied menu.
    */
   function createMarkup(): string {
     return `
       <div ${dv(El.Main)} class="${cn(El.Main)}">
-        <div class="${cn(El.PrimaryNavWrapper)}">
-          <${targetElem.tagName}
-            ${dv(El.PrimaryNav)}
-            class="${cn(El.PrimaryNav)}"
-          >
-            ${Array.from(targetElem.children).map((elem: Element) => (
-              `<li ${dv(El.NavItems)} class="${cn(El.NavItems)}">${elem.innerHTML}</li>`
-            )).join('')}
-          </${targetElem.tagName}>
-        </div>
+        <div class="${cn(El.PrimaryNavWrapper)}" ${dv(El.PrimaryNavWrapper)}></div>
         <button
           ${dv(El.ToggleBtn)}
           class="${cn(El.ToggleBtn)}"
@@ -174,6 +166,36 @@ function priorityPlus(targetElem: HTMLElement, userOptions: DeepPartial<Options>
     `;
   }
 
+  /**
+   * Clones the target menu and enhances it with additional properties, such
+   * as data attributes and classes.
+   */
+  function cloneNav(elem: HTMLElement): HTMLElement {
+    const targetClone = elem.cloneNode(true) as HTMLElement;
+    enhanceOriginalMenu(targetClone);
+
+    const navItems = Array.from(targetClone.children) as HTMLLIElement[];
+    navItems.forEach(enhanceOriginalNavItem)
+
+    return targetClone;
+  }
+
+  /**
+   * Enhance the original list element with classes/attributes.
+   */
+  function enhanceOriginalMenu(elem: HTMLElement) {
+    elem.classList.add(...classNames[El.PrimaryNav])
+    elem.setAttribute(dv(El.PrimaryNav), '');
+  }
+
+  /**
+   * Enhance an original menu list-item with classes/attributes.
+   */
+  function enhanceOriginalNavItem(elem: HTMLLIElement) {
+    elem.classList.add(...classNames[El.NavItems])
+    elem.setAttribute(dv(El.NavItems), '');
+  }
+
   /**
    * Replaces the navigation with the two clones and populates the 'el' object.
    */
@@ -186,22 +208,26 @@ function priorityPlus(targetElem: HTMLElement, userOptions: DeepPartial<Options>
     el[El.Container] = container;
 
     const original = document.createRange().createContextualFragment(markup);
+
+    // Setup the wrapper and clone/enhance the original menu.
+    el.primary[El.PrimaryNavWrapper] = original.querySelector(`[${dv(El.PrimaryNavWrapper)}]`) as HTMLElement;
+    el.primary[El.PrimaryNavWrapper].appendChild(cloneNav(targetElem))
+
     const cloned = original.cloneNode(true) as Element;
 
+    // Establish references. By this point the menu is fully built.
     el.primary[El.Main] = original.querySelector(`[${dv(El.Main)}]`) as HTMLElement;
     el.primary[El.PrimaryNav] = original.querySelector(`[${dv(El.PrimaryNav)}]`) as HTMLElement;
-    el.primary[El.NavItems] = Array.from(original.querySelectorAll(`[${dv(El.NavItems)}]`)) as HTMLElement[];
+    el.primary[El.NavItems] = Array.from(original.querySelectorAll(`[${dv(El.NavItems)}]`)) as HTMLLIElement[];
     el.primary[El.OverflowNav] = original.querySelector(`[${dv(El.OverflowNav)}]`) as HTMLElement;
     el.primary[El.ToggleBtn] = original.querySelector(`[${dv(El.ToggleBtn)}]`) as HTMLElement;
 
     el.clone[El.Main] = cloned.querySelector(`[${dv(El.Main)}]`) as HTMLElement;
     el.clone[El.NavItems] = Array.from(cloned.querySelectorAll(`[${dv(El.NavItems)}]`)) as HTMLElement[];
     el.clone[El.ToggleBtn] = cloned.querySelector(`[${dv(El.ToggleBtn)}]`) as HTMLElement;
-
     el.clone[El.Main].setAttribute('aria-hidden', 'true');
     el.clone[El.Main].setAttribute('data-clone', 'true');
     el.clone[El.Main].classList.add(`${classNames[El.Main][0]}--clone`);
-
     el.clone[El.Main].classList.add(`${classNames[El.Main][0]}--${StateModifiers.ButtonVisible}`);
 
     container.appendChild(original);

tsconfig.json

@@ -8,7 +8,7 @@
     "target": "es6",
     "lib": [
       "dom",
-      "es6"
+      "es2017"
     ]
   },
   "compileOnSave": false,