@stylesheet tag breaks menu with 2 or more parents

[akagomez]

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:

this.hideChildrenInMenu = true;

documentjs/lib/tags/stylesheet.js

Line 23 in 6978b85

this.hideChildrenInMenu = true;

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:

{{^if hideChildrenInMenu}}
  <li class="search-container active">
    <a class="sidebar-title" href="{{urlTo name}}" data-search="{{#if title}}{{title}}{{else}}{{{name}}}{{/if}}">
      {{makeTitle}}
    </a>
    {{> active-menu.mustache}}
  </li>
{{/if}}

documentjs/site/default/templates/menu.mustache

Lines 14 to 21 in 6978b85

	{{^if hideChildrenInMenu}}
	<li class="search-container active">
	<a class="sidebar-title" href="{{urlTo name}}" data-search="{{#if title}}{{title}}{{else}}{{{name}}}{{/if}}">
	{{makeTitle}}
	</a>
	{{> active-menu.mustache}}
	</li>
	{{/if}}

In reality, the property hides the active @stylesheet menu item itself as well as its children:

documentjs/site/default/templates/menu.mustache

Lines 16 to 18 in 6978b85

	<a class="sidebar-title" href="{{urlTo name}}" data-search="{{#if title}}{{title}}{{else}}{{{name}}}{{/if}}">
	{{makeTitle}}
	</a>

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}}

documentjs/site/default/templates/menu.mustache

Lines 8 to 10 in 6978b85

	{{#if ../active.hideChildrenInMenu}}
	{{> active-menu.mustache}}
	{{/if}}

Unfortunately, this renders the children of EVERY parent menu:

{{#each parents}}
  <li class="search-container active parent">
    <a class="sidebar-title" href="{{urlTo name}}" data-search="{{#if title}}{{title}}{{else}}{{{name}}}{{/if}}">
      {{makeTitle}}
    </a>
    {{#if ../active.hideChildrenInMenu}}
      {{> active-menu.mustache}}
    {{/if}}
  </li>
{{/each}}

documentjs/site/default/templates/menu.mustache

Lines 3 to 12 in 6978b85

	{{#each parents}}
	<li class="search-container active parent">
	<a class="sidebar-title" href="{{urlTo name}}" data-search="{{#if title}}{{title}}{{else}}{{{name}}}{{/if}}">
	{{makeTitle}}
	</a>
	{{#if ../active.hideChildrenInMenu}}
	{{> active-menu.mustache}}
	{{/if}}
	</li>
	{{/each}}

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:

/**
 * @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:

{{#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.

[justinbmeyer]

I think it looks good.