@salesforcedevs/docs-components
Advanced tools
Comparing version 1.3.300-fix-alpha3 to 1.3.300-rnb-tab-alpha
{ | ||
"name": "@salesforcedevs/docs-components", | ||
"version": "1.3.300-fix-alpha3", | ||
"version": "1.3.300-rnb-tab-alpha", | ||
"description": "Docs Lightning web components for DSC", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -1478,14 +1478,6 @@ import { LightningElement, api, track } from "lwc"; | ||
// Adding stringify inside try/catch | ||
let amfModelString = ""; | ||
try { | ||
amfModelString = JSON.stringify(this.amfMap[referenceId].model); | ||
} catch (error) { | ||
console.error(`Error stringifying amf model: ${error}`); | ||
} | ||
// This updates the component in the content section. | ||
this.topicModel = { | ||
type, | ||
amf: amfModelString, | ||
amf: this.amfMap[referenceId].model, | ||
parser: this.amfMap[referenceId].parser, | ||
@@ -1492,0 +1484,0 @@ id: amfId |
@@ -98,3 +98,3 @@ import { Json, DocPhaseInfo } from "typings/custom"; | ||
type: string; | ||
amf: string; | ||
amf: AmfModel; | ||
parser: AmfParser; | ||
@@ -101,0 +101,0 @@ } |
@@ -30,7 +30,3 @@ import { LightningElement, api } from "lwc"; | ||
) { | ||
try { | ||
this.amf = value && JSON.parse(value.amf); | ||
} catch (error) { | ||
console.error(`Error parsing amf model: ${error}`); | ||
} | ||
this.amf = value && clone(value.amf); | ||
} | ||
@@ -41,3 +37,3 @@ if ( | ||
) { | ||
this.type = value && value.type; | ||
this.type = value && clone(value.type); | ||
} | ||
@@ -114,1 +110,11 @@ | ||
} | ||
/** | ||
* The underlying web components we use from api-console mutate their models we pass in. | ||
* Since LWC makes them Read Only, we need to copy them before passing to the Web Component. | ||
* @param value JSON Serializable object to clone. | ||
* @returns A copy of Value. One that has been serialized and parsed via JSON. (Functions, Regex, etc are not preserved.) | ||
*/ | ||
function clone(value: any): any { | ||
return JSON.parse(JSON.stringify(value)); | ||
} |
@@ -54,4 +54,4 @@ import { Json } from "typings/custom"; | ||
type: string; | ||
amf: string; | ||
amf: AmfModel; | ||
parser: AmfModelParser; | ||
} |
@@ -44,2 +44,3 @@ /* eslint-disable @lwc/lwc/no-document-query */ | ||
@api bailLabel!: string; | ||
@api rnbByTabId?: string = "lwc-doc-tab"; | ||
@@ -105,2 +106,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 +146,37 @@ callbacks: { | ||
onTabChanged = () => { | ||
this.updateRNB(); | ||
}; | ||
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 tabPanelListItems: any = | ||
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; | ||
} | ||
connectedCallback(): void { | ||
@@ -154,2 +194,5 @@ const hasParentHighlightListener = closest( | ||
} | ||
if (this.showTabBasedRNB) { | ||
window.addEventListener("tabchanged", this.onTabChanged); | ||
} | ||
} | ||
@@ -262,5 +305,3 @@ | ||
// Adjust scroll margin for doc headings when doc phase is present | ||
const docHeadingEls = Array.from( | ||
document.querySelectorAll("doc-heading") | ||
); | ||
const docHeadingEls = this.getHeadingElements(); | ||
docHeadingEls.forEach((docHeadingEl) => { | ||
@@ -321,3 +362,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 = document.querySelectorAll(TOC_HEADER_TAG); | ||
const headingElements = this.getHeadingElements(); | ||
for (const headingElement of headingElements as any) { | ||
@@ -338,43 +379,30 @@ // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll | ||
onSlotChange(event: Event): void { | ||
const slotElements = ( | ||
event.target as HTMLSlotElement | ||
).assignedElements(); | ||
onSlotChange(): void { | ||
this.updateRNB(); | ||
} | ||
if (slotElements.length) { | ||
this.contentLoaded = true; | ||
const slotContentElement = slotElements[0]; | ||
const headingElements = | ||
slotContentElement.ownerDocument?.getElementsByTagName( | ||
TOC_HEADER_TAG | ||
); | ||
// eslint-disable-next-line no-undef | ||
private updateTocItems(headingElements: NodeListOf<Element>): void { | ||
const tocOptions = []; | ||
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; | ||
} | ||
for (const headingElement of headingElements as any) { | ||
headingElement.id = headingElement.hash; | ||
const tocOptions = []; | ||
// 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"; | ||
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); | ||
} | ||
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; | ||
} | ||
@@ -381,0 +409,0 @@ |
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
255246
6552