search-bar-sub-menu-studio

primo-explore-search-bar-sub-menu

Description

Add a nav bar underneath the search bar to provide additional links in the primo-explore UI.

Screenshot

Installation

1. Assuming you've installed and are using primo-explore-devenv.

2. Navigate to your template/central package root directory. For example:

   cd primo-explore/custom/MY_VIEW_ID
   

3. If you do not already have a package.json file in this directory, create one:

   npm init -y
   

4. Install this package:

   yarn add primo-explore-search-bar-sub-menu --dev
   # OR
   npm install primo-explore-search-bar-sub-menu --save-dev
   

Usage

Once installed, inject searchBarSubMenu as a dependency:

let app = angular.module('viewCustom', ['searchBarSubMenu'])

Note: If you're using the --browserify build option, you will need to first import the module with:

import 'primo-explore-search-bar-sub-menu';

Then add the search-bar-sub-menu directive to the prmSearchBarAfter component:

app.component('prmSearchBarAfter', {
  template: '<search-bar-sub-menu></search-bar-sub-menu>'
})

Config

You'll need to configure the module by passing it an array of objects as an angular constant:

name	type	usage
cssClasses	string	extra css classes to put on the buttons, i.e. 'button-over-dark' if your background color is dark
name	string	the text that will appear as the button link
description	string	for the aria label
action	string	url for the link. always opens in a new window.
icon	object	defines the icon for the link. must be chosen from https://material.io/icons/. you need to specify both the name of the action "set" (see link) and the icon itself, in the form "ic_person_outline_24px". note that all icons do not work so you may have to experiment some
show_xs	boolean	true is you want to continue to show button text in xs screens and only show the icons. false by default

Translations

You can use translations to access back office text by wrapping the value in curly braces, e.g. {nui.menu.librarycard}. Anything that works in the primo templates link this <span translate="nyu.menu.librarycard"></span> will work if it's available in the current scope.

Styles

Change the background color of the menu bar:

search-bar-sub-menu div.search-bar-sub-menu {
  background-color: green !important;
}

Change the padding between the search bar the menu bar, these are the default values:

prm-search-bar {
  padding-bottom: 58.5px;
}
.__sm prm-search-bar {
  padding-bottom: 49.5px;
}
.__xs prm-search-bar {
  padding-bottom: 36px;
}

Where 36px is the default height of the menu bar.

Example

app.constant('searchBarSubMenuItems',
  [
    {
      name: "Back to Primo Classic",
      description: "Back to Primo Classic",
      action: "http://primo.school.edu/primo_library/libweb/action/search.do?vid=" + viewName,
      icon: {
        set: 'navigation',
        icon: 'ic_arrow_back_24px'
      },
      show_xs: true,
      cssClasses: 'button-over-dark'
    },
    {
      name: "Library Hours",
      description: "Library Hours",
      action: "https://school.edu/library-hours",
      icon: {
        set: 'av',
        icon: 'ic_av_timer_24px'
      },
      cssClasses: 'button-over-dark'
    }
  ]
);
 

Tests

We are using Yarn to manage dev dependencies.

yarn
yarn test