ExLibrisGroup · amusick-endava · Aug 21, 2024 · Aug 21, 2024 · Aug 22, 2024 · Aug 22, 2024
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+lts/hydrogen
diff --git a/README.md b/README.md
@@ -129,7 +129,7 @@ Run this command in order to create a minified and bundled file:
 ```bash
 rollup -c
 ```
-It will create a bundled js file called discovery-showcase.js inside the dist folder
+It will create bundled js files called pnx-discovery-showcase.bundled.js (for primo users) and snx-discovery-showcase.bundled.js (for summon users) inside the dist folder. Separate bundles are created to minimize the size of both of them, and you likely only need one or the other depending on your use case.
 
 ## More information
 

diff --git a/dev/index.html b/dev/index.html
@@ -1,18 +1,33 @@
 <!DOCTYPE html>
 
 <html>
-  <head>
-    <meta charset="utf-8" />
+<head>
+    <meta charset="utf-8"/>
     <title>&lt;my-element> Demo</title>
-    <script type="module" src="../search-carousel.js"></script>
+    <script type="module" src="../pnx-search-carousel.js"></script>
+    <script type="module" src="../snx-search-carousel.js"></script>
 
-  </head>
-  <body>
+</head>
+<body>
 
-  <search-carousel titleText="test!" titleLink="https://www.google.com" defaultThumbnailUrl="../dist/default.png"
-          searchUrl="http://il-urmsand01.corp.exlibrisgroup.com:1801/primaws/rest/external/pnxs?acTriggered=false&blendFacetsSeparately=false&citationTrailFilterByAvailability=true&disableCache=false&getMore=0&inst=TRAINING_1_INST&isCDSearch=false&lang=en&limit=10&newspapersActive=false&newspapersSearch=false&offset=0&otbRanking=false&pcAvailability=false&q=any,contains,history&qExclude=&qInclude=&rapido=false&refEntryActive=false&rtaLinks=true&scope=MyInst_and_CI&searchInFulltextUserSelection=true&skipDelivery=N&sort=rank&tab=Everything&vid=TRAINING_1_INST:Auto1">
+<pnx-search-carousel titleText="Primo Carousel Test!"
+                     titleLink="https://www.google.com"
+                     defaultThumbnailUrl="../dist/default.png"
+                     searchUrl="https://na02.primo.exlibrisgroup.com/primaws/rest/external/pnxs?acTriggered=false&blendFacetsSeparately=false&citationTrailFilterByAvailability=true&disableCache=false&getMore=0&inst=EXLDEV1_INST&isCDSearch=false&lang=en&limit=10&newspapersActive=true&newspapersSearch=false&offset=0&otbRanking=false&pcAvailability=true&q=any,contains,artificial+intelligence&qExclude=&qInclude=&rapido=false&refEntryActive=true&rtaLinks=true&scope=MyInstitution&searchInFulltextUserSelection=true&skipDelivery=Y&sort=rank&tab=LibraryCatalog&vid=EXLDEV1_INST:Alma">
+</pnx-search-carousel>
 
-</search-carousel>
-  </body>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+
+<snx-search-carousel titleText="Summon Carousel Test!"
+                     titleLink="https://www.google.com"
+                     defaultThumbnailUrl="../dist/default.png"
+                     searchUrl="https://demo.summon.serialssolutions.com/api/search?screen_res=W1486H382&__refererURL=&pn=1&ps=10&ho=t&include.ft.matches=t&fvf%5B%5D=IsOpenAccess%2Ctrue%2Cf&fvf%5B%5D=Language%2CEnglish%2Cf&l=en&q=artificial%20intelligence&print.books.only=true">
+</snx-search-carousel>
+</body>
 
 </html>
diff --git a/rollup.config.js b/rollup.config.js
@@ -9,30 +9,49 @@ import {terser} from 'rollup-plugin-terser';
 import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 
-export default {
-  input: 'search-carousel.js',
-  output: {
-    file: 'dist/discovery-showcase.bundled.js',
-    format: 'esm',
+const commonPlugins = [
+  replace({'Reflect.decorate': 'undefined'}),
+  resolve(),
+  terser({
+    ecma: 2017,
+    module: true,
+    warnings: true,
+    mangle: {
+      properties: {
+        regex: /^__/,
+      },
+    },
+  }),
+  summary(),
+]
+
+export default [
+  {
+    // Configuration for pnx-search-carousel.js
+    input: 'pnx-search-carousel.js',
+    output: {
+      file: 'dist/pnx-discovery-showcase.bundled.js',
+      format: 'esm',
+    },
+    onwarn(warning) {
+      if (warning.code !== 'THIS_IS_UNDEFINED') {
+        console.error(`(!) ${warning.message}`);
+      }
+    },
+    plugins: commonPlugins,
   },
-  onwarn(warning) {
-    if (warning.code !== 'THIS_IS_UNDEFINED') {
-      console.error(`(!) ${warning.message}`);
-    }
+  {
+    // Configuration for snx-search-carousel.js
+    input: 'snx-search-carousel.js',
+    output: {
+      file: 'dist/snx-discovery-showcase.bundled.js',
+      format: 'esm',
+    },
+    onwarn(warning) {
+      if (warning.code !== 'THIS_IS_UNDEFINED') {
+        console.error(`(!) ${warning.message}`);
+      }
+    },
+    plugins: commonPlugins,
   },
-  plugins: [
-    replace({'Reflect.decorate': 'undefined'}),
-    resolve(),
-    terser({
-      ecma: 2017,
-      module: true,
-      warnings: true,
-      mangle: {
-        properties: {
-          regex: /^__/,
-        },
-      },
-    }),
-    summary(),
-  ],
-};
+];
diff --git a/src/Externals.ts b/src/Externals.ts
@@ -0,0 +1,99 @@
+// JSONP based on https://github.com/erikarenhill/Lightweight-JSONP
+export class Externals {
+    config: any
+    counter: any
+    head: any
+    readyState: any
+    window: any
+    constructor(window: any, config = {}){
+       this.window = window
+       this.config = config
+       this.counter = 0
+       this.head = document.getElementsByTagName('head')[0]
+    }
+
+    load(url: any, pfnError: any) {
+       const script : any = document.createElement('script')
+       let done = false
+       script.src = url
+       script.async = true
+       const errorHandler = pfnError || this.config.error
+       if (typeof errorHandler === 'function') {
+          script.onerror = ( ex: any )=> errorHandler({
+             url,
+             event: ex
+          })
+       }
+
+       script.onload = (script.onreadystatechange = function() {
+          if (!done && (!this.readyState || (this.readyState === 'loaded') || (this.readyState === 'complete'))) {
+             done = true
+             script.onload = (script.onreadystatechange = null)
+             if (script && script.parentNode) {
+                return script.parentNode.removeChild(script)
+             }
+          }
+       })
+
+       return this.head.appendChild(script)
+    }
+
+    jsonp(url: string, params: Record<string, any> = {}, callbackName?: string): Promise<any> {
+        return new Promise((resolve, reject) => {
+            const query = url.includes('?') ? '&' : '?';
+            const cbName = callbackName || this.config['callbackName'] || 'callback';
+            const uniqueName = `${cbName}_json${++this.counter}`;
+
+            // Add the callback parameter to the request
+            params[cbName] = uniqueName;
+            const fullUrl = url + query + this.objToQ(params);
+
+            // Attach the callback to the window object
+            this.window[uniqueName] = (data: any) => {
+                try {
+                    resolve(data);
+                } finally {
+                    // Clean up the callback to avoid memory leaks
+                    delete this.window[uniqueName];
+                }
+            };
+
+            // Handle script loading and errors
+            this.load(fullUrl, (error: any) => {
+                reject(error);
+            });
+        });
+    }
+
+
+    encode(str: any) {
+       return encodeURIComponent(str)
+    }
+
+    // Object to url Query
+    objToQ(obj: any, arrayMark = true, arraySeparator = '', includeEmpties = false) {
+       if ((typeof obj !== 'object') || !Object.keys(obj).length) {
+          return ''
+       }
+       const keys = Object.keys(obj)
+       const str = []
+       for (var key of keys) {
+          var value = obj[key]
+          if (!includeEmpties && (!value || (value.length === 0))) { continue }
+
+          if (value instanceof Array) {
+             if (!arraySeparator) {
+                for (var val of value) {
+                   str.push(this.encode(key + (arrayMark ? '[]' : '')) + '=' + this.encode(val))
+                }
+             } else {
+                str.push(this.encode(key) + '=' + this.encode(value.join(arraySeparator)))
+             }
+          } else {
+             str.push(this.encode(key) + '=' + this.encode(value))
+          }
+       }
+       return str.join('&')
+    }
+ }
+
diff --git a/src/document-card-style.ts b/src/document-card-style.ts
@@ -0,0 +1,47 @@
+import {css} from 'lit';
+
+export const styles = css`
+    :host {
+        --title-font-color: inherit;
+        --title-font-weight: 700;
+        --title-font-size: 13px;
+
+        --description-font-color: inherit;
+        --description-font-weight: 400;
+        --description-font-size: 12px;
+
+        --image-height: 210px;
+    }
+
+    a {
+        text-decoration: none;
+        color: black;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .record-details {
+        text-align: center;
+        color: black;
+        margin-top: .5em;
+    }
+
+    .record-details h3 {
+        color: var(--title-font-color);
+        font-size: var(--title-font-size);
+        font-weight: var(--title-font-weight);
+    }
+
+    .record-details span {
+        font-size: var(--description-font-size);
+        font-weight: var(--description-font-weight);
+        color: var(--description-font-color);
+    }
+
+    img, .image-place-holder {
+        height: var(--image-height);
+        display: block;
+        object-fit: contain;
+    }
+`;
+
diff --git a/src/document-card.ts b/src/document-card.ts
@@ -0,0 +1,53 @@
+import {html, LitElement} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {styles} from './document-card-style';
+import {until} from 'lit-html/directives/until.js';
+
+
+@customElement('document-card')
+export class DocumentCard extends LitElement {
+
+    static override styles = styles;
+    @property()
+    thumbnail: any;
+    @property()
+    docTitle!: string;
+    @property()
+    publisher!: string;
+    @property()
+    deepLink!: string;
+
+    override render() {
+        const imagePlaceHolder = html`
+            <div style="background-color: ${this.getRandomColor()}"
+                class="image-place-holder"></div>`;
+        const imgPromise = this.thumbnail.then((url: string) => {
+            console.log(`getImageUrl returned ${url}`)
+            return html`
+                <img src=${url} alt="">`
+        }).catch(() => imagePlaceHolder); //on error or no thumbnail render the image placeholder
+
+        return html`
+            <a href="${this.deepLink}" target="_blank" aria-label="">
+                ${until(imgPromise, imagePlaceHolder)}
+                <div class="record-details">
+                    <h3>${this.docTitle}</h3>
+                    <span>${this.publisher ?? ''}</span>
+                </div>
+            </a>
+
+        `
+    }
+
+    private getRandomColor() {
+        const letters = '0123456789ABCDEF';
+        let color = '#';
+        for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+    }
+}
+
+
+
diff --git a/src/image-service.ts b/src/image-service.ts
@@ -0,0 +1,33 @@
+export class ImageService {
+    public async getImageLink(imageUrl: string) {
+        return new Promise((resolve, reject) => {
+            if (!imageUrl) {
+                reject('');
+                return;
+            }
+
+            const image = new Image();
+            image.onload = () => {
+                if (image.width > 1) {
+                    resolve(imageUrl);
+                } else {
+                    reject('');
+                }
+            };
+
+            image.onerror = () => {
+                reject('');
+            };
+
+            image.src = this.handleLink(imageUrl);
+        });
+    }
+
+    public handleLink(link: string) {
+        let newLink = link;
+        if (window.location.protocol === 'https:') {
+            newLink = link.replace('http://', 'https://');
+        }
+        return newLink;
+    }
+}