JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q61432F
  • License MIT

Add link to customizable 'help-menu' popup to `prm-search-bookmark-filter-after`

Package Exports

  • primo-explore-help-menu

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (primo-explore-help-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

primo-explore-help-menu npm package

Add link to customizable 'help-menu' popup to prm-search-bookmark-filter-after (top nav bar)

Screenshots

dialog window with content list help-menu dialog

opened in new window with item selected help-menu window

Usage

Adding the Package to your view in primo-explore

run the following command from within your view's main directory to add it as a dependency.

$ npm install --save-dev primo-explore-help-menu

this should add the following line to your package.json file...

"primo-explore-help-menu": "^1.1.1"

and add the contents of this repository (at that npm version) into a node_modules/primo-explore-help-menu directory for your current view. the presence of this package should mean that the package was successfully installed and added to your project.

Installing/Importing it

from here you'll have to edit your main.js (or config.module.js) file to import the package, and add both 'helpMenuContentDisplay' and 'helpMenuTopbar', to the dependencies inside of your 'viewCustom' module:

angular.module('viewCustom', ['angularLoad', 'helpMenuContentDisplay',  'helpMenuTopbar'])

if you're using --browserify, the import line should be import 'primo-explore-help-menu'; and a working example of the whole thing should be found in src/.main.js.

if you're not, (i.e. you're still using custom.module.js with raw concatenation), simply copy/paste the help-menu.js file from node_modules/primo-explore-help-menu into your js/ directory and use import './help-menu.js'; instead.

note: additions from 1.1.0 forward will not be visible unless you have an help_en_US.html uploaded

Adding Content

To add your own content, specify a list_of_elements variable within a constant object called 'helpMenuConfig' and attach it to your primo angular module (app) like so:

// main.js
import {my_custom_list_of_elements} from 'my_long_list_of_json_objects';

app.constant('helpMenuConfig', { "list_of_elements": my_custom_list_of_elements });

Make sure that each object in the list of elements matches the following structure:

{
  "id":"my-custom-help-entry",
  "title":"My Custom Help Entry",
  "icon":{"group":"action", "code":"description"},
  "description":"brief description of the entry's purpose (optional)",
  "template":"<h3>A valid Heading</h3><p>relevant information below that heading</p>"
}

...including intentionally empty objects in the list ({}) to form the dividers.

note: the iconset being used is from material.io and is included within primo

Additional Customization

the following table describes describes some additional configuration options that are currently afforded to you by the package. an example implementation of this section can be found within this repo at src/.main.js:

name default description
logToConsole true controls whether or not messages about what's going on in the component are console.log()-ed (visible in inspector)
publishEvents false controls whether the logEventToAnalytics is actually triggered, ensurng only real traffic is tracked
logEventToAnalytics see example here's an opportunity to hook in whatever event tracking you have, (we use google analytics)
helpMenuWidth 500 (px) the width of the dialog box and associated popup

Contributing

You're more than welcome to fork this repository, make some changes, and contribute it back by creating a pull request.

If you have any issues with this package or ideas for how to make it better, don't hesitate to let us know by submitting a new issue.

In both of these cases, it would help us if you make sure to add on the appropriate labels (including especially help-menu) so that we can keep track of what your pull request or issue relates to.

If you get stuck, send us a message on our gitter, and we'll try to help you out.