Developer

Tamara Marnell, Orbis Cascade Alliance

Description

Add a button over the cover image in a full record that, when clicked, opens the largest available version of that image in a new window.

System Components

Alma Discovery Configure Views

Skillset Requirements

Alma Discovery Configure Views, JS, and CSS

Accessibility

Button has a title, but has not been tested for accessibility.

Browser Support

Tested on Chrome, Firefox, and Edge.

Mobile Support

Primo VE hides covers at small resolutions.

Implementation

Overview

To enable this module, you will need to…

• Declare the module and options in your custom.js file (steps 2 through 4)
• Style the button in your custom1.css file (step 6)

Steps

1. Turn on inheritance from the Central Package.
2. In your local package, in the custom.js file, include the module ‘enlargeCover’ in your app definition. For example:
   
   var app = angular.module('viewCustom', ['enlargeCover']);
   
3. Also in the custom.js file, add the following line of code within the anonymous function (that is, before the closing brackets at the end of the file):
   
   app.component('prmSearchResultThumbnailContainerAfter', { template: '<enlarge-cover />' });
   
4. If you want to customize which resource types will have a button, add the following block of code within the anonymous function and edit the values.
   
   app.value('enlargeCoverOptions', {
  resource_types: [
'book',
   'pbook',
   'dvdvideo',
   'videocassette'
]
});
   
   Edit the list of resource types with the codes for the types you want to include. For example, to enable the button for Audio CDs, add a new entry for ‘audiocd.’ To disable the button for DVDs, remove the entry ‘dvdvideo’.
   
   You can find the code for the resource type you want to target by using browser tools to examine the label above the title in a brief or full record. In the span surrounding the text (for example, “Audio CD”) look for the attribute “translate.” Use the text after “mediatype” (for example, translate=”mediatype.audiocd”).
   
5. In your local package, in the custom1.css file, add the following rule-set to style the button to invisibly cover the thumbnail image.
   
   enlarge-cover button.md-button {
position: absolute;
top: 0;
margin: 0;
height: 100%;
width: 100%;
}

/* Override md-button styles */
enlarge-cover button.md-button:hover,
enlarge-cover button.md-button:hover:not([disabled]),
enlarge-cover button.md-button:focus,
enlarge-cover button.md-button:focus:not([disabled]) {
background-color: rgba(0,0,0,0.1);
}
   
6. Zip and upload your package in Alma Discovery. Save your view.