npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@pearson-components/app-header

v3.0.2

Published

Global responsive header for Pearson applications.

Downloads

339

Readme

Deprecated support

Updated to support Node 20 in v3

Usage

If you are consuming version 1.0.0+ of app-header, you must consume the Elements SDK, as it is a required dependency. It is looking for the /fonts assets in the root of your served application.

Assumption: You have Node v4+ and npm 2+ installed.

> npm i --save @pearson-components/app-header

Bundle (Recommended)

The javascript bundle is available in /node_modules/@pearson-components/app-header/build/dist.app-header.js.

Add the following script include to your web page:

	<script src="path/to/dist.app-header.js"></script>

Please see the demo code for examples of how to dispatch the event to initialize the app-header.

Note this example is using CustomEvent, which must be poly-filled for IE.

document.dispatchEvent(new CustomEvent('o.DOMContentLoaded', {
    detail: {
      element: element,
      config: config
    }
  }));

The config property options are outlined further down in this README.

CommonJS

This method requires a web bundler, such as webpack or browserify.

After installing the app-header from npm, define the target element and configuration options.

var AppHeader = require('@pearson-components/app-header');
var appHeader = new AppHeader(element, options);

Via CDN

This component is published to NPM and is therefore available via unkpg.com. This allows teams to be able to consume the component through a simple script include. Below is an example which allows a basic App-Header to appear on the page.

<html>
  <head>
    <script type="text/javascript" src="https://unpkg.com/@pearson-components/[email protected]/build/dist.app-header.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var element = document.getElementsByTagName('body');
        var config = {
          session: 'session',
          user: {givenName: 'Bender'},
          mode: 'Basic',
          onLogin: function () { alert('You signed in'); },
          onLogout: function () { alert('Buh-bye'); }
        };

        document.dispatchEvent(new CustomEvent('o.DOMContentLoaded', {
          detail: {
            element: element,
            config: config
          }
        }));
      });
    </script>
  </head>
  <body>
    <script>
      if (document.body.children[0].nodeName !== 'svg') {
        var pe_ajax = new XMLHttpRequest();
        pe_ajax.open("GET", "https://unpkg.com/[email protected]/dist/icons/p-icons-sprite-1.1.svg", true);
        pe_ajax.responseType = "document";
        pe_ajax.onload = function(e) {
          document.body.insertBefore(
            pe_ajax.responseXML.documentElement,
            document.body.childNodes[0]
          );
        }
        pe_ajax.send();
      }

      document.dispatchEvent(new CustomEvent('DOMContentLoaded'));
    </script>
  </body>
</html>

Configuration

Configuration properties may be passed as an object argument (preferred) to the constructor or defined in a configuration block on the page:

<script data-o-app-header-config type="application/json">
  {
  	"consoleBaseUrl": "https://...",
  	"session": "Session"
  }
</script>

Refer to the options object for a list of properties.

Integration

Refer to the Integration document, which details use with piSession.js and context-based mode switching.

API

Constructor

new AppHeader([element], [options])

Creates a new instance of AppHeader.

  • element: an HTMLElement or selector string. The selected element will be replaced with the header element unless it is document.body, in which case the header will be preprended to the body content.
  • options: an object with the following properties:

| Property | Type | Description | |--------------------------|------------------------|-----------------------------------| | consoleBaseUrl | string | The consuming application base URL (default: https://console.pearson.com) | | links | object | Links in the user dropdown. Refer to the Links section for the default list | | mode | string | The mode. Refer to the Modes section for a list of supported modes and options. | | company_logo | string | default: Pearson logo | | app_logo | string | The application logo | | register | boolean | To change 'Sign In' to 'Sign in or Register' |

var AppHeader = require('@pearson-components/app-header');
var appHeader = new AppHeader({ mode: 'Signed Out', showLoginControls: false });

Logo

Pass the url's for the property "company_logo" and "app_logo" as an object, and they will replace the default Pearson logo (preferred).

  • company_logo: a string with the url for the company logo image.
  • app_logo : a string with the url for the application logo image.

When only the application logo is added, the default Pearson logo will be added along with the application logo image.

The height property of both logos should be 37px.

'Sign In'

If the 'Sign In' wording needs to be changed to 'Sign in or Register' the boolean property register is passed as true

Default register is false

Methods

setMode(mode, [options])

Sets the mode. Refer to the Modes section for a list of supported modes and options.

  • mode: a string that indicates the header mode.
  • options: an object containing the mode options.

Links object

By default the links object looks like:

| Link Name | URL | |--------------------------|-----------------------------------------------| | home | {consoleBaseUrl}/console/home | | myAccount | {consoleBaseUrl}/account/manage/account | | termsOfUse | {consoleBaseUrl}/account/manage/tos | | privacyPolicy | {consoleBaseUrl}/account/manage/privacy |

Modes

The application header supports multiple modes that can be configured depending on the type and state of the application.

Mode: Signed Out

Use this mode when the user is anonymous.

new AppHeader({ mode: 'Signed Out', showLoginControls: false });

Options

| Property | Type | Description | |--------------------------|------------------------|-----------------------------------| | showLoginControls | Boolean | If true, show the 'Sign In' nav item. Default: true. | onLogin | Function or string | A callback function that will be called when the user clicks the Sign In nav item. If this value is a string, the component will look in the global scope for a function with a matching name. |

Mode: Basic

Use this mode when the user is authenticated.

new AppHeader({
	mode: 'Basic',
	user: {
		givenName: 'John'
	},
	courseItems: [
		{ text: 'Physics', href: 'https://example.com/physics' },
		{ text: 'Chemistry', href: 'https://example.com/physics' }
	]
});

Options

| Property | Type | Description | |--------------------------|------------------------|-----------------------------------| | user | Object | The user data. | | user.givenName | string | The user's given name. | | courseItems | Array<Object> | A collection of course menu items. | | courseItems.text | string | The menu item text. | | courseItems.href | string | The menu item url. | | courseItems.onClick | Function | If provided, the function will be called when the user clicks the menu item. | | onLogout | Function or string | A callback function that will be called when the user clicks the Sign Out menu item. If this value is a string, the component will look in the global scope for a function with a matching name. |

Mode: Course

Use this mode when the user is authenticated and is in an application that adheres to the course format.

new AppHeader({
	mode: 'Course',
	user: {
		givenName: 'John'
	},
	courseNav: {
		heading: { text: 'Physics', href: 'https://example.com/physics' },
		items: [
			{ text: 'Performance', href: 'https://example.com/performance' },
			{ text: 'Assessments', href: 'https://example.com/assessments' }
		]
	}
});

Options

| Property | Type | Description | |--------------------------|------------------------|-----------------------------------| | user | Object | The user data. | | user.givenName | string | The user's given name. | | courseNav | Object | An object containing options for course navigation menu items. | | courseNav.heading | Object | An object representing the current course. | | courseNav.heading.text | string | The heading menu item text. | | courseNav.heading.href | string | The heading menu item url. | | courseNav.items | Array<Object> | The course navigation menu items. | | courseNav.items.text | string | The menu item text. | | courseNav.items.href | string | The menu item url. | | courseNav.items.active | Boolean | Represents the active area of the course. If true, the menu item will be disabled. Default: false. | | onLogout | Function or string | A callback function that will be called when the user clicks the Sign Out menu item. If this value is a string, the component will look in the global scope for a function with a matching name. |

Mode: Integration

Use this mode when the application is configured as an integration with a non-Pearson application or web property—for example, a third party LMS.

new AppHeader({ mode: 'Integration' });

Events

| Event Name | Description | |--------------------------|-----------------------------------------------------| | oAppHeader.help.toggle | Fires when the Help nav item is clicked. | | oAppHeader.login | Fires when the Sign In nav item is clicked. | | oAppHeader.logout | Fires when the Sign Out menu item is clicked. |

document.addEventListener('oAppHeader.help.toggle', function (e) {
	// Do stuff
});

z-index

By default, the header's z-index property is set to 1000. This value can be changed by setting the $o-app-header-z-index SASS variable.

Changing the header.template

If you make changes to the header.template file, the template generator needs to be run (manually).

node bin/gen-template srcFile endFile

The endFile here is template.js, meaning if you made a change in header.template, your command is

node bin/gen-template src/html/header.template src/js/template.js

Browser support

Browser versions that do not support WeakMap must use a polyfill, for example via the polyfill service:

<script src="https://cdn.polyfill.io/v1/polyfill.min.js?features=default,WeakMap"></script>

Contributing

Please review the guidelines for contributing before getting started.

Toolchain

Recommendation: If you are using different node versions on your machine, use nvm to manage them.

Demo

The following npm script will build the component, fire up a webpack dev server at localhost:8080/demo, and hot reload any saved changes to the source without having to refresh the browser.

npm install
npm run dev

Test

The following npm script will execute the unit tests.

npm test

How do I debug?

Source maps are enabled for the webpack dev server. Using Chrome dev tools - open the "Sources" tab, navigate to top/webpack://./, and you will find the original source files for which you can set breakpoints in Chrome's debugger.

License

This software is published by Pearson Education under the MIT license.