crds-shared-header

0.7.3 • Public • Published

crds-shared-header

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

Requirements

This project requires the following dependencies...

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.

Readme

Keywords

none

Package Sidebar

Install

npm i crds-shared-header

Weekly Downloads

7

Version

0.7.3

License

BSD-3-Clause

Unpacked Size

2.37 MB

Total Files

47

Last publish

Collaborators

  • candrews_crds
  • rdonnelly02
  • tcmacdonald
  • dan.rye
  • dillon.courts
  • d3m
  • crds_npm_org