adding a mutationobserver to pfe-accordion (#401)

Adding a mutation observer so the component will continue working properly if new headers and panels are added.

Fixes #332

Author: kylebuch8

elements/pfe-accordion/demo/index.html

@@ -78,7 +78,7 @@ <h3>Why do wizards need money if they could just create it?</h3>
           <h3>Why doesn't Harry have a portrait of his parents?</h3>
         </pfe-accordion-header>
         <pfe-accordion-panel>
-          <p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
+          <p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general <a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
         </pfe-accordion-panel>
         <pfe-accordion-header>
           <h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>
@@ -100,6 +100,16 @@ <h3>Where do the main characters work as adults?</h3>
           <p><a href="https://www.pottermore.com/collection/characters" target="blank">Read more about the characters</a></p>
         </pfe-accordion-panel>
       </pfe-accordion>
+      <pfe-accordion>
+        <pfe-accordion-header>
+          Something
+        </pfe-accordion-header>
+        <pfe-accordion-panel>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </pfe-accordion-panel>
+      </pfe-accordion>
+
+      <button id="addTabAndPanelBtn">Add Tab &amp; Panel</button>
     </section>
 
     <section class="dark-background" >
@@ -208,5 +218,23 @@ <h3>Where do the main characters work as adults?</h3>
       </pfe-accordion>
     </section>
 
+    <script>
+      var btn = document.querySelector("#addTabAndPanelBtn");
+      var pfeAccordion = document.querySelector("pfe-accordion");
+
+      btn.addEventListener("click", function() {
+        var fragment = document.createDocumentFragment();
+
+        var header = document.createElement("pfe-accordion-header");
+        header.innerHTML = "<h3>New Tab</h3>";
+
+        var panel = document.createElement("pfe-accordion-panel");
+        panel.innerHTML = "<p>New panel text</p>";
+
+        fragment.appendChild(header);
+        fragment.appendChild(panel);
+        pfeAccordion.appendChild(fragment);
+      });
+    </script>
   </body>
 </html>

elements/pfe-accordion/package-lock.json

@@ -15,7 +15,7 @@
   ],
   "repository": {
     "type": "git",
-    "url" : "github:patternfly/patternfly-elements",
+    "url": "github:patternfly/patternfly-elements",
     "directory": "elements/pfe-accordion"
   },
   "main": "pfe-accordion.js",

elements/pfe-accordion/package.json

@@ -85,6 +85,9 @@ class PfeAccordion extends PFElement {
 
   constructor() {
     super(PfeAccordion, { type: PfeAccordion.PfeType });
+
+    this._linkPanels = this._linkPanels.bind(this);
+    this._observer = new MutationObserver(this._linkPanels);
   }
 
   connectedCallback() {
@@ -99,12 +102,19 @@ class PfeAccordion extends PFElement {
     Promise.all([
       customElements.whenDefined(PfeAccordionHeader.tag),
       customElements.whenDefined(PfeAccordionPanel.tag)
-    ]).then(this._linkPanels());
+    ]).then(() => {
+      if (this.children.length) {
+        this._linkPanels();
+      }
+
+      this._observer.observe(this, { childList: true });
+    });
   }
 
   disconnectedCallback() {
     this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);
     this.removeEventListener("keydown", this._keydownHandler);
+    this._observer.disconnect();
   }
 
   attributeChangedCallback(attr, oldVal, newVal) {
@@ -179,6 +189,10 @@ class PfeAccordion extends PFElement {
     headers.forEach(header => {
       const panel = this._panelForHeader(header);
 
+      if (!panel) {
+        return;
+      }
+
       header.setAttribute("aria-controls", panel.pfeId);
       panel.setAttribute("aria-labelledby", header.pfeId);
     });
@@ -208,6 +222,11 @@ class PfeAccordion extends PFElement {
   }
 
   _expandPanel(panel) {
+    if (!panel) {
+      console.error(`${PfeAccordion.tag}: Trying to expand a panel that doesn't exist`);
+      return;
+    }
+
     if (panel.expanded) {
       return;
     }
@@ -223,6 +242,11 @@ class PfeAccordion extends PFElement {
   }
 
   _collapsePanel(panel) {
+    if (!panel) {
+      console.error(`${PfeAccordion.tag}: Trying to collapse a panel that doesn't exist`);
+      return;
+    }
+
     if (!panel.expanded) {
       return;
     }
@@ -298,6 +322,10 @@ class PfeAccordion extends PFElement {
   _panelForHeader(header) {
     const next = header.nextElementSibling;
 
+    if (!next) {
+      return;
+    }
+
     if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {
       console.error(
         `${PfeAccordion.tag}: Sibling element to a header needs to be a panel`
@@ -368,12 +396,49 @@ class PfeAccordionHeader extends PFElement {
 
   constructor() {
     super(PfeAccordionHeader);
+
+    this._init = this._init.bind(this);
     this._clickHandler = this._clickHandler.bind(this);
+    this._observer = new MutationObserver(this._init);
   }
 
   connectedCallback() {
     super.connectedCallback();
 
+    if (this.children.length || this.textContent.trim().length) {
+      this._init();
+    }
+
+    this.addEventListener("click", this._clickHandler);
+    this._observer.observe(this, { childList: true });
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("click", this._clickHandler);
+    this._observer.disconnect();
+  }
+
+  get expanded() {
+    return this.hasAttribute("aria-expanded");
+  }
+
+  set expanded(val) {
+    val = Boolean(val);
+
+    if (val) {
+      this.setAttribute("aria-expanded", true);
+      this.button.setAttribute("aria-expanded", true);
+    } else {
+      this.removeAttribute("aria-expanded");
+      this.button.setAttribute("aria-expanded", false);
+    }
+  }
+
+  _init() {
+    if (window.ShadyCSS) {
+      this._observer.disconnect();
+    }
+
     if (!this.hasAttribute("role")) {
       this.setAttribute("role", "header");
     }
@@ -416,26 +481,8 @@ class PfeAccordionHeader extends PFElement {
       );
     }
 
-    this.addEventListener("click", this._clickHandler);
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener("click", this._clickHandler);
-  }
-
-  get expanded() {
-    return this.hasAttribute("aria-expanded");
-  }
-
-  set expanded(val) {
-    val = Boolean(val);
-
-    if (val) {
-      this.setAttribute("aria-expanded", true);
-      this.button.setAttribute("aria-expanded", true);
-    } else {
-      this.removeAttribute("aria-expanded");
-      this.button.setAttribute("aria-expanded", false);
+    if (window.ShadyCSS) {
+      this._observer.observe(this, { childList: true });
     }
   }
 

elements/pfe-accordion/src/pfe-accordion.js

@@ -43,6 +43,15 @@ <h2>Where do the main characters work as adults?</h2>
       </pfe-accordion-panel>
     </pfe-accordion>
 
+    <pfe-accordion id="dynamic">
+      <pfe-accordion-header>
+        <h2>Header</h2>
+      </pfe-accordion-header>
+      <pfe-accordion-panel>
+        Panel
+      </pfe-accordion-panel>
+    </pfe-accordion>
+
     <script>
       suite('<pfe-accordion>', () => {
         test('it should upgrade pfe-accordion', () => {
@@ -237,6 +246,41 @@ <h2>Where do the main characters work as adults?</h2>
 
           sinon.assert.calledWith(spy, 'pfe-accordion-header: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)');
         });
+
+        test('it should properly initialize any dynamically added headers and panels', done => {
+          const pfeAccordion = document.querySelector('#dynamic');
+          const documentFragment = document.createDocumentFragment();
+
+          const newHeader = document.createElement("pfe-accordion-header");
+          newHeader.id = "newHeader";
+          newHeader.innerHTML = `<h2>New Header</h2>`;
+
+          const newPanel = document.createElement("pfe-accordion-panel");
+          newPanel.id = "newPanel";
+          newPanel.innerHTML = `New Panel`;
+
+          documentFragment.appendChild(newHeader);
+          documentFragment.appendChild(newPanel);
+
+          pfeAccordion.appendChild(documentFragment);
+
+          flush(() => {
+            const newHeaderElement = document.querySelector("#newHeader");
+            const newPanelElement = document.querySelector("#newPanel");
+
+            assert.equal(newHeaderElement.getAttribute("role"), "header");
+            assert.isTrue(newHeaderElement.hasAttribute("pfe-id"));
+            assert.isTrue(newHeaderElement.hasAttribute("aria-controls"));
+            assert.equal(newHeaderElement.getAttribute("aria-controls"), newPanelElement.getAttribute("pfe-id"));
+
+            assert.equal(newPanelElement.getAttribute("role"), "region");
+            assert.isTrue(newPanelElement.hasAttribute("pfe-id"));
+            assert.isTrue(newPanelElement.hasAttribute("aria-labelledby"));
+            assert.equal(newPanelElement.getAttribute("aria-labelledby"), newHeaderElement.getAttribute("pfe-id"));
+
+            done();
+          });
+        });
       });
     </script>
   </body>