@stylesheet tag breaks menu with 2 or more parents
- Dominant language
- JavaScript
- Stars
- 598
- Forks
- 371
- PR merge metrics
- No merged PRs in 30d
Description
### The Problem
When a `@stylesheet` page has more than one parent, the menu is rendered incorrectly:

What's incorrect is that the parent menu item ("Egowall") is rendering it's children.
What I've learned is that this due to the `@stylesheet` tag configuring a `hideChildrenInMenu` property:
``` js
this.hideChildrenInMenu = true;
```
https://github.com/bitovi/documentjs/blob/6978b85952f27bcbd7749a15198570a8e92f081d/lib/tags/stylesheet.js#L23
The `hideChildrenInMenu` property is designed to hide the children of the active `@stylesheet` page in the menu, so that they can instead be displayed as sub-headings within the page's content:
``` mustache
{{^if hideChildrenInMenu}}
{{makeTitle}}
{{> active-menu.mustache}}
{{/if}}
```
https://github.com/bitovi/documentjs/blob/6978b85952f27bcbd7749a15198570a8e92f081d/site/default/templates/menu.mustache#L14-L21
In reality, the property hides the active `@stylesheet` menu item itself as well as its children:
https://github.com/bitovi/documentjs/blob/6978b85952f27bcbd7749a15198570a8e92f081d/site/default/templates/menu.mustache#L16-L18
In order to add the active `@stylesheet` page back to the menu, the template renders the children of its parent menu:
```
{{#if ../active.hideChildrenInMenu}}
{{> active-menu.mustache}}
{{/if}}
```
https://github.com/bitovi/documentjs/blob/6978b85952f27bcbd7749a15198570a8e92f081d/site/default/templates/menu.mustache#L8-L10
Unfortunately, this renders the children of EVERY parent menu:
``` mustache
{{#each parents}}
{{makeTitle}}
{{#if ../active.hideChildrenInMenu}}
{{> active-menu.mustache}}
{{/if}}
{{/each}}
```
https://github.com/bitovi/documentjs/blob/6978b85952f27bcbd7749a15198570a8e92f081d/site/default/templates/menu.mustache#L3-L12
### A Fix
If you only show the LAST parent's child pages, everything works as was intended:

The way to accomplish this is to add a helper to check that a given item is the last in the the given list:
``` js
/**
* @function documentjs.generators.html.defaultHelpers.ifIsLastItem
*
* Renders the truthy section if the current context is the last item
* in the list.
*
* @param {Array} list
* @param {*} item
*/
ifIsLastItem: function(list, item, options){
return list[list.length - 1] === item ? options.fn(this) : '';
},
```
And add a condition to the rendering of child items in the parent menu:
``` mustache
{{#if ../active.hideChildrenInMenu}}
{{#ifIsLastItem ../../parents .}}
{{> active-menu.mustache}}
{{/ifIsLastItem}}
{{/if}}
```
If nobody has a problem with this solution, I'll submit a PR later this week.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.