@salesforcedevs/docs-components
Advanced tools
Comparing version 1.3.268-ref-rnb-tab1 to 1.3.282-scroll-fix-alpha
@@ -18,3 +18,2 @@ { | ||
"doc/headingAnchor", | ||
"doc/lwcReferenceLayout", | ||
"doc/overview", | ||
@@ -21,0 +20,0 @@ "doc/phase", |
{ | ||
"name": "@salesforcedevs/docs-components", | ||
"version": "1.3.268-ref-rnb-tab1", | ||
"version": "1.3.282-scroll-fix-alpha", | ||
"description": "Docs Lightning web components for DSC", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -40,3 +40,2 @@ /* eslint-disable @lwc/lwc/no-document-query */ | ||
@api useOldSidebar?: boolean = false; | ||
@api rnbByTabId?: string = ""; | ||
@api languages!: OptionWithLink[]; | ||
@@ -87,3 +86,3 @@ @api language!: string; | ||
@track | ||
_sidebarContent: unknown; | ||
private _sidebarContent: unknown; | ||
@@ -136,6 +135,2 @@ private _breadcrumbs = null; | ||
get showTabBasedRNB() { | ||
return this.rnbByTabId ? true : false; | ||
} | ||
get showBreadcrumbs(): boolean { | ||
@@ -159,20 +154,4 @@ return ( | ||
} | ||
if (this.showTabBasedRNB) { | ||
window.addEventListener("tabchanged", this.onTabChanged); | ||
} | ||
} | ||
onTabChanged = () => { | ||
this.updateRNB(); | ||
}; | ||
updateRNB = () => { | ||
const headingElements = this.getHeadingElements(); | ||
headingElements.forEach((headingElement) => { | ||
headingElement.hash = headingElement.attributes.hash?.nodeValue; | ||
}); | ||
this.updateTocItems(headingElements); | ||
}; | ||
renderedCallback(): void { | ||
@@ -205,6 +184,2 @@ /** | ||
); | ||
if (this.showTabBasedRNB) { | ||
window.removeEventListener("tabchanged", this.onTabChanged); | ||
} | ||
window.removeEventListener("scroll", this.adjustNavPosition); | ||
@@ -229,25 +204,2 @@ window.removeEventListener("resize", this.adjustNavPosition); | ||
private getHeadingElements() { | ||
let headingElements = document.querySelectorAll(TOC_HEADER_TAG); | ||
if (this.showTabBasedRNB) { | ||
const tabPanelListItems = | ||
document.querySelectorAll("dx-tab-panel-list"); | ||
for (const tabPanelListItem of tabPanelListItems) { | ||
if (tabPanelListItem.id === this.rnbByTabId) { | ||
const tabPanelItems = | ||
tabPanelListItem.querySelectorAll("dx-tab-panel"); | ||
for (const tabPanelItem of tabPanelItems) { | ||
if (tabPanelItem.active) { | ||
headingElements = | ||
tabPanelItem.querySelectorAll(TOC_HEADER_TAG); | ||
break; | ||
} | ||
} | ||
break; | ||
} | ||
} | ||
} | ||
return headingElements; | ||
} | ||
/* | ||
@@ -312,3 +264,5 @@ This is a workaround for the global nav sticky header being decoupled from the doc header & doc phase. | ||
// Adjust scroll margin for doc headings when doc phase is present | ||
const docHeadingEls = this.getHeadingElements(); | ||
const docHeadingEls = Array.from( | ||
document.querySelectorAll("doc-heading") | ||
); | ||
docHeadingEls.forEach((docHeadingEl) => { | ||
@@ -369,3 +323,3 @@ (docHeadingEl as any).style.scrollMarginTop = `${ | ||
// Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll | ||
const headingElements = this.getHeadingElements(); | ||
const headingElements = document.querySelectorAll(TOC_HEADER_TAG); | ||
for (const headingElement of headingElements as any) { | ||
@@ -386,30 +340,43 @@ // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll | ||
onSlotChange(): void { | ||
this.updateRNB(); | ||
} | ||
onSlotChange(event: Event): void { | ||
const slotElements = ( | ||
event.target as HTMLSlotElement | ||
).assignedElements(); | ||
// eslint-disable-next-line no-undef | ||
private updateTocItems(headingElements: NodeListOf<Element>): void { | ||
const tocOptions = []; | ||
if (slotElements.length) { | ||
this.contentLoaded = true; | ||
const slotContentElement = slotElements[0]; | ||
const headingElements = | ||
slotContentElement.ownerDocument?.getElementsByTagName( | ||
TOC_HEADER_TAG | ||
); | ||
for (const headingElement of headingElements) { | ||
headingElement.id = headingElement.hash; | ||
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; | ||
} | ||
// 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"; | ||
const tocOptions = []; | ||
if (isH2) { | ||
const tocItem = { | ||
anchor: `#${headingElement.hash}`, | ||
id: headingElement.id, | ||
label: headingElement.title | ||
}; | ||
tocOptions.push(tocItem); | ||
this.tocOptionIdsSet.add(headingElement.id); | ||
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"; | ||
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; | ||
} | ||
@@ -416,0 +383,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
254268
75
6521