@salesforcedevs/docs-components
Advanced tools
Comparing version 1.3.319-scroll-alpha1 to 1.3.319-tabrnb-alpha
{ | ||
"name": "@salesforcedevs/docs-components", | ||
"version": "1.3.319-scroll-alpha1", | ||
"version": "1.3.319-tabrnb-alpha", | ||
"description": "Docs Lightning web components for DSC", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -44,2 +44,4 @@ /* eslint-disable @lwc/lwc/no-document-query */ | ||
@api bailLabel!: string; | ||
@api rnbByTabId?: string = "docs-tab"; | ||
@api initialIndex: number = 0; | ||
@@ -105,2 +107,6 @@ // This is needed for now to prevent failing snapshot tests due to links in the footer | ||
get showTabBasedRNB() { | ||
return this.rnbByTabId ? true : false; | ||
} | ||
private searchSyncer = new SearchSyncer({ | ||
@@ -141,2 +147,68 @@ callbacks: { | ||
onTabChanged = () => { | ||
this.updateRNB(); | ||
}; | ||
private selectTabElement() { | ||
return document.querySelector("dx-tab-panel-list"); | ||
} | ||
updateRNB = () => { | ||
const headingElements = this.getHeadingElements(); | ||
headingElements.forEach((headingElement: any) => { | ||
headingElement.hash = headingElement.attributes.hash?.nodeValue; | ||
}); | ||
this.updateTocItems(headingElements); | ||
}; | ||
private getHeadingElements() { | ||
let headingElements = document.querySelectorAll(TOC_HEADER_TAG); | ||
if (this.showTabBasedRNB) { | ||
const tabPanelListItem: any = this.selectTabElement(); | ||
// for (const tabPanelListItem of tabPanelListItems) { | ||
if (tabPanelListItem.id === this.rnbByTabId) { | ||
const tabPanels = | ||
tabPanelListItem.querySelectorAll("dx-tab-panel"); | ||
for (const tabPanelItem of tabPanels) { | ||
if (tabPanelItem.active) { | ||
headingElements = | ||
tabPanelItem.querySelectorAll(TOC_HEADER_TAG); | ||
break; | ||
} | ||
} | ||
// const tabPanelItems: any = tabPanelListItem.shadowRoot.querySelectorAll("dx-tab-panel-item"); | ||
// this.updateURL(tabPanelItems); | ||
} | ||
// } | ||
} | ||
return headingElements; | ||
} | ||
private updateURL() { | ||
const tabPanelListItem: any = this.selectTabElement(); | ||
if (tabPanelListItem.id === this.rnbByTabId) { | ||
const tabPanelItems: any = | ||
tabPanelListItem?.shadowRoot.querySelectorAll( | ||
"dx-tab-panel-item" | ||
); | ||
if (tabPanelItems) { | ||
for (const tabPanelItem of tabPanelItems as any) { | ||
const tab = tabPanelItem.shadowRoot.querySelector("button"); | ||
const url = new URL(window.location.href); | ||
const previousTabID = url.searchParams.get("type"); | ||
const tabID = tab?.getAttribute("aria-label"); | ||
if ( | ||
tab?.getAttribute("aria-selected") === "true" && | ||
previousTabID !== tabID | ||
) { | ||
url.searchParams.set("type", tabID); | ||
url.hash = ""; | ||
window.history.pushState({}, "", url.toString()); | ||
} | ||
} | ||
} | ||
} | ||
} | ||
connectedCallback(): void { | ||
@@ -154,2 +226,5 @@ const hasParentHighlightListener = closest( | ||
} | ||
if (this.showTabBasedRNB) { | ||
window.addEventListener("tabchanged", this.onTabChanged); | ||
} | ||
} | ||
@@ -222,12 +297,6 @@ | ||
let docPhaseEl = ( | ||
const docPhaseEl = ( | ||
this.template.querySelector("[name=doc-phase]")! as any | ||
).assignedElements()[0] as HTMLSlotElement; | ||
if (!docPhaseEl) { | ||
docPhaseEl = ( | ||
this.template.querySelector("[name=version-banner]")! as any | ||
).assignedElements()[0] as HTMLSlotElement; | ||
} | ||
if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) { | ||
@@ -245,10 +314,2 @@ console.warn("One or more required elements are missing."); | ||
const docHeaderHeight = docHeaderEl.getBoundingClientRect().height; | ||
const totalHeaderHeight = globalNavHeight + docHeaderHeight; | ||
// Selecting the doc section heading and RNB here. | ||
const docHeadingEls = Array.from( | ||
document.querySelectorAll("doc-heading") | ||
); | ||
const rightNavBarEl = this.template.querySelector(".right-nav-bar"); | ||
sidebarEl.style.setProperty( | ||
@@ -264,23 +325,2 @@ "--dx-c-content-sidebar-sticky-top", | ||
// Adjusting the doc section heading on scroll. | ||
docHeadingEls.forEach((docHeadingEl) => { | ||
(docHeadingEl as any).style.scrollMarginTop = docPhaseEl | ||
? `${ | ||
totalHeaderHeight + | ||
docPhaseEl.getBoundingClientRect().height + | ||
40 | ||
}px` | ||
: `${totalHeaderHeight + 40}px`; | ||
}); | ||
// Adjusting the right nav bar on scroll. | ||
if (rightNavBarEl) { | ||
rightNavBarEl.style.top = docPhaseEl | ||
? `${ | ||
totalHeaderHeight + | ||
docPhaseEl.getBoundingClientRect().height | ||
}px` | ||
: `${totalHeaderHeight}px`; | ||
} | ||
// If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell). | ||
@@ -298,2 +338,24 @@ if (docPhaseEl) { | ||
); | ||
// Adjust scroll margin for doc headings when doc phase is present | ||
const docHeadingEls = this.getHeadingElements(); | ||
docHeadingEls.forEach((docHeadingEl) => { | ||
(docHeadingEl as any).style.scrollMarginTop = `${ | ||
globalNavHeight + | ||
docHeaderHeight + | ||
docPhaseEl.getBoundingClientRect().height | ||
}px`; | ||
}); | ||
// Adjust right nav bar position when doc phase is present | ||
const rightNavBarEl = | ||
this.template.querySelector(".right-nav-bar"); | ||
if (rightNavBarEl) { | ||
rightNavBarEl.style.top = `${ | ||
globalNavHeight + | ||
docHeaderHeight + | ||
docPhaseEl.getBoundingClientRect().height | ||
}px`; | ||
} | ||
} | ||
@@ -335,3 +397,4 @@ }); | ||
// Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll | ||
const headingElements = document.querySelectorAll(TOC_HEADER_TAG); | ||
const headingElements = this.getHeadingElements(); | ||
this.updateURL(); | ||
for (const headingElement of headingElements as any) { | ||
@@ -352,43 +415,39 @@ // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll | ||
onSlotChange(event: Event): void { | ||
const slotElements = ( | ||
event.target as HTMLSlotElement | ||
).assignedElements(); | ||
onSlotChange(e): void { | ||
const slot = e.target; | ||
const child = slot.assignedElements(); // Get the first slotted child component | ||
if (slotElements.length) { | ||
this.contentLoaded = true; | ||
const slotContentElement = slotElements[0]; | ||
const headingElements = | ||
slotContentElement.ownerDocument?.getElementsByTagName( | ||
TOC_HEADER_TAG | ||
); | ||
const tabComponent = child.find( | ||
(element) => element.tagName.toLowerCase() === "dx-tab-panel-list" | ||
); | ||
if (tabComponent) { | ||
tabComponent.initialIndex = this.initialIndex; // Set the index value on the child component | ||
} | ||
this.updateRNB(); | ||
} | ||
for (const headingElement of headingElements as any) { | ||
// Sometimes elements hash is not being set when slot content is wrapped with div | ||
headingElement.hash = headingElement.attributes.hash?.nodeValue; | ||
} | ||
// eslint-disable-next-line no-undef | ||
private updateTocItems(headingElements: NodeListOf<Element>): void { | ||
const tocOptions = []; | ||
const tocOptions = []; | ||
for (const headingElement of headingElements as any) { | ||
headingElement.id = headingElement.hash; | ||
for (const headingElement of headingElements as any) { | ||
headingElement.id = headingElement.hash; | ||
// Update tocOptions from anchorTags only for H2, consider default as 2 as per component | ||
const headingAriaLevel = | ||
headingElement.attributes["aria-level"]?.nodeValue || "2"; | ||
const isH2 = headingAriaLevel === "2"; | ||
// Update tocOptions from anchorTags only for H2, consider default as 2 as per component | ||
const headingAriaLevel = | ||
headingElement.attributes["aria-level"]?.nodeValue || "2"; | ||
const isH2 = headingAriaLevel === "2"; | ||
if (isH2) { | ||
const tocItem = { | ||
anchor: `#${headingElement.hash}`, | ||
id: headingElement.id, | ||
label: headingElement.title | ||
}; | ||
tocOptions.push(tocItem); | ||
this.tocOptionIdsSet.add(headingElement.id); | ||
} | ||
if (isH2) { | ||
const tocItem = { | ||
anchor: `#${headingElement.hash}`, | ||
id: headingElement.id, | ||
label: headingElement.title | ||
}; | ||
tocOptions.push(tocItem); | ||
this.tocOptionIdsSet.add(headingElement.id); | ||
} | ||
} | ||
this._tocOptions = tocOptions; | ||
} | ||
this._tocOptions = tocOptions; | ||
} | ||
@@ -395,0 +454,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
256893
6592