https://github.com/idealley/cloudcms-navigation
Package to help display navigations (menu breadcrumb) of menus managed in Cloud CMS
https://github.com/idealley/cloudcms-navigation
cloud cloudcms cms menu menu-navigation navigation
Last synced: 5 months ago
JSON representation
Package to help display navigations (menu breadcrumb) of menus managed in Cloud CMS
- Host: GitHub
- URL: https://github.com/idealley/cloudcms-navigation
- Owner: idealley
- License: mit
- Created: 2017-07-07T09:55:26.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-10T20:59:38.000Z (about 8 years ago)
- Last Synced: 2025-10-05T10:32:22.174Z (8 months ago)
- Topics: cloud, cloudcms, cms, menu, menu-navigation, navigation
- Language: JavaScript
- Homepage:
- Size: 52.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://coveralls.io/github/idealley/cloudcms-navigation?branch=master)
# Cloud CMS navigation library
Small library to manage menus and breadcrumbs with Cloud CMS
For now this code is extracted from the [this tutorial](https://idealley.gitbooks.io/cloud-cms-how-to-manage-menus/content/) 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 `
2. `$ npm install`
3. `$ npm run build`
4. optional run tests: `$ npm test` this will display a code coverage report
### Code
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.