Skip to content

Update panel-set-two.mjs #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bkardell wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update panel-set-two.mjs #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 39 additions & 21 deletions panel-set-two.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
})
}
});
}
Expand All @@ -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")}`);
Expand Down Expand Up @@ -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]{
Expand All @@ -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 {
Expand All @@ -106,20 +122,18 @@

:host([theme=default]) [default] {
display: block;
margin-top: -1rem;
margin-top: 0rem;
padding: 0.5rem;
background-color: transparent;
border: 1px solid lightgray;
border-top: none;
}
x-tabs {
display: flex;
background-color: gray;
}
x-tab {
margin: 0 0.2rem;
padding: 0 .75rem;
background-color: #e3e0e0;
}
</style>
<x-tabs></x-tabs>
Expand All @@ -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...");
}
Expand All @@ -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;
Expand All @@ -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(
Expand All @@ -214,8 +233,6 @@
false
);

// let tabEls = [...this.querySelectorAll(":scope>.title")];
// contentEls = [...this.querySelectorAll(":scope>.content")];
}
}

Expand All @@ -224,5 +241,6 @@
return `cp${++PanelSetTwo.prototype.lastUid}`;
};

customElements.define("panel-set-two", PanelSetTwo);
customElements.define("panel-set-two", PanelSetTwo);

})();