@ucd-lib/theme-elements 0.0.1 → 0.0.5

package/brand/ucd-theme-quick-links/ucd-theme-quick-links.js

@@ -0,0 +1,269 @@
+import { LitElement, html } from 'lit';
+import {render, styles} from "./ucd-theme-quick-links.tpl.js";
+
+import { MutationObserverController, WaitController } from '../../utils/controllers';
+
+/**
+ * @class UcdThemeQuickLinks
+ * @classdesc Component class for displaying a quick links nav
+ * 
+ *  Patternlab Url:
+ *    - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-quick-links
+ *    - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-quick-links-2-columns
+ *    - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-quick-links-highlight
+ *    - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-quick-links-home-site
+ * @property {String} title - Text to be displayed instead of "Quick Links"
+ * @property {String} styleModifiers - Apply alternate styles with a space-separated list.
+ * @property {Boolean} opened - Menu is open
+ * @property {Number} animationDuration - Length of animation when opening/closing menu
+ */
+export default class UcdThemeQuickLinks extends LitElement {
+
+  mutationObserver = new MutationObserverController(this);
+  wait = new WaitController(this);
+
+  static get properties() {
+    return {
+      title: {type: String},
+      styleModifiers: {type: String, attribute: "style-modifiers"},
+      opened: {type: Boolean},
+      animationDuration: {type: Number, attribute: "animation-duration"},
+      _links: {type: Array, state: true},
+      _hasCustomIcons: {type: Boolean, state: true},
+      _transitioning: {type: Boolean, state: true},
+      _openedHeight: {type: Number, state: true}
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+
+    this.title = "Quick Links";
+    this.styleModifiers = "";
+    this.opened = false;
+    this.animationDuration = 300;
+
+    this._links = [];
+    this._classPrefix = "quick-links";
+    this._hasCustomIcons = false;
+    this._transitioning = false;
+    this._openedHeight = 0;
+  }
+
+  /**
+   * @method open
+   * @description Opens the quick links menu if not already open or in a transition state.
+   * @returns {Promise} Returns true if successful
+   */
+  async open(){
+    if ( this._transitioning || this.opened ) return false;
+
+    this._openedHeight = 0;
+    this._transitioning = true;
+    await this.updateComplete;
+    this._openedHeight = this.renderRoot.getElementById('menu').scrollHeight + "px";
+    await this.updateComplete;
+
+    await this.wait.wait(this.animationDuration);
+    this._transitioning = false;
+    this.opened = true;
+    return true;
+  }
+
+  /**
+   * @method close
+   * @description Closes the quick links menu if not already closed or in a transition state.
+   * @returns {Promise} Returns true if successful
+   */
+  async close(){
+    if ( this._transitioning || !this.opened ) return false;
+    this._transitioning = true;
+
+    this._openedHeight = this.renderRoot.getElementById('menu').scrollHeight + "px";
+    await this.updateComplete;
+    await this.wait.waitForFrames(2);
+    this._openedHeight = 0;
+    await this.updateComplete;
+
+    await this.wait.wait(this.animationDuration);
+
+    this._transitioning = false;
+    this.opened = false;
+    return true;
+  }
+
+  /**
+   * @method ingestChildren
+   * @description Copies lightdom children into the shadowdom.
+   */
+  ingestChildren(){
+    // remove any slotted icons created from a previous render
+    this.querySelectorAll('[slot]').forEach(ele => ele.remove());
+    this._hasCustomIcons = false;
+
+    let links = [];
+    this.querySelectorAll('a').forEach((child, index) => {
+      if (child.tagName !== "A")  return;
+      let link = {};
+
+      // if first child exists, we assume it is an icon
+      if ( 
+        child.childElementCount > 0 && 
+        index < 3 &&
+        child.children[0].tagName !== 'A'
+      ){
+        this._hasCustomIcons = true;
+        let icon = child.children[0].cloneNode(true);
+        let iconSlot = `icon-${index}`;
+        icon.setAttribute('slot', iconSlot);
+        this.appendChild(icon);
+        link.iconSlot = iconSlot;
+      }
+
+      if ( child.href ) link.href = child.href;
+      link.text = child.innerText;
+      link.ele = child;
+
+      links.push(link);
+    });
+
+    if ( links.length > 0 ) this._links = links;
+  }
+
+  /**
+   * @method _onBtnClick
+   * @private
+   * @description Attached to menu open/close button
+   */
+  async _onBtnClick(){
+    let didToggle;
+    if ( this.opened ) {
+      didToggle = await this.close();
+    } else {
+      didToggle = await this.open();
+    }
+    if ( didToggle ) {
+      this.dispatchEvent(new CustomEvent('toggle', {
+        detail : {open: this.opened}
+      }));
+    }
+  }
+
+  /**
+   * @method _onItemClick
+   * @private
+   * @description Attached to menu item links without an href
+   * @param {Event} e 
+   */
+  _onItemClick(e){
+    this._dispatchItemClick(e.target.index);
+  }
+
+  /**
+   * @method _onItemKeyup
+   * @private
+   * @description Attached to menu item links without an href
+   * @param {Event} e 
+   */
+  _onItemKeyup(e){
+    if( e.which !== 13 ) return;
+    this._dispatchItemClick(e.target.index);
+  }
+
+  /**
+   * @method _dispatchItemClick
+   * @private
+   * @description Fires the item-click event
+   * @param {Number} index - The array index of the selected menu item
+   */
+  _dispatchItemClick(index){
+    this.dispatchEvent(new CustomEvent('item-click', {
+      detail : {
+        index: index,
+        item: this._links[index]
+      }
+    }));
+
+  }
+
+  /**
+   * @method _getNavClasses
+   * @private
+   * @description Get classes to be applied to the 'nav' element
+   * @returns {Object}
+   */
+  _getNavClasses(){
+    let classes = {};
+    classes[`${this._classPrefix}__menu`] = true;
+    
+    if ( this.styleModifiers ) {
+      this.styleModifiers.split(" ").forEach(mod => {
+        if (mod) classes[`${this._classPrefix}--${mod}`] = true;
+      });
+    }
+
+    classes['transitioning'] = this._transitioning;
+    classes['open'] = this.opened;
+
+    return classes;
+  }
+
+  /**
+   * @method _getNavStyles
+   * @private
+   * @description Get styles to be applied to the 'nav' element
+   * @returns {Object}
+   */
+  _getNavStyles(){
+    let styles = {};
+    if ( this._transitioning) {
+      styles['height'] = this._openedHeight;
+    }
+    return styles;
+  }
+
+  /**
+   * @method _onChildListMutation
+   * @param {Array} mutationsList - List of mutation records
+   * @private
+   * @description Fires when light dom child list changes. Injected by MutationObserverController.
+   *  Sets the '_links' property.
+   */
+  _onChildListMutation(mutationsList){
+
+    // Check to see if this element triggered the mutation and avoid infinite loop.
+    if ( mutationsList ) {
+      for (const mutation of mutationsList) {
+        for (const n of Array.from(mutation.addedNodes)){
+          if ( n instanceof Element && n.hasAttribute('slot')) return;
+        }
+        for (const n of Array.from(mutation.removedNodes)){
+          if ( n instanceof Element && n.hasAttribute('slot')) return;
+        }
+      }
+    }
+    this.ingestChildren();
+  }
+
+  /**
+   * @method _renderSlot
+   * @private
+   * @description Renders slot for an icon
+   * @param {Object} link - Member of the _links property.
+   * @returns {TemplateResult}
+   */
+  _renderSlot(link) {
+    if ( link.iconSlot ) {
+      return html`<div class='slot-parent'><slot name=${link.iconSlot}></slot></div>`;
+    }
+    return html``;
+  }
+
+}
+
+customElements.define('ucd-theme-quick-links', UcdThemeQuickLinks);

package/brand/ucd-theme-quick-links/ucd-theme-quick-links.tpl.js

@@ -0,0 +1,114 @@
+import { html, css } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import normalizeStyles from "@ucd-lib/theme-sass/normalize.css.js";
+import formStyles from "@ucd-lib/theme-sass/1_base_html/_forms.css.js";
+import menuStyles from "@ucd-lib/theme-sass/2_base_class/_misc.css.js";
+import subNavToggleStyles from "@ucd-lib/theme-sass/4_component/_submenu-toggle.css";
+import quickLinkStyles from "@ucd-lib/theme-sass/4_component/_nav-quick.css.js";
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+    .slot-parent {
+      display: none;
+    }
+    nav {
+      display: none;
+      overflow-y: hidden;
+    }
+    nav.open {
+      display: block;
+    }
+    nav.transitioning {
+      display: block;
+    }
+    .click-attached {
+      cursor: pointer;
+    }
+    @media (min-width: 992px) {
+      .slot-parent {
+        display: block;
+      }
+      ::slotted(*) {
+        min-width: 1.1rem !important;
+        max-width: 1.1rem !important;
+        width: 1.1rem !important;
+        margin-right: .75rem;
+        color: #13639e;
+        font-size: .875em;
+    }
+  }
+  `;
+
+  return [
+    //normalizeStyles,
+    //formStyles,
+    menuStyles,
+    subNavToggleStyles,
+    quickLinkStyles,
+    elementStyles
+  ];
+}
+
+export function render() { 
+return html`
+  ${this._hasCustomIcons ? html`
+    <style>
+      .quick-links--home-site li:first-child a:before {
+        content: "";
+        display: none;
+      }
+      .quick-links--home-site li:nth-child(2) a:before {
+        content: "";
+        display: none;
+      }
+      .quick-links--home-site li:nth-child(3) a:before {
+        content: "";
+        display: none;
+      }
+    </style>
+  ` : html``}
+  <style>
+    nav {
+      transition: height ${this.animationDuration + "ms"}
+    }
+  </style>
+  <div class="quick-links">
+    <button 
+      class="quick-links__title"
+      @click=${this._onBtnClick}
+      aria-controls="quick-links" 
+      aria-expanded="${this.opened}" 
+      aria-label="Toggle ${this.title} Menu">
+      ${this.title}<span class="submenu-toggle"><span class="submenu-toggle__icon">+</span></span>
+    </button>
+    <nav 
+      id="quick-links" 
+      class=${classMap(this._getNavClasses())} 
+      style=${styleMap(this._getNavStyles())}
+      aria-label="Quick Links Menu">
+    <ul class="menu" id="menu">
+      ${this._links.map((link, i) => html`
+        <li>
+          ${link.href ? html`
+            <a href="${link.href}">${this._renderSlot(link)}${link.text}</a>
+          ` : html`
+            <a 
+              class="click-attached" 
+              tabindex="0"
+              @click=${this._onItemClick}
+              @keyup=${this._onItemKeyup}
+              .index=${i}>${this._renderSlot(link)}${link.text}</a>
+          `}
+        </li>
+      `)}
+    </ul>
+    </nav>
+    
+  </div>
+
+`;}

package/{ucd-theme-form-search/ucd-theme-form-search.js → brand/ucd-theme-search-form/ucd-theme-search-form.js}

@@ -1,26 +1,22 @@
 import { LitElement } from 'lit';
-import {render, styles } from "./ucd-theme-form-search.tpl.js";
+import {render, styles } from "./ucd-theme-search-form.tpl.js";
 
 /**
- * @class UcdThemeFormSearch
+ * @class UcdThemeSearchForm
  * @classdesc Component class for rendering a basic search form.
- * Pattern Lab Url: http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-search-form
  * 
- * @param {String} value - The search string
- * @param {String} placeholder - The input placeholder
- * @param {String} formAction - The action to be taken on form submit (optional)
+ * Pattern Lab Url: 
+ *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-search-form
+ * 
+ * @property {String} value - The search string
+ * @property {String} placeholder - The input placeholder
+ * @property {String} formAction - The action to be taken on form submit (optional)
  * 
  * @example
- * // Use a form action:
- * html`
- *   <ucd-theme-form-search form-action="/url/to/post/to"></ucd-theme-form-search>
- * `
- * // Use event listener:
- * html`
+ *  <ucd-theme-form-search form-action="/url/to/post/to"></ucd-theme-form-search>
  *  <ucd-theme-form-search @search="${this._onSearch}"></ucd-theme-form-search>
- * `
  */
-export default class UcdThemeFormSearch extends LitElement {
+export default class UcdThemeSearchForm extends LitElement {
 
   static get properties() {
     return {
@@ -51,6 +47,7 @@ export default class UcdThemeFormSearch extends LitElement {
   /**
    * @method _onSubmit
    * @description Attached to form submit
+   * @private
    * @param {Event} e - submit event
    */
   _onSubmit(e){
@@ -64,6 +61,7 @@ export default class UcdThemeFormSearch extends LitElement {
   /**
    * @method _onInput
    * @description Attached to search input change
+   * @private
    * @param {Event} e - input event
    */
   _onInput(e){
@@ -73,6 +71,7 @@ export default class UcdThemeFormSearch extends LitElement {
   /**
    * @method _dispatchSearchEvent
    * @description Fires 'search' custom event
+   * @private
    */
   _dispatchSearchEvent() {
     let e = new CustomEvent('search', {
@@ -88,4 +87,4 @@ export default class UcdThemeFormSearch extends LitElement {
 
 }
 
-customElements.define('ucd-theme-form-search', UcdThemeFormSearch);
+customElements.define('ucd-theme-search-form', UcdThemeSearchForm);

package/brand/ucd-theme-search-popup/ucd-theme-search-popup.js

@@ -0,0 +1,91 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./ucd-theme-search-popup.tpl.js";
+
+import { MutationObserverController } from '../../utils/controllers';
+
+/**
+ * @class UcdThemeSearchPopup
+ * @classdesc UI component class for displaying a search popup to be used in the site header
+ *  
+ * Patternlab URL: 
+ *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-search-popup
+ * 
+ * @property {String} buttonText - The hidden innertext of the popup button.
+ * @property {Boolean} opened - Whether the popup is open or not.
+ * 
+ * @example
+ * <ucd-theme-search-popup>
+ *   <ucd-theme-search-form
+ *     @search="${e => console.log(e.detail.searchTerm)}">
+ *   </ucd-theme-search-form>
+ * </ucd-theme-search-popup>
+ * 
+ * <ucd-theme-search-popup>
+ *   <input placeholder="A custom search element">
+ * </ucd-theme-search-popup>
+ */
+export default class UcdThemeSearchPopup extends LitElement {
+  mutationObserver = new MutationObserverController(this);
+
+  static get properties() {
+    return {
+      buttonText: {type: String, attribute: "button-text"},
+      opened: {type: Boolean},
+      _defaultForm: {type: Boolean, state: true}
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+    this.buttonText = "Toggle Search";
+    this.opened = false;
+    this._defaultForm = false;
+
+  }
+
+  /**
+   * @method open
+   * @description Displays the search input if in desktop view
+   */
+  open(){
+    this.opened = true;
+  }
+
+  /**
+   * @method close
+   * @description Hides the search input if in desktop view
+   */
+  close(){
+    this.opened = false;
+  }
+
+  /**
+   * @method _onBtnClick
+   * @description Attached to popup button
+   * @private
+   */
+  _onBtnClick(){
+    this.opened = !this.opened;
+  }
+
+  /**
+   * @method _onChildListMutation
+   * @description Fires when there are changes to this element's non-shadow DOM children
+   * @private
+   */
+  _onChildListMutation(){
+    if ( this.querySelector('ucd-theme-search-form') ){
+      this._defaultForm = true;
+    } else {
+      this._defaultForm = false;
+    }
+  }
+
+}
+
+customElements.define('ucd-theme-search-popup', UcdThemeSearchPopup);

package/{ucd-theme-header-search-popup/ucd-theme-header-search-popup.tpl.js → brand/ucd-theme-search-popup/ucd-theme-search-popup.tpl.js}

@@ -24,7 +24,14 @@ return html`
   <span class="search-popup__open-icon">${this.buttonText}</span>
 </button>
 <div class="search-popup ${this.opened ? 'is-open' : ''}">
-  <slot></slot>
+  ${this._defaultForm ? html`
+    <div class="search-form">
+      <slot></slot>
+    </div>
+  ` : html`
+    <slot></slot>
+  `}
+
 </div>
 
 `;}

package/brand/ucd-theme-slim-select/ucd-theme-slim-select.js

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./ucd-theme-slim-select.tpl.js";
+
+import SlimSelect from 'slim-select';
+
+import { MutationObserverController } from '../../utils/controllers';
+
+/**
+ * @class UcdThemeSlimSelect
+ * @classdesc UI component class for displaying a fancy select. This is a wrapper element around the 'slim-select' package.
+ * 
+ * Patternlab URL:
+ *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=atoms-select-menu
+ */
+export default class UcdThemeSlimSelect extends LitElement {
+  mutationObserver = new MutationObserverController(
+    this, 
+    {subtree: true, childList: true, attributes: true, characterData: true},
+    "_onLightDomMutation"
+  );
+
+  static get properties() {
+    return {
+      
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+  }
+
+  /**
+   * @method _onLightDomMutation
+   * @private
+   * @description Fires when light dom child list changes. Called by MutationObserverController.
+   */
+  _onLightDomMutation(){
+    const children = Array.from(this.children);
+    if (children.length == 0 || children[0].tagName != "SELECT") return;
+    const select = children[0].cloneNode(true);
+    this.renderRoot.innerHTML= "";
+    this.renderRoot.appendChild(select);
+
+    this.slimSelect = new SlimSelect({
+      select: select,
+      onChange: (info) => this.dispatchEvent(new CustomEvent("change", {detail: info}))
+    });
+
+  }
+
+}
+
+customElements.define('ucd-theme-slim-select', UcdThemeSlimSelect);

package/brand/ucd-theme-slim-select/ucd-theme-slim-select.tpl.js

@@ -0,0 +1,26 @@
+import { html, css } from 'lit';
+
+import formStyles from "@ucd-lib/theme-sass/2_base_class/_forms.css.js";
+import slimSelectStyles from "@ucd-lib/theme-sass/slim-select.css.js"
+import selectStyles from "@ucd-lib/theme-sass/4_component/_slim-select.css.js";
+
+
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  return [
+    formStyles,
+    slimSelectStyles,
+    selectStyles,
+    elementStyles];
+}
+
+export function render() { 
+return html`
+
+`;}