New UI Javascript Third Parties Changelog

Ex Libris Developer Network Primo Documentation More New UI Javascript Third Parties Changelog

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

link to changelog

  • “angular-jwt”: “0.1.9” previous: 0.1.8

link to changelog

  •  “angular-translate”: “2.15.1” previous: 2.13.1

“angular-translate-loader-url”: “2.15.1” previous: 2.13.1

link to changelog

  • “moment”: “2.18.1” previous: 2.17.1

link to changelog

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'
        });

    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:
<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 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 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 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 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 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 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 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 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.