o-contextual-help

Quick start

Start by adding a list of help topics to display, via configuration script element.

<script type="application/json" data-o-contextual-help-config>
  {
    "helpTopics": [
      "console/student/freetrial",
      "console/student/studentresources",
      "console/student/contactsupport"
    ]
  }
</script>

This gives o-contextual-help something to load. The topics list is presented in order and the values are derived from the path of the files at https://github.com/Pearson-Higher-Ed/help-content in the /out directory without the language code. The language code can be set dynamically in this component and it's addition to the fetch URL is managed for you.

Do not include the filename extension in the list of configured topics.

This module will automatically inject and initialize itself on the page, as a new o-drawer with an ID of 'o-contextual-help-drawer'. The object itself will then be added on to the same element as .oContextualHelp. So, to access the object after it's initialized, simply use the following.

document.getElementById('o-contextual-help-drawer').oContextualHelp;

Initialization

This module will automaticall initialize when o.DOMContentLoaded fires. It can be manually initialized with the static init() method.

API

Methods

open()

Opens the drawer.

close()

Closes the drawer.

toggle()

Toggles the current state of the drawer.

setLanguage(langCode)

Sets the internal member variable for use in fetching content. Default is 'en-us'.

openHelpTopic(topicId)

Directly opens the help contents to a specific topic. This will bypass the list and is also used internally to go from the help topic list to the help topic contents.

addTopics(topic || [topic, topic, ...])

Add a topic or topics to the internal array of topics to display in the list.

removeTopics(topic || [topic, topic, ...])

Remove a topic or topics to the internal array of topics to display in the list.

removeAllTopics()

Empty the internal help topic array.

getTopics()

Returns the internal help topic array.

Events

Refer to the o-drawer documentation for the supported events.

document.getElementById('o-contextual-help-drawer').addEventListener('oDrawer.open', function (e) {
  // Do something
});

Accessibility

The module will automatically update aria-expanded depending on the state of the target element.

License

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

Pearson-Higher-Ed / o-contextual-help

readme