Crds-shared-header NPM

crds-shared-header

crds-shared-header is a framework-agnostic implementation of Crossroads' global header.

Requirements

This project requires the following dependencies...

crds-styles
Bootstrap.js (only the JavaScript)
jQuery (required by Bootstrap)

Usage

Install this package via NPM by executing the following command in your project directory...

npm install crds-shared-header --save

Include the compiled bundle before the closing <body> tag in your HTML like this...

<script src="./node_modules/crds-shared-header/dist/bundle.js"></script>

The header class will be available on the global CRDS object. Instantiate and render like so...

<script>
(function(){
  var options = { el: '[data-header]' };
  var header = new CRDS.SharedHeader(options);
      header.render();
})();
</script>

The following options can be passed when the object is instantiated...

Options	Description	Default
`el`	Selector to bind the rendered header to	`[data-header]`
`contentBlockTitle`	The title of the contentBlock used to populate the navigation	`sharedGlobalHeader`
`contentBlockCategories`	Defines category containing `contentBlockTitle`	`['common']`
`userMenuContentBlockTitle`	The title of the contentBlock used to populate a signed-in user's menu	`sharedGlobalHeaderUserMenu`
`userMenuContentBlockCategories`	Defines category containing `userMenuContentBlockTitle`	`['common']`
`cmsEndpoint`	Environmentally specific URL to the CMS	`https://contentint.crossroads.net/`
`appEndpoint`	URL prepended to the sign-in button	`https://int.crossroads.net/`
`imgEndpoint`	URL prepended to the user avatar images	`https://gatewayint.crossroads.net/gateway/api/image/profile/`
`crdsCookiePrefix`	prefix to prepend to environment's cookie names. int would be intsessionId	`int`

Authentication

When a user logs into the site, the sign-in button at the right side of the menu should be replaced with their profile image and a dropdown menu containing account specific links. Currently, the script is configured to respond accordingly whenever a cookie named ${crdsCookiePrefix}sessionId is set for the current session.

document.cookie = 'intsessionId=21864538764'; //required
document.cookie = 'username=Sean'; // optional

Browser Support

In order to support IE versions 10 and 11, you'll need to include the following polyfills in your page/project...

License

This project is licensed under the 3-Clause BSD License.

@infinitebrahmanuniverse/nolb-crd @everything-registry/sub-chunk-1401

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago