primo-explore-clickable-logo-to-any-link

Description

The library's logo in the top bar becomes a clickable link to a specified URL.

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:

   npm install primo-explore-clickable-logo-to-any-link --save-dev
   

Usage

Once installed, inject clickableLogoToAnyLink as a dependency:

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

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

import 'primo-explore-clickable-logo-to-any-link';

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

name	type	usage
url	string	the url that the clickable link will open
altText	string	for the aria label and alt tag
iconLink	string	replace the icon with a custom URL

Translations

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

Example

app.constant('clickableLogoLinkConfig', {
  url: '{urls.library}',
  altText: '{nui.header.logoAlt}',
  iconLink: 'http://cdn.library.myinstitution.edu/icon.svg'
});
// Alternately...
app.constant('clickableLogoLinkConfig', {
  url: 'http://library.myinstitution.edu',
  altText: 'My Institution',
  iconLink: 'http://cdn.library.myinstitution.edu/icon.svg'
});

Acknowledgements

Thanks to https://github.com/Alliance-PCJWG/primo-explore-clickable-logo for the idea