@ucd-lib/theme-elements 1.2.7 → 1.2.9

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

@@ -39,51 +39,18 @@ export default class UcdThemePagination extends LitElement {
 
   static get properties() {
     return {
-      basePath : {
-        type: String, 
-        attribute: 'base-path'
-      },
-      queryParams: {
-        type: String,
-        attribute: 'query-params'
-      },
-      useHash : {
-        type: Boolean, 
-        attribute: 'use-hash'
-      },
-      currentPage : {
-        type : Number,
-        attribute: 'current-page',
-        reflect: true
-      },
-      maxPages : {
-        type : Number,
-        attribute : 'max-pages'
-      },
-      visibleLinkCount : {
-        type : Number,
-        attribute : 'visible-link-count'
-      },
-      disableLabel : {
-        type: Boolean,
-        attribute : 'disable-label'
-      },
-      _pages : {
-        type: Array
-      },
-      ellipses : {
-        type: Boolean,
-        attribute : 'ellipses'
-      },
-      xs_screen : {
-        type: Boolean,
-        attribute : 'xs-screen'
-      },
-      size : {
-        type: String,
-        attribute : 'size'
-      }
-
+      basePath : { type: String, attribute: 'base-path' },
+      queryParams: { type: String, attribute: 'query-params' },
+      useHash : { type: Boolean, attribute: 'use-hash' },
+      currentPage : { type : Number, attribute: 'current-page', reflect: true },
+      maxPages : { type : Number, attribute : 'max-pages' },
+      visibleLinkCount : { type : Number, attribute : 'visible-link-count' },
+      disableLabel : { type: Boolean, attribute : 'disable-label' },
+      _pages : { type: Array },
+      ellipses : { type: Boolean, attribute : 'ellipses' },
+      xs_screen : { type: Boolean, attribute : 'xs-screen' },
+      size : { type: String, attribute : 'size' },
+      darkmode : { type: Boolean, attribute : 'darkmode' },
     };
   }
 
@@ -108,10 +75,11 @@ export default class UcdThemePagination extends LitElement {
     this.ellipses = false;
     this.xs_screen = false;
     this.size = '';
+    this.darkmode = false;
 
     this.screen_check = (window.innerWidth <= this.breakPoints.mobileBreakPoint)  ? true : false;
 
-    this.render = render.bind(this);
+    this.render = render.bind(this);    
   }
 
   /**
@@ -120,37 +88,31 @@ export default class UcdThemePagination extends LitElement {
    */
   willUpdate(props) {
     if( props.has('currentPage') || props.has('maxPages') ) {
-      
-      if( this.xs_screen && this.screen_check ) {
-        let pages = [this.currentPage];
-        this._pages = pages;  // Mobile Pagination
+      if( this.ellipses && this.maxPages >= 8 ) {
+        this._pages = this._renderEllipse();
+      } else if ( this.ellipses && this.maxPages < 8 ) {
+        this._pages = this._renderOriginal();
       } else {
-        if( this.ellipses && this.maxPages >= 8 ) {
-          this._pages = this._renderEllipse();
-        } else if ( this.ellipses && this.maxPages < 8 ) {
-          this._pages = this._renderOriginal();
-        } else {
-          let startIndex = Math.floor(this.currentPage - (this.visibleLinkCount/2));
-          
-          if( startIndex < 0 ) {
-            startIndex = 0;
-          } else if ( (this.currentPage + (this.visibleLinkCount/2)) > this.maxPages ) {
-            startIndex -= Math.ceil(this.currentPage + (this.visibleLinkCount/2)) - this.maxPages - 1;
-          }
-          if( startIndex < 0 ) {
-            startIndex = 0;
-          }
-      
-          let endIndex = startIndex + this.visibleLinkCount;
-          if( endIndex > this.maxPages ) endIndex = this.maxPages;
-      
-          let pages = [];
-          for( let i = startIndex; i < endIndex; i++ ) {
-            pages.push(i+1);
-          }
-          this._pages = pages;
-        } 
-      } // Desktop Pagination
+        let startIndex = Math.floor(this.currentPage - (this.visibleLinkCount/2));
+        
+        if( startIndex < 0 ) {
+          startIndex = 0;
+        } else if ( (this.currentPage + (this.visibleLinkCount/2)) > this.maxPages ) {
+          startIndex -= Math.ceil(this.currentPage + (this.visibleLinkCount/2)) - this.maxPages - 1;
+        }
+        if( startIndex < 0 ) {
+          startIndex = 0;
+        }
+    
+        let endIndex = startIndex + this.visibleLinkCount;
+        if( endIndex > this.maxPages ) endIndex = this.maxPages;
+    
+        let pages = [];
+        for( let i = startIndex; i < endIndex; i++ ) {
+          pages.push(i+1);
+        }
+        this._pages = pages;
+      }
     }
   }
 
@@ -186,10 +148,14 @@ export default class UcdThemePagination extends LitElement {
       args.class += ' pager__item--current';
     }
 
+    if( this.darkmode ) {
+      args.class += ' darkmode';
+    }
+
     if( !this.basePath && !this.useHash ) { 
-      return html `<li  class="pager__item ${args.class || ''}">
+      return html `<li class="pager__item ${args.class || ''}">
         ${((this.currentPage == 1 && args.label == "Prev") || (this.currentPage == this.maxPages && args.label == "Next") ) ? 
-        html`<a style="pointer-events: none; cursor: default; color:#999999; background: white" tabindex="1" @click="${this._onPageClicked}" page="${page}">${args.label || page}</a>`:
+        html`<a style="pointer-events: none; cursor: default; color: ${this.darkmode ? '#cccccc' : '#999999'}; background: ${this.darkmode ? 'transparent' : 'white'}" tabindex="1" @click="${this._onPageClicked}" page="${page}">${args.label || page}</a>`:
         html`<a style="cursor:pointer;" tabindex="1" @click="${this._onPageClicked}" page="${page}">${args.label || page}</a>`
          }  
         </li>`;            
@@ -198,7 +164,7 @@ export default class UcdThemePagination extends LitElement {
     let href = (this.useHash ? '#' : '') + (this.basePath || '/') + page + (this.queryParams ? '?' + this.queryParams : '');
     return html`<li class="pager__item ${args.class || ''}">
         ${((this.currentPage == 1 && args.label == "Prev") || (this.currentPage == this.maxPages && args.label == "Next") ) ? 
-          html` <a style="pointer-events: none; cursor: default; color:#999999; background:white;" href="${href}">${args.label || page}</a>`: 
+          html` <a style="pointer-events: none; cursor: default; color: ${this.darkmode ? '#cccccc' : '#999999'}; background: ${this.darkmode ? 'transparent' : 'white'};" href="${href}">${args.label || page}</a>`: 
           html` <a href="${href}">${args.label || page}</a>`
         }   
         </li>`;

package/brand/ucd-theme-pagination/ucd-theme-pagination.tpl.js

@@ -33,6 +33,35 @@ export function styles() {
         align-items: center;
       }
     }
+
+    .pager__item.darkmode a {
+      color: white;
+    }
+
+    .pager .darkmode span {
+      color: white;
+    }
+
+    .pager__item--current.darkmode a {
+      background-color: #FFBF00;
+      color: #002851;
+    }
+
+    .pager__item.darkmode:hover a {
+      color: #002851 !important;
+    }
+
+    .pager__item--previous.pager__item--current.darkmode,
+    .pager__item--previous.pager__item--current.darkmode:hover,
+    .pager__item--next.pager__item--current.darkmode,
+    .pager__item--next.pager__item--current.darkmode:hover {
+      background-color: transparent;
+    }
+
+    .pager__item--previous.pager__item--current.darkmode:hover a,
+    .pager__item--next.pager__item--current.darkmode:hover a {
+      color: #cccccc !important;
+    }
   `;
 
   return [normalizeCss, resetCss, paginationCss, elementStyles];
@@ -44,7 +73,7 @@ return html`
   <ul class="pager">
     ${this.xs_screen ? 
       html`
-        <div class="xs-screen">
+        <div class="xs-screen${this.darkmode ? ' darkmode' : ''}">
           ${this._renderLink(
             this.currentPage-1, 
             {label: 'Prev', class: 'pager__item--previous', noHighlight: false}
@@ -58,7 +87,7 @@ return html`
             )} 
         </div>
 
-        <div class="default">
+        <div class="default${this.darkmode ? ' darkmode' : ''}">
           ${this._renderLink(
             this.currentPage-1, 
             {label: 'Prev', class: 'pager__item--previous', noHighlight: false}

package/package.json

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

package/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js

@@ -9,12 +9,13 @@ import bookLogo from "./book.js";
 /**
  * @class UcdlibBrandingBar
  * @classdesc Component class for displaying a Library branding bar in a header
- * 
- * @property {String} figure - Figure to display: 'book' or 'logo'
+ *
+ * @property {String} figure - Figure to display: 'book', 'logo', or 'custom'
+ * @property {String} figureSrc - Url of image to use for custom figure
  * @property {String} siteName - Name of website to display
  * @property {String} slogan - Optional text to display below site name
  * @property {String} siteUrl - Url to use for links around site name and figure
- * 
+ *
  * @examples
  *  <ucdlib-branding-bar>
  *   <a href="#">My Account</a>
@@ -28,7 +29,8 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
   static get properties() {
     return {
       figure: {type: String},
-      figureUrl: {type: String, attribute: "figure-url"},
+      figureSrc: {type: String, attribute: "figure-src"},
+      figureCustomWidth: {type: String, attribute: "figure-custom-width"},
       siteName: {type: String, attribute: "site-name"},
       slogan: {type: String},
       siteUrl: {type: String, attribute: "site-url"},
@@ -49,6 +51,8 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
     );
 
     this.figure = "book";
+    this.figureSrc = '';
+    this.figureCustomWidth = '150px';
     this.siteName = "UC Davis Library";
     this.slogan = "";
     this.siteUrl = "/";
@@ -81,7 +85,7 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
    */
   _renderFigure(){
     if( this.figure === 'custom' ) {
-      return html`<img src="${this.figureUrl}" />`;
+      return html`<img src="${this.figureSrc}" />`;
     }
     if ( this.figure === 'logo') return logo;
     if ( this.figure === 'book' ) return bookLogo;
@@ -106,4 +110,4 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
 
 }
 
-customElements.define('ucdlib-branding-bar', UcdlibBrandingBar);
+customElements.define('ucdlib-branding-bar', UcdlibBrandingBar);

package/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.tpl.js

@@ -27,10 +27,6 @@ export function styles() {
       width: 70px;
       min-width: 70px;
     }
-    .figure--custom img {
-      width: 150px;
-      min-width: 150px;
-    }
     .figure--logo svg {
       width: 375px;
       min-width: 375px;
@@ -66,7 +62,7 @@ export function styles() {
         display: none;
       }
     }
-    
+
   `;
 
   return [
@@ -76,8 +72,14 @@ export function styles() {
     elementStyles];
 }
 
-export function render() { 
+export function render() {
 return html`
+  <style>
+    .figure--custom img {
+      width: ${this.figureCustomWidth};
+      min-width: ${this.figureCustomWidth};
+    }
+  </style>
   <div class="container figure--${this.figure}">
     <div class="site-branding">
       <div class="site-branding__figure">
@@ -93,7 +95,7 @@ return html`
     ${this.navItems.length ? html`
       <nav class="menu">
         ${this.navItems.map(link => html`
-          <a 
+          <a
             href=${ifDefined(link.href ? link.href : null)}
             target=${ifDefined(link.newTab ? "_blank": null)}
             >${link.linkText}</a>
@@ -103,4 +105,4 @@ return html`
 
   </div>
 
-`;}
+`;}

package/ucdlib/ucdlib-header/ucdlib-header.tpl.js

@@ -208,6 +208,14 @@ ${this.isDemo ? html`
   }
 }
 @media (min-width: ${this.mobileWidth}px) {
+  .menu--closed .off-canvas--left {
+    transform: none !important;
+  }
+  .off-canvas {
+    position: initial !important;
+    width: auto !important;
+    background-color: transparent !important;
+  }
   .l-header .l-navbar {
     width: 100%;
     height: auto;
@@ -221,7 +229,7 @@ ${this.isDemo ? html`
     width: 100%;
   }
   .menu--hidden .off-canvas__container {
-    display: grid;
+    display: grid !important;
     grid-template-areas: "nav quick search logo";
   }
   .l-nav-horizontal {

package/ucdlib/ucdlib-primary-nav/ucdlib-primary-nav.tpl.js

@@ -361,6 +361,10 @@ return html`
     }
   }
 
+  .primary-nav a:hover, .primary-nav__nolink:hover {
+    background-color: #ffbf00 !important;
+  }
+
 </style>
 <nav 
   id=${this._classPrefix}