bitovi / bitovi/documentjs

@stylesheet tag breaks menu with 2 or more parents

Open
#252 1 comment 1 reaction 1 assignee Claimed by @akagomez View on GitHub
in progress
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.

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.