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

$3

Install the library

$ npm i --save cloudcms-navigation

$3

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

$3

In your code:

``javascript
// 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:
`javascript
// 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:
`javascript
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:
`javascript
// 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.