cloudcms-navigation

Cloud CMS navigation library

Small library to manage menus and breadcrumbs with Cloud CMS

For now this code is extracted from the this tutorial that explains the concepts behind this code and gives an example setup.

Usage

Installation

Install the library

$ npm i --save cloudcms-navigation

Compile from source

1. $ git clone https://github.com/idealley/cloudcms-navigation.git <optional-folder-name>
2. $ npm install
3. $ npm run build
4. optional run tests: $ npm test this will display a code coverage report

Code

In your code:

  // Import the classes
  import { Menu, Breadcrumb } from 'cloudcms-navigation';
  // Newup a menu and/or a breadcrumb object
  const m = new Menu();
  const b = new Breadcrumb();

  // use it for example for an express middelware:
  (req, res, next) => {
    // checking if we have data... if not going to the next middleware
    if(Object.keys(res).indexOf('data') != -1){
        const array = b.parse(b.parentsToTree(res.data.breadcrumb.items, res.data.item[0].parent_doc));
        
        // Generate path value for each items
        res.data.breadcrumb = b.addBreadcrumbPath(array, res.data.item[0]); 

    }
    next();
}
  // and/or 
  (req, res, next) => {
    if(Object.keys(res).indexOf('data') != -1){
        res.data.items = m.parse(m.childrenToTree(res.data.items, res.data.item._doc));
    }
    next();
}

the same but in ES5:

  // Import the classes
  const Menu = require('cloudcms-navigation').Menu;
  const Breadcrumb = require('cloudcms-navigation').Breadcrumb;
  // Newup a menu and/or a breadcrumb object
  const m = new Menu();
  const b = new Breadcrumb();

  ...

Displaying a Breadcrumb

The example breadcrumb middleware produces an array of Objects res.data.breadcrumb in your template you simply need to loop and print all of them in a list:

    ul(style="padding:0;")
        li(style="display:inline;") you are here: 
            a(href='/') home
            span  >
        // Loop through the array    
        - for(var i = 0; i < data.breadcrumb.length; i++){
        li(style="display:inline;")
        - var carret = i < data.breadcrumb.length -1 ? '>' : ''
            span= ' '
            //print the title of each menu item and the path
            a(href= data.breadcrumb[i].path)= data.breadcrumb[i].title 
            span= carret
        - }

This breadcrumb object could be added to the item it was generated for in cloudcms, thus saving processing time to display pages.

Displaying a Menu

Loop through the returned array:

    // Example with Jade templating engine
    // Loop through the menu items
    each i in menu.items
      ul
        li
            // Print first level items
            a(href= i.path)= i.title
        // Check for children and loop through them
        // if you have deeply nested menus, use recursion.
        if i.children
            each c in i.children
                ul
                    li
                        a(href= c.path)= c.title

Contributions

Contributions are welcome, submit pull requests.

In order to get started developping:

1. 3 first steps from "Build from source"
2. launch a CLI and run $ npm run dev this will run webpack in "watch mode" and recompile lint your code as you save.
3. launch another CLI and run $ npm run test:watch this will run the test suite as soon as you save anything.