@ucd-lib/theme-elements 0.0.8 → 0.0.9

package/brand/ucd-theme-header/ucd-theme-header.js

@@ -4,6 +4,7 @@ import {render, styles} from "./ucd-theme-header.tpl.js";
 import { 
   IntersectionObserverController,
   MutationObserverController, 
+  PopStateObserverController,
   WaitController } from '../../utils/controllers';
 
 /**
@@ -51,10 +52,12 @@ export default class UcdThemeHeader extends LitElement {
       preventFixed: {type: Boolean, attribute: "prevent-fixed"},
       isDemo: {type: Boolean, attribute: "is-demo"},
       _transitioning: {type: Boolean, state: true},
+      _hasPrimaryNav: {type: Boolean, state: true},
       _hasSlottedBranding: {type: Boolean, state: true},
       _hasQuickLinks: {type: Boolean, state: true},
       _hasSearch: {type: Boolean, state: true},
-      _brandingBarInView: {type: Boolean, state: true}
+      _brandingBarInView: {type: Boolean, state: true},
+      _components: {type: Object, state: true}
     };
   }
 
@@ -68,6 +71,7 @@ export default class UcdThemeHeader extends LitElement {
 
     this.mutationObserver = new MutationObserverController(this);
     this.wait = new WaitController(this);
+    new PopStateObserverController(this, "_onLocationChange");
 
     this.siteName = "";
     this.siteUrl = "/";
@@ -77,14 +81,21 @@ export default class UcdThemeHeader extends LitElement {
     this.isDemo = false;
 
     this._transitioning = false;
+    this._hasPrimaryNav = false;
     this._hasSlottedBranding = false;
     this._hasQuickLinks = false;
     this._hasSearch = false;
     this._animationDuration = 500;
     this._brandingBarInView = false;
+    this._slottedComponents = {};
 
   }
 
+  /**
+   * @method connectedCallback
+   * @private
+   * @description Custom element lifecycle method
+   */
   connectedCallback(){
     super.connectedCallback();
     if ( !this.preventFixed ) {
@@ -92,6 +103,11 @@ export default class UcdThemeHeader extends LitElement {
     }
   }
 
+  /**
+   * @method firstUpdated
+   * @private
+   * @description Lit lifecycle hook
+   */
   firstUpdated(){
     if ( !this.preventFixed ) {
       let aboveNav = this.renderRoot.getElementById('branding-bar-container');
@@ -99,11 +115,33 @@ export default class UcdThemeHeader extends LitElement {
     }
   }
 
+  /**
+   * @method _onLocationChange
+   * @description Called when url changes by popstate controller
+   */
+  _onLocationChange(){
+    this.close();
+    if ( this._hasQuickLinks ){
+      this._slottedComponents.quickLinks.close();
+    }
+    if ( this._hasSearch ){
+      this._slottedComponents.search.close();
+    }
+  }
+
+  /**
+   * @method _onBrandingBarIntersection
+   * @private
+   * @description Called by intersection observer when branding bar enters/exits screen
+   * @param {*} entries 
+   */
   _onBrandingBarIntersection(entries){
     let offSetValue = 0;
     try {
       offSetValue = this.renderRoot.getElementById('nav-bar').getBoundingClientRect().height;
-    } catch (error) {}
+    } catch (error) {
+      //
+    }
     if ( offSetValue > 150 ) offSetValue = 0;
     entries.forEach(entry => {
       this._brandingBarInView = entry.isIntersecting;
@@ -112,7 +150,7 @@ export default class UcdThemeHeader extends LitElement {
       } else {
         this.style.marginBottom = offSetValue + "px";
       }
-    })
+    });
   }
 
   /**
@@ -232,14 +270,18 @@ export default class UcdThemeHeader extends LitElement {
     let primaryNav = this.querySelector('ucd-theme-primary-nav');
     if ( primaryNav ) {
       primaryNav.setAttribute('slot', 'primary-nav');
+      this._hasPrimaryNav = true;
+      this._slottedComponents.primaryNav = primaryNav;
     } else {
       console.warn("No 'ucd-theme-primary-nav' child element found!");
+      this._hasPrimaryNav = false;
     }
 
     let quickLinks = this.querySelector('ucd-theme-quick-links');
     if ( quickLinks ) {
       quickLinks.setAttribute('slot', 'quick-links');
       this._hasQuickLinks = true;
+      this._slottedComponents.quickLinks = quickLinks;
     } else {
       this._hasQuickLinks = false;
     }
@@ -248,6 +290,7 @@ export default class UcdThemeHeader extends LitElement {
     if ( search ) {
       search.setAttribute('slot', 'search');
       this._hasSearch = true;
+      this._slottedComponents.search = search;
     } else {
       this._hasSearch = false;
     }
@@ -256,6 +299,7 @@ export default class UcdThemeHeader extends LitElement {
     if ( UcdlibBrandingBar ) {
       UcdlibBrandingBar.setAttribute('slot', 'branding-bar');
       this._hasSlottedBranding = true;
+      this._slottedComponents.brandingBar = UcdlibBrandingBar;
     } else if ( this.querySelector("*[slot='branding-bar']") ){
       this._hasSlottedBranding = true;
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {

package/ucdlib/ucdlib-icons/utils.js

@@ -8,8 +8,9 @@ import { html, render } from "lit-html";
  * @param {TemplateResult} icons - SVG html string of icons
  * @param {String} name - name of iconset. 
  * @param {Number} size  - size of icons
+ * @param {String} label - Friendly name of iconset 
  */
-function renderIconSet(icons, name, size=24){
+function renderIconSet(icons, name, size=24, label=""){
   const containerId = `ucdlib-icons--${name}`;
   let container = document.getElementById(containerId);
   if ( !container ){
@@ -19,7 +20,7 @@ function renderIconSet(icons, name, size=24){
     document.head.appendChild(container); 
   } 
   const template = html`
-    <ucdlib-iconset name=${name} size=${size}>
+    <ucdlib-iconset name=${name} size=${size} label=${label}>
       ${icons}
     </ucdlib-iconset>
   `;

package/ucdlib/ucdlib-iconset/ucdlib-iconset.js

@@ -9,6 +9,7 @@ import { MutationObserverController } from '../../utils/controllers';
  * 
  * @property {String} name - Name of the icon set. Usage: <ucdlib-icon icon="{thisProperty}:{icon}"></ucdlib-icon>
  * @property {Number} size - The size of an individual icon. Note that icons must be square. 
+ * @property {String} label - Optional friendly label for iconset.
  * @example
  * <ucdlib-iconset name="arrows">
     <svg>
@@ -26,6 +27,7 @@ export default class UcdlibIconset extends Mixin(LitElement)
     return {
       name: {type: String},
       size: {type: Number},
+      label: {type: String},
       _iconMap: {type: Object, state: true}
     };
   }
@@ -35,6 +37,7 @@ export default class UcdlibIconset extends Mixin(LitElement)
     this.mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
 
     this.name = "";
+    this.label = "";
     this.size = 24;
     this._iconMap = {};
     this.style.display = "none";
@@ -63,6 +66,17 @@ export default class UcdlibIconset extends Mixin(LitElement)
     return Object.keys(this._iconMap);
   }
 
+  /**
+   * @method getLabel
+   * @description Returns a friendly label of iconset
+   * @returns {String}
+   */
+  getLabel(){
+    if ( this.label ) return this.label;
+
+    return this.name.replace(/-/g, " ");
+  }
+
   /**
    * @method applyIcon
    * @description Adds icon to ucdlib-icon element from iconset

package/ucdlib/ucdlib-sils-search-redirect/ucdlib-sils-search-redirect.js

@@ -0,0 +1,138 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./ucdlib-sils-search-redirect.tpl.js";
+
+import { SilsPrimoController } from '../../utils/controllers';
+
+/**
+ * @class UcdlibSilsSearchRedirect
+ * @classdesc Search widget that redirects a user's query to SILS Primo
+ * @property {String} query - The search query
+ * @property {Boolean} ucdOnly - Limits search to UC Davis libraries only
+ * @property {Boolean} darkBackground - Adjusts colors for display on a dark background
+ * @property {Boolean} preventRedirect - Will not send user to Primo on form submission
+ * @property {String} headingText - Text to display above main text input
+ * @property {String} inputPlaceholder - Placeholder for main text input
+ * @property {String} host - Primo host
+ */
+export default class UcdlibSilsSearchRedirect extends LitElement {
+
+  static get properties() {
+    return {
+      query: {type: String},
+      ucdOnly: {type: Boolean, attribute: "ucd-only"},
+      darkBackground: {type: Boolean, attribute: "dark-background"},
+      preventRedirect: {type: Boolean, attribute: "prevent-redirect"},
+      headingText: {type: String, attribute: "heading-text"},
+      inputPlaceholder: {type: String, attribute: "input-placeholder"},
+      host: {type: String},
+      role: {type: String, reflect: true},
+      ariaLabel: {type: String, attribute: "aria-label", reflect: true}
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+    this.query = "";
+    this.ucdOnly = false;
+    this.darkBackground = false;
+    this.headingText = "Search UC Library Materials";
+    this.inputPlaceholder = "All UC books, journals, articles + more";
+    this.role = "form";
+    this.ariaLabel = "Search UC Library Materials";
+    this.host = "";
+    this._updatePrimoController();
+  }
+
+  /**
+   * @method willUpdate
+   * @description Lit lifecycle hook
+   * @private
+   * @param {Map} props - Properties that have changed
+   */
+  willUpdate(props){
+    this._updatePrimoController(props);
+  }
+
+  /**
+   * @method _onQueryChange
+   * @private
+   * @description Attached to primary text input
+   * @param {Event} e - Input event
+   */
+  _onQueryChange(e){
+    let text = e.target.value ? e.target.value : "";
+    this.query = text;
+  }
+
+  /**
+   * @method _onCorpusChange
+   * @private
+   * @description Attached to ucd-only checkbox
+   * @param {Event} e - Input event
+   */
+  _onCorpusChange(e){
+    this.ucdOnly = e.target.checked;
+  }
+
+  /**
+   * @method _onSubmit
+   * @description Called on form submit
+   * @private
+   * @param {Event} e - submit event
+   */
+  _onSubmit(e){
+    e.preventDefault();
+    let corpus = this.ucdOnly ? "ucd" : "everything";
+    let advanced = e.submitter.id == "advanced-search";
+
+    let url = this.primo.makeSearchUrl(this.query, corpus, advanced);
+    if ( this.preventRedirect ) {
+      this.dispatchEvent(new CustomEvent('search', {
+        detail : {url}
+      }));
+    } else {
+      window.location = url;
+    }
+  }
+
+
+  /**
+   * @method _updatePrimoController
+   * @description Updates the config values of the Primo controller based on ele attributes
+   * @private
+   * @param {Map} props - Properties that have changed in current lifecycle
+   */
+  _updatePrimoController(props){
+    let primoConfig = {};
+    
+    // Get primo config values from ele attributes
+    const attrs = [
+      {ele: 'host', ctl: 'host'}
+    ];
+    if ( props ){
+      attrs.forEach(attr => {
+        if ( props.has(attr.ele) && this[attr.ele] ) {
+          primoConfig[attr.ctl] = this[attr.ele];
+        }
+      });
+    }
+
+    // instantiate or update controller
+    if ( !this.primo ) {
+      this.primo = new SilsPrimoController(
+        this,
+        primoConfig
+      );
+    } else {
+      this.primo.updateConfig(primoConfig);
+    }
+  }
+
+}
+
+customElements.define('ucdlib-sils-search-redirect', UcdlibSilsSearchRedirect);

package/ucdlib/ucdlib-sils-search-redirect/ucdlib-sils-search-redirect.tpl.js

@@ -0,0 +1,108 @@
+import { html, css, unsafeCSS } from 'lit';
+
+import normalizeCss from "@ucd-lib/theme-sass/normalize.css.js";
+import headingCss from "@ucd-lib/theme-sass/1_base_html/_headings.css";
+import headingClassesCss from "@ucd-lib/theme-sass/2_base_class/_headings.css";
+import formsCss from "@ucd-lib/theme-sass/1_base_html/_forms.css";
+import formsClassesCss from "@ucd-lib/theme-sass/2_base_class/_forms.css";
+import buttonCss from "@ucd-lib/theme-sass/2_base_class/_buttons.css";
+import spacingUtilityCss from "@ucd-lib/theme-sass/6_utility/_u-space.css";
+import { categoryBrands } from "@ucd-lib/theme-sass/colors";
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+      max-width: 500px;
+      margin: auto;
+    }
+    h2 {
+      text-align: center;
+    }
+    .search-bar {
+      display: flex;
+      flex-flow: row nowrap;
+    }
+    .search-bar button {
+      font-family: "Font Awesome 5 Free";
+      min-width: unset;
+      font-size: 1.2rem;
+      padding: 0 .75rem;
+      min-height: 0;
+    }
+    .search-bar button:hover {
+      padding-right: .75rem;
+      padding-left: .75rem;
+    }
+    .search-bar input {
+      flex-grow: 1;
+    }
+    .search-options {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .search-options label {
+      color: ${unsafeCSS(categoryBrands.primary.hex)};
+      padding-bottom: 0;
+    }
+    input[type=checkbox] {
+      margin-right: 0;
+    }
+    .search-options button {
+      border: none;
+      background-color: inherit;
+      color: ${unsafeCSS(categoryBrands.primary.hex)};
+      text-decoration: underline;
+      padding: 0;
+      font-family: inherit;
+    }
+    .dark h2 {
+      color: ${unsafeCSS(categoryBrands.secondary.hex)}
+    }
+    .dark .search-options label {
+      color: #fff;
+    }
+    .dark .search-options button {
+      color: #fff;
+    }
+
+  `;
+
+  return [
+    normalizeCss,
+    headingCss,
+    headingClassesCss,
+    formsCss,
+    formsClassesCss,
+    buttonCss,
+    spacingUtilityCss,
+    elementStyles];
+}
+
+export function render() { 
+return html`
+  <form 
+    @submit=${this._onSubmit}
+    aria-label=${this.ariaLabel}
+    class="${this.darkBackground ? 'dark' : 'light'}">
+
+    ${this.headingText ? html`
+      <h2 class="heading--highlight u-space-mb">${this.headingText}</h2>
+    ` : html``}
+
+    <div class="search-bar">
+      <input type="text" .value=${this.query} @input=${this._onQueryChange} placeholder=${this.inputPlaceholder}>
+      <button id="simple-search" type="submit" class="btn btn--primary-input"> &#xf002</button>
+    </div>
+
+    <div class="search-options">
+      <div class="checkbox u-space-mr--small u-space-mt--small">
+        <input id="corpus" type="checkbox" ?checked=${this.ucdOnly} @input=${this._onCorpusChange}><label for="corpus">UC Davis libraries only</label>
+      </div>
+      <button id="advanced-search" class="u-space-mt--small" type="submit">Advanced Search</button>
+    </div>
+</form>
+
+`;}

package/utils/controllers/index.js

@@ -1,11 +1,16 @@
 import { BreakPointsController } from "./break-points";
 import { IntersectionObserverController } from "./intersection-observer";
 import { MutationObserverController } from "./mutation-observer";
+import { PopStateObserverController } from "./popstate-observer";
+import { SilsPrimoController } from "./sils-primo";
 import { WaitController } from "./wait";
 
+
 export {
   BreakPointsController,
   IntersectionObserverController,
   MutationObserverController,
+  PopStateObserverController,
+  SilsPrimoController,
   WaitController,
 };

package/utils/controllers/popstate-observer.js

@@ -0,0 +1,51 @@
+/**
+ * @class PopStateObserverController
+ * @classdesc Controller for attaching a popstate event listener to a Lit element.
+ * 
+ * @property {LitElement} host - 'this' from a Lit element
+ * @property {String} callback - Name of element method called on popstate. Default: '_onPopstate'
+ * 
+ * @examples
+ * // Instantiate this controller in the constructor of your element
+ * new PopStateObserverController(this, "_onLocationChange");
+ */
+export class PopStateObserverController{
+
+  constructor(host, callback="_onPopstate"){
+    (this.host = host).addController(this);
+    this.callback = callback;
+    this._onPopstate = this._onPopstate.bind(this);
+  }
+
+  hostConnected(){
+    window.addEventListener('popstate', this._onPopstate);
+  }
+
+  hostDisconnected(){
+    window.removeEventListener('popstate', this._onPopstate);
+  }
+
+  _onPopstate(e){
+    if ( !this.host[this.callback]){
+      console.warn(
+        `Element has no '${this.callback}' method. 
+        Either add this method, or change the 'callback' argument on instantiation.`
+      );
+      return;
+    }
+    let locationObject = this._getLocationObject();
+    this.host[this.callback](locationObject, e);
+
+  }
+
+  _getLocationObject(){
+    let location = {
+      fullpath : window.location.href.replace(window.location.origin, '').replace(/^\/+/, '/'),
+      pathname : window.location.pathname.replace(/^\/+/, '/'),
+      path : window.location.pathname.replace(/(^\/+|\/+$)/g, '').split('/'),
+      query : new URLSearchParams(window.location.search),
+      hash : window.location.hash.replace(/^#/, '')
+    };
+    return location;
+  }
+}

package/utils/controllers/sils-primo.js

@@ -0,0 +1,124 @@
+/**
+ * @class SilsPrimoController
+ * @classdesc Utility for interacting with UC Libraries' discovery tool
+ * 
+ * @property {LitElement} host - 'this' from a Lit element
+ * @property {Object} config - Basic Primo configuration values (host, uris, etc)
+ */
+export class SilsPrimoController{
+
+  /**
+   * @method constructor
+   * @description Called on instantiation
+   * @param {LitElement} host - Element
+   * @param {Object} config - Config values
+   */
+  constructor(host, config={}){
+    (this.host = host).addController(this);
+    this.updateConfig(config);
+  }
+
+  /**
+   * @method updateConfig
+   * @description Updates the config property.
+   * @param {Object} config - Values to overide the default.
+   */
+  updateConfig(config){
+    const UCD_TAB = "LibraryCatalog";
+    let _config = {
+      host: "https://search.library.ucdavis.edu",
+      paths: {
+        search: "discovery/search",
+        browse: "discovery/browse"
+      },
+      defaultParams: {
+        vid: "01UCD_INST:UCD"
+      },
+      corpora: {
+        everything: {
+          tab: "UCSILSDefaultSearch",
+          scope: "DN_and_CI"
+        },
+        uc: {
+          tab: "UCSDiscoveryNetwork",
+          scope: "UCSDiscoveryNetwork"
+        },
+        ucd: {
+          tab: UCD_TAB,
+          scope: "MyInstitution",
+        },
+        specialCollections: {
+          tab: UCD_TAB,
+          scope: "SSPEC"
+        },
+        medical: {
+          tab: UCD_TAB,
+          scope: "BLAISDELL"
+        },
+        healthSciences: {
+          tab: UCD_TAB,
+          scope: "CARLSON"
+        },
+        law: {
+          tab: UCD_TAB,
+          scope: "Mabie"
+        }
+      }
+    };
+
+    this.config = Object.assign(_config, config);
+  }
+
+  /**
+   * @method makeSearchUrl
+   * @description Makes a Primo Search URL
+   * @param {String} query - A search term or phrase
+   * @param {String} corpus - The bib corpus to search against. 
+   *   Sets 'tab' and 'search_scope' params. Must be a recognized keyword in the corpora config object:
+   *  everything, uc, ucd, specialCollections, medical, healthSciences, law
+   * @param {Boolean} advanced - Expands the advanced search interface
+   * @param {Object} additionalParams - Any additional url params. Has the final say.
+   * @returns 
+   */
+  makeSearchUrl( query, corpus="everything", advanced=false, additionalParams={} ){
+    let url = `${this._trailingSlashIt(this.config.host)}${this.config.paths.search}`;
+
+    let params = Object.assign({}, this.config.defaultParams);
+
+    if ( advanced ) {
+      params['mode'] = 'advanced';
+    }
+
+    if ( query ) {
+      params['query'] = 'any,contains,' + query.replace(/,/g, ' ');
+    }
+
+    if ( this.config.corpora[corpus] ) {
+      params['tab'] = this.config.corpora[corpus].tab;
+      params['search_scope'] = this.config.corpora[corpus].scope;
+    } else {
+      console.warn(`${corpus} is not a recognized corpus`);
+    }
+
+    if ( additionalParams ){
+      Object.assign(params, additionalParams);
+    } 
+
+    params = new URLSearchParams(params);
+    return `${url}?${params.toString()}`;
+  }
+
+  /**
+   * @method _trailingSlashIt
+   * @description Adds trailing slash to string if not already present
+   * @private 
+   * @param {String} str 
+   * @returns 
+   */
+  _trailingSlashIt(str){
+    if ( str.endsWith('/') ){
+      return str;
+    }
+    return str + "/";
+  }
+}