From a7bbaab2f44fc7084665fa8efeaabef1aed8cea8 Mon Sep 17 00:00:00 2001
From: Brian Kardell <bkardell@gmail.com>
Date: Fri, 24 Apr 2020 15:53:14 -0400
Subject: [PATCH] Update panel-set-two.mjs

adding support for specifying the active index during declaration, make sure this all works ok on mobile, set attributes instead of AOM reflection uses so this works in all the places and reorient so that it adapts to newly inserted or removed DOM appropriately.

Should we just make this panel-set
---
 panel-set-two.mjs | 60 ++++++++++++++++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/panel-set-two.mjs b/panel-set-two.mjs
index 66b1b66..564dcb9 100644
--- a/panel-set-two.mjs
+++ b/panel-set-two.mjs
@@ -13,6 +13,11 @@
             this.tabSources
               .forEach(tabSource => tabSource.setAttribute("slot", ""));
           }
+          this.shadowRoot.querySelectorAll('slot').forEach(slotEl => {
+            if (slotEl.assignedElements().length === 0) {
+              slotEl.parentElement.remove()
+            }adding support for specifying the active index during declaration, make sure this all works ok on mobile, set attributes instead of AOM reflection uses so this works in all the places and reorient so that it adapts to newly inserted or removed DOM appropriately.
+          })
         }
       });
     }
@@ -23,7 +28,7 @@
     get contentSources() {
       return Array.from(this.querySelectorAll(":scope>[x-content]"));
     }
-
+adding support for specifying the active index during declaration, make sure this all works ok on mobile, set attributes instead of AOM reflection uses so this works in all the places and reorient so that it adapts to newly inserted or removed DOM appropriately.
     set activeTab(tabSource) {
       this.tabSources.forEach((source, i) => {
         let relatedContent = this.querySelector(`#${source.getAttribute("aria-controls")}`);
@@ -69,10 +74,18 @@
       this.attachShadow({ mode: "open" });
       this.shadowRoot.innerHTML = `
         <style>
+          :root {
+            font-size: 1rem;
+          }
+
           :host([hidden]),
           ::slotted([hidden]) {
             display: none;
           }
+
+          ::slotted(h2[tabIndex="0"]) {
+             text-decoration: underline;   
+          }
           
          
           :host([theme=default]) [active]{
@@ -90,12 +103,15 @@
             border: 1px solid lightgray;
           }
 
+          :host([theme=default][display=accordion]) x-tabs {
+            display: none;
+          } 
 
           :host([theme=default]) x-tab > ::slotted(*) {
-            font-size: 1rem;
             font-weight: normal;
             color: black;
             margin: 0.2rem;
+            text-decoration: none;
 
           }
           :host([theme=default]) x-tabs {
@@ -106,7 +122,7 @@
 
           :host([theme=default]) [default] {
             display: block;
-            margin-top: -1rem;
+            margin-top: 0rem;
             padding: 0.5rem;
             background-color: transparent;
             border: 1px solid lightgray;
@@ -114,12 +130,10 @@
           }
           x-tabs { 
             display: flex; 
-            background-color: gray; 
           }
           x-tab {
             margin: 0 0.2rem;
             padding: 0 .75rem;
-            background-color: #e3e0e0;
           }
         </style>
         <x-tabs></x-tabs>
@@ -139,6 +153,8 @@
       let titleEls = unassignedEls.filter(el => el.matches("[x-title]"));
       let contentEls = unassignedEls.filter(el => el.matches("[x-content]"));
       let size = Math.min(titleEls.length, contentEls.length);
+      let specifiedIndex = this.activeTabIndex || 0;
+      
       if (titleEls.length !== size) {
         console.warn("mismatch in panel-set title/content pairs...");
       }
@@ -154,12 +170,16 @@
         let tab = titleEls[i];
         let content = contentEls[i];
 
+        if (tab.hasAttribute('x-active')) {
+          specifiedIndex = i;
+        }
+        
         // tabs are -1, they need to use roving focus :(
         tab.tabIndex = -1;
-        tab.role = "tab";
+        tab.setAttribute("role","tab");
         tab.id = tabUId;
         tab.setAttribute("aria-controls", contentUId);
-        content.role = "tabpanel";
+        content.setAttribute("role","tabpanel");
         content.tabIndex = 0;
         content.id = contentUId;
         tab._init = true;
@@ -177,18 +197,17 @@
             "text/html"
           )
         );
-        // setting these would project them, but in theory leave them in place...
-        //titleEls[i].slot = tabUId
       }
-      // todo: figure this part out dynamically...
-      this.activeTabIndex = 0;
-      this.activeTab = this.tabSources[0];
-      let mql = window.matchMedia("(max-width: 720px)");
-      let mqh = evt => {
-        this.setAttribute("display", mql.matches ? "accordion" : "tabs");
-      };
-      mql.addListener(mqh);
-      mqh();
+      
+      this.activeTabIndex = specifiedIndex;
+      this.activeTab = this.tabSources[this.activeTabIndex]
+      
+      let specifiedDisplay = this.getAttribute('display') || 'accordion'
+      if (specifiedDisplay === 'tabs') {
+        this.setAttribute('display', 'tabs')
+      } else {
+        this.setAttribute('display', 'accordion')
+      }
     });
 
     this.addEventListener(
@@ -214,8 +233,6 @@
       false
     );
 
-    // let tabEls = [...this.querySelectorAll(":scope>.title")];
-    // contentEls = [...this.querySelectorAll(":scope>.content")];
   }
 }
 
@@ -224,5 +241,6 @@
     return `cp${++PanelSetTwo.prototype.lastUid}`;
   };
 
-  customElements.define("panel-set-two", PanelSetTwo);
+  customElements.define("panel-set-two", PanelSetTwo); 
+  
 })();