@ucd-lib/theme-elements 0.0.2 → 0.0.6

package/utils/mixins/nav-element.js

@@ -0,0 +1,103 @@
+/**
+ * @function NavElement
+ * @param {Class} superClass - LitElement or child class.
+ * @description Adds utilities for navigation to a LitElement
+ * 
+ * @returns {Class} LitElement with Nav utilities attached
+ */
+const NavElement = (superClass) => class extends superClass {
+
+  constructor() {
+    super();
+    this.navItems = [];
+    this.maxDepth = 2;
+  }
+
+  /**
+   * @method parseChildren
+   * @description Creates a tree-like nav Array structure from element children
+   * @param {HTMLCollection} children - Element children (non-shadow)
+   * @returns {Array}
+   */
+  parseNavChildren( children=this.children ){
+    if ( !children ) return [];
+    children = Array.from(this.children);
+    let navItems = children.map((child) => this._makeNavItemTree(child)).filter(navItem => navItem.linkText);
+    return navItems;
+  }
+
+  /**
+   * @method _makeNavItemTree
+   * @private
+   * @description Extracts menu item data from DOM Element
+   * @param {Element} ele - Element
+   * @returns {Object} Formatted object describing the menu item and its children
+   */
+  _makeNavItemTree(ele){
+    let linkText, href, subItems = [], isOpen=false, inlineStyles={}, newTab=false;
+    if ( ele.tagName === 'LI' && ele.children.length > 0) ele = ele.children[0];
+
+    if ( ele.tagName === 'A' ) {
+      linkText = ele.innerText;
+      href = ele.href;
+    } else if ( ele.tagName === 'LI' ) {
+      linkText = ele.innerText;
+    } else if ( ele.tagName === 'OL' || ele.tagName === 'UL' ) {
+      linkText = ele.getAttribute('link-text');
+      href = ele.getAttribute('href');
+      isOpen = ele.hasAttribute('is-open');
+
+      for (const child of Array.from(ele.children)) {
+        let childItem = this._makeNavItemTree(child);
+        if ( childItem.linkText ) subItems.push(childItem);
+      }
+    }
+    if (ele.getAttribute('target') == '_blank') newTab = true;
+
+    if ( linkText ) linkText = linkText.trim();
+    return {linkText, href, subItems, isOpen, inlineStyles, newTab};
+  }
+
+  /**
+   * @method getNavItem
+   * @description Retrieves an item from the navItems array.
+   * @param {Array} location - Coordinates of the item in the 'navItems' array. i.e. [0, 1, 4].
+   * @returns {Object}
+   */
+  getNavItem(location){
+    let accessor = "this.navItems";
+    if ( location && location.length > 0) {
+      accessor += "[" + location.join("].subItems[") + "]";
+    }
+    return eval(accessor);
+  }
+
+  /**
+   * @method itemHasSubNav
+   * @description Utility function for determining if a menu has subitems
+   * @param {Object} navItem - A member of the navItems array.
+   * @returns {Boolean}
+   */
+  itemHasSubNav(navItem){
+    if ( navItem && navItem.subItems && navItem.subItems.length) return true;
+    return false;
+  }
+
+  /**
+   * @method clearMobileAnimationStyles
+   * @description Removes inline styles on a nav element (used for mobile transition animation)
+   * @param {Object} navItem - Member of the this.navItems array
+   */
+  clearItemInlineStyles(navItem){
+    if (
+      navItem &&
+      navItem.inlineStyles && 
+      Object.keys(navItem.inlineStyles).length > 0 
+    ) {
+      navItem.inlineStyles = {};
+      this.requestUpdate();
+    }
+  }
+};
+
+export {NavElement};

package/utils/index.js

@@ -1,6 +0,0 @@
-import Mixin from './mixin.js';
-import {MutationObserverElement} from './mutation-observer.js';
-import {MainDomElement} from './main-dom-element.js';
-import { BreakPoints } from './break-points.js';
-
-export {Mixin, MutationObserverElement, MainDomElement, BreakPoints};

package/utils/mutation-observer.js

@@ -1,47 +0,0 @@
-/**
- * @function MutationObserverElement
- * @param {Class} superClass - LitElement or child class.
- * @description add default functionality for mutation observer
- * 
- * @returns {Class} LitElement with mutation observer attached.
- */
-const MutationObserverElement = (superClass) => class extends superClass {
-
-  constructor() {
-    super();
-    this._childListObserver = null;
-  }
-
-  /**
-   * @method firstUpdated
-   * @description called on first DOM render.  Call the _onChildListMutation method
-   * 
-   * @param {Set} props 
-   */
-  firstUpdated(props) {
-    super.firstUpdated(props);
-    this._onChildListMutation();
-  }
-
-  /**
-   * @method connectedCallback
-   * @description Native lifecycle method called when element is connected
-   */
-  connectedCallback(){
-    super.connectedCallback();
-    this._childListObserver = new MutationObserver(
-      (mutationsList, observer) => this._onChildListMutation(mutationsList, observer));
-    this._childListObserver.observe(this, {childList: true});
-  }
-
-  /**
-   * @method disconnectedCallback
-   * @description Native lifecycle method called when element is disconnected
-   */
-  disconnectedCallback(){
-    this._childListObserver.disconnect();
-    super.disconnectedCallback();
-  }
-};
-
-export {MutationObserverElement};