@ucd-lib/theme-elements 1.2.3 → 1.2.4

package/package.json

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

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};
   }
 
   /**