New UI Javascript Third Parties Changelog
Primo May 2023 Release changelog
Few accessibility colors contrast fixes & changes:
- On “Tweak my results” when the user chooses some facet, the color of the “Apply Filter” is now only green text color without BG, and only when the user is focused or hovering on it, the green BG appears.
- The color of the text inside the gray box of “Report a problem” is now darker.
- The warning text color inside the “how to get it” form is now darker.
Primo April 2023 Release changelog
Mobile users will see the text of “page number” (Page 1) at the top of the results as always but centered rather than in the left/right corner like in Desktop / iPad.
The following change appears on the “search-result-list.html” file.
The “prm-search-result-page-range” element and the text after it were rapped with a Div.
This is how it looks on a mobile view:
Primo February 2022 Release changelog
The following change appears on the “My Library account” page.
On account-overview.html:
- We replaced the h3 tag of the institution list with a span tag.
On facet.html file, we moved both “expand-results-ctm” & “search-fulltext-ctm” classes from md-switch attribute to the Div that wraps each md-switch.
*Note: for VE customers these changes will be placed on the December release.
From:
<div ng-if="::$ctrl.showExpandMyResultsBtn()">
<md-switch ng-model="$ctrl.pcAvailability"
ng-change="$ctrl.changePcAvailability()"
md-no-ink
class="tiny-switch zero-margin expand-results-ctm"
aria-label="{{($ctrl.pcAvailability ? 'nui.aria.expandresults.active' : 'nui.aria.expandresults.inactive') | translate}}"
ng-class="$ctrl.pcAvailability ? 'active' : 'inactive'"
layout-align="start start"
data-qa="expand_my_results_slider_btn">
<span class="slider-text-wrap" translate="expandresults"></span>
<md-tooltip ng-if="!$ctrl.pcAvailability">
<span translate="nui.expandresults.tooltip.inactive"></span>
</md-tooltip>
<md-tooltip ng-if="$ctrl.pcAvailability">
<span translate="nui.expandresults.tooltip.active"></span>
</md-tooltip>
</md-switch>
</div>To:
<div ng-if="::$ctrl.showExpandMyResultsBtn()" class="expand-results-ctm">
<md-switch ng-model="$ctrl.pcAvailability"
ng-change="$ctrl.changePcAvailability()"
md-no-ink
class="tiny-switch zero-margin"
aria-label="{{($ctrl.pcAvailability ? 'nui.aria.expandresults.active' : 'nui.aria.expandresults.inactive') | translate}}"
ng-class="$ctrl.pcAvailability ? 'active' : 'inactive'"
layout-align="start start"
data-qa="expand_my_results_slider_btn">
<span class="slider-text-wrap" translate="expandresults"></span>
<md-tooltip ng-if="!$ctrl.pcAvailability">
<span translate="nui.expandresults.tooltip.inactive"></span>
</md-tooltip>
<md-tooltip ng-if="$ctrl.pcAvailability">
<span translate="nui.expandresults.tooltip.active"></span>
</md-tooltip>
</md-switch>
</div>So, for example, if the user wants to switch the order of these options it can be done like this:
.expand-results-ctm {
order: 1;
}
.search-fulltext-ctm {
order: 0;
}
Primo November 2021 Release changelog
The following headings changes appear on the “View online” on full display.
On almaViewitItems.html:
- The first text box with explanation bullets changed from h4 to a div
- The item package name changed from h3 to h5.
- The item status changed from h4 to h6.
All this is to keep HTML “headings” in the right order.
Primo August 2021 Release changelog
The following changes and updates have been added to the August release:
- Availability to customize “Messages and Blocks” separately.There are now separate “message” / “block” CSS classes on each “md-list-item” to allow different customization.
The way to do that in the customization package (for example to change each background color):
For the Block and Messages overview: .block { background-color: red; } .message { background-color: green; }For the Block and Messages tab:
prm-messages-and-blocks .block{ background-color: red; } prm-messages-and-blocks .message{ background-color: green; }
Primo MAy 2021 Release changelog
The following changes and updates have been added to the May release:
New UI for the pagination and adding new feature “Results number per page”
- For this develop we added a Div that wrap two separated HTML files, one for the current pagination and one for the new pagination & results per page feature.
In the code it looks like this:
- Another code change was done on the “_page-nav-menu.scss” file:
We wrapped all the CSS code with a unique ID “#speedDialWidget” to ensure that the new pagination HTML code & CSS values will not affect the current pagination:
Same ID was added in the same file for the “.facet-to-left” class
- For the new pagination, there is also an ID that wrapping all of the CSS code (#resultsPerPage):
*All these changes above may affect your customization.
Primo November 2020 Release changelog
The following changes and updates have been added to the November release:
- “Angular material” has been upgraded from 1.1.0-rc.5 to 1.1.22.
- Significant changes in the system colors to meet the WCAG accessibility standards requirements
Some of the changes are relevant to our default system colors that control the backgrounds, font color, etc…
An infrastructure change has been made to the appearance of the buttons colors.
All changes were implemented by using color or background-color properties; therefore, it can be changed using the same properties.
The main idea: whenever we have a button with a background color that has text or an icon inside it, their color will contrast with the background (e.g. black text on white background color).
Example:
Say the “ADVANCED SEARCH” button looks like this, note the “+” sign:
And when hovering/focusing on it after November release changes, the “ADVANCED SEARCH” button looks like this. Note that you cannot see the “+” sign because of its background:
To solve this issue, you could edit your custom CSS file by changing the background-color property to “transparent”:
Or change the background-color property to any other color (yellow in this example):
Tip:
Here is an example of how to change the text color of the main-menu links:
.top-nav-bar-links .md-button.button-over-dark{
color:(any color you want);
}
Following the Angular Material upgrade there are few UX changes:
- Another change effect regards the way drop down values look when focusing on it:
Here is the way it appears when you focus on it (“State” is a placeholder):
Here is the way it appears when you focus on it and also choose some value from the list:
Only if you have a dropdown and you already see one of the values from the list when you focus on it:
- Tab key is closing now the main menu modal – navigation within the menu elements can be done only using the arrows.
- Send to action navigation within the actions can be done with tabs, however, when an action is already selected the navigation can be done using the arrows.
- The ability to check checkboxes with the Enter key is a nice to have feature, the spacebar is the key to check the checkboxes.
- The Enter key selection support was removed as part of the upgrade to a newer angular, thus the behavior changed so that only spacebar performs the action to check the checkboxes.
Structural change in two HTML files:
In order to meet the changes regarding our angular material upgrade, we had to do minor DOM changes in two places, the language selection area and the account overview (regarding alma institution list).
- On the language selection area – “language-selection.html”:
This is the original code:
<md-list-item ng-repeat="language in ::$ctrl.languages" layout="row"
value="{{::language}}"
class="no-padding _md-button-wrap _md md-clickable"
role="listitem"
tabindex="-1">
<div class="md-button md-no-style zero-padding">
<button class="md-no-style md-button md-ink-ripple width-100"
ng-click="$ctrl.changeLanguage(language) && $ctrl.closeAfterSelectLang()"
aria-label="{{$ctrl.selectedLang(language)}}">
</button>
<div class="md-list-item-inner">
<p class="ng-binding" translate=mypref.language.option.{{::language}}></p>
</div>
</div>
</md-list-item>This is the new code after the change:
We take the “P” attribute and put it into the “button” attribute and change it to a “span”.
<md-list-item ng-repeat="language in ::$ctrl.languages" layout="row"
value="{{::language}}"
class="no-padding _md-button-wrap _md md-clickable"
role="listitem"
tabindex="-1">
<div class="md-button md-no-style zero-padding">
<button class="md-no-style md-button md-ink-ripple width-100"
layout="row"
layout-align="center center"
ng-click="$ctrl.changeLanguage(language) && $ctrl.closeAfterSelectLang()"
aria-label="{{$ctrl.selectedLang(language)}}">
<span class="ng-binding" translate=mypref.language.option.{{::language}}></span>
</button>
</div>
</md-list-item>- On the account overview (regarding alma institution list) – “account-overview.html”:
This is the original code:
<md-list-item class="md-2-line"
ng-repeat="inst in $ctrl.institutionsList()"
ng-click="$ctrl.selectedInstitution1(inst.value)"
ng-class="{'is-selected': $ctrl.selectedInstitution.institutionCode === inst.value.institutionCode}"
aria-label="{{::$ctrl.getInstitutionButtonAriaLabel(inst)}}">
<!-- style ng-click and tabindex attributes are necessary so that the tooltip on the has activity icon works inside md-list-item-->
<div ng-if="$ctrl.isActiveFilter() && inst.hasActivity" style="z-index: 1" ng-click="$ctrl.selectedInstitution1(inst.value)"
tabindex="-1">
<md-tooltip>
<span translate="nui.overview.hasActivityTooltip"></span>
</md-tooltip>
<prm-icon
icon-type="{{$ctrl.accountIcons.hasActivityIcon.type}}"
svg-icon-set="{{$ctrl.accountIcons.hasActivityIcon.iconSet}}"
icon-definition="{{$ctrl.accountIcons.hasActivityIcon.icon}}">
</prm-icon>
</div>
<div class="md-list-item-text">
<h3 class="institution-name">{{inst.label | translate}}</h3>
</div>
</md-list-item>This is the new code after the change:
We took out the “h3” from the div that wrapped it.
<md-list-item class="md-2-line zero-padding"
ng-repeat="inst in $ctrl.institutionsList()"
ng-class="{'is-selected': $ctrl.selectedInstitution.institutionCode === inst.value.institutionCode}"
aria-label="{{::$ctrl.getInstitutionButtonAriaLabel(inst)}}">
<h3 class="institution-name md-button width-100 zero-margin"
role="heading"
layout="row" layout-align="start center"
ng-click="$ctrl.selectedInstitution1(inst.value)">
{{inst.label | translate}}
</h3>
<!-- style ng-click and tabindex attributes are necessary so that the tooltip on the has activity icon works inside md-list-item-->
<div ng-if="$ctrl.isActiveFilter() && inst.hasActivity" style="z-index: 1"
ng-click="$ctrl.selectedInstitution1(inst.value)"
tabindex="-1">
<md-tooltip>
<span translate="nui.overview.hasActivityTooltip"></span>
</md-tooltip>
<prm-icon
icon-type="{{$ctrl.accountIcons.hasActivityIcon.type}}"
svg-icon-set="{{$ctrl.accountIcons.hasActivityIcon.iconSet}}"
icon-definition="{{$ctrl.accountIcons.hasActivityIcon.icon}}">
</prm-icon>
</div>
</md-list-item>
Primo August 2020 Release changelog
User area expandable menu:
Sign out button is now wrapped with “md-menu-item” and it’s part of the “md-menu-content“. also a blank DIV that wrapped the sign out button was removed.
Facets section:
On facet-exact.html, each facet header (H3) was wrapped by md-button. this is semantically wrong and cause accessibility problem. now the right order is the opposite, the md-button wrapped by H3.
Here is the code before and after:
Before:
<md-button class="section-title"
layout-fill
aria-expanded="{{!$ctrl.facetGroup.facetGroupCollapsed}}"
(click)="$ctrl.toggleFacet($event)"
ng-class="{'collapsed': $ctrl.facetGroup.facetGroupCollapsed}"
translate-attr="{'aria-label': 'facets.facet.facet_{{::$ctrl.facetGroup.name}}'}"
translate-attr-title="{{$ctrl.facetGroup.facetGroupCollapsed ? 'nui.facets.expand.tooltip' :'nui.facets.collapse.tooltip'}}">
<div layout="row" layout-align="start center">
<h3 ng-if="::$ctrl.facetGroup.labelParam" class="section-title-header">
<span translate="facets.facet.facet_{{::$ctrl.facetGroup.name}}"
translate-values="{'idx_0' : $ctrl.facetGroup.labelParam}">
</span>
</h3>
<h3 ng-if="::!$ctrl.facetGroup.labelParam" class="section-title-header">
<span ng-if="::$ctrl.isLocalFacet()" translate-default="{{::$ctrl.facetGroup.name}}"
translate="fulldisplay.{{::$ctrl.facetGroup.name}}"
translate-attr-title="fulldisplay.{{::$ctrl.facetGroup.name}}">
</span>
<span ng-if="::!$ctrl.isLocalFacet()" translate-default="{{::$ctrl.facetGroup.name}}"
translate="facets.facet.facet_{{::$ctrl.facetGroup.name}}"
translate-attr-title="facets.facet.facet_{{::$ctrl.facetGroup.name}}">
</span>
</h3>
<prm-icon icon-type="svg"
svg-icon-set="primo-ui"
icon-definition="chevron-up"
ng-class="{'rotate-180': $ctrl.facetGroup.facetGroupCollapsed}">
</prm-icon>
</div>
</md-button>After:
<!--No need aria-label on this md-button to override inner text nodes in that case.-->
<h3 ng-if="::!$ctrl.facetGroup.labelParam" class="section-title-header">
<md-button class="section-title"
layout-fill
layout="row"
layout-align="start center"
aria-expanded="{{!$ctrl.facetGroup.facetGroupCollapsed}}"
(click)="$ctrl.toggleFacet($event)"
ng-class="{'collapsed': $ctrl.facetGroup.facetGroupCollapsed}"
translate-attr-title="{{$ctrl.facetGroup.facetGroupCollapsed ? 'nui.facets.expand.tooltip' :'nui.facets.collapse.tooltip'}}">
<span class="section-title-header"
ng-if="::$ctrl.isLocalFacet()"
translate-default="{{::$ctrl.facetGroup.name}}"
translate="fulldisplay.{{::$ctrl.facetGroup.name}}"
translate-attr-title="fulldisplay.{{::$ctrl.facetGroup.name}}">
</span>
<span class="section-title-header"
ng-if="::!$ctrl.isLocalFacet()"
translate-default="{{::$ctrl.facetGroup.name}}"
translate="facets.facet.facet_{{::$ctrl.facetGroup.name}}"
translate-attr-title="facets.facet.facet_{{::$ctrl.facetGroup.name}}">
</span>
<prm-icon icon-type="svg"
svg-icon-set="primo-ui"
icon-definition="chevron-up"
ng-class="{'rotate-180': $ctrl.facetGroup.facetGroupCollapsed}">
</prm-icon>
</md-button>
</h3>Add/remove an item to favorites:
In save-to-favorites-button.html, each favorite button (add or remove) is wrapped by span and not by one DIV that wrapped the two buttons (add/remove) together. also, the alert message that confirms whether the action was successfully, changed from DIV to a span.
Here is an example of one button in its new form:
<span ng-if="::(!$ctrl.isFavorites && $ctrl.showBookmark())" class="pin-button">
<md-button ng-if="!$ctrl.showPin()"
ng-class="{'pinned':!$ctrl.showPin(), 'pin-icon-on-mobile': (($ctrl.isOverlayFullView || $ctrl.isFullViweState()) && $ctrl.mediaQueries.xs)}"
ng-disabled="::$ctrl.isFavoritesDisabled()"
class="md-icon-button custom-button pin-button"
aria-label="{{::('nui.aria.favorites.pin' | translate:'{index: \''+$ctrl.index +'\'}')}}"
ng-click="$event.stopPropagation(); $event.preventDefault(); $ctrl.updateFavorites($event);">
<md-tooltip md-delay="400">
<span translate="{{'nui.favorites.add.tooltip' | translate:'{index: \''+$ctrl.index +'\'}'}}"></span>
</md-tooltip>
<prm-icon
[icon-type]="::$ctrl.actionsIcons.pin.type" [svg-icon-set]="::$ctrl.actionsIcons.pin.iconSet"
[icon-definition]="::$ctrl.actionsIcons.pin.icon">
</prm-icon>
</md-button>
<span ng-if="!$ctrl.showPin()" class="accessible-only" aria-live="assertive">{{$ctrl.addFavPinStatus}}</span>
</span>
Primo February 2020 Release changelog
Mobile – UI & UX redesign and change list:
- Action list (this happens also for all the views not just on mobile):
All actions are currently exposed without arrows. - Advanced search:
Advanced search button was moved from the search bar to the main menu area. - Personalize & Save search:
Personalize & Save search buttons are now appear only as icons without text. - Tweak my results:
Tweak my results button are no longer appear on the bottom of the search results. instead we have new icon on the top of the search results.
Clear, close and apply filters buttons are now reorganize and appears at the bottom of the window in on row.
This included code changes such as for example:
From search.html we removed:
<md-toolbar class="default-toolbar bottom-fixed-toolbar"
ng-if="(($ctrl.hasSearchResults() || $ctrl.showPcAvailabilityForScope(scope)) &&
(!$ctrl.isJournalSearch() || ($ctrl.isJournalSearch() && !$ctrl.isSearchFromLettersJS())) &&
(!($ctrl.isDBSearch() || ($ctrl.isJournalSearch() && $ctrl.isPrimoVE && $ctrl.isJournalCategories)) ||
(($ctrl.isDBSearch() || ($ctrl.isJournalSearch() && $ctrl.isPrimoVE && $ctrl.isJournalCategories)) && !$ctrl.isSearchFromLetters() && !$ctrl.isSearchFromCategoryTree())))"
hide-gt-sm>
<div class="md-toolbar-tools" layout="row" layout-align="center ">
<md-button id="sidebar-trigger" class="button-with-icon layout-full-height"
aria-label="{{::('nui.facets.title' | translate)}}"
(click)="$ctrl.showMobileFacets = !$ctrl.showMobileFacets">
<prm-icon ng-if="$ctrl.showMobileFacets"
[icon-type]="::$ctrl.searchBoxIcons.filter.type"
[svg-icon-set]="::$ctrl.searchBoxIcons.filter.iconSet"
[icon-definition]="::$ctrl.searchBoxIcons.filter.icon">
</prm-icon>
<prm-icon ng-if="!$ctrl.showMobileFacets"
[icon-type]="::$ctrl.searchBoxIcons.filterClose.type"
[svg-icon-set]="::$ctrl.searchBoxIcons.filterClose.iconSet"
[icon-definition]="::$ctrl.searchBoxIcons.filterClose.icon">
</prm-icon>
<span ng-if="$ctrl.showMobileFacets" translate="nui.facets.title"></span>
<span ng-if="!$ctrl.showMobileFacets" translate="nui.facets.close"></span>
</md-button>
</div>
</md-toolbar>To search-result-list.html we add:
<!-- Tweak ny reasults -->
<md-button ng-click="$ctrl.showMobileFacets = !$ctrl.showMobileFacets"
class="zero-margin padding-zero facet-filter button-as-link-mobile link-alt-color"
id="sidebar-trigger"
aria-label="{{::('nui.facets.title' | translate)}}"
ng-if="(($ctrl.hasSearchResults() || $ctrl.showPcAvailabilityForScope(scope)) &&
(!$ctrl.isJournalSearch() || ($ctrl.isJournalSearch() && !$ctrl.isSearchFromLettersJS())) &&
(!($ctrl.isDBSearch() || ($ctrl.isJournalSearch() && $ctrl.isPrimoVE && $ctrl.isJournalCategories)) ||
(($ctrl.isDBSearch() || ($ctrl.isJournalSearch() && $ctrl.isPrimoVE && $ctrl.isJournalCategories)) && !$ctrl.isSearchFromLetters() && !$ctrl.isSearchFromCategoryTree())))"
hide-gt-sm>
<prm-icon icon-type="svg"
svg-icon-set="primo-ui"
icon-definition="facets-filter">
</prm-icon>
</md-button>DB search & Journal search categories on mobile:
We add fully support on mobile (IOS and Android) with this feature with some code changes on search.html.
We take out the div with prm-databases-categorize from the md-content and change it (the md-content element) also to a div element.
Original code:
<!--DB Categories for mobile-->
<md-content ng-if="$ctrl.isDBSearch() && $ctrl.isCategories && ($ctrl.mediaQueries.xs || $ctrl.mediaQueries.sm)">
<div style="width: 340px; min-width: 315px"
class="databases-categories"
tabindex="0"
ng-class="{'as-a-drawer': $ctrl.mediaQueries.xs || $ctrl.mediaQueries.sm, 'is-visible': $ctrl.isMobileDBSlider}">
<prm-databases-categorize
style="display: block"
tabindex="-1"
ng-if="(!$ctrl.isShowPartsOnCitationTrails() || $ctrl.searchInProgress) && $ctrl.showTimer"
(search-event)="$ctrl.onSearchBarSearchEvent($event)"
(close-mobile-facet-event)="$ctrl.closeMobileFacet($event)"
[categories-type]="::$ctrl.getCategoriesType()">
</prm-databases-categorize>
</div>
<md-toolbar class="default-toolbar" layout="row">
<div class="md-toolbar-tools" layout="row">
<md-button ng-click="$ctrl.toggleIsMobileDBSlider()"
aria-label="{{'nui.aria.dbcategories.mobileCategories' | translate}}"
class="button-with-icon zero-margin">
<prm-icon icon-type="svg"
svg-icon-set="primo-ui"
icon-definition="file-tree">
</prm-icon>
<span translate="nui.dbcategories.mobileCategories"></span>
</md-button>
</div>
</md-toolbar>
</md-content>
<!--DB Categories for mobile - End-->
Updated code:
<!--DB Categories for mobile - Categories list-->
<div style="width: 340px; min-width: 315px"
class="databases-categories"
tabindex="0"
ng-if="($ctrl.isDBSearch() || ($ctrl.isJournalSearch() && $ctrl.isPrimoVE && $ctrl.isJournalCategories)
) && $ctrl.isCategories && ($ctrl.mediaQueries.xs || $ctrl.mediaQueries.sm)"
ng-class="{'as-a-drawer': $ctrl.mediaQueries.xs || $ctrl.mediaQueries.sm, 'is-visible': $ctrl.isMobileDBSlider}">
<prm-databases-categorize
style="display: block"
tabindex="-1"
ng-if="(!$ctrl.isShowPartsOnCitationTrails() || $ctrl.searchInProgress) && $ctrl.showTimer"
(search-event)="$ctrl.onSearchBarSearchEvent($event)"
(close-mobile-facet-event)="$ctrl.closeMobileFacet($event)"
[categories-type]="::$ctrl.getCategoriesType()">
</prm-databases-categorize>
</div>
<!--DB Categories for mobile-->
<div ng-if="($ctrl.isDBSearch() || ($ctrl.isJournalSearch() && $ctrl.isPrimoVE && $ctrl.isJournalCategories)
) && $ctrl.isCategories && ($ctrl.mediaQueries.xs || $ctrl.mediaQueries.sm)">
<md-toolbar class="default-toolbar" layout="row">
<div class="md-toolbar-tools" layout="row">
<md-button ng-click="$ctrl.toggleIsMobileDBSlider()"
aria-label="{{'nui.aria.dbcategories.mobileCategories' | translate}}"
class="button-with-icon zero-margin">
<prm-icon icon-type="svg"
svg-icon-set="primo-ui"
icon-definition="file-tree">
</prm-icon>
<span translate="nui.dbcategories.mobileCategories"></span>
</md-button>
</div>
</md-toolbar>
</div>
<!--DB Categories for mobile - End-->Headings on primo “Home page”:
Changing headings on primo home page from span to h2.
Set automatically the cursor in the search box:
The customer (by choice) can set automatically the cursor in the search box when the page is loaded.
Customer can do that by setting the “focus_on_search_input” parameter to true under “VIEW_PROPERTIES” mapping table.
Primo November 2019 Release changelog
- Bulk action:
We allow performing records’ actions on a bulk of records from the results list.
The search result header is now sticky when the user scroll up & down.
There is a new directive for this “Tool bar” that calld “prm-search-result-tool-bar”
All features on “Search” state like: Personolaize, Save search are inside the new directive.
All changes and customization until now will take effect on the other states like: Favorites, DBsearch etc… - Newspaper search:
Newspaper search button is now at the bottom of the “Resource type” facet list.
Primo May 2019 Release changelog
- The Permalink URL is changed to a shorter url. In order to keep the long url structure, you may change the following class:
/*To display long permalink URL:*/ prm-permalink .layout-column > .long-permalink { display: flex; } .__xs prm-permalink .layout-column > .long-permalink{ display: flex; } /*To hide short permalink URL:*/ prm-permalink .layout-column > .short-permalink { display: none; } .__xs prm-permalink .layout-column > .short-permalink{ display: none; }
Primo February 2019 Release changelog
- In some cases, it may be necessary to hide the sign-in link from the View It or Get It sections on a record’s full display page. The following CSS allows you to hide the sign-in link, where <service> must be replaced with either Almagetit or Almaviewit:
For example:
To remove “Sign in”:
<service> prm-login-alma-mashup {
display: none!important;
}To display “Sign in”:
<service> prm-login-alma-mashup .ng-hide {
display: block!important;
text-align: center;
vertical-align: middle;
line-height: 40px;
}
Primo November 2018 Release changelog
- “Main menu” links changed from md-button to “a” links so user can open any button in a new tab.
- Facets wrapping: facet names are not cut off anymore. All the text on each facet is wrapping .
As a result, the HTML structure is a little bit changed. - Add and fix data attributes and classes to ease customization of Services page for SOA and other elements(facets,main menu,brief display,details service):
Restored the ability to hide identifiers by the following selectors in the Services page to configurations that had this available:
.identifier-in-brief-classic
.identifier-in-brief-local
In addition added the html attributes to easily select via css selector’s elements in(examples of possible usages, for various data types):
1. main menu:
data-main-menu-item=”LibrarySearch”
2. facets:
data-facet-value=”topic-Engineering”
data-facet-group=”topic”
3. full-view details:
[data-details-value=”title”]
[data-details-label=”title”]
4. brief-display:
[data-field-selector=”ispartof”]
- As part of Database categories development, some “flex” values in “Search Results” page has changed a little bit.
Primo August 2018 Release changelog
- The user area was redesigned as part of the release, to ensure your code/css continues to work we did the following:
- Added a new directive <prm-user-area-expandable> this is the OTB new user-area
- The previous user are – <prm-user-area> is still in the DOM – hidden by css
- If you have implemented the prm-user-area-after directive – once the August release is installed the changes will not affect the new user-area.
- If you wish to implement the changes on the new user-area, you need to implement them on the <prm-user-area-expandable> – but chances are you wont need the same exact feature in the new element.
- If you want to temporary revert to the original <prm-user-area> you can do so by using css:
prm-user-area{ display:block!important; } prm-user-area-expandable{ display:none!important }
- As part of the performance effort – we focused on the overlay display of the full view, the behavior now is:
- If the full view dialog was already opened in the brief results page, the additional action of opening the full view will not create a new dialog , it will use the previously opened dialog and refresh the data in it.
- The first time the full view will be opened – the dialog will be created and displayed.
Primo May 2018 Release changelog
- “bundle.js” package finished the process of splitting the application to several bundle files.
- Changed bundling mechanism to webpack – causes glitches on sourcemap creation – was fixed.
Primo February 2018 Release changelog
- “RxJS”: Removed unused modules.
- “Moment.js”: Removed unused date formats and locales.
- “bundle.js” package started the process of splitting the application to several bundle files.
- Changed bundling mechanism to webpack – causes glitches on sourcemap creation – will be handled , update: fixed.
- Refactoring the prm-opac component(directive) and it’s child components to allow multiple occurrences of the prm-opac component.
This will allow developers to customize the opac services and using the directive multiple times on the same angular app.
To do so we have removed properties from the various services and refactored them to input attributes of the various directives.See the usage in the example below, where you can see ng-repeat ( ng-repeat=”itemE in $ctrl.getItems()”)is used to split the multiple locations to multiple Get it components via the Open Discovery Framework:
<prm-opac ng-if="($ctrl.parentCtrl.service.serviceName==='ovp' || $ctrl.parentCtrl.service.serviceName==='ovl')" class="expanded-location" ng-repeat="itemE in $ctrl.getItems()" [item]="itemE" [service-mode]="::$ctrl.parentCtrl.service.serviceName"></prm-opac>
Primo November 2017 Release changelog
- Added :
- angular-deckgrid: “0.5.0”
- Changed:The directive ‘prm-journals-search-bar’ was renamed: ‘prm-atoz-search-bar’ as part of the generalization of the a-z component.Impacts:
- css: all selectors using the prm-journals-search-bar must be changed to use prm-atoz-search-bar. for example:
primo-explore prm-journals-search-bar span{color:red;}should change to :
primo-explore prm-atoz-search-bar span{color:red;} - JavaScript:directives defined to implement the prmJournalsSearchBarAfter should change to implement the prmAtozSearchBarAfter directive.
app.component('prmJournalsSearchBarAfter', { bindings: {parentCtrl: '<'}, template: 'my html' });
- css: all selectors using the prm-journals-search-bar must be changed to use prm-atoz-search-bar. for example:
should change to:
app.component('prmAtozSearchBarAfter ', { bindings: {parentCtrl: '<'}, template: 'my html' }); - Performance change:
- The delivery section is now returned as a separate rest API, this might have an effect if:
- in your html template you used one time binding to the delivery section of an item like this:
- The delivery section is now returned as a separate rest API, this might have an effect if:
<div ng-if"::$ctrl.item.delivery">My HTML</div>
to avoid problems, remove the one time binding(::) , ensuring the code will render once the delivery section is returned from the API
Primo August 2017 Release changelog
- “angular”: “1.6.3” previous: 1.6.1
“angular-animate”: “1.6.3” previous: 1.6.1
“angular-aria”: “1.6.3” previous: 1.6.1
“angular-i18n”: “1.6.3” previous: 1.6.1
“angular-messages”: “1.6.3” previous: 1.6.1
“angular-cookies”: “1.6.3” previous: 1.6.1
- “angular-jwt”: “0.1.9” previous: 0.1.8
- “angular-translate”: “2.15.1” previous: 2.13.1
“angular-translate-loader-url”: “2.15.1” previous: 2.13.1
- “moment”: “2.18.1” previous: 2.17.1