@ucd-lib/theme-elements 0.0.1 → 0.0.5

package/{ucd-theme-list-accordion → brand/ucd-theme-list-accordion}/ucd-theme-list-accordion.js

@@ -1,33 +1,32 @@
 import { LitElement } from 'lit';
-import {render, styles} from "./ucd-theme-list-accordion.tpl.js";
+import { render, styles } from './ucd-theme-list-accordion.tpl.js';
 
 /**
  * @class UcdThemeListAccordion
  * @classdesc Component class for displaying lists with accordion collapse/expand functionality.
- * Pattern Lab Url: 
+ * Pattern Lab Url:
  *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=atoms-list-accordion
  *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=atoms-list-faq
- * 
- * @property {String} listStyle - 'accordion' or 'faq'
- * 
+ *
+ * @property {String} list-style - 'accordion' or 'faq'
+ *
  * @example
  * html`
  *  <ucd-theme-list-accordion>
- *    <div>Click me to expand div below</div>
- *    <div>I will be toggled when the above item is clicked.</div>
- *    <div>The direct children of this element must be divs</div>
- *    <div>But you can pass through <a href="#">rich text</a> within.
+ *    <li>Click me to expand div below</li>
+ *    <li>I will be toggled when the above item is clicked.</li>
+ *    <li>The direct children of this element must be divs</li>
+ *    <li>But you can pass through <a href="#">rich text</a> within.</li >
  *  </ucd-theme-list-accordion>
  * `
  */
 export default class UcdThemeListAccordion extends LitElement {
-
   static get properties() {
     return {
-      listStyle: {type: String, attribute: "list-style"},
-      _listItems: {attribute: false, state: true},
-      _availableStyles: {attribute: false, state: true},
-      _expandedItems: {attribute: false, state: true}
+      listStyle: { type: String, attribute: 'list-style' },
+      _listItems: { attribute: false, state: true },
+      _availableStyles: { attribute: false, state: true },
+      _expandedItems: { attribute: false, state: true },
     };
   }
 
@@ -47,11 +46,11 @@ export default class UcdThemeListAccordion extends LitElement {
   /**
    * @method updated
    * @description Lit lifecycle method called after element has updated.
-   * @param {Map} props - properties that have changed 
+   * @param {Map} props - properties that have changed
    */
-  updated(props){
-    if ( props.has("listStyle") ) {
-      if ( !this._availableStyles.includes(this.listStyle.toLowerCase()) ) {
+  updated(props) {
+    if (props.has('listStyle')) {
+      if (!this._availableStyles.includes(this.listStyle.toLowerCase())) {
         this.listStyle = this._availableStyles[0];
       }
     }
@@ -61,18 +60,19 @@ export default class UcdThemeListAccordion extends LitElement {
    * @method connectedCallback
    * @description Native lifecycle method called when element is connected
    */
-  connectedCallback(){
+  connectedCallback() {
     super.connectedCallback();
-    this._childListObserver = new MutationObserver(
-      (mutationsList, observer) => this._onChildListMutation(mutationsList, observer));
-    this._childListObserver.observe(this, {childList: true});
+    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(){
+  disconnectedCallback() {
     this._childListObserver.disconnect();
     super.disconnectedCallback();
   }
@@ -88,9 +88,9 @@ export default class UcdThemeListAccordion extends LitElement {
    *    0: first pair, 1: second pair, etc
    * @param {Boolean} dispatchEvent - Will dispatch custom 'item-toggle' event
    */
-  async toggleItemVisiblity(index, isPairIndex=true, dispatchEvent=false){
+  async toggleItemVisiblity(index, isPairIndex = true, dispatchEvent = false) {
     let pairIndex = isPairIndex ? index : Math.floor(index / 2);
-    if ( this._expandedItems.has(pairIndex) ){
+    if (this._expandedItems.has(pairIndex)) {
       this._expandedItems.delete(pairIndex);
     } else {
       this._expandedItems.add(pairIndex);
@@ -98,7 +98,7 @@ export default class UcdThemeListAccordion extends LitElement {
 
     this.requestUpdate();
     await this.updateComplete;
-    if ( dispatchEvent ) this._dispatchItemToggleEvent(index);
+    if (dispatchEvent) this._dispatchItemToggleEvent(index);
   }
 
   /**
@@ -108,7 +108,7 @@ export default class UcdThemeListAccordion extends LitElement {
    * @param {Boolean} isPairIndex - Does the index param refer to Q/A pair or the flattened index?
    * @returns {Boolean}
    */
-  itemIsExpanded(index, isPairIndex=true) {
+  itemIsExpanded(index, isPairIndex = true) {
     let pairIndex = isPairIndex ? index : Math.floor(index / 2);
     return this._expandedItems.has(pairIndex);
   }
@@ -116,21 +116,21 @@ export default class UcdThemeListAccordion extends LitElement {
   /**
    * @method _onTitleClick
    * @description Attached to item title
-   * @param {Event} e 
+   * @param {Event} e
    */
   _onTitleClick(e) {
-    let index = parseInt(e.target.getAttribute("item-index"));
+    let index = parseInt(e.target.getAttribute('item-index'));
     this.toggleItemVisiblity(index, false, true);
   }
 
   /**
    * @method _onTitleKeyUp
    * @description Attached to item title
-   * @param {Event} e 
+   * @param {Event} e
    */
   _onTitleKeyUp(e) {
-    if( e.which !== 13 ) return;
-    let index = parseInt(e.target.getAttribute("item-index"));
+    if (e.which !== 13) return;
+    let index = parseInt(e.target.getAttribute('item-index'));
     this.toggleItemVisiblity(index, false, true);
   }
 
@@ -141,13 +141,13 @@ export default class UcdThemeListAccordion extends LitElement {
   _onChildListMutation() {
     let listItems = [];
     Array.from(this.children).forEach((child, index) => {
-      if (child.tagName !== "DIV")  return;
-      child.setAttribute('slot', 'list-item-'+index);
-      if( this.listStyle === 'faq' ) {
+      if (child.tagName !== 'DIV') return;
+      child.setAttribute('slot', 'list-item-' + index);
+      if (this.listStyle === 'faq') {
         child.style.display = 'inline';
       }
 
-      listItems.push({child, slotName:'list-item-'+index});
+      listItems.push({ child, slotName: 'list-item-' + index });
     });
     this._listItems = listItems;
   }
@@ -159,15 +159,19 @@ export default class UcdThemeListAccordion extends LitElement {
    */
   _dispatchItemToggleEvent(index) {
     let e = new CustomEvent('item-toggle', {
-      detail: { 
-        message: 'A list item has been expanded or collapsed', 
+      detail: {
+        message: 'A list item has been expanded or collapsed',
         isExpanded: this.itemIsExpanded(index, false),
-        item: {title: this._listItems[index], content: this._listItems[index + 1]},
+        item: {
+          title: this._listItems[index],
+          content: this._listItems[index + 1],
+        },
         listItemIndex: index,
-        listItemPairIndex: Math.floor(index / 2)
+        listItemPairIndex: Math.floor(index / 2),
       },
       bubbles: true,
-      composed: true });
+      composed: true,
+    });
     this.dispatchEvent(e);
   }
 
@@ -187,10 +191,9 @@ export default class UcdThemeListAccordion extends LitElement {
    * @param {Number} i - Array index.
    * @returns {Boolean}
    */
-  _isContent(i){
+  _isContent(i) {
     return !this._isTitle(i);
   }
-
 }
 
-customElements.define('ucd-theme-list-accordion', UcdThemeListAccordion);
+customElements.define('ucd-theme-list-accordion', UcdThemeListAccordion);

package/{ucd-theme-list-accordion → brand/ucd-theme-list-accordion}/ucd-theme-list-accordion.tpl.js

@@ -1,7 +1,7 @@
 import { html, css } from 'lit';
 
 import listCss from "@ucd-lib/theme-sass/2_base_class/_lists.css.js";
-import { motionCollapse } from "../utils/directives/motion-collapse";
+import { motionCollapse } from "../../utils/directives/motion-collapse";
 
 export function styles() {
   let customStyles = css`
@@ -28,7 +28,7 @@ ${this._listItems.map((item, index) => html`
   ${this._isTitle(index) ? html`
     <li 
       id="accordion-${index}"
-      class="item-title"
+      class="item-title ${this.itemIsExpanded(index, false) ? 'active' : ''}"
       item-index="${index}" 
       tabindex="0"
       @click=${this._onTitleClick}

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

@@ -0,0 +1,284 @@
+import { LitElement, html } from 'lit';
+//import { Page } from 'puppeteer';
+import {render, styles} from "./ucd-theme-pagination.tpl.js";
+
+import { BreakPointsController } from '../../utils/controllers';
+
+/**
+ * @class UcdThemePagination
+ * @classdesc Component class for pagination
+ * 
+ * Pattern Lab Url: 
+ *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-pagination
+ * 
+ * @property {String} base-path - for anchor tag href
+ * @property {String} current-page - Page to show and highlight
+ * @property {String} max-pages - Max number of total pages
+ * @property {String} visible-link-count - How many page links to show
+ * 
+ * @examples
+ * change!!!
+ * <ucd-theme-pagination
+ *  current-page="50"
+ *  max-pages="100"
+ *  use-hash>
+ * </ucd-theme-pagination>
+ * <ucd-theme-pagination
+ *  current-page="1"
+ *  max-pages="10">
+ * </ucd-theme-pagination>
+ * <ucd-theme-pagination
+ *  current-page="2"
+ *  max-pages="33"
+ *  base-path="/foo/bar/">
+ * </ucd-theme-pagination>
+ * 
+ */
+export default class UcdThemePagination extends LitElement {
+  breakPoints = new BreakPointsController(this);
+
+  static get properties() {
+    return {
+      basePath : {
+        type: String, 
+        attribute: 'base-path'
+      },
+      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'
+      }
+
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+
+    this._pages = [];
+    this.useHash = false;
+    this.disableLabel = false;
+    this.type = 'virtual';
+    this.basePath = '';
+    this.visibleLinkCount = 7;
+    this.currentPage = 1;
+    this.maxPages = 1;
+    this.ellipses = false;
+    this.xs_screen = false;
+    this.size = '';
+
+    this.screen_check = (window.innerWidth <= this.breakPoints.mobileBreakPoint)  ? true : false;
+
+    this.render = render.bind(this);
+  }
+
+  /**
+   * @method updated()
+   * @description Changes occur on update
+   */
+  updated(props3) {
+    if( props3.has('currentPage') ) {
+      
+      if(this.xs_screen && this.screen_check) {
+        let pages = [this.currentPage];
+        this._pages = pages;  // Mobile Pagination
+      }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
+
+    }
+  }
+
+  /**
+   * @method _constructClasses
+   * @description Makes a class map object based on element properties/attributes. 
+   * Classes are applied to the element.
+   * 
+   * @returns {Object} - {class1: true, class2: false}
+   */
+   _constructClasses() {
+    let classes = {'main': true};
+
+    if (this.size) {
+      classes['size-' + this.size] = true;
+    }
+    
+    return classes;
+  }
+
+
+  /**
+   * @method _renderLink
+   * @description render the links on the pagination 
+   * @returns {HTML}
+   */
+  _renderLink(page, args={}) {
+    if( page < 1 ) page = 1;
+    if( page > this.maxPages ) page = this.maxPages;
+
+    if( args.noHighlight !== true && page === this.currentPage ) {
+      if( !args.class ) args.class = '';
+      args.class += ' pager__item--current';
+    }
+
+    if( !this.basePath && !this.useHash ) { 
+      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="cursor:pointer;" tabindex="1" @click="${this._onPageClicked}" page="${page}">${args.label || page}</a>`
+         }  
+        </li>`;            
+    }
+
+    let href = (this.useHash ? '#' : '') + (this.basePath || '/') + page;
+    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 href="${href}">${args.label || page}</a>`
+        }   
+        </li>`;
+  }
+
+  /**
+   * @method _renderOriginal
+   * @description render the ellipses pattern in pagination
+   * @returns {Array} pages
+   */  
+  _renderOriginal(){
+    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);
+    }   
+
+    return pages;
+  }
+
+  /**
+   * @method _renderEllipse
+   * @description render the ellipses pattern in pagination
+   * @returns {Array} pages
+   */  
+  _renderEllipse(){
+    let startIndex = 0;
+    let endIndex = this.maxPages;
+
+    let pages = [];
+    if ((this.currentPage <= endIndex - 4) && (this.currentPage >= startIndex + 4)){
+      for( let i = startIndex; i < endIndex; i++ ) {
+        if(i == 0) pages.push(i+1);    
+        else if (i == (startIndex + 1)) pages.push("...");
+        else if (i > (startIndex + 1) && i < this.currentPage - 3) continue; 
+        else if (i >= (this.currentPage - 3) && i < (this.currentPage + 2)) pages.push(i+1);
+        else if (i < 4 && i < this.currentPage + 2) continue; 
+        else if (i == (endIndex - 2)) pages.push("...");
+        else if (i == endIndex - 1) pages.push(i+1);  
+      }
+    } //Middle ellipses
+    else if(this.currentPage >= startIndex + 4){
+      for( let i = startIndex; i < endIndex; i++ ) {
+        if (i == 0) pages.push(i+1);
+        else if(i > 0 && i < (endIndex - 6)) continue;
+        else if (i == (endIndex - 6)) pages.push("...");
+        else pages.push(i+1);       
+      }
+    } //Left ellipses
+    else if(this.currentPage <= endIndex - 4){
+      for( let i = startIndex; i < endIndex; i++ ) {
+        if(i < 6) pages.push(i+1);
+        else if (i == 6) pages.push("...");
+        else if (i > 6 && i < (endIndex - 2)) continue; 
+        else if (i == endIndex - 1) pages.push(i+1);  
+      }
+    } //Right ellipses
+    return pages;
+  }
+
+  /**
+   * @method _onPageClicked
+   * @description event fires on page click
+   * 
+   */    
+  _onPageClicked(e) {
+    this.dispatchEvent(new CustomEvent('page-change', {
+      detail : {page: parseInt(e.currentTarget.getAttribute('page'))}
+    }));
+  }
+
+
+}
+
+customElements.define('ucd-theme-pagination', UcdThemePagination);

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

@@ -0,0 +1,93 @@
+import { html, css } from 'lit';
+
+import normalizeCss from "@ucd-lib/theme-sass/normalize.css.js";
+import resetCss from "@ucd-lib/theme-sass/1_base_html/_reset.css.js";
+import paginationCss from "@ucd-lib/theme-sass/4_component/_pagination.css"
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+    .default {
+      display: inherit;
+    }
+    .xs-screen {
+      display:none;
+    }
+
+    @media (min-width: 991px) {
+      .pager__item--next {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    @media (max-width: 992px) {
+      .default {
+        display: none;
+      }
+      .xs-screen {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  `;
+
+  return [normalizeCss, resetCss, paginationCss, elementStyles];
+}
+
+export function render() { 
+return html`
+
+  <ul class="pager">
+    ${this.xs_screen ? 
+      html`
+        <div class="xs-screen">
+          ${this._renderLink(
+            this.currentPage-1, 
+            {label: 'Prev', class: 'pager__item--previous', noHighlight: false}
+          )}
+
+          ${this._renderLink(this.currentPage)}
+          <span>of ${this.maxPages}</span>  
+            ${this._renderLink(
+              this.currentPage+1, 
+              {label: 'Next', class: 'pager__item--next', noHighlight: false}
+            )} 
+        </div>
+
+        <div class="default">
+          ${this._renderLink(
+            this.currentPage-1, 
+            {label: 'Prev', class: 'pager__item--previous', noHighlight: false}
+          )}
+        
+          ${this._pages.map(page => this._renderLink(page))}
+
+          ${this._renderLink(
+            this.currentPage+1, 
+            {label: 'Next', class: 'pager__item--next', noHighlight: false}
+          )} 
+        </div>
+      `
+      :html`
+        ${this._renderLink(
+          this.currentPage-1, 
+          {label: 'Prev', class: 'pager__item--previous', noHighlight: false}
+        )}
+        
+        ${this._pages.map(page => this._renderLink(page))}
+
+        ${this._renderLink(
+          this.currentPage+1, 
+        {label: 'Next', class: 'pager__item--next', noHighlight: false}
+      )} 
+    `    
+    }
+  </ul>
+
+      
+
+`;}