-
Additional Information From the Record:
-
OCLCID:
-
{{oclcid}}
-```
-``` ```
-
-
-
-
-
-
-**Notice :** Any link in your template will be removed - for security reasons, we will not allow links other than the link to the record to avoid email exploits.
-
-To add the link to the full record you can either:
- 1. Use the
-
- ```
-
-
- ```
-directive in your template - This includes the link to the record
-
-2. Use the following code snippet in your template:
-
- ```
-
- {{item.pnx.display.title[0]}}
-
- ```
-
-To use your library logo (not the OTB
) you can use your own html, with an img element that has a class attribute of *logo-image* immediatly following the opening tag, for example:
-
- ```
-
-
-
-
-
- |
-
-
-
-```
-
-
- ## Examples
-
- Full examples of email templates can be found in the help files folder folder:
-
- 1. [The Out of the Box template for emails](../../help_files/email_en_US.html) email_en_US.html
-
- 2. [A template based on the OTB - brief + custom fields + availability](../../help_files/email_en_US-brief+additionalField+availability.html)
- will produce the following email:
-
- ![example brief](../../help_files/example-bried-and-subject.png "example brief")
-
- 3. [A template based on an open source email template with no Primo directives - just use of the ```{{item.pnx.display.title}}```](../../help_files/email_en_US_Details.html)
- will produce the following email:
-
- ![example external](../../help_files/example-external.png "example external")
-
-
-
-
+# The Primo New UI Customization Workflow Development Environment
+
+
+## html documentation
+
+ - In this folder you will find static html files in their OTB state
+ - The files are separated into directories (starting from the November 2016 Release)
+ - You can edit the html to comply with your library requirements
+ - To support multiple languages in your interface just add a suffix with the language code to your file-name,
+ For example:
+
+ 1. homepage_fe_FR.html (in the August 2016 Release use home_fe_FR.html)
+ 2. help_de_DE.html(Available in the November 2016 Release)
+
+ - This is how your directory structure should look like:
+
+ ![August 2016 Release structure image](../../help_files/htmlStructureAug.png "August 2016 Release structure")
+
+
+ - Note that you can use Angular Material directives in your html:
+ > https://material.angularjs.org/latest/
+
+
+## Email templates
+ Starting from 2020 Primo supports a new html template to customize email messages sent to patrons'.
+
+ To customize this template create a file named email_fr_FR.html (based on your language suffix) and upload it using the html directory in your customization package.
+
+ In this html file you can design your own email template using html.
+
+ Since Primo supports the email action on multiple records you should add the following attribute to the html element represnting a record:
+
+ ```ng-if="$ctrl.parentCtrl.fullViewLoaded" ng-repeat="item in $ctrl.parentCtrl.delayedItems"```
+
+ for example:
+
+ For an email template layout as below the attribute should be added to the records container:
+
+ ```
+
+
+
+
+
+
+ ...
+
+
+
+ ```
+
+ When editing the template you can:
+
+ 1. Use regular html (use best practices for email templating: https://mailchimp.com/help/about-html-email/) to design the layout of your email based on your preferences.
+
+ 2. You can take advantage of some of our OTB directives in your templates:
+```
+
+
+
+
+
+
+
+
+ ```
+ 3. You can reference the sent item(pnx/record) using angular syntax to present the relevant data:
+
+ use the curly brackets to access the pnx diectly - for example:
+```
+ {{item.pnx.display.title}}
+```
+ or loop over values using the ng-repeat directive to add multiple fields:
+
+```
+
Additional Information From the Record:
+
OCLCID:
+
{{oclcid}}
+```
+``` ```
+
+
+
+
+
+
+**Notice :** Any link in your template will be removed - for security reasons, we will not allow links other than the link to the record to avoid email exploits.
+
+To add the link to the full record you can either:
+ 1. Use the
+
+ ```
+
+
+ ```
+directive in your template - This includes the link to the record
+
+2. Use the following code snippet in your template:
+
+ ```
+
+ {{item.pnx.display.title[0]}}
+
+ ```
+
+To use your library logo (not the OTB
) you can use your own html, with an img element that has a class attribute of *logo-image* immediatly following the opening tag, for example:
+
+ ```
+
+
+
+
+
+ |
+
+
+
+```
+
+
+ ## Examples
+
+ Full examples of email templates can be found in the help files folder folder:
+
+ 1. [The Out of the Box template for emails](../../help_files/email_en_US.html) email_en_US.html
+
+ 2. [A template based on the OTB - brief + custom fields + availability](../../help_files/email_en_US-brief+additionalField+availability.html)
+ will produce the following email:
+
+ ![example brief](../../help_files/example-bried-and-subject.png "example brief")
+
+ 3. [A template based on an open source email template with no Primo directives - just use of the ```{{item.pnx.display.title}}```](../../help_files/email_en_US_Details.html)
+ will produce the following email:
+
+ ![example external](../../help_files/example-external.png "example external")
+
+
+
+
diff --git a/tests/manual/TESTBROWSERIFY/html/home_en_US.html b/tests/manual/TESTBROWSERIFY/html/home_en_US.html
index 96b69aa8e..09f950a2c 100644
--- a/tests/manual/TESTBROWSERIFY/html/home_en_US.html
+++ b/tests/manual/TESTBROWSERIFY/html/home_en_US.html
@@ -1 +1 @@
-Customized
+Customized
diff --git a/tests/manual/TESTBROWSERIFY/img/README.md b/tests/manual/TESTBROWSERIFY/img/README.md
index eb4c0bb82..bb1ffb13e 100644
--- a/tests/manual/TESTBROWSERIFY/img/README.md
+++ b/tests/manual/TESTBROWSERIFY/img/README.md
@@ -1,20 +1,20 @@
-# The Primo New UI Customization Workflow Development Environment
-
-
-## images documentation
-
- - Primo allows the customization of the following images;
- 1. Library Logo - just place a file named `library-logo.png` in this location
- 2. Library favicon - just place a file named `favicon.ico` in this location
- 3. Default Resource Types - just place a files following this convention :
- `icon_
.png`
-
- For Example:
- `icon_book.png`
-
-
-
-
-
-
-
+# The Primo New UI Customization Workflow Development Environment
+
+
+## images documentation
+
+ - Primo allows the customization of the following images;
+ 1. Library Logo - just place a file named `library-logo.png` in this location
+ 2. Library favicon - just place a file named `favicon.ico` in this location
+ 3. Default Resource Types - just place a files following this convention :
+ `icon_.png`
+
+ For Example:
+ `icon_book.png`
+
+
+
+
+
+
+
diff --git a/tests/manual/TESTBROWSERIFY/js/README.md b/tests/manual/TESTBROWSERIFY/js/README.md
index cfc360d7a..741a4c368 100644
--- a/tests/manual/TESTBROWSERIFY/js/README.md
+++ b/tests/manual/TESTBROWSERIFY/js/README.md
@@ -1,275 +1,275 @@
-# The Primo New UI Customization Workflow Development Environment
-
-
-## JavaScript documentation
-
-- When you want to add functionality to your Primo installation you will be using Angular Directives.
-
-- To learn more about directives see:
-> https://docs.angularjs.org/guide/directive
-
-- Primo uses external directives from the Angular-material framework:
-> https://material.angularjs.org/latest/
-
-- Those directives are tagged by a prefix : "md-"
-
-- Primo also creates its own directives which are tagged by the "prm-" prefix.
-
-
-Example:
-```
-
-```
-
-
-- You can see in the example how we use :
-
-1. An HTML5 tag - header
-2. A Primo directive : prm-topbar , prm-search-bar.
-3. An external material design directive : md-progress-bar :
-> https://material.angularjs.org/latest/api/directive/mdProgressLinear
-
-
-
-## Concept
-
-- When You want to add your own JavaScript functionality - you will need to plug-in to placeholder Directives we added to the system, by creating your own placeholder Directive.
-- Those directives are added as the last child element for every Primo directive (defined by the `prm-` prefix)
-- The placeholder directives are injected (as input) with the Controller of their parent, thus have access to the data model of the parent directive
-- Use the examples below as starting points for your JavaScript plug-in directives
-- Learn about Angular Directives to better understand the different abilities this workflow offers
-> https://docs.angularjs.org/guide/directive
-
-
-
-## Recipes/Examples:
-
-# Note:
-
-The examples below use the back tic '`' for templates - which will work using babel (Documentation on how to do so will be shared)
-This causes the examples to fail on IE11 browsers.
-
-To solve this you can replace the '`' with regular apostrophe ("'") and use a single line template (less readable but works just as well).
-
-
-
-
-# JavaScript Recipe 1 - a Static `hello world` html Message
-
-
-- Use the `showDirectives` (located in the root directory of this package is the showDirectives.txt file
-, just add the content of the file as a bookmark to your browser) scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
-
-
-![Show Directives image](../../help_files/showDirectives.png "Show Directives Changes")
-
-- Edit the primo-explore/custom/js/custom.js file and add a component declaration for `myInstitutionComponent` and a component declaration
-for the `prmSearchBarAfter` directive
-
- ```
- app.component('myInstitutionComponent', {
-
-
- });
-
- app.component('prmSearchBarAfter', {
-
-
- });
- ```
-- Add the template property with your static message
-
- ```
- app.component('myInstitutionComponent', {
- template: `Hello World`
- });
- ```
-- Add the template property with your component template (myInstitutionComponent)
-
- ```
- app.component('prmSearchBarAfter', {
- bindings: {parentCtrl: `<`},
- template: ``
- });
- ```
-
-
-- Save and refresh your browser
-
-![Hello World image](../../help_files/js1.png "Hello World Changes")
-
-# JavaScript Recipe 2 - a Dynamic Directive
-- Use the `showDirectives` scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
-- Run the following command in your browsers' console tab:
-```
- angular.reloadWithDebugInfo()
-```
-- Focus on the `prmSearchBarAfter` directive
-
-![Focus image](../../help_files/js2.png "Focus")
-
-- Run the following command in your browsers' console tab:
-```
- angular.element($0).scope().$ctrl (angular.element($0).scope().ctrl in version earlier than February 2017)
-```
-
-- Review the properties of the directive to decide which data elements can be used, avoid methods/functions as they wont be backwards compatible
-
-![properties image](../../help_files/js3.png "properties")
-
-
-- Edit primo-explore/custom/js/custom.js file and add: a component declaration for the `prmSearchBarAfter` directive, and a component declaration for the `myInstitutionComponent`
-
-- Add a binding definition the input parentCtrl for both components
-```
- bindings: {parentCtrl: '<'},
-```
-- Add a controller definition for the `myInstitutionComponent` component:
-```
- controller: 'MyInstitutionComponentController',
-```
-- Define a controller with 2 getter methods to return the query and selected scope
-```
-app.controller('MyInstitutionComponentController', [function () {
- var vm = this;
-
-
- vm.getSelectdScope = getSelectdScope;
- vm.getQuery = getQuery;
-
-
- function getSelectdScope() {
- return vm.parentCtrl.scopeField;
- }
-
- function getQuery() {
- return vm.parentCtrl.mainSearchField;
- }
- }]);
-
-```
-- Edit the `prmSearchBarAfter` directive template to reference the `myInstitutionComponent`
-```
-template: ``
-```
-- Edit the `myInstitutionComponent` directive template to reference the getter methods
-```
-template: `
-
-
-
- This is a demo presenting the ability to display query
- information below the search box
- Query: {{$ctrl.getQuery()}}
- Scope: {{$ctrl.getSelectdScope()}}
-
-
-
-
-
-
- Action 1
- Action 2
-
-
-
`
-
- ```
-- Save and refresh your browser
-
-![dynamic example image](../../help_files/js4.png "dynamic example")
-
-# JavaScript Recipe 3 - Adding the Altmetrics Widget
-- Use the `showDirectives` scriplet to identify the `prmFullViewAfter` directive which you will plugin to
-
-![Altmetrics example image](../../help_files/js5.png "Altmetrics example")
-
-- Run the following command in your browsers' console tab:
-`angular.reloadWithDebugInfo()`
-- Focus on the `prmFullViewAfter` directive
-- Run the following command in your browsers' console tab:
-`angular.element($0).scope().ctrl`
-
-- Review the properties of the directive to decide which data elements can be used, avoid methods/functions as they wont be backwards compatible
-
-![Altmetrics example 2 image](../../help_files/js6.png "Altmetrics 2 example")
-
-- Edit primo-explore/custom/js/custom.js file and add: a component declaration for the `prmFullViewAfter` directive, and a component declaration for the `myInstitutionComponent`
-
-- Add a binding definition the input parentCtrl for both components
-```
- bindings: {parentCtrl: '<'},
-```
-- Add a controller definition for the `myInstitutionComponent` component:
-```
- controller: 'MyInstitutionComponentController',
-```
-- Define a controller that populates the doi and loads the Altmetrics js file
-```
-app.controller('MyInstitutionComponentController', ['angularLoad', function (angularLoad) {
- var vm = this;
- vm.doi = vm.parentCtrl.item.pnx.addata.doi[0] || '';
-
- vm.$onInit = function () {
- angularLoad.loadScript('https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js?' + Date.now()).then(function () {
-
- });
- };
- }]);
-```
-- Edit the `prmFullViewAfter` directive template to reference the `myInstitutionComponent`
-```
-template: ``
-```
-- Edit the `myInstitutionComponent` directive template to add the Altmetrics div and bind the data-doi attribute to the controller
-```
-app.component('myInstitutionComponent', {
- bindings: {parentCtrl: '<'},
- controller: 'MyInstitutionComponentController',
- template: ``
- });
- ```
-
-- Edit the custom1.css file and add the following definitions:
-
- ```
- .full-view-section.loc-altemtrics{
- background-color: #f3f3f3;
- margin-top:0px;
- padding-left: 3em;
- }
- ```
-
-- Save and refresh your browser
-
-![Altmetrics example 3 image](../../help_files/js7.png "Altmetrics 3 example")
+# The Primo New UI Customization Workflow Development Environment
+
+
+## JavaScript documentation
+
+- When you want to add functionality to your Primo installation you will be using Angular Directives.
+
+- To learn more about directives see:
+> https://docs.angularjs.org/guide/directive
+
+- Primo uses external directives from the Angular-material framework:
+> https://material.angularjs.org/latest/
+
+- Those directives are tagged by a prefix : "md-"
+
+- Primo also creates its own directives which are tagged by the "prm-" prefix.
+
+
+Example:
+```
+
+```
+
+
+- You can see in the example how we use :
+
+1. An HTML5 tag - header
+2. A Primo directive : prm-topbar , prm-search-bar.
+3. An external material design directive : md-progress-bar :
+> https://material.angularjs.org/latest/api/directive/mdProgressLinear
+
+
+
+## Concept
+
+- When You want to add your own JavaScript functionality - you will need to plug-in to placeholder Directives we added to the system, by creating your own placeholder Directive.
+- Those directives are added as the last child element for every Primo directive (defined by the `prm-` prefix)
+- The placeholder directives are injected (as input) with the Controller of their parent, thus have access to the data model of the parent directive
+- Use the examples below as starting points for your JavaScript plug-in directives
+- Learn about Angular Directives to better understand the different abilities this workflow offers
+> https://docs.angularjs.org/guide/directive
+
+
+
+## Recipes/Examples:
+
+# Note:
+
+The examples below use the back tic '`' for templates - which will work using babel (Documentation on how to do so will be shared)
+This causes the examples to fail on IE11 browsers.
+
+To solve this you can replace the '`' with regular apostrophe ("'") and use a single line template (less readable but works just as well).
+
+
+
+
+# JavaScript Recipe 1 - a Static `hello world` html Message
+
+
+- Use the `showDirectives` (located in the root directory of this package is the showDirectives.txt file
+, just add the content of the file as a bookmark to your browser) scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
+
+
+![Show Directives image](../../help_files/showDirectives.png "Show Directives Changes")
+
+- Edit the primo-explore/custom/js/custom.js file and add a component declaration for `myInstitutionComponent` and a component declaration
+for the `prmSearchBarAfter` directive
+
+ ```
+ app.component('myInstitutionComponent', {
+
+
+ });
+
+ app.component('prmSearchBarAfter', {
+
+
+ });
+ ```
+- Add the template property with your static message
+
+ ```
+ app.component('myInstitutionComponent', {
+ template: `Hello World`
+ });
+ ```
+- Add the template property with your component template (myInstitutionComponent)
+
+ ```
+ app.component('prmSearchBarAfter', {
+ bindings: {parentCtrl: `<`},
+ template: ``
+ });
+ ```
+
+
+- Save and refresh your browser
+
+![Hello World image](../../help_files/js1.png "Hello World Changes")
+
+# JavaScript Recipe 2 - a Dynamic Directive
+- Use the `showDirectives` scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
+- Run the following command in your browsers' console tab:
+```
+ angular.reloadWithDebugInfo()
+```
+- Focus on the `prmSearchBarAfter` directive
+
+![Focus image](../../help_files/js2.png "Focus")
+
+- Run the following command in your browsers' console tab:
+```
+ angular.element($0).scope().$ctrl (angular.element($0).scope().ctrl in version earlier than February 2017)
+```
+
+- Review the properties of the directive to decide which data elements can be used, avoid methods/functions as they wont be backwards compatible
+
+![properties image](../../help_files/js3.png "properties")
+
+
+- Edit primo-explore/custom/js/custom.js file and add: a component declaration for the `prmSearchBarAfter` directive, and a component declaration for the `myInstitutionComponent`
+
+- Add a binding definition the input parentCtrl for both components
+```
+ bindings: {parentCtrl: '<'},
+```
+- Add a controller definition for the `myInstitutionComponent` component:
+```
+ controller: 'MyInstitutionComponentController',
+```
+- Define a controller with 2 getter methods to return the query and selected scope
+```
+app.controller('MyInstitutionComponentController', [function () {
+ var vm = this;
+
+
+ vm.getSelectdScope = getSelectdScope;
+ vm.getQuery = getQuery;
+
+
+ function getSelectdScope() {
+ return vm.parentCtrl.scopeField;
+ }
+
+ function getQuery() {
+ return vm.parentCtrl.mainSearchField;
+ }
+ }]);
+
+```
+- Edit the `prmSearchBarAfter` directive template to reference the `myInstitutionComponent`
+```
+template: ``
+```
+- Edit the `myInstitutionComponent` directive template to reference the getter methods
+```
+template: `
+
+
+
+ This is a demo presenting the ability to display query
+ information below the search box
+ Query: {{$ctrl.getQuery()}}
+ Scope: {{$ctrl.getSelectdScope()}}
+
+
+
+
+
+
+ Action 1
+ Action 2
+
+
+
`
+
+ ```
+- Save and refresh your browser
+
+![dynamic example image](../../help_files/js4.png "dynamic example")
+
+# JavaScript Recipe 3 - Adding the Altmetrics Widget
+- Use the `showDirectives` scriplet to identify the `prmFullViewAfter` directive which you will plugin to
+
+![Altmetrics example image](../../help_files/js5.png "Altmetrics example")
+
+- Run the following command in your browsers' console tab:
+`angular.reloadWithDebugInfo()`
+- Focus on the `prmFullViewAfter` directive
+- Run the following command in your browsers' console tab:
+`angular.element($0).scope().ctrl`
+
+- Review the properties of the directive to decide which data elements can be used, avoid methods/functions as they wont be backwards compatible
+
+![Altmetrics example 2 image](../../help_files/js6.png "Altmetrics 2 example")
+
+- Edit primo-explore/custom/js/custom.js file and add: a component declaration for the `prmFullViewAfter` directive, and a component declaration for the `myInstitutionComponent`
+
+- Add a binding definition the input parentCtrl for both components
+```
+ bindings: {parentCtrl: '<'},
+```
+- Add a controller definition for the `myInstitutionComponent` component:
+```
+ controller: 'MyInstitutionComponentController',
+```
+- Define a controller that populates the doi and loads the Altmetrics js file
+```
+app.controller('MyInstitutionComponentController', ['angularLoad', function (angularLoad) {
+ var vm = this;
+ vm.doi = vm.parentCtrl.item.pnx.addata.doi[0] || '';
+
+ vm.$onInit = function () {
+ angularLoad.loadScript('https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js?' + Date.now()).then(function () {
+
+ });
+ };
+ }]);
+```
+- Edit the `prmFullViewAfter` directive template to reference the `myInstitutionComponent`
+```
+template: ``
+```
+- Edit the `myInstitutionComponent` directive template to add the Altmetrics div and bind the data-doi attribute to the controller
+```
+app.component('myInstitutionComponent', {
+ bindings: {parentCtrl: '<'},
+ controller: 'MyInstitutionComponentController',
+ template: ``
+ });
+ ```
+
+- Edit the custom1.css file and add the following definitions:
+
+ ```
+ .full-view-section.loc-altemtrics{
+ background-color: #f3f3f3;
+ margin-top:0px;
+ padding-left: 3em;
+ }
+ ```
+
+- Save and refresh your browser
+
+![Altmetrics example 3 image](../../help_files/js7.png "Altmetrics 3 example")
diff --git a/tests/manual/TESTBROWSERIFY/js/custom.js b/tests/manual/TESTBROWSERIFY/js/custom.js
index 4899da6e6..190dbd952 100644
--- a/tests/manual/TESTBROWSERIFY/js/custom.js
+++ b/tests/manual/TESTBROWSERIFY/js/custom.js
@@ -1,2 +1,2 @@
-!function a(i,c,d){function u(t,e){if(!c[t]){if(!i[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(l)return l(t,!0);var n=new Error("Cannot find module '"+t+"'");throw n.code="MODULE_NOT_FOUND",n}var o=c[t]={exports:{}};i[t][0].call(o.exports,function(e){return u(i[t][1][e]||e)},o,o.exports,a,i,c,d)}return c[t].exports}for(var l="function"==typeof require&&require,e=0;e"})},{"./test.module.js":2}],2:[function(e,t,r){"use strict";angular.module("testModule",[]).factory("testModuleService",[function(){var e={manipulate:function(e){return e.split("").reverse().join("")}};return e}]).controller("testModuleController",["testModuleService",function(e){var t=this;t.getSelectdScope=function(){return e.manipulate(t.prmSearchBar.scopeField)},t.getQuery=function(){return t.prmSearchBar.mainSearchField}}]).component("testComponent",{require:{prmSearchBar:"^prmSearchBar"},controller:"testModuleController",template:'\n
\n \n \n This is a demo presenting the ability to display query\n information below the search box\n Query: {{$ctrl.getQuery()}}\n Scope: {{$ctrl.getSelectdScope()}}\n \n \n \n \n \n \n Action 1\n Action 2\n \n \n
'})},{}]},{},[1]);
-//# sourceMappingURL=custom.js.map
+!function a(i,c,d){function u(t,e){if(!c[t]){if(!i[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(l)return l(t,!0);var n=new Error("Cannot find module '"+t+"'");throw n.code="MODULE_NOT_FOUND",n}var o=c[t]={exports:{}};i[t][0].call(o.exports,function(e){return u(i[t][1][e]||e)},o,o.exports,a,i,c,d)}return c[t].exports}for(var l="function"==typeof require&&require,e=0;e"})},{"./test.module.js":2}],2:[function(e,t,r){"use strict";angular.module("testModule",[]).factory("testModuleService",[function(){var e={manipulate:function(e){return e.split("").reverse().join("")}};return e}]).controller("testModuleController",["testModuleService",function(e){var t=this;t.getSelectdScope=function(){return e.manipulate(t.prmSearchBar.scopeField)},t.getQuery=function(){return t.prmSearchBar.mainSearchField}}]).component("testComponent",{require:{prmSearchBar:"^prmSearchBar"},controller:"testModuleController",template:'\n
\n \n \n This is a demo presenting the ability to display query\n information below the search box\n Query: {{$ctrl.getQuery()}}\n Scope: {{$ctrl.getSelectdScope()}}\n \n \n \n \n \n \n Action 1\n Action 2\n \n \n
'})},{}]},{},[1]);
+//# sourceMappingURL=custom.js.map
diff --git a/tests/manual/TESTBROWSERIFY/js/main.js b/tests/manual/TESTBROWSERIFY/js/main.js
index b4db15302..a6462a6e8 100644
--- a/tests/manual/TESTBROWSERIFY/js/main.js
+++ b/tests/manual/TESTBROWSERIFY/js/main.js
@@ -1,8 +1,8 @@
-require('./test.module.js');
-//module.exports = 'testModule';
-angular
- .module("viewCustom", ["testModule"])
- .component("prmSearchBarAfter", {
- template:
- ''
- });
+require('./test.module.js');
+//module.exports = 'testModule';
+angular
+ .module("viewCustom", ["testModule"])
+ .component("prmSearchBarAfter", {
+ template:
+ ''
+ });
diff --git a/tests/manual/TESTBROWSERIFY/js/test.module.js b/tests/manual/TESTBROWSERIFY/js/test.module.js
index 7e0867cfa..7478788e2 100644
--- a/tests/manual/TESTBROWSERIFY/js/test.module.js
+++ b/tests/manual/TESTBROWSERIFY/js/test.module.js
@@ -1,50 +1,50 @@
- angular
- .module('testModule', [])
- .factory('testModuleService', [
- function () {
- var svc = {};
- svc.manipulate = function (str) {
- return str.split("").reverse().join("");
- };
- return svc;
- },
- ])
- .controller('testModuleController', [
- 'testModuleService',
- function (testModuleService) {
- var vm = this;
- vm.getSelectdScope = function() {
- return testModuleService.manipulate(vm.prmSearchBar.scopeField);
- }
-
- vm.getQuery = function() {
- return vm.prmSearchBar.mainSearchField;
- }
- },
- ])
- .component('testComponent', {
- require: {
- prmSearchBar: '^prmSearchBar',
- },
- controller: 'testModuleController',
- template:
- `
-
-
-
- This is a demo presenting the ability to display query
- information below the search box
- Query: {{$ctrl.getQuery()}}
- Scope: {{$ctrl.getSelectdScope()}}
-
-
-
-
-
-
- Action 1
- Action 2
-
-
-
`,
- });
+ angular
+ .module('testModule', [])
+ .factory('testModuleService', [
+ function () {
+ var svc = {};
+ svc.manipulate = function (str) {
+ return str.split("").reverse().join("");
+ };
+ return svc;
+ },
+ ])
+ .controller('testModuleController', [
+ 'testModuleService',
+ function (testModuleService) {
+ var vm = this;
+ vm.getSelectdScope = function() {
+ return testModuleService.manipulate(vm.prmSearchBar.scopeField);
+ }
+
+ vm.getQuery = function() {
+ return vm.prmSearchBar.mainSearchField;
+ }
+ },
+ ])
+ .component('testComponent', {
+ require: {
+ prmSearchBar: '^prmSearchBar',
+ },
+ controller: 'testModuleController',
+ template:
+ `
+
+
+
+ This is a demo presenting the ability to display query
+ information below the search box
+ Query: {{$ctrl.getQuery()}}
+ Scope: {{$ctrl.getSelectdScope()}}
+
+
+
+
+
+
+ Action 1
+ Action 2
+
+
+
`,
+ });
diff --git a/tests/manual/TESTBROWSERIFY/js/test.service.js b/tests/manual/TESTBROWSERIFY/js/test.service.js
index 3579f665b..eb72386a3 100644
--- a/tests/manual/TESTBROWSERIFY/js/test.service.js
+++ b/tests/manual/TESTBROWSERIFY/js/test.service.js
@@ -1,11 +1,11 @@
-app.service('TestService', [function () {
- let vm = this;
-
-
- vm.manipulate = manipulate;
-
-
- function manipulate(str){
- return str.split("").reverse().join("");
- }
-}]);
+app.service('TestService', [function () {
+ let vm = this;
+
+
+ vm.manipulate = manipulate;
+
+
+ function manipulate(str){
+ return str.split("").reverse().join("");
+ }
+}]);
diff --git a/tests/manual/TESTBROWSERIFY/scss/partials/_variables.scss b/tests/manual/TESTBROWSERIFY/scss/partials/_variables.scss
index c70d2883c..0ef29b3a9 100644
--- a/tests/manual/TESTBROWSERIFY/scss/partials/_variables.scss
+++ b/tests/manual/TESTBROWSERIFY/scss/partials/_variables.scss
@@ -1,225 +1,225 @@
-//// VARIABLES
-// The complex color calculation were created with http://razorjam.github.io/sasscolourfunctioncalculator/
-
-// Fonts family
-$serif: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-// Font weights
-$light: 300;
-$normal: 400;
-$bold: 600;
-$heavy: 900;
-
-// Font size
-$defaultFontSize: 15px;
-
-// Shapes
-$radius: 3px;
-
-// Padding
-$paddingBase: 1em;
-$paddingExtra: 1.5em;
-$paddingMedium: 1.3em;
-$paddingLarge: 1em;
-$paddingSmall: .5em;
-$paddingTiny: .25em;
-
-// colors
-
-$muteOrange: red;
-
-
-
-$almostBlack: #777;
-
-
-
-$titles: rgb(68, 112, 123);
-$frbr: #ed9100;
-$pink: rgb(255, 171, 200);
-
-$dark: #3a3a3a;
-$darker: darken(saturate(adjust-hue($dark, 0.0000), 0.0000), 6.6667);
-
-// lighter background color
-
-
-$highlightYellow: #FFFCC4; //stronger
-$highlight: darken(desaturate(adjust-hue($highlightYellow, -4.0920), 16.0000), 8.0392);
-$highlightText: #ffe564;
-$success: #3EA03E;
-//$green: #3EA03E; // redundancy of 'success'
-$green: #198A19;
-//$orange: #CE8015; //#E0962E;
-$muteOrange: #C59655;
-$yellow: #F1C16F;
-$overlayDarkDG: rgba(68, 68, 68, 0.6);
-
-// $availabiltyDetails: desaturate(lighten($midGrey,5%), 5%);
-//$maybe: $orange;
-
-$alert: #F7EDA3;
-$alert-hue1: darken(desaturate(adjust-hue($alert, 0.3074), 15.3043), 2.9412);
-
-
-$disabled: #aaa;
-$courseColor: #55909B;
-
-$primary: red;
-$primary-hue1: darken($primary, 3%);
-$primary-hue2: darken($primary, 5%);
-$primary-hue3: darken($primary-hue2, 2%);
-$primary-hue4: darken($primary, 10%);
-$primary-hue5: darker($primary, -5%);
-
-$secondary: green;
-$secondary-hue1: darken(saturate(adjust-hue($secondary, -6.5946), 9.1452), 26.2745);
-$secondary-hue2: darken($secondary, 20%);
-$secondary-hue3:darken(saturate(adjust-hue($secondary, -12), 30.28), 47.65); // "show more" buttons in facets
-$secondary-hue4: darken(saturate(adjust-hue($secondary, -7), 64.57), 13.92);
-
-
-$backgroundColor: yellow;
-
-$positive: #0f7d00;
-
-$negative: gray;
-
-$background: darken(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 8.6275); //redundancy of almostwhite
-
-$background-hue1: darken($backgroundColor, 3%); // darker 1 (i.e: background for locations filter bar)
-// $background-hue2: lighten(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 3.9216); // lighter 1 (i.e: background for full view dialog)
-$background-hue2: lighten($background, 4%);
-$background-hue3: lighten(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 5.8824); // lighter 2 (i.e: background for actions forms)
-
-$background-hue4: lighten($background, 3%);
-$background-hue5: transparentize($background, .5);
-$background-hue6: darken($background, 1%);
-$background-hue7: darken($background, 10%);
-$background-hue8: lighten($background, 6%);
-$background-hue9: darken($background, 5%);
-$background-hue10: darken($background, 12%);
-$background-hue11: darken($background, 2%);
-$background-hue12: darken($background, 7%);
-$background-hue13: lighten($background, 2%);
-
-$white: white;
-
-$almostWhite: lighten(saturate(adjust-hue($background, 60.0000), 20.0000), 0.7843);
-$bg: $background;
-$nearlyWhite: darken(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 5.4902); // stronger
-$blueGrey: #ccc;
-$midGrey: #53738C; //darken(saturate(adjust-hue($blueGrey, 206.3158), 25.5605), 36.2745);
-$actionsBackground: lighten($background, 6%);
-$autoCompleteBg: $backgroundColor;
-$sectionHighlight: darken(desaturate($background, 0), 5%);
-$snippets:#999;
-$lightenGrey: #6d6d6d;
-
-$links: #3D6E94;
-
-$links-background-hue1: transparentize($links, 1);
-
-$links: $links;
-$links-hue-1: darken(saturate($links, 5%), 5%);
-$links-hue-5: darken(saturate($links, 20%), 20%);
-$linksHover: darken(saturate($links, 20%), 20%);
-$linksHover-hue-2: transparentize($linksHover, .5);
-$linkAlt: $secondary-hue1;
-$md-primary: $links;
-
-$linkTitle: #33FFFF;
-
-$collectionDisLinks: #0075b0;
-
-$red: tomato;
-// warning
-$warning: $red;
-$warn: $red;
-$warningBorder: inset 0 0 0 3px $warning;
-
-
-$text: $dark;
-$text-hue1: lighten($text, 30%);
-$text-hue2: $text;
-$text-hue3: darken($text, 10%);
-
-$notice: #B84D00;
-
-$highlight: $highlightYellow;
-$highlight-hue1: #FFFCC4;
-
-$modalBackdrop: rgb(68,68,68);
-$moreLink: #45aab4;
-
-$selectedItem: saturate(lighten($midGrey, 53%), 40%);
-
-$citationTitle: rgb(68, 112, 123);
-// $citationTitle: $titles;
-
-// chips
-$chipTouchHeight: 28px;
-$chipDesktopHeight: 22px;
-
-// Responsive
-$responsiveMaxWidth: 960px !important;
-
-// Default bars height
-$defaultBarHeight: 60px;
-
-// height of buttons in brief results
-$briefButtonHeight: 38px;
-
-// citations
-$citation: tomato;
-$citationColor: $citation;
-$citation-hue1: darken($citation, 40%);
-
-// personalization
-$personalization: #7d1538;
-
-// Peer Reviewed
-$peer-reviewed-color :#8359d4;
-
-// Open Access
-$open-access-color: #f68212;
-
-// Angular Material
-//-----------------
-
-// Progress bar
-$progressBarHeight: 15px;
-
-// buttons
-$defaultMdButtonHover: rgba(158,158,158,0.2);
-
-
-//// Angular Material overrides
-// Angular Material transition easing curves
-//-----------------------
-
-$swift-ease-out-duration: 0.4s !default;
-$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
-$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
-
-$swift-ease-in-duration: 0.3s !default;
-$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
-$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
-
-$swift-ease-in-out-duration: 0.5s !default;
-$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
-$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
-
-// Angular Material layouts
-// ------------------------------
-
-$baseline-grid: 8px !default;
-$layout-gutter-width: ($baseline-grid * 2) !default;
-
-// Angular Material breakpoints
-// ------------------------------
-
-// $layout-breakpoint-xs: 600px !default;
-// $layout-breakpoint-sm: 960px !default;
-// $layout-breakpoint-md: 1280px !default;
-// $layout-breakpoint-lg: 1920px !default;
+//// VARIABLES
+// The complex color calculation were created with http://razorjam.github.io/sasscolourfunctioncalculator/
+
+// Fonts family
+$serif: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+// Font weights
+$light: 300;
+$normal: 400;
+$bold: 600;
+$heavy: 900;
+
+// Font size
+$defaultFontSize: 15px;
+
+// Shapes
+$radius: 3px;
+
+// Padding
+$paddingBase: 1em;
+$paddingExtra: 1.5em;
+$paddingMedium: 1.3em;
+$paddingLarge: 1em;
+$paddingSmall: .5em;
+$paddingTiny: .25em;
+
+// colors
+
+$muteOrange: red;
+
+
+
+$almostBlack: #777;
+
+
+
+$titles: rgb(68, 112, 123);
+$frbr: #ed9100;
+$pink: rgb(255, 171, 200);
+
+$dark: #3a3a3a;
+$darker: darken(saturate(adjust-hue($dark, 0.0000), 0.0000), 6.6667);
+
+// lighter background color
+
+
+$highlightYellow: #FFFCC4; //stronger
+$highlight: darken(desaturate(adjust-hue($highlightYellow, -4.0920), 16.0000), 8.0392);
+$highlightText: #ffe564;
+$success: #3EA03E;
+//$green: #3EA03E; // redundancy of 'success'
+$green: #198A19;
+//$orange: #CE8015; //#E0962E;
+$muteOrange: #C59655;
+$yellow: #F1C16F;
+$overlayDarkDG: rgba(68, 68, 68, 0.6);
+
+// $availabiltyDetails: desaturate(lighten($midGrey,5%), 5%);
+//$maybe: $orange;
+
+$alert: #F7EDA3;
+$alert-hue1: darken(desaturate(adjust-hue($alert, 0.3074), 15.3043), 2.9412);
+
+
+$disabled: #aaa;
+$courseColor: #55909B;
+
+$primary: red;
+$primary-hue1: darken($primary, 3%);
+$primary-hue2: darken($primary, 5%);
+$primary-hue3: darken($primary-hue2, 2%);
+$primary-hue4: darken($primary, 10%);
+$primary-hue5: darker($primary, -5%);
+
+$secondary: green;
+$secondary-hue1: darken(saturate(adjust-hue($secondary, -6.5946), 9.1452), 26.2745);
+$secondary-hue2: darken($secondary, 20%);
+$secondary-hue3:darken(saturate(adjust-hue($secondary, -12), 30.28), 47.65); // "show more" buttons in facets
+$secondary-hue4: darken(saturate(adjust-hue($secondary, -7), 64.57), 13.92);
+
+
+$backgroundColor: yellow;
+
+$positive: #0f7d00;
+
+$negative: gray;
+
+$background: darken(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 8.6275); //redundancy of almostwhite
+
+$background-hue1: darken($backgroundColor, 3%); // darker 1 (i.e: background for locations filter bar)
+// $background-hue2: lighten(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 3.9216); // lighter 1 (i.e: background for full view dialog)
+$background-hue2: lighten($background, 4%);
+$background-hue3: lighten(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 5.8824); // lighter 2 (i.e: background for actions forms)
+
+$background-hue4: lighten($background, 3%);
+$background-hue5: transparentize($background, .5);
+$background-hue6: darken($background, 1%);
+$background-hue7: darken($background, 10%);
+$background-hue8: lighten($background, 6%);
+$background-hue9: darken($background, 5%);
+$background-hue10: darken($background, 12%);
+$background-hue11: darken($background, 2%);
+$background-hue12: darken($background, 7%);
+$background-hue13: lighten($background, 2%);
+
+$white: white;
+
+$almostWhite: lighten(saturate(adjust-hue($background, 60.0000), 20.0000), 0.7843);
+$bg: $background;
+$nearlyWhite: darken(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 5.4902); // stronger
+$blueGrey: #ccc;
+$midGrey: #53738C; //darken(saturate(adjust-hue($blueGrey, 206.3158), 25.5605), 36.2745);
+$actionsBackground: lighten($background, 6%);
+$autoCompleteBg: $backgroundColor;
+$sectionHighlight: darken(desaturate($background, 0), 5%);
+$snippets:#999;
+$lightenGrey: #6d6d6d;
+
+$links: #3D6E94;
+
+$links-background-hue1: transparentize($links, 1);
+
+$links: $links;
+$links-hue-1: darken(saturate($links, 5%), 5%);
+$links-hue-5: darken(saturate($links, 20%), 20%);
+$linksHover: darken(saturate($links, 20%), 20%);
+$linksHover-hue-2: transparentize($linksHover, .5);
+$linkAlt: $secondary-hue1;
+$md-primary: $links;
+
+$linkTitle: #33FFFF;
+
+$collectionDisLinks: #0075b0;
+
+$red: tomato;
+// warning
+$warning: $red;
+$warn: $red;
+$warningBorder: inset 0 0 0 3px $warning;
+
+
+$text: $dark;
+$text-hue1: lighten($text, 30%);
+$text-hue2: $text;
+$text-hue3: darken($text, 10%);
+
+$notice: #B84D00;
+
+$highlight: $highlightYellow;
+$highlight-hue1: #FFFCC4;
+
+$modalBackdrop: rgb(68,68,68);
+$moreLink: #45aab4;
+
+$selectedItem: saturate(lighten($midGrey, 53%), 40%);
+
+$citationTitle: rgb(68, 112, 123);
+// $citationTitle: $titles;
+
+// chips
+$chipTouchHeight: 28px;
+$chipDesktopHeight: 22px;
+
+// Responsive
+$responsiveMaxWidth: 960px !important;
+
+// Default bars height
+$defaultBarHeight: 60px;
+
+// height of buttons in brief results
+$briefButtonHeight: 38px;
+
+// citations
+$citation: tomato;
+$citationColor: $citation;
+$citation-hue1: darken($citation, 40%);
+
+// personalization
+$personalization: #7d1538;
+
+// Peer Reviewed
+$peer-reviewed-color :#8359d4;
+
+// Open Access
+$open-access-color: #f68212;
+
+// Angular Material
+//-----------------
+
+// Progress bar
+$progressBarHeight: 15px;
+
+// buttons
+$defaultMdButtonHover: rgba(158,158,158,0.2);
+
+
+//// Angular Material overrides
+// Angular Material transition easing curves
+//-----------------------
+
+$swift-ease-out-duration: 0.4s !default;
+$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+
+$swift-ease-in-duration: 0.3s !default;
+$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
+$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
+
+$swift-ease-in-out-duration: 0.5s !default;
+$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
+$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+
+// Angular Material layouts
+// ------------------------------
+
+$baseline-grid: 8px !default;
+$layout-gutter-width: ($baseline-grid * 2) !default;
+
+// Angular Material breakpoints
+// ------------------------------
+
+// $layout-breakpoint-xs: 600px !default;
+// $layout-breakpoint-sm: 960px !default;
+// $layout-breakpoint-md: 1280px !default;
+// $layout-breakpoint-lg: 1920px !default;
diff --git a/tests/manual/TESTBROWSERIFY/showDirectives.txt b/tests/manual/TESTBROWSERIFY/showDirectives.txt
index 4940b4e09..3d64e5e4b 100644
--- a/tests/manual/TESTBROWSERIFY/showDirectives.txt
+++ b/tests/manual/TESTBROWSERIFY/showDirectives.txt
@@ -1 +1 @@
-javascript:(function(){var script=document.createElement("SCRIPT");script.src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';script.type='text/javascript';document.getElementsByTagName("head")[0].appendChild(script);var checkReady=function(callback){if(window.jQuery){callback(jQuery)}else{window.setTimeout(function(){checkReady(callback)},100)}};checkReady(function($){$('primo-explore').find('[parent-ctrl="$ctrl"]').each(function(){$(this).append('Hover for id')})})})();
+javascript:(function(){var script=document.createElement("SCRIPT");script.src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';script.type='text/javascript';document.getElementsByTagName("head")[0].appendChild(script);var checkReady=function(callback){if(window.jQuery){callback(jQuery)}else{window.setTimeout(function(){checkReady(callback)},100)}};checkReady(function($){$('primo-explore').find('[parent-ctrl="$ctrl"]').each(function(){$(this).append('Hover for id')})})})();
diff --git a/tests/manual/TESTCONCAT/README.md b/tests/manual/TESTCONCAT/README.md
index 865ec76b3..b22061969 100644
--- a/tests/manual/TESTCONCAT/README.md
+++ b/tests/manual/TESTCONCAT/README.md
@@ -1,48 +1,48 @@
-
-# The Primo New UI Customization Workflow Development Environment
-
-
-## Package documentation
-
-The development package allows you to configure :
-
-- css
-
-- images
-
-- html
-
-- JavaScript
-
-- The root directory of the package should be named either by the `viewCode` or `CENTRAL_PACKAGE` in case of a consortia level package
-- Whether you develop a consortia level package or a view level package the process remains the same
-- Once deployed the hierarchy is as follows:
- 1. For css - use the cascading ability of css and load the consortia level (CENTRAL_PACKAGE) css first and the view level css afterwards
- 2. For images and html - the system checks for every file if it exists in each level - and prefers the view level file if exists
- 3. For JavaScript - the two package types define 2 different Angular modules:
- - ```var app = angular.module('viewCustom', ['angularLoad']);```
- - ```var app = angular.module('centralCustom', ['angularLoad']);```
-
- and loads both of the modules,
-
-- For each configuration type there is a specified folder in the custom package folder (that can be downloaded form your Primo Back Office)
-- In each folder you will find a specific README.md file with recipes/examples.
-
- [CSS](/VIEW_CODE/css/README.md "css documentation")
-
- [HTML](/VIEW_CODE/html/README.md "html documentation")
-
- [Images](/VIEW_CODE/img/README.md "images documentation")
-
- [JavaScript](/VIEW_CODE/js/README.md "javascript documentation")
-
-- For `colors.json.txt` instructions - please see [CSS](/VIEW_CODE/css/README.md "css documentation") documentation
-
-
-
-
-
-
-
-
-
+
+# The Primo New UI Customization Workflow Development Environment
+
+
+## Package documentation
+
+The development package allows you to configure :
+
+- css
+
+- images
+
+- html
+
+- JavaScript
+
+- The root directory of the package should be named either by the `viewCode` or `CENTRAL_PACKAGE` in case of a consortia level package
+- Whether you develop a consortia level package or a view level package the process remains the same
+- Once deployed the hierarchy is as follows:
+ 1. For css - use the cascading ability of css and load the consortia level (CENTRAL_PACKAGE) css first and the view level css afterwards
+ 2. For images and html - the system checks for every file if it exists in each level - and prefers the view level file if exists
+ 3. For JavaScript - the two package types define 2 different Angular modules:
+ - ```var app = angular.module('viewCustom', ['angularLoad']);```
+ - ```var app = angular.module('centralCustom', ['angularLoad']);```
+
+ and loads both of the modules,
+
+- For each configuration type there is a specified folder in the custom package folder (that can be downloaded form your Primo Back Office)
+- In each folder you will find a specific README.md file with recipes/examples.
+
+ [CSS](/VIEW_CODE/css/README.md "css documentation")
+
+ [HTML](/VIEW_CODE/html/README.md "html documentation")
+
+ [Images](/VIEW_CODE/img/README.md "images documentation")
+
+ [JavaScript](/VIEW_CODE/js/README.md "javascript documentation")
+
+- For `colors.json.txt` instructions - please see [CSS](/VIEW_CODE/css/README.md "css documentation") documentation
+
+
+
+
+
+
+
+
+
diff --git a/tests/manual/TESTCONCAT/colors.json b/tests/manual/TESTCONCAT/colors.json
index 963f80de6..517158ab6 100644
--- a/tests/manual/TESTCONCAT/colors.json
+++ b/tests/manual/TESTCONCAT/colors.json
@@ -1,15 +1,15 @@
-{
- "primary": "red",
- "secondary" : "green",
- "backgroundColor" : "yellow",
- "links": "#3D6E94",
- "warning": "tomato",
- "positive": "#0f7d00",
- "negative": "gray",
- "notice": "#B84D00",
- "linkTitle": "#33FFFF",
- "citation": "tomato",
- "citationTitles": "rgb(68, 112, 123)",
- "personalization": "#7d1538"
-}
-
+{
+ "primary": "red",
+ "secondary" : "green",
+ "backgroundColor" : "yellow",
+ "links": "#3D6E94",
+ "warning": "tomato",
+ "positive": "#0f7d00",
+ "negative": "gray",
+ "notice": "#B84D00",
+ "linkTitle": "#33FFFF",
+ "citation": "tomato",
+ "citationTitles": "rgb(68, 112, 123)",
+ "personalization": "#7d1538"
+}
+
diff --git a/tests/manual/TESTCONCAT/css/README.md b/tests/manual/TESTCONCAT/css/README.md
index 5df326507..70c5e9696 100644
--- a/tests/manual/TESTCONCAT/css/README.md
+++ b/tests/manual/TESTCONCAT/css/README.md
@@ -1,168 +1,168 @@
-# The Primo New UI Customization Workflow Development Environment
-
-
-## css documentation
-
-- Primo uses Angular Directives massively in this project
-
-- To learn more about directives see:
-> https://docs.angularjs.org/guide/directive
-
-- Primo uses external directives from the Angular-material framework :
-> https://material.angularjs.org/latest/
-
-- Those directives are tagged by a prefix : "md-"
-
-- Primo also creates its own directives which are tagged by the "prm-" prefix.
-
-
-Example:
-```
-
-```
-
-
-- You can see in the example how we use :
-
-1. An HTML5 tag - header
-2. A Primo directive : prm-topbar , prm-search-bar.
-3. An external material design directive : md-progress-bar :
-> https://material.angularjs.org/latest/api/directive/mdProgressLinear
-
-
-
-- When defining css rules it is important to understand the css cascading/specifity logic:
-
-> http://www.w3.org/TR/css3-cascade/
-
-> https://specificity.keegan.st/
-
-
-
-
-- When you start working on customizing your css be aware of the ability to define css selectors based on the directive name, which is actually equivalent
-to an html tag - this will enable you changing the design of a component cross-system without relying on id's/classes
-
-- For the example above we can define selectors:
-
-```
-prm-topbar input {....}
-prm-topbar.md-primoExplore-theme input {....}
-```
-- Primo is using a theme inside angular-material to define a palette of colors see:
-> https://material.angularjs.org/latest/Theming/01_introduction
-
-
-- This means that you will often encounter a class "md-primoExplore-theme" attached to elements.
-
-
-
-## Recipes/Examples:
-
-
-# css Recipe 1 - Color Scheme (Starting from August 2016 Release)
-
-- Open the `colors.json.txt` file in the root of your view folder
-- You will see a json object with our default color scheme:
-
- ```
- {
- "primary": "#53738C",
- "secondary" : "#A9CDD6",
- "backgroundColor" : "white",
- "links": "#5C92BD",
- "warning": "tomato",
- "positive": "#0f7d00",
- "negative": "gray",
- "notice": "#e08303"
- }
- ```
-
-- Since November 2016 release - we are giving you the ability to easily customize the majority of the following
-colors - primary, secondary, backgroundColor, links, warning, positive, negative, notice - just change the definition and save the file.
-
-The colors are mapped to different elements in the user interface:
-
-![Color Changes image](../../help_files/colors3.png "Color Changes")
-
-- Open a new command line window
-
-- cd to the project base directory (C:\**\**\primo-explore-devenv)
-- Run `gulp app-css --view ` for example:
- `gulp app-css --view Auto1`
-- for Primo Ve customers add the --ve flag at the end of the command for example:
- `gulp app-css --view Auto1 --ve`
-- A new file will be created on your package css directory named: `app-colors.css`
-- This file will contain all of the primo-explore theme color definitions.
- We will continue to add more color definitions to extend this ability
-- Refresh your browser to see the changes take affect
-- For example, for the following `colors.json.txt` file:
-
-```
-{
- "primary": "#512DA8",
- "secondary" : "#D1C4E9",
- "backgroundColor" : "#BDBDBD",
- "links": "#009688",
- "warning": "#FF5722"
-}
-
-
-```
-
-You will get:
-
- ![Color Changes image](../../help_files/colors1.png "Color Changes")
-
- ![Color Changes image](../../help_files/colors2.png "Color Changes")
-
-# css Recipe 2 - Moving the Facets to the Left
-
-
-- Select the parent container containing the search result and the facets
-- Copy the selector definition using your browsers' dev tools
-- Define the container as
-
-```
-display:flex;
-flex-flow:row-reverse;
-```
-
-
-- complete css definition:
-```
-prm-search > md-content.md-primoExplore-theme .main, prm-search > md-content.md-primoExplore-theme.main {
- display: -webkit-flex; !* Safari *!
- -webkit-flex-flow: row-reverse wrap; !* Safari 6.1+ *!
- display: flex;
- flex-flow: row-reverse wrap;
-
-}
-.screen-gt-sm .sidebar{
- webkit-flex: 0 0 15%;
- flex: 0 0 15%;
-}
-```
-- Save and refresh your browser
-
-- The result:
-
-
- ![Facets image](../../help_files/facets.png "Factes Changes")
-
-
-
-
-
-
-
+# The Primo New UI Customization Workflow Development Environment
+
+
+## css documentation
+
+- Primo uses Angular Directives massively in this project
+
+- To learn more about directives see:
+> https://docs.angularjs.org/guide/directive
+
+- Primo uses external directives from the Angular-material framework :
+> https://material.angularjs.org/latest/
+
+- Those directives are tagged by a prefix : "md-"
+
+- Primo also creates its own directives which are tagged by the "prm-" prefix.
+
+
+Example:
+```
+
+```
+
+
+- You can see in the example how we use :
+
+1. An HTML5 tag - header
+2. A Primo directive : prm-topbar , prm-search-bar.
+3. An external material design directive : md-progress-bar :
+> https://material.angularjs.org/latest/api/directive/mdProgressLinear
+
+
+
+- When defining css rules it is important to understand the css cascading/specifity logic:
+
+> http://www.w3.org/TR/css3-cascade/
+
+> https://specificity.keegan.st/
+
+
+
+
+- When you start working on customizing your css be aware of the ability to define css selectors based on the directive name, which is actually equivalent
+to an html tag - this will enable you changing the design of a component cross-system without relying on id's/classes
+
+- For the example above we can define selectors:
+
+```
+prm-topbar input {....}
+prm-topbar.md-primoExplore-theme input {....}
+```
+- Primo is using a theme inside angular-material to define a palette of colors see:
+> https://material.angularjs.org/latest/Theming/01_introduction
+
+
+- This means that you will often encounter a class "md-primoExplore-theme" attached to elements.
+
+
+
+## Recipes/Examples:
+
+
+# css Recipe 1 - Color Scheme (Starting from August 2016 Release)
+
+- Open the `colors.json.txt` file in the root of your view folder
+- You will see a json object with our default color scheme:
+
+ ```
+ {
+ "primary": "#53738C",
+ "secondary" : "#A9CDD6",
+ "backgroundColor" : "white",
+ "links": "#5C92BD",
+ "warning": "tomato",
+ "positive": "#0f7d00",
+ "negative": "gray",
+ "notice": "#e08303"
+ }
+ ```
+
+- Since November 2016 release - we are giving you the ability to easily customize the majority of the following
+colors - primary, secondary, backgroundColor, links, warning, positive, negative, notice - just change the definition and save the file.
+
+The colors are mapped to different elements in the user interface:
+
+![Color Changes image](../../help_files/colors3.png "Color Changes")
+
+- Open a new command line window
+
+- cd to the project base directory (C:\**\**\primo-explore-devenv)
+- Run `gulp app-css --view ` for example:
+ `gulp app-css --view Auto1`
+- for Primo Ve customers add the --ve flag at the end of the command for example:
+ `gulp app-css --view Auto1 --ve`
+- A new file will be created on your package css directory named: `app-colors.css`
+- This file will contain all of the primo-explore theme color definitions.
+ We will continue to add more color definitions to extend this ability
+- Refresh your browser to see the changes take affect
+- For example, for the following `colors.json.txt` file:
+
+```
+{
+ "primary": "#512DA8",
+ "secondary" : "#D1C4E9",
+ "backgroundColor" : "#BDBDBD",
+ "links": "#009688",
+ "warning": "#FF5722"
+}
+
+
+```
+
+You will get:
+
+ ![Color Changes image](../../help_files/colors1.png "Color Changes")
+
+ ![Color Changes image](../../help_files/colors2.png "Color Changes")
+
+# css Recipe 2 - Moving the Facets to the Left
+
+
+- Select the parent container containing the search result and the facets
+- Copy the selector definition using your browsers' dev tools
+- Define the container as
+
+```
+display:flex;
+flex-flow:row-reverse;
+```
+
+
+- complete css definition:
+```
+prm-search > md-content.md-primoExplore-theme .main, prm-search > md-content.md-primoExplore-theme.main {
+ display: -webkit-flex; !* Safari *!
+ -webkit-flex-flow: row-reverse wrap; !* Safari 6.1+ *!
+ display: flex;
+ flex-flow: row-reverse wrap;
+
+}
+.screen-gt-sm .sidebar{
+ webkit-flex: 0 0 15%;
+ flex: 0 0 15%;
+}
+```
+- Save and refresh your browser
+
+- The result:
+
+
+ ![Facets image](../../help_files/facets.png "Factes Changes")
+
+
+
+
+
+
+
diff --git a/tests/manual/TESTCONCAT/html/README.md b/tests/manual/TESTCONCAT/html/README.md
index 3f8d98b15..e2800ec36 100644
--- a/tests/manual/TESTCONCAT/html/README.md
+++ b/tests/manual/TESTCONCAT/html/README.md
@@ -1,152 +1,152 @@
-# The Primo New UI Customization Workflow Development Environment
-
-
-## html documentation
-
- - In this folder you will find static html files in their OTB state
- - The files are separated into directories (starting from the November 2016 Release)
- - You can edit the html to comply with your library requirements
- - To support multiple languages in your interface just add a suffix with the language code to your file-name,
- For example:
-
- 1. homepage_fe_FR.html (in the August 2016 Release use home_fe_FR.html)
- 2. help_de_DE.html(Available in the November 2016 Release)
-
- - This is how your directory structure should look like:
-
- ![August 2016 Release structure image](../../help_files/htmlStructureAug.png "August 2016 Release structure")
-
-
- - Note that you can use Angular Material directives in your html:
- > https://material.angularjs.org/latest/
-
-
-## Email templates
- Starting from 2020 Primo supports a new html template to customize email messages sent to patrons'.
-
- To customize this template create a file named email_fr_FR.html (based on your language suffix) and upload it using the html directory in your customization package.
-
- In this html file you can design your own email template using html.
-
- Since Primo supports the email action on multiple records you should add the following attribute to the html element represnting a record:
-
- ```ng-if="$ctrl.parentCtrl.fullViewLoaded" ng-repeat="item in $ctrl.parentCtrl.delayedItems"```
-
- for example:
-
- For an email template layout as below the attribute should be added to the records container:
-
- ```
-
-
-
-
-
-
- ...
-
-
-
- ```
-
- When editing the template you can:
-
- 1. Use regular html (use best practices for email templating: https://mailchimp.com/help/about-html-email/) to design the layout of your email based on your preferences.
-
- 2. You can take advantage of some of our OTB directives in your templates:
-```
-
-
-
-
-
-
-
-
- ```
- 3. You can reference the sent item(pnx/record) using angular syntax to present the relevant data:
-
- use the curly brackets to access the pnx diectly - for example:
-```
- {{item.pnx.display.title}}
-```
- or loop over values using the ng-repeat directive to add multiple fields:
-
-```
-
Additional Information From the Record:
-
OCLCID:
-
{{oclcid}}
-```
-``` ```
-
-
-
-
-
-
-**Notice :** Any link in your template will be removed - for security reasons, we will not allow links other than the link to the record to avoid email exploits.
-
-To add the link to the full record you can either:
- 1. Use the
-
- ```
-
-
- ```
-directive in your template - This includes the link to the record
-
-2. Use the following code snippet in your template:
-
- ```
-
- {{item.pnx.display.title[0]}}
-
- ```
-
-To use your library logo (not the OTB
) you can use your own html, with an img element that has a class attribute of *logo-image* immediatly following the opening tag, for example:
-
- ```
-
-
-
-
-
- |
-
-
-
-```
-
-
- ## Examples
-
- Full examples of email templates can be found in the help files folder folder:
-
- 1. [The Out of the Box template for emails](../../help_files/email_en_US.html) email_en_US.html
-
- 2. [A template based on the OTB - brief + custom fields + availability](../../help_files/email_en_US-brief+additionalField+availability.html)
- will produce the following email:
-
- ![example brief](../../help_files/example-bried-and-subject.png "example brief")
-
- 3. [A template based on an open source email template with no Primo directives - just use of the ```{{item.pnx.display.title}}```](../../help_files/email_en_US_Details.html)
- will produce the following email:
-
- ![example external](../../help_files/example-external.png "example external")
-
-
-
-
+# The Primo New UI Customization Workflow Development Environment
+
+
+## html documentation
+
+ - In this folder you will find static html files in their OTB state
+ - The files are separated into directories (starting from the November 2016 Release)
+ - You can edit the html to comply with your library requirements
+ - To support multiple languages in your interface just add a suffix with the language code to your file-name,
+ For example:
+
+ 1. homepage_fe_FR.html (in the August 2016 Release use home_fe_FR.html)
+ 2. help_de_DE.html(Available in the November 2016 Release)
+
+ - This is how your directory structure should look like:
+
+ ![August 2016 Release structure image](../../help_files/htmlStructureAug.png "August 2016 Release structure")
+
+
+ - Note that you can use Angular Material directives in your html:
+ > https://material.angularjs.org/latest/
+
+
+## Email templates
+ Starting from 2020 Primo supports a new html template to customize email messages sent to patrons'.
+
+ To customize this template create a file named email_fr_FR.html (based on your language suffix) and upload it using the html directory in your customization package.
+
+ In this html file you can design your own email template using html.
+
+ Since Primo supports the email action on multiple records you should add the following attribute to the html element represnting a record:
+
+ ```ng-if="$ctrl.parentCtrl.fullViewLoaded" ng-repeat="item in $ctrl.parentCtrl.delayedItems"```
+
+ for example:
+
+ For an email template layout as below the attribute should be added to the records container:
+
+ ```
+
+
+
+
+
+
+ ...
+
+
+
+ ```
+
+ When editing the template you can:
+
+ 1. Use regular html (use best practices for email templating: https://mailchimp.com/help/about-html-email/) to design the layout of your email based on your preferences.
+
+ 2. You can take advantage of some of our OTB directives in your templates:
+```
+
+
+
+
+
+
+
+
+ ```
+ 3. You can reference the sent item(pnx/record) using angular syntax to present the relevant data:
+
+ use the curly brackets to access the pnx diectly - for example:
+```
+ {{item.pnx.display.title}}
+```
+ or loop over values using the ng-repeat directive to add multiple fields:
+
+```
+
Additional Information From the Record:
+
OCLCID:
+
{{oclcid}}
+```
+``` ```
+
+
+
+
+
+
+**Notice :** Any link in your template will be removed - for security reasons, we will not allow links other than the link to the record to avoid email exploits.
+
+To add the link to the full record you can either:
+ 1. Use the
+
+ ```
+
+
+ ```
+directive in your template - This includes the link to the record
+
+2. Use the following code snippet in your template:
+
+ ```
+
+ {{item.pnx.display.title[0]}}
+
+ ```
+
+To use your library logo (not the OTB
) you can use your own html, with an img element that has a class attribute of *logo-image* immediatly following the opening tag, for example:
+
+ ```
+
+
+
+
+
+ |
+
+
+
+```
+
+
+ ## Examples
+
+ Full examples of email templates can be found in the help files folder folder:
+
+ 1. [The Out of the Box template for emails](../../help_files/email_en_US.html) email_en_US.html
+
+ 2. [A template based on the OTB - brief + custom fields + availability](../../help_files/email_en_US-brief+additionalField+availability.html)
+ will produce the following email:
+
+ ![example brief](../../help_files/example-bried-and-subject.png "example brief")
+
+ 3. [A template based on an open source email template with no Primo directives - just use of the ```{{item.pnx.display.title}}```](../../help_files/email_en_US_Details.html)
+ will produce the following email:
+
+ ![example external](../../help_files/example-external.png "example external")
+
+
+
+
diff --git a/tests/manual/TESTCONCAT/html/home_en_US.html b/tests/manual/TESTCONCAT/html/home_en_US.html
index 96b69aa8e..09f950a2c 100644
--- a/tests/manual/TESTCONCAT/html/home_en_US.html
+++ b/tests/manual/TESTCONCAT/html/home_en_US.html
@@ -1 +1 @@
-Customized
+Customized
diff --git a/tests/manual/TESTCONCAT/img/README.md b/tests/manual/TESTCONCAT/img/README.md
index eb4c0bb82..bb1ffb13e 100644
--- a/tests/manual/TESTCONCAT/img/README.md
+++ b/tests/manual/TESTCONCAT/img/README.md
@@ -1,20 +1,20 @@
-# The Primo New UI Customization Workflow Development Environment
-
-
-## images documentation
-
- - Primo allows the customization of the following images;
- 1. Library Logo - just place a file named `library-logo.png` in this location
- 2. Library favicon - just place a file named `favicon.ico` in this location
- 3. Default Resource Types - just place a files following this convention :
- `icon_
.png`
-
- For Example:
- `icon_book.png`
-
-
-
-
-
-
-
+# The Primo New UI Customization Workflow Development Environment
+
+
+## images documentation
+
+ - Primo allows the customization of the following images;
+ 1. Library Logo - just place a file named `library-logo.png` in this location
+ 2. Library favicon - just place a file named `favicon.ico` in this location
+ 3. Default Resource Types - just place a files following this convention :
+ `icon_.png`
+
+ For Example:
+ `icon_book.png`
+
+
+
+
+
+
+
diff --git a/tests/manual/TESTCONCAT/js/README.md b/tests/manual/TESTCONCAT/js/README.md
index cfc360d7a..741a4c368 100644
--- a/tests/manual/TESTCONCAT/js/README.md
+++ b/tests/manual/TESTCONCAT/js/README.md
@@ -1,275 +1,275 @@
-# The Primo New UI Customization Workflow Development Environment
-
-
-## JavaScript documentation
-
-- When you want to add functionality to your Primo installation you will be using Angular Directives.
-
-- To learn more about directives see:
-> https://docs.angularjs.org/guide/directive
-
-- Primo uses external directives from the Angular-material framework:
-> https://material.angularjs.org/latest/
-
-- Those directives are tagged by a prefix : "md-"
-
-- Primo also creates its own directives which are tagged by the "prm-" prefix.
-
-
-Example:
-```
-
-```
-
-
-- You can see in the example how we use :
-
-1. An HTML5 tag - header
-2. A Primo directive : prm-topbar , prm-search-bar.
-3. An external material design directive : md-progress-bar :
-> https://material.angularjs.org/latest/api/directive/mdProgressLinear
-
-
-
-## Concept
-
-- When You want to add your own JavaScript functionality - you will need to plug-in to placeholder Directives we added to the system, by creating your own placeholder Directive.
-- Those directives are added as the last child element for every Primo directive (defined by the `prm-` prefix)
-- The placeholder directives are injected (as input) with the Controller of their parent, thus have access to the data model of the parent directive
-- Use the examples below as starting points for your JavaScript plug-in directives
-- Learn about Angular Directives to better understand the different abilities this workflow offers
-> https://docs.angularjs.org/guide/directive
-
-
-
-## Recipes/Examples:
-
-# Note:
-
-The examples below use the back tic '`' for templates - which will work using babel (Documentation on how to do so will be shared)
-This causes the examples to fail on IE11 browsers.
-
-To solve this you can replace the '`' with regular apostrophe ("'") and use a single line template (less readable but works just as well).
-
-
-
-
-# JavaScript Recipe 1 - a Static `hello world` html Message
-
-
-- Use the `showDirectives` (located in the root directory of this package is the showDirectives.txt file
-, just add the content of the file as a bookmark to your browser) scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
-
-
-![Show Directives image](../../help_files/showDirectives.png "Show Directives Changes")
-
-- Edit the primo-explore/custom/js/custom.js file and add a component declaration for `myInstitutionComponent` and a component declaration
-for the `prmSearchBarAfter` directive
-
- ```
- app.component('myInstitutionComponent', {
-
-
- });
-
- app.component('prmSearchBarAfter', {
-
-
- });
- ```
-- Add the template property with your static message
-
- ```
- app.component('myInstitutionComponent', {
- template: `Hello World`
- });
- ```
-- Add the template property with your component template (myInstitutionComponent)
-
- ```
- app.component('prmSearchBarAfter', {
- bindings: {parentCtrl: `<`},
- template: ``
- });
- ```
-
-
-- Save and refresh your browser
-
-![Hello World image](../../help_files/js1.png "Hello World Changes")
-
-# JavaScript Recipe 2 - a Dynamic Directive
-- Use the `showDirectives` scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
-- Run the following command in your browsers' console tab:
-```
- angular.reloadWithDebugInfo()
-```
-- Focus on the `prmSearchBarAfter` directive
-
-![Focus image](../../help_files/js2.png "Focus")
-
-- Run the following command in your browsers' console tab:
-```
- angular.element($0).scope().$ctrl (angular.element($0).scope().ctrl in version earlier than February 2017)
-```
-
-- Review the properties of the directive to decide which data elements can be used, avoid methods/functions as they wont be backwards compatible
-
-![properties image](../../help_files/js3.png "properties")
-
-
-- Edit primo-explore/custom/js/custom.js file and add: a component declaration for the `prmSearchBarAfter` directive, and a component declaration for the `myInstitutionComponent`
-
-- Add a binding definition the input parentCtrl for both components
-```
- bindings: {parentCtrl: '<'},
-```
-- Add a controller definition for the `myInstitutionComponent` component:
-```
- controller: 'MyInstitutionComponentController',
-```
-- Define a controller with 2 getter methods to return the query and selected scope
-```
-app.controller('MyInstitutionComponentController', [function () {
- var vm = this;
-
-
- vm.getSelectdScope = getSelectdScope;
- vm.getQuery = getQuery;
-
-
- function getSelectdScope() {
- return vm.parentCtrl.scopeField;
- }
-
- function getQuery() {
- return vm.parentCtrl.mainSearchField;
- }
- }]);
-
-```
-- Edit the `prmSearchBarAfter` directive template to reference the `myInstitutionComponent`
-```
-template: ``
-```
-- Edit the `myInstitutionComponent` directive template to reference the getter methods
-```
-template: `
-
-
-
- This is a demo presenting the ability to display query
- information below the search box
- Query: {{$ctrl.getQuery()}}
- Scope: {{$ctrl.getSelectdScope()}}
-
-
-
-
-
-
- Action 1
- Action 2
-
-
-
`
-
- ```
-- Save and refresh your browser
-
-![dynamic example image](../../help_files/js4.png "dynamic example")
-
-# JavaScript Recipe 3 - Adding the Altmetrics Widget
-- Use the `showDirectives` scriplet to identify the `prmFullViewAfter` directive which you will plugin to
-
-![Altmetrics example image](../../help_files/js5.png "Altmetrics example")
-
-- Run the following command in your browsers' console tab:
-`angular.reloadWithDebugInfo()`
-- Focus on the `prmFullViewAfter` directive
-- Run the following command in your browsers' console tab:
-`angular.element($0).scope().ctrl`
-
-- Review the properties of the directive to decide which data elements can be used, avoid methods/functions as they wont be backwards compatible
-
-![Altmetrics example 2 image](../../help_files/js6.png "Altmetrics 2 example")
-
-- Edit primo-explore/custom/js/custom.js file and add: a component declaration for the `prmFullViewAfter` directive, and a component declaration for the `myInstitutionComponent`
-
-- Add a binding definition the input parentCtrl for both components
-```
- bindings: {parentCtrl: '<'},
-```
-- Add a controller definition for the `myInstitutionComponent` component:
-```
- controller: 'MyInstitutionComponentController',
-```
-- Define a controller that populates the doi and loads the Altmetrics js file
-```
-app.controller('MyInstitutionComponentController', ['angularLoad', function (angularLoad) {
- var vm = this;
- vm.doi = vm.parentCtrl.item.pnx.addata.doi[0] || '';
-
- vm.$onInit = function () {
- angularLoad.loadScript('https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js?' + Date.now()).then(function () {
-
- });
- };
- }]);
-```
-- Edit the `prmFullViewAfter` directive template to reference the `myInstitutionComponent`
-```
-template: ``
-```
-- Edit the `myInstitutionComponent` directive template to add the Altmetrics div and bind the data-doi attribute to the controller
-```
-app.component('myInstitutionComponent', {
- bindings: {parentCtrl: '<'},
- controller: 'MyInstitutionComponentController',
- template: ``
- });
- ```
-
-- Edit the custom1.css file and add the following definitions:
-
- ```
- .full-view-section.loc-altemtrics{
- background-color: #f3f3f3;
- margin-top:0px;
- padding-left: 3em;
- }
- ```
-
-- Save and refresh your browser
-
-![Altmetrics example 3 image](../../help_files/js7.png "Altmetrics 3 example")
+# The Primo New UI Customization Workflow Development Environment
+
+
+## JavaScript documentation
+
+- When you want to add functionality to your Primo installation you will be using Angular Directives.
+
+- To learn more about directives see:
+> https://docs.angularjs.org/guide/directive
+
+- Primo uses external directives from the Angular-material framework:
+> https://material.angularjs.org/latest/
+
+- Those directives are tagged by a prefix : "md-"
+
+- Primo also creates its own directives which are tagged by the "prm-" prefix.
+
+
+Example:
+```
+
+```
+
+
+- You can see in the example how we use :
+
+1. An HTML5 tag - header
+2. A Primo directive : prm-topbar , prm-search-bar.
+3. An external material design directive : md-progress-bar :
+> https://material.angularjs.org/latest/api/directive/mdProgressLinear
+
+
+
+## Concept
+
+- When You want to add your own JavaScript functionality - you will need to plug-in to placeholder Directives we added to the system, by creating your own placeholder Directive.
+- Those directives are added as the last child element for every Primo directive (defined by the `prm-` prefix)
+- The placeholder directives are injected (as input) with the Controller of their parent, thus have access to the data model of the parent directive
+- Use the examples below as starting points for your JavaScript plug-in directives
+- Learn about Angular Directives to better understand the different abilities this workflow offers
+> https://docs.angularjs.org/guide/directive
+
+
+
+## Recipes/Examples:
+
+# Note:
+
+The examples below use the back tic '`' for templates - which will work using babel (Documentation on how to do so will be shared)
+This causes the examples to fail on IE11 browsers.
+
+To solve this you can replace the '`' with regular apostrophe ("'") and use a single line template (less readable but works just as well).
+
+
+
+
+# JavaScript Recipe 1 - a Static `hello world` html Message
+
+
+- Use the `showDirectives` (located in the root directory of this package is the showDirectives.txt file
+, just add the content of the file as a bookmark to your browser) scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
+
+
+![Show Directives image](../../help_files/showDirectives.png "Show Directives Changes")
+
+- Edit the primo-explore/custom/js/custom.js file and add a component declaration for `myInstitutionComponent` and a component declaration
+for the `prmSearchBarAfter` directive
+
+ ```
+ app.component('myInstitutionComponent', {
+
+
+ });
+
+ app.component('prmSearchBarAfter', {
+
+
+ });
+ ```
+- Add the template property with your static message
+
+ ```
+ app.component('myInstitutionComponent', {
+ template: `Hello World`
+ });
+ ```
+- Add the template property with your component template (myInstitutionComponent)
+
+ ```
+ app.component('prmSearchBarAfter', {
+ bindings: {parentCtrl: `<`},
+ template: ``
+ });
+ ```
+
+
+- Save and refresh your browser
+
+![Hello World image](../../help_files/js1.png "Hello World Changes")
+
+# JavaScript Recipe 2 - a Dynamic Directive
+- Use the `showDirectives` scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
+- Run the following command in your browsers' console tab:
+```
+ angular.reloadWithDebugInfo()
+```
+- Focus on the `prmSearchBarAfter` directive
+
+![Focus image](../../help_files/js2.png "Focus")
+
+- Run the following command in your browsers' console tab:
+```
+ angular.element($0).scope().$ctrl (angular.element($0).scope().ctrl in version earlier than February 2017)
+```
+
+- Review the properties of the directive to decide which data elements can be used, avoid methods/functions as they wont be backwards compatible
+
+![properties image](../../help_files/js3.png "properties")
+
+
+- Edit primo-explore/custom/js/custom.js file and add: a component declaration for the `prmSearchBarAfter` directive, and a component declaration for the `myInstitutionComponent`
+
+- Add a binding definition the input parentCtrl for both components
+```
+ bindings: {parentCtrl: '<'},
+```
+- Add a controller definition for the `myInstitutionComponent` component:
+```
+ controller: 'MyInstitutionComponentController',
+```
+- Define a controller with 2 getter methods to return the query and selected scope
+```
+app.controller('MyInstitutionComponentController', [function () {
+ var vm = this;
+
+
+ vm.getSelectdScope = getSelectdScope;
+ vm.getQuery = getQuery;
+
+
+ function getSelectdScope() {
+ return vm.parentCtrl.scopeField;
+ }
+
+ function getQuery() {
+ return vm.parentCtrl.mainSearchField;
+ }
+ }]);
+
+```
+- Edit the `prmSearchBarAfter` directive template to reference the `myInstitutionComponent`
+```
+template: ``
+```
+- Edit the `myInstitutionComponent` directive template to reference the getter methods
+```
+template: `
+
+
+
+ This is a demo presenting the ability to display query
+ information below the search box
+ Query: {{$ctrl.getQuery()}}
+ Scope: {{$ctrl.getSelectdScope()}}
+
+
+
+
+
+
+ Action 1
+ Action 2
+
+
+
`
+
+ ```
+- Save and refresh your browser
+
+![dynamic example image](../../help_files/js4.png "dynamic example")
+
+# JavaScript Recipe 3 - Adding the Altmetrics Widget
+- Use the `showDirectives` scriplet to identify the `prmFullViewAfter` directive which you will plugin to
+
+![Altmetrics example image](../../help_files/js5.png "Altmetrics example")
+
+- Run the following command in your browsers' console tab:
+`angular.reloadWithDebugInfo()`
+- Focus on the `prmFullViewAfter` directive
+- Run the following command in your browsers' console tab:
+`angular.element($0).scope().ctrl`
+
+- Review the properties of the directive to decide which data elements can be used, avoid methods/functions as they wont be backwards compatible
+
+![Altmetrics example 2 image](../../help_files/js6.png "Altmetrics 2 example")
+
+- Edit primo-explore/custom/js/custom.js file and add: a component declaration for the `prmFullViewAfter` directive, and a component declaration for the `myInstitutionComponent`
+
+- Add a binding definition the input parentCtrl for both components
+```
+ bindings: {parentCtrl: '<'},
+```
+- Add a controller definition for the `myInstitutionComponent` component:
+```
+ controller: 'MyInstitutionComponentController',
+```
+- Define a controller that populates the doi and loads the Altmetrics js file
+```
+app.controller('MyInstitutionComponentController', ['angularLoad', function (angularLoad) {
+ var vm = this;
+ vm.doi = vm.parentCtrl.item.pnx.addata.doi[0] || '';
+
+ vm.$onInit = function () {
+ angularLoad.loadScript('https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js?' + Date.now()).then(function () {
+
+ });
+ };
+ }]);
+```
+- Edit the `prmFullViewAfter` directive template to reference the `myInstitutionComponent`
+```
+template: ``
+```
+- Edit the `myInstitutionComponent` directive template to add the Altmetrics div and bind the data-doi attribute to the controller
+```
+app.component('myInstitutionComponent', {
+ bindings: {parentCtrl: '<'},
+ controller: 'MyInstitutionComponentController',
+ template: ``
+ });
+ ```
+
+- Edit the custom1.css file and add the following definitions:
+
+ ```
+ .full-view-section.loc-altemtrics{
+ background-color: #f3f3f3;
+ margin-top:0px;
+ padding-left: 3em;
+ }
+ ```
+
+- Save and refresh your browser
+
+![Altmetrics example 3 image](../../help_files/js7.png "Altmetrics 3 example")
diff --git a/tests/manual/TESTCONCAT/js/custom.js b/tests/manual/TESTCONCAT/js/custom.js
index b1c2ca3d6..38cdb460d 100644
--- a/tests/manual/TESTCONCAT/js/custom.js
+++ b/tests/manual/TESTCONCAT/js/custom.js
@@ -1,42 +1,42 @@
-(function(){
-"use strict";
-'use strict';
-
-var app = angular.module('viewCustom', ['angularLoad']);
-
-app.service('TestService', [function () {
- var vm = this;
-
- vm.manipulate = manipulate;
-
- function manipulate(str) {
- return str.split("").reverse().join("");
- }
-}]);
-
-app.component('myInstitutionComponent', {
- bindings: { parentCtrl: '<' },
- controller: 'MyInstitutionComponentController',
- template: '\n
\n \n \n This is a demo presenting the ability to display query\n information below the search box\n Query: {{$ctrl.getQuery()}}\n Scope: {{$ctrl.getSelectdScope()}}\n \n \n \n \n \n \n Action 1\n Action 2\n \n \n
\n '
-});
-
-app.component('prmSearchBarAfter', {
- bindings: { parentCtrl: '<' },
- template: ''
-});
-
-app.controller('MyInstitutionComponentController', ['TestService', function (testService) {
- var vm = this;
-
- vm.getSelectdScope = getSelectdScope;
- vm.getQuery = getQuery;
-
- function getSelectdScope() {
- return testService.manipulate(vm.parentCtrl.scopeField);
- }
-
- function getQuery() {
- return vm.parentCtrl.mainSearchField;
- }
-}]);
+(function(){
+"use strict";
+'use strict';
+
+var app = angular.module('viewCustom', ['angularLoad']);
+
+app.service('TestService', [function () {
+ var vm = this;
+
+ vm.manipulate = manipulate;
+
+ function manipulate(str) {
+ return str.split("").reverse().join("");
+ }
+}]);
+
+app.component('myInstitutionComponent', {
+ bindings: { parentCtrl: '<' },
+ controller: 'MyInstitutionComponentController',
+ template: '\n
\n \n \n This is a demo presenting the ability to display query\n information below the search box\n Query: {{$ctrl.getQuery()}}\n Scope: {{$ctrl.getSelectdScope()}}\n \n \n \n \n \n \n Action 1\n Action 2\n \n \n
\n '
+});
+
+app.component('prmSearchBarAfter', {
+ bindings: { parentCtrl: '<' },
+ template: ''
+});
+
+app.controller('MyInstitutionComponentController', ['TestService', function (testService) {
+ var vm = this;
+
+ vm.getSelectdScope = getSelectdScope;
+ vm.getQuery = getQuery;
+
+ function getSelectdScope() {
+ return testService.manipulate(vm.parentCtrl.scopeField);
+ }
+
+ function getQuery() {
+ return vm.parentCtrl.mainSearchField;
+ }
+}]);
})();
\ No newline at end of file
diff --git a/tests/manual/TESTCONCAT/js/custom.module.js b/tests/manual/TESTCONCAT/js/custom.module.js
index 80a8a536b..9aee9a710 100644
--- a/tests/manual/TESTCONCAT/js/custom.module.js
+++ b/tests/manual/TESTCONCAT/js/custom.module.js
@@ -1 +1 @@
-var app = angular.module('viewCustom', ['angularLoad']);
+var app = angular.module('viewCustom', ['angularLoad']);
diff --git a/tests/manual/TESTCONCAT/js/test.service.js b/tests/manual/TESTCONCAT/js/test.service.js
index 3579f665b..eb72386a3 100644
--- a/tests/manual/TESTCONCAT/js/test.service.js
+++ b/tests/manual/TESTCONCAT/js/test.service.js
@@ -1,11 +1,11 @@
-app.service('TestService', [function () {
- let vm = this;
-
-
- vm.manipulate = manipulate;
-
-
- function manipulate(str){
- return str.split("").reverse().join("");
- }
-}]);
+app.service('TestService', [function () {
+ let vm = this;
+
+
+ vm.manipulate = manipulate;
+
+
+ function manipulate(str){
+ return str.split("").reverse().join("");
+ }
+}]);
diff --git a/tests/manual/TESTCONCAT/js/testjs.js b/tests/manual/TESTCONCAT/js/testjs.js
index 04a5c6e30..d11122fcf 100644
--- a/tests/manual/TESTCONCAT/js/testjs.js
+++ b/tests/manual/TESTCONCAT/js/testjs.js
@@ -1,50 +1,50 @@
-app.component('myInstitutionComponent', {
- bindings: {parentCtrl: '<'},
- controller: 'MyInstitutionComponentController',
- template: `
-
-
-
- This is a demo presenting the ability to display query
- information below the search box
- Query: {{$ctrl.getQuery()}}
- Scope: {{$ctrl.getSelectdScope()}}
-
-
-
-
-
-
- Action 1
- Action 2
-
-
-
- `
-});
-
-
-
-
-
-app.component('prmSearchBarAfter', {
- bindings: {parentCtrl: `<`},
- template: ``
-});
-
-app.controller('MyInstitutionComponentController', ['TestService', function (testService) {
- var vm = this;
-
-
- vm.getSelectdScope = getSelectdScope;
- vm.getQuery = getQuery;
-
-
- function getSelectdScope() {
- return testService.manipulate(vm.parentCtrl.scopeField);
- }
-
- function getQuery() {
- return vm.parentCtrl.mainSearchField;
- }
-}]);
+app.component('myInstitutionComponent', {
+ bindings: {parentCtrl: '<'},
+ controller: 'MyInstitutionComponentController',
+ template: `
+
+
+
+ This is a demo presenting the ability to display query
+ information below the search box
+ Query: {{$ctrl.getQuery()}}
+ Scope: {{$ctrl.getSelectdScope()}}
+
+
+
+
+
+
+ Action 1
+ Action 2
+
+
+
+ `
+});
+
+
+
+
+
+app.component('prmSearchBarAfter', {
+ bindings: {parentCtrl: `<`},
+ template: ``
+});
+
+app.controller('MyInstitutionComponentController', ['TestService', function (testService) {
+ var vm = this;
+
+
+ vm.getSelectdScope = getSelectdScope;
+ vm.getQuery = getQuery;
+
+
+ function getSelectdScope() {
+ return testService.manipulate(vm.parentCtrl.scopeField);
+ }
+
+ function getQuery() {
+ return vm.parentCtrl.mainSearchField;
+ }
+}]);
diff --git a/tests/manual/TESTCONCAT/scss/partials/_variables.scss b/tests/manual/TESTCONCAT/scss/partials/_variables.scss
index c70d2883c..0ef29b3a9 100644
--- a/tests/manual/TESTCONCAT/scss/partials/_variables.scss
+++ b/tests/manual/TESTCONCAT/scss/partials/_variables.scss
@@ -1,225 +1,225 @@
-//// VARIABLES
-// The complex color calculation were created with http://razorjam.github.io/sasscolourfunctioncalculator/
-
-// Fonts family
-$serif: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-// Font weights
-$light: 300;
-$normal: 400;
-$bold: 600;
-$heavy: 900;
-
-// Font size
-$defaultFontSize: 15px;
-
-// Shapes
-$radius: 3px;
-
-// Padding
-$paddingBase: 1em;
-$paddingExtra: 1.5em;
-$paddingMedium: 1.3em;
-$paddingLarge: 1em;
-$paddingSmall: .5em;
-$paddingTiny: .25em;
-
-// colors
-
-$muteOrange: red;
-
-
-
-$almostBlack: #777;
-
-
-
-$titles: rgb(68, 112, 123);
-$frbr: #ed9100;
-$pink: rgb(255, 171, 200);
-
-$dark: #3a3a3a;
-$darker: darken(saturate(adjust-hue($dark, 0.0000), 0.0000), 6.6667);
-
-// lighter background color
-
-
-$highlightYellow: #FFFCC4; //stronger
-$highlight: darken(desaturate(adjust-hue($highlightYellow, -4.0920), 16.0000), 8.0392);
-$highlightText: #ffe564;
-$success: #3EA03E;
-//$green: #3EA03E; // redundancy of 'success'
-$green: #198A19;
-//$orange: #CE8015; //#E0962E;
-$muteOrange: #C59655;
-$yellow: #F1C16F;
-$overlayDarkDG: rgba(68, 68, 68, 0.6);
-
-// $availabiltyDetails: desaturate(lighten($midGrey,5%), 5%);
-//$maybe: $orange;
-
-$alert: #F7EDA3;
-$alert-hue1: darken(desaturate(adjust-hue($alert, 0.3074), 15.3043), 2.9412);
-
-
-$disabled: #aaa;
-$courseColor: #55909B;
-
-$primary: red;
-$primary-hue1: darken($primary, 3%);
-$primary-hue2: darken($primary, 5%);
-$primary-hue3: darken($primary-hue2, 2%);
-$primary-hue4: darken($primary, 10%);
-$primary-hue5: darker($primary, -5%);
-
-$secondary: green;
-$secondary-hue1: darken(saturate(adjust-hue($secondary, -6.5946), 9.1452), 26.2745);
-$secondary-hue2: darken($secondary, 20%);
-$secondary-hue3:darken(saturate(adjust-hue($secondary, -12), 30.28), 47.65); // "show more" buttons in facets
-$secondary-hue4: darken(saturate(adjust-hue($secondary, -7), 64.57), 13.92);
-
-
-$backgroundColor: yellow;
-
-$positive: #0f7d00;
-
-$negative: gray;
-
-$background: darken(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 8.6275); //redundancy of almostwhite
-
-$background-hue1: darken($backgroundColor, 3%); // darker 1 (i.e: background for locations filter bar)
-// $background-hue2: lighten(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 3.9216); // lighter 1 (i.e: background for full view dialog)
-$background-hue2: lighten($background, 4%);
-$background-hue3: lighten(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 5.8824); // lighter 2 (i.e: background for actions forms)
-
-$background-hue4: lighten($background, 3%);
-$background-hue5: transparentize($background, .5);
-$background-hue6: darken($background, 1%);
-$background-hue7: darken($background, 10%);
-$background-hue8: lighten($background, 6%);
-$background-hue9: darken($background, 5%);
-$background-hue10: darken($background, 12%);
-$background-hue11: darken($background, 2%);
-$background-hue12: darken($background, 7%);
-$background-hue13: lighten($background, 2%);
-
-$white: white;
-
-$almostWhite: lighten(saturate(adjust-hue($background, 60.0000), 20.0000), 0.7843);
-$bg: $background;
-$nearlyWhite: darken(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 5.4902); // stronger
-$blueGrey: #ccc;
-$midGrey: #53738C; //darken(saturate(adjust-hue($blueGrey, 206.3158), 25.5605), 36.2745);
-$actionsBackground: lighten($background, 6%);
-$autoCompleteBg: $backgroundColor;
-$sectionHighlight: darken(desaturate($background, 0), 5%);
-$snippets:#999;
-$lightenGrey: #6d6d6d;
-
-$links: #3D6E94;
-
-$links-background-hue1: transparentize($links, 1);
-
-$links: $links;
-$links-hue-1: darken(saturate($links, 5%), 5%);
-$links-hue-5: darken(saturate($links, 20%), 20%);
-$linksHover: darken(saturate($links, 20%), 20%);
-$linksHover-hue-2: transparentize($linksHover, .5);
-$linkAlt: $secondary-hue1;
-$md-primary: $links;
-
-$linkTitle: #33FFFF;
-
-$collectionDisLinks: #0075b0;
-
-$red: tomato;
-// warning
-$warning: $red;
-$warn: $red;
-$warningBorder: inset 0 0 0 3px $warning;
-
-
-$text: $dark;
-$text-hue1: lighten($text, 30%);
-$text-hue2: $text;
-$text-hue3: darken($text, 10%);
-
-$notice: #B84D00;
-
-$highlight: $highlightYellow;
-$highlight-hue1: #FFFCC4;
-
-$modalBackdrop: rgb(68,68,68);
-$moreLink: #45aab4;
-
-$selectedItem: saturate(lighten($midGrey, 53%), 40%);
-
-$citationTitle: rgb(68, 112, 123);
-// $citationTitle: $titles;
-
-// chips
-$chipTouchHeight: 28px;
-$chipDesktopHeight: 22px;
-
-// Responsive
-$responsiveMaxWidth: 960px !important;
-
-// Default bars height
-$defaultBarHeight: 60px;
-
-// height of buttons in brief results
-$briefButtonHeight: 38px;
-
-// citations
-$citation: tomato;
-$citationColor: $citation;
-$citation-hue1: darken($citation, 40%);
-
-// personalization
-$personalization: #7d1538;
-
-// Peer Reviewed
-$peer-reviewed-color :#8359d4;
-
-// Open Access
-$open-access-color: #f68212;
-
-// Angular Material
-//-----------------
-
-// Progress bar
-$progressBarHeight: 15px;
-
-// buttons
-$defaultMdButtonHover: rgba(158,158,158,0.2);
-
-
-//// Angular Material overrides
-// Angular Material transition easing curves
-//-----------------------
-
-$swift-ease-out-duration: 0.4s !default;
-$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
-$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
-
-$swift-ease-in-duration: 0.3s !default;
-$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
-$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
-
-$swift-ease-in-out-duration: 0.5s !default;
-$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
-$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
-
-// Angular Material layouts
-// ------------------------------
-
-$baseline-grid: 8px !default;
-$layout-gutter-width: ($baseline-grid * 2) !default;
-
-// Angular Material breakpoints
-// ------------------------------
-
-// $layout-breakpoint-xs: 600px !default;
-// $layout-breakpoint-sm: 960px !default;
-// $layout-breakpoint-md: 1280px !default;
-// $layout-breakpoint-lg: 1920px !default;
+//// VARIABLES
+// The complex color calculation were created with http://razorjam.github.io/sasscolourfunctioncalculator/
+
+// Fonts family
+$serif: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+// Font weights
+$light: 300;
+$normal: 400;
+$bold: 600;
+$heavy: 900;
+
+// Font size
+$defaultFontSize: 15px;
+
+// Shapes
+$radius: 3px;
+
+// Padding
+$paddingBase: 1em;
+$paddingExtra: 1.5em;
+$paddingMedium: 1.3em;
+$paddingLarge: 1em;
+$paddingSmall: .5em;
+$paddingTiny: .25em;
+
+// colors
+
+$muteOrange: red;
+
+
+
+$almostBlack: #777;
+
+
+
+$titles: rgb(68, 112, 123);
+$frbr: #ed9100;
+$pink: rgb(255, 171, 200);
+
+$dark: #3a3a3a;
+$darker: darken(saturate(adjust-hue($dark, 0.0000), 0.0000), 6.6667);
+
+// lighter background color
+
+
+$highlightYellow: #FFFCC4; //stronger
+$highlight: darken(desaturate(adjust-hue($highlightYellow, -4.0920), 16.0000), 8.0392);
+$highlightText: #ffe564;
+$success: #3EA03E;
+//$green: #3EA03E; // redundancy of 'success'
+$green: #198A19;
+//$orange: #CE8015; //#E0962E;
+$muteOrange: #C59655;
+$yellow: #F1C16F;
+$overlayDarkDG: rgba(68, 68, 68, 0.6);
+
+// $availabiltyDetails: desaturate(lighten($midGrey,5%), 5%);
+//$maybe: $orange;
+
+$alert: #F7EDA3;
+$alert-hue1: darken(desaturate(adjust-hue($alert, 0.3074), 15.3043), 2.9412);
+
+
+$disabled: #aaa;
+$courseColor: #55909B;
+
+$primary: red;
+$primary-hue1: darken($primary, 3%);
+$primary-hue2: darken($primary, 5%);
+$primary-hue3: darken($primary-hue2, 2%);
+$primary-hue4: darken($primary, 10%);
+$primary-hue5: darker($primary, -5%);
+
+$secondary: green;
+$secondary-hue1: darken(saturate(adjust-hue($secondary, -6.5946), 9.1452), 26.2745);
+$secondary-hue2: darken($secondary, 20%);
+$secondary-hue3:darken(saturate(adjust-hue($secondary, -12), 30.28), 47.65); // "show more" buttons in facets
+$secondary-hue4: darken(saturate(adjust-hue($secondary, -7), 64.57), 13.92);
+
+
+$backgroundColor: yellow;
+
+$positive: #0f7d00;
+
+$negative: gray;
+
+$background: darken(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 8.6275); //redundancy of almostwhite
+
+$background-hue1: darken($backgroundColor, 3%); // darker 1 (i.e: background for locations filter bar)
+// $background-hue2: lighten(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 3.9216); // lighter 1 (i.e: background for full view dialog)
+$background-hue2: lighten($background, 4%);
+$background-hue3: lighten(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 5.8824); // lighter 2 (i.e: background for actions forms)
+
+$background-hue4: lighten($background, 3%);
+$background-hue5: transparentize($background, .5);
+$background-hue6: darken($background, 1%);
+$background-hue7: darken($background, 10%);
+$background-hue8: lighten($background, 6%);
+$background-hue9: darken($background, 5%);
+$background-hue10: darken($background, 12%);
+$background-hue11: darken($background, 2%);
+$background-hue12: darken($background, 7%);
+$background-hue13: lighten($background, 2%);
+
+$white: white;
+
+$almostWhite: lighten(saturate(adjust-hue($background, 60.0000), 20.0000), 0.7843);
+$bg: $background;
+$nearlyWhite: darken(saturate(adjust-hue($backgroundColor, 0.0000), 0.0000), 5.4902); // stronger
+$blueGrey: #ccc;
+$midGrey: #53738C; //darken(saturate(adjust-hue($blueGrey, 206.3158), 25.5605), 36.2745);
+$actionsBackground: lighten($background, 6%);
+$autoCompleteBg: $backgroundColor;
+$sectionHighlight: darken(desaturate($background, 0), 5%);
+$snippets:#999;
+$lightenGrey: #6d6d6d;
+
+$links: #3D6E94;
+
+$links-background-hue1: transparentize($links, 1);
+
+$links: $links;
+$links-hue-1: darken(saturate($links, 5%), 5%);
+$links-hue-5: darken(saturate($links, 20%), 20%);
+$linksHover: darken(saturate($links, 20%), 20%);
+$linksHover-hue-2: transparentize($linksHover, .5);
+$linkAlt: $secondary-hue1;
+$md-primary: $links;
+
+$linkTitle: #33FFFF;
+
+$collectionDisLinks: #0075b0;
+
+$red: tomato;
+// warning
+$warning: $red;
+$warn: $red;
+$warningBorder: inset 0 0 0 3px $warning;
+
+
+$text: $dark;
+$text-hue1: lighten($text, 30%);
+$text-hue2: $text;
+$text-hue3: darken($text, 10%);
+
+$notice: #B84D00;
+
+$highlight: $highlightYellow;
+$highlight-hue1: #FFFCC4;
+
+$modalBackdrop: rgb(68,68,68);
+$moreLink: #45aab4;
+
+$selectedItem: saturate(lighten($midGrey, 53%), 40%);
+
+$citationTitle: rgb(68, 112, 123);
+// $citationTitle: $titles;
+
+// chips
+$chipTouchHeight: 28px;
+$chipDesktopHeight: 22px;
+
+// Responsive
+$responsiveMaxWidth: 960px !important;
+
+// Default bars height
+$defaultBarHeight: 60px;
+
+// height of buttons in brief results
+$briefButtonHeight: 38px;
+
+// citations
+$citation: tomato;
+$citationColor: $citation;
+$citation-hue1: darken($citation, 40%);
+
+// personalization
+$personalization: #7d1538;
+
+// Peer Reviewed
+$peer-reviewed-color :#8359d4;
+
+// Open Access
+$open-access-color: #f68212;
+
+// Angular Material
+//-----------------
+
+// Progress bar
+$progressBarHeight: 15px;
+
+// buttons
+$defaultMdButtonHover: rgba(158,158,158,0.2);
+
+
+//// Angular Material overrides
+// Angular Material transition easing curves
+//-----------------------
+
+$swift-ease-out-duration: 0.4s !default;
+$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+
+$swift-ease-in-duration: 0.3s !default;
+$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
+$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
+
+$swift-ease-in-out-duration: 0.5s !default;
+$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
+$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+
+// Angular Material layouts
+// ------------------------------
+
+$baseline-grid: 8px !default;
+$layout-gutter-width: ($baseline-grid * 2) !default;
+
+// Angular Material breakpoints
+// ------------------------------
+
+// $layout-breakpoint-xs: 600px !default;
+// $layout-breakpoint-sm: 960px !default;
+// $layout-breakpoint-md: 1280px !default;
+// $layout-breakpoint-lg: 1920px !default;
diff --git a/tests/manual/TESTCONCAT/showDirectives.txt b/tests/manual/TESTCONCAT/showDirectives.txt
index 4940b4e09..3d64e5e4b 100644
--- a/tests/manual/TESTCONCAT/showDirectives.txt
+++ b/tests/manual/TESTCONCAT/showDirectives.txt
@@ -1 +1 @@
-javascript:(function(){var script=document.createElement("SCRIPT");script.src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';script.type='text/javascript';document.getElementsByTagName("head")[0].appendChild(script);var checkReady=function(callback){if(window.jQuery){callback(jQuery)}else{window.setTimeout(function(){checkReady(callback)},100)}};checkReady(function($){$('primo-explore').find('[parent-ctrl="$ctrl"]').each(function(){$(this).append('Hover for id')})})})();
+javascript:(function(){var script=document.createElement("SCRIPT");script.src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';script.type='text/javascript';document.getElementsByTagName("head")[0].appendChild(script);var checkReady=function(callback){if(window.jQuery){callback(jQuery)}else{window.setTimeout(function(){checkReady(callback)},100)}};checkReady(function($){$('primo-explore').find('[parent-ctrl="$ctrl"]').each(function(){$(this).append('Hover for id')})})})();
diff --git a/tests/manual/test-plan.md b/tests/manual/test-plan.md
index 0f3b69f15..2f6d6fb03 100644
--- a/tests/manual/test-plan.md
+++ b/tests/manual/test-plan.md
@@ -1,51 +1,51 @@
-
-
-
-1. copy default package from:
- https://github.com/ExLibrisGroup/primo-explore-package
-
- 1.1 Installation
- 1.2 test concat:
-
- gulp run --view TESTCONCAT
- gulp run --view TESTCONCAT --ve
-
- 1.2.1 test colors.json
-
- 1.2.2 test css
-
- 1.2.3 test images
-
- 1.2.4 test html
-
- 1.2.5 test javascript component
-
- 1.2.6 test create-package
-
- 1.2.7 uplocag to BO and test deployment
-
- 1.3 test browserify:
-
- gulp run --view TESTBROWSERIFY --browserify
-
- gulp run --view TESTBROWSERIFY --browserify --proxy https://***:443 --ve
-
- 1.3.1 test colors.json
-
- 1.3.2 test scss
-
- 1.3.3 test images
-
- 1.3.4 test html
-
- 1.3.5 test javascript component in ts
-
- 1.3.6 test create-package
-
- 1.3.7 uplocag to BO and test deployment
-
-
-
-
-REPEAT WITH --VE
-
+
+
+
+1. copy default package from:
+ https://github.com/ExLibrisGroup/primo-explore-package
+
+ 1.1 Installation
+ 1.2 test concat:
+
+ gulp run --view TESTCONCAT
+ gulp run --view TESTCONCAT --ve
+
+ 1.2.1 test colors.json
+
+ 1.2.2 test css
+
+ 1.2.3 test images
+
+ 1.2.4 test html
+
+ 1.2.5 test javascript component
+
+ 1.2.6 test create-package
+
+ 1.2.7 uplocag to BO and test deployment
+
+ 1.3 test browserify:
+
+ gulp run --view TESTBROWSERIFY --browserify
+
+ gulp run --view TESTBROWSERIFY --browserify --proxy https://***:443 --ve
+
+ 1.3.1 test colors.json
+
+ 1.3.2 test scss
+
+ 1.3.3 test images
+
+ 1.3.4 test html
+
+ 1.3.5 test javascript component in ts
+
+ 1.3.6 test create-package
+
+ 1.3.7 uplocag to BO and test deployment
+
+
+
+
+REPEAT WITH --VE
+