@ucd-lib/theme-elements 1.2.3 → 1.2.5

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { LitElement, svg } from 'lit';
+import { LitElement, html, svg } from 'lit';
 import {render, styles} from "./ucdlib-branding-bar.tpl.js";
 
 import {Mixin, NavElement} from "../../utils/mixins";
@@ -28,6 +28,7 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
   static get properties() {
     return {
       figure: {type: String},
+      figureUrl: {type: String, attribute: "figure-url"},
       siteName: {type: String, attribute: "site-name"},
       slogan: {type: String},
       siteUrl: {type: String, attribute: "site-url"},
@@ -62,7 +63,7 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
    */
   willUpdate(props){
     if ( props.has("figure") && props.get("figure") !== undefined ){
-      const allowedKeywords = ['book', 'logo'];
+      const allowedKeywords = ['book', 'logo', 'custom'];
       if ( !allowedKeywords.includes(props.get('figure')) ){
         console.warn(`${props.get('figure')} is not a recognized "figure" keyword.
           Allowed values: ${JSON.stringify(allowedKeywords)}
@@ -79,6 +80,9 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
    * @returns {TemplateResult}
    */
   _renderFigure(){
+    if( this.figureUrl ) {
+      return html`<img src="${this.figureUrl}" />`;
+    }
     if ( this.figure === 'logo') return logo;
     if ( this.figure === 'book' ) return bookLogo;
     return svg``;

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

@@ -27,6 +27,10 @@ export function styles() {
       width: 70px;
       min-width: 70px;
     }
+    .figure--custom img {
+      width: 150px;
+      min-width: 150px;
+    }
     .figure--logo svg {
       width: 375px;
       min-width: 375px;

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

@@ -60,7 +60,7 @@ export default class UcdlibHeader extends LitElement {
     this.silenceWarnings = false;
     this.mobileWidth = 755;
     this.isDemo = false;
-    
+
     this._transitioning = false;
     this._hasPrimaryNav = false;
     this._hasSearch = false;

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

@@ -41,6 +41,8 @@ export default class UcdlibPrimaryNav extends Mixin(LitElement)
       navItems: {type: Array},
       maxDepth: {type: Number, attribute: "max-depth"},
       mobileWidth: {type: Number, attribute: "mobile-width"},
+      mobileOnly: {type: Boolean, attribute: "mobile-only"},
+      desktopOnly: {type: Boolean, attribute: "desktop-only"},
       _megaIsOpen: {type: Boolean, state: true}
     };
   }
@@ -60,6 +62,8 @@ export default class UcdlibPrimaryNav extends Mixin(LitElement)
     this.hoverDelay = 300;
     this.animationDuration = 300;
     this.mobileWidth = 755;
+    this.mobileOnly = false;
+    this.desktopOnly = false;
 
     this._classPrefix = "primary-nav";
     this._acceptedNavTypes = ['superfish', 'mega'];
@@ -364,9 +368,11 @@ export default class UcdlibPrimaryNav extends Mixin(LitElement)
   _makeLiClassMap(navItem, depth=0){
     let classes = {};
     classes[`depth-${depth}`] = true;
-    if ( navItem.isOpen ) classes['sf--hover'] = true;
-    if ( navItem.isClosing ) classes.closing = true;
-    if (navItem.megaFocus) classes['mega-focus'] = true;
+    if( navItem.isOpen ) classes['sf--hover'] = true;
+    if( navItem.isClosing ) classes.closing = true;
+    if( navItem.megaFocus ) classes['mega-focus'] = true;
+    if( navItem.mobileOnly ) classes['mobile-only'] = true;
+    if( navItem.desktopOnly ) classes['desktop-only'] = true;
     return classes;
   }
 

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

@@ -351,6 +351,16 @@ return html`
     }
   }
 
+  @media (max-width: ${this.mobileWidth - 1}px) {
+    .desktop-only {
+      display: none !important;
+    }
+  }
+  @media (min-width: ${this.mobileWidth}px) {
+    .mobile-only {
+      display: none !important;
+    }
+  }
 
 </style>
 <nav 

package/utils/mixins/nav-element.js

@@ -34,7 +34,7 @@ const NavElement = (superClass) => class extends superClass {
    * @returns {Object} Formatted object describing the menu item and its children
    */
   _makeNavItemTree(ele){
-    let linkText, href, subItems = [], isOpen=false, inlineStyles={}, newTab=false;
+    let linkText, href, subItems = [], isOpen=false, inlineStyles={}, newTab=false, mobileOnly=false, desktopOnly=false;
     if ( ele.tagName === 'LI' && ele.children.length > 0) ele = ele.children[0];
 
     if ( ele.tagName === 'A' ) {
@@ -53,9 +53,10 @@ const NavElement = (superClass) => class extends superClass {
       }
     }
     if (ele.getAttribute('target') == '_blank') newTab = true;
-
+    if ( ele.hasAttribute('mobile-only') ) mobileOnly = true;
+    if ( ele.hasAttribute('desktop-only') ) desktopOnly = true;
     if ( linkText ) linkText = linkText.trim();
-    return {linkText, href, subItems, isOpen, inlineStyles, newTab};
+    return {linkText, href, subItems, isOpen, inlineStyles, newTab, mobileOnly, desktopOnly};
   }
 
   /**