I am trying to build custom nav and to specify the starting point in the pages tree relative to the page the nav is sitting on. I am trying to identify child pages (and ‘siblings’) but I cannot seem to get to the page id and childids in a hook.js. When I try I see sometying like this:
id: undefined, title: Home, parentId: undefined
id: undefined, title: HomeB, parentid: undefined
I understand that it is possible but I cannot figure it out, please could you point in in the right directions.
@dan this is the the request that you responded to on the feature request board
We don’t currently expose the page or parent ids for pages, however, there is an isActive property which is true for the current page. The rw.pages object contains a complete map of the pages in the project so you should be able to figure out the parent/siblings from this.
Below I’ve written rw.pages to the log which you can view in the debug panel. Right click the tab bar and choose Panels → Component Debug if it’s not visible.
This is extremely helpful, thank you. One more question and then I promise to leave you alone. I have everything working for top level pages. I put my component on any of those and when the publish process runs, they are seen as ‘isActive’ and the hooks.js / template output the html I want. If I add the component to any page below the top level, the page that the component sits on is not seen as isActive in the pages array when the publish process runs and so the code does not output anything. Is that expected behaviour or am I missing a trick?
I am using elements to build a poc site of resources for people learning Te reo Māori (one of the official languages of New Zealand) and elements is fantastic, it is very easy to make professional looking pages and also add custom elements like interactive quizzes. The reason i am interested in nav for this particular project is that there will be a lot of pages and I want to make it as easy as possible.
I think I understand the issue, it’s a tricky one to describe. There’s another flag in the page data called hasActiveChild. This tells you if a menu should open because a child page within it is the active page. Does that help?
If not, I might need to see the code from your hooks file to get a better idea of what you’re trying to achieve.
However, this just scans the top level pages and ignores all child pages. I’ve written a new function that runs a deep scan on all child pages and returns the currently active one based on the isActive flag.
function findActivePage(pages) {
// Loop over all pages
for (const page of pages) {
// If this page is active, return it
if (page.isActive) {
return page;
}
// If this page has child pages, check them
if (page.pages.length > 0) {
return findActivePage(page.pages);
}
}
// No active page found
return null;
}
const currentPage = findActivePage(pages);
I am really enjoying elements, You’ve though it through well and it is very satisfying to use. I also love alpine and tailwind, never used them before, who knew!
Sorry for taking a while to get back to you. I decided to clean some dirt of my shoe with an industrial water blaster… I was wearing flip flops, Three bones broken. And the worst thing is, I did exacrly the same thing 20 years ago… what a jerk.
Funny enough, I was using the pressure washer the other day and accidentally “washed” my foot too - I was also wearing flip flops! Luckily mine isn’t that powerful, so it only made my toe bleed a little.
Now I know why they have those sections in the manual saying “Do not operate this equipment whilst wearing flip flops”. I used to think, what kind of idiot would do that?…
