Developer

Doug Eriksen (Seattle University)
Documentation updated for Primo VE by Carlos Torres (Seattle University)

Description

This procedure allows you to insert custom links at the bottom of the drop-down menu in the upper right-hand corner of your Primo pages.

System Components

Alma Discovery Configure Views

Skillset Requirements

Alma Discovery Configure Views, JS, and CSS

Accessibility

Not tested for accessibility. The code does put the “aria-label” into the declaration, so it should have the same accessibility as the rest of that menu.

Browser Support

Tested on Firefox, Chrome, Safari, on Mac, and the new Chrome-based Edge on Windows.

Implementation

Overview

To enable this module, you will need to:

• Declare the directive and options in your custom.js file
• Style the button in your custom1.css file

Steps

1. Turn on inheritance from the Central Package.
2. In your local package, in the custom.js file, include the module ‘eShelfLinks’ in your app definition. For example:
   
   var app = angular.module('viewCustom', ['eShelfLinks']);
   
   
3. Also in the custom.js file, insert the code below and customize with your links:
   
   app.value('eShelfOptions', {
  items: [
    {
      text: "COCC Library",
      label: "COCC Library",
      link: "https://www.cocc.edu/library",
      icon: "content:ic_link_24px"
    },
    //etc.
  ]
});
   
4. In your custom1.css file, insert the following:
   
   /* eshelf.menu link customizations */
a.custom-link{
color:inherit;
padding-bottom: 0px;
padding-top: 5px;
padding-left:3px;
}

a.custom-link:hover {
text-decoration: none;
background-color: unset;
box-shadow: none;
}

custom-directive md-icon {
opacity: 0.5;
}
   
5. Zip and upload your package in Alma Discovery. Save your view.