Merge pull request #26 from thaddeogit/master

ExpandingList element made more self-contained

Author: chrisdavidmills

expanding-list-web-component/index.html

@@ -70,6 +70,13 @@ <h1>Expanding list web component</h1>
             </ul>
         </li>
     </ul>
+    
+    <ul>
+        <li>Not</li>
+        <li>an</li>
+        <li>expanding</li>
+        <li>list</li>
+    </ul>
 
     <script src="main.js"></script>
 </body>

expanding-list-web-component/main.js

@@ -2,48 +2,61 @@
 class ExpandingList extends HTMLUListElement {
   constructor() {
     // Always call super first in constructor
-    super();
-
-    window.onload = function() {
-      const uls = Array.from(document.querySelectorAll(':root ul'));
-      const lis = Array.from(document.querySelectorAll(':root li'));
-
-      uls.slice(1).forEach(ul => {
-        ul.style.display = 'none';
-      });
-
-      lis.forEach(li => {
+    // Return value from super() is a reference to this element
+    self = super();
+
+    // Get ul and li elements that are a child of this custom ul element
+    // li elements can be containers if they have uls within them
+    const uls = Array.from(self.querySelectorAll('ul'));
+    const lis = Array.from(self.querySelectorAll('li'));
+
+    // Hide all child uls
+    // These lists will be shown when the user clicks a higher level container
+    uls.forEach(ul => {
+      ul.style.display = 'none';
+    });
+
+        // Look through each li element in the ul
+    lis.forEach(li => {
+      // If this li has a ul as a child, decorate it and add a click handler
+      if (li.querySelectorAll('ul').length > 0) {
+        // Add an attribute which can be used  by the style
+        // to show an open or closed icon
+        li.setAttribute('class', 'closed');
+
+        // Wrap the li element's text in a new span element
+        // so we can assign style and event handlers to the span
         const childText = li.childNodes[0];
         const newSpan = document.createElement('span');
 
+        // Copy text from li to span, set cursor style
         newSpan.textContent = childText.textContent;
+        newSpan.style.cursor = 'pointer';
+        
+        // Add click handler to this span
+        newSpan.onclick = self.showul;
+        
+        // Add the span and remove the bare text node from the li
         childText.parentNode.insertBefore(newSpan, childText);
         childText.parentNode.removeChild(childText);
-      });
-
-      const spans = Array.from(document.querySelectorAll(':root span'));
-
-      spans.forEach(span => {
-        if (span.nextElementSibling) {
-          span.style.cursor = 'pointer';
-          span.parentNode.setAttribute('class', 'closed');
-          span.onclick = showul;
-        }
-      });
-
-      function showul(e) {
-        const nextul = e.target.nextElementSibling;
-
-        if (nextul.style.display == 'block') {
-          nextul.style.display = 'none';
-          nextul.parentNode.setAttribute('class', 'closed');
-        } else {
-          nextul.style.display = 'block';
-          nextul.parentNode.setAttribute('class', 'open');
-        }
       }
-    };
+    });
   }
+
+  // li click handler
+  showul = function (e) {
+    // next sibling to the span should be the ul
+    const nextul = e.target.nextElementSibling;
+
+    // Toggle visible state and update class attribute on ul
+    if (nextul.style.display == 'block') {
+      nextul.style.display = 'none';
+      nextul.parentNode.setAttribute('class', 'closed');
+    } else {
+      nextul.style.display = 'block';
+      nextul.parentNode.setAttribute('class', 'open');
+    }
+  };
 }
 
 // Define the new element