mirror of
https://github.com/meshtastic/meshtastic.git
synced 2024-12-25 05:34:11 -08:00
FAQ accordion open sets nearest heading hash in url
This commit is contained in:
thomas.ekstrand
parent
68ceb52407
commit
bbd6830966
|
|
@ -190,38 +190,38 @@ If you use your ham radio license with Meshtastic, consider both the privileges
|
|||
|
||||
## Overview
|
||||
|
||||
<FaqAccordion rows={Faq.general} slug="general" />
|
||||
<FaqAccordion rows={Faq.general} />
|
||||
|
||||
## Android Client
|
||||
|
||||
<FaqAccordion rows={Faq.android} slug="android" />
|
||||
<FaqAccordion rows={Faq.android} />
|
||||
|
||||
## Apple Clients
|
||||
|
||||
<FaqAccordion rows={Faq.apple} slug="apple" />
|
||||
<FaqAccordion rows={Faq.apple} />
|
||||
|
||||
## Channels
|
||||
|
||||
<FaqAccordion rows={Faq.channels} slug="channels" />
|
||||
<FaqAccordion rows={Faq.channels} />
|
||||
|
||||
## Python CLI
|
||||
|
||||
<FaqAccordion rows={Faq.python} slug="python" />
|
||||
<FaqAccordion rows={Faq.python} />
|
||||
|
||||
## Devices
|
||||
|
||||
<FaqAccordion rows={Faq.devices} slug="devices" />
|
||||
<FaqAccordion rows={Faq.devices} />
|
||||
|
||||
## Amateur Radio (ham)
|
||||
|
||||
Meshtastic can be used by both unlicensed people and licensed HAM operators.
|
||||
|
||||
<FaqAccordion rows={Faq.ham} slug="ham" />
|
||||
<FaqAccordion rows={Faq.ham} />
|
||||
|
||||
## Mesh
|
||||
|
||||
<FaqAccordion rows={Faq.mesh} slug="mesh" />
|
||||
<FaqAccordion rows={Faq.mesh} />
|
||||
|
||||
## Modules
|
||||
|
||||
<FaqAccordion rows={Faq.modules} slug="modules" />
|
||||
<FaqAccordion rows={Faq.modules} />
|
||||
|
|
|
|||
|
|
@ -16,83 +16,69 @@ export interface Faq {
|
|||
}
|
||||
|
||||
/**
|
||||
* Gets the query parameter `openFaqItems` which is an array of
|
||||
* faq items that should be pre-opened
|
||||
* @type {Function}
|
||||
* Finds the nearest heading to an element
|
||||
* @param {Element} null The element to find the nearest heading to
|
||||
* @return {Element|null} The heading or null
|
||||
*/
|
||||
const getOpenFaqItemsFromUrl = (slug: string): string[] => {
|
||||
if (typeof window !== "undefined") {
|
||||
// Use URLSearchParams to parse the query parameters from the current URL
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
const findNearestHeading = (element: Element): Element | null => {
|
||||
const isHeading = (element: Element): boolean => /^H[1-6]$/.test(element.tagName);
|
||||
let currentElement: Element | null = element;
|
||||
|
||||
// Get the 'openFaqItems' parameter as a comma-separated string
|
||||
const openFaqItemsString = searchParams.get(`openFaqItems-${slug}`);
|
||||
while (currentElement !== null) {
|
||||
// Check previous siblings
|
||||
let prevSibling: Element | null = currentElement.previousElementSibling;
|
||||
while (prevSibling) {
|
||||
if (isHeading(prevSibling)) {
|
||||
return prevSibling;
|
||||
}
|
||||
prevSibling = prevSibling.previousElementSibling;
|
||||
}
|
||||
|
||||
// If the parameter exists, split it by commas into an array; otherwise, return an empty array
|
||||
return openFaqItemsString ? openFaqItemsString.split(",") : [];
|
||||
// If no heading is found among siblings, move to the parent node
|
||||
currentElement = currentElement.parentElement;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates query parameters in the url when items are opened
|
||||
* so that a link can be shared with the faq item already opened
|
||||
* Takes in uuids from react-accessible-accordion onchange event
|
||||
* and updates the browser url with the nearest heading's id
|
||||
* @param {[type]} void [description]
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
const handleChange = (
|
||||
openFaqItems: (string | number)[],
|
||||
slug: string,
|
||||
): void => {
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
const updateURLWithNearestHeadingId = (targetElementUuid: string): void => {
|
||||
const targetElement: HTMLElement | null = document.getElementById(`accordion__heading-${targetElementUuid}`);
|
||||
|
||||
if (openFaqItems.length > 0) {
|
||||
// Create comma-separated string and update/add the parameter
|
||||
searchParams.set(
|
||||
`openFaqItems-${slug}`,
|
||||
openFaqItems.map(String).join(","),
|
||||
);
|
||||
} else {
|
||||
// If openFaqItems is empty, remove the parameter from the URL
|
||||
searchParams.delete(`openFaqItems-${slug}`);
|
||||
const nearestHeading: Element | null = targetElement ? findNearestHeading(targetElement) : null;
|
||||
|
||||
if (nearestHeading && nearestHeading.id) {
|
||||
window.history.pushState({}, '', `#${nearestHeading.id}`);
|
||||
}
|
||||
|
||||
// Construct the new URL, preserve existing parameters
|
||||
const newUrl = `${window.location.protocol}//${window.location.host}${
|
||||
window.location.pathname
|
||||
}?${searchParams.toString()}`;
|
||||
|
||||
// Change the URL without reloading the page
|
||||
window.history.pushState({ path: newUrl }, "", newUrl);
|
||||
};
|
||||
}
|
||||
|
||||
export const FaqAccordion = ({
|
||||
rows,
|
||||
slug,
|
||||
}: { rows: Faq[]; slug: string }): JSX.Element => {
|
||||
}: { rows: Faq[] }): JSX.Element => {
|
||||
return (
|
||||
<BrowserOnly fallback={<div>Loading FAQ's...</div>}>
|
||||
{() => {
|
||||
return (
|
||||
<Accordion
|
||||
allowMultipleExpanded={true}
|
||||
allowZeroExpanded={true}
|
||||
onChange={(itemUuids) => {
|
||||
handleChange(itemUuids, slug);
|
||||
}}
|
||||
preExpanded={getOpenFaqItemsFromUrl(slug)}
|
||||
>
|
||||
{rows.map((row, index) => (
|
||||
// biome-ignore lint/suspicious/noArrayIndexKey: React complains if there is no key
|
||||
<AccordionItem key={index}>
|
||||
<AccordionItemHeading aria-level="3">
|
||||
<AccordionItemButton>{row.title}</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
<AccordionItemPanel>
|
||||
<ReactMarkdown>{row.content}</ReactMarkdown>
|
||||
</AccordionItemPanel>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
);
|
||||
<Accordion
|
||||
allowMultipleExpanded={true}
|
||||
allowZeroExpanded={true}
|
||||
onChange={(itemUuids) => {
|
||||
updateURLWithNearestHeadingId(itemUuids);
|
||||
}}
|
||||
</BrowserOnly>
|
||||
>
|
||||
{rows.map((row, index) => (
|
||||
// biome-ignore lint/suspicious/noArrayIndexKey: React complains if there is no key
|
||||
<AccordionItem key={index}>
|
||||
<AccordionItemHeading aria-level="3">
|
||||
<AccordionItemButton>{row.title}</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
<AccordionItemPanel>
|
||||
<ReactMarkdown>{row.content}</ReactMarkdown>
|
||||
</AccordionItemPanel>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue