@ucd-lib/theme-elements 0.0.17 → 1.0.0

package/brand/ucd-theme-author-profile/ucd-theme-author-profile.js

@@ -0,0 +1,214 @@
+import {html, LitElement} from 'lit';
+import {render, styles} from "./ucd-theme-author-profile.tpl.js";
+import {TaskController} from '../../utils/controllers/task.js';
+
+/**
+ * @class AuthorProfile
+ * @description This author profile hydrates with the website wordpress api and goes into a profile block.
+ * @property {String} email - Email to reference person
+ * @property {String} domain - Specify the domain to choose from
+ *
+ * <ucdlib-author-profile domain="sandbox" email='sabaggett@ucdavis.edu></ucdlib-author-profile>
+ */
+export default class UcdlibAuthorProfile extends LitElement {
+  static get properties() {
+    return {
+      results : {type: Object, attribute:false},
+      email : {type: String},
+      id: {type: Number},
+      nameLast: {type: String},
+      nameFirst: {type: String},
+      link: {type: String},
+      contactWebsite: {type: String},
+      contactEmail: {type: String},
+      contactPhone: {type: String},
+      contactWebsiteLabel: {type: String},
+      contactEmailLabel: {type: String},
+      contactPhoneLabel: {type: String},
+      contactAppointmentUrl: {type: String},
+      positionTitle: {type: String},
+      photo: {type: Object},
+      department: {type: String},
+      domain: {type: String}
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.PENDING = false;
+    this.LOADING = false;
+    this.COMPLETE = false;
+    this.ERROR = false;
+    this.results = {};
+    this.email = '';
+    this.domain = '';
+    this.errorMessage = 'This is not an email.';
+    
+    this.svgIcon = {
+      'url': html`
+              <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+                <path d="M640,328V312a16,16,0,0,0-16-16H344V256h72a32,32,0,0,0,32-32V96a32,32,0,0,0-32-32H224a32,32,0,0,0-32,32V224a32,32,0,0,0,32,32h72v40H16A16,16,0,0,0,0,312v16a16,16,0,0,0,16,16H120v40H64a32,32,0,0,0-32,32V544a32,32,0,0,0,32,32H224a32,32,0,0,0,32-32V416a32,32,0,0,0-32-32H168V344H472v40H416a32,32,0,0,0-32,32V544a32,32,0,0,0,32,32H576a32,32,0,0,0,32-32V416a32,32,0,0,0-32-32H520V344H624A16,16,0,0,0,640,328ZM256,192V128H384v64ZM192,512H96V448h96Zm352,0H448V448h96Z"/>
+              </svg> `,
+      'email': html`
+              <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <path d="M502.3,190.8a6,6,0,0,1,9.7,4.7V400a48,48,0,0,1-48,48H48A48,48,0,0,1,0,400V195.6a6,6,0,0,1,9.7-4.7c22.4,17.4,52.1,39.5,154.1,113.6,21.1,15.4,56.7,47.8,92.2,47.6,35.7.3,72-32.8,92.3-47.6C450.3,230.4,479.9,208.2,502.3,190.8ZM256,320c23.2.4,56.6-29.2,73.4-41.4,132.7-96.3,142.8-104.7,173.4-128.7A23.93,23.93,0,0,0,512,131V112a48,48,0,0,0-48-48H48A48,48,0,0,0,0,112v19a24.08,24.08,0,0,0,9.2,18.9c30.6,23.9,40.7,32.4,173.4,128.7,16.8,12.2,50.2,41.8,73.4,41.4Z"/>
+              </svg>`,
+      'calendar': html `
+              <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512">
+              <path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"/>
+              </svg>`,
+      'phone': html `
+              <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512">
+              <path d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z"/>
+              </svg>
+        `
+    };
+    this.render=render.bind(this);
+
+  }
+
+
+  /**
+   * @method firstUpdated
+   * 
+   * @description updated when the page first renders
+   * 
+   * @param {Object} changedProperties 
+   * 
+   */  
+  firstUpdated(){
+    if(this.email != ''){
+      this.eController = new TaskController(this, this._requestUrl());
+
+      this.requestUpdate();
+    }
+  }
+
+  
+  /**
+   * @method validationLink
+   * 
+   * @description Validates the email to make sure it is an email
+   * 
+   * @param {String} email 
+   * 
+   * @returns {String}
+   * 
+   */ 
+  validationLink(email){
+    const regexExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/gi;  
+    return regexExp.test(email);
+  }
+
+  /**
+   * @method validationLink
+   * 
+   * @description Validates the email to make sure it is an email
+   * 
+   * @param {String} email 
+   * 
+   * @returns {String}
+   * 
+   */ 
+  _onPending(){
+    this.PENDING = true;
+  }
+ 
+  /**
+   * @method _onError
+   * 
+   * @description Sets error variable to true
+   * 
+   * @param {String} e 
+   * 
+   */ 
+  _onError(e){
+    this.ERROR = true;
+    console.error(e);
+  }
+
+  /**
+   * @method _onComplete
+   * 
+   * @description on complete defines the forms and updates
+   * 
+   * @param {Object} results 
+   * 
+   * 
+   */ 
+  _onComplete(results){
+    this.COMPLETE = true;
+    this.PENDING = false;
+    this.LOADING = false;
+    this.results = results;
+
+    this.id = this.results.id;
+
+    this.nameLast = this.results.nameLast;
+
+    this.nameFirst = this.results.nameFirst;
+
+    this.link = this.results.link;
+
+    this.contactWebsite = this.results.contactWebsite.length !== 0 ? this.results.contactWebsite[0].value :null;
+
+    this.contactEmail = this.results.contactEmail.length !== 0 ? this.results.contactEmail[0].value : null;
+
+    this.contactPhone = this.results.contactPhone.length !== 0 ? this.results.contactPhone[0].value : null;
+
+    this.contactAppointmentUrl = this.results.contactAppointmentUrl;
+ 
+    this.positionTitle = this.results.positionTitle;
+
+    this.photo = Object.keys(this.results.photo).length !== 0 ? this.results.photo : "Empty";
+
+    this.department = this.results.department.title;
+    
+    this.photoAlt = this.nameFirst + "_" + this.nameLast + "_Img";
+
+    this.requestUpdate();
+
+
+  }
+
+  /**
+   * @method _requestUrl
+   * 
+   * @description configures the url and checks for email validation
+   * 
+   * @returns {String}
+   * 
+   */ 
+  _requestUrl(){
+    let email =this.email;
+    let validate = this.validationLink(email);
+    if(!validate)  console.error(email);
+    let url;
+
+    url = "https://library.ucdavis.edu/wp-json/ucdlib-directory/person/" + String(email);
+    if (this.domain != "")
+      url = "https://" + this.domain + ".library.ucdavis.edu/wp-json/ucdlib-directory/person/" + String(email);
+    this.requestUpdate();
+    
+    return url;
+  }
+
+  /**
+   * @method _onLoading
+   * 
+   * @description Sets loading variable to true
+   * 
+   * 
+   */ 
+  _onLoading(){
+    this.LOADING = true;
+  }
+
+
+}
+
+customElements.define('ucdlib-author-profile', UcdlibAuthorProfile);

package/brand/ucd-theme-author-profile/ucd-theme-author-profile.tpl.js

@@ -0,0 +1,193 @@
+import { html, css } from 'lit';
+
+import normalizeCss from "@ucd-lib/theme-sass/normalize.css.js";
+import teaserStyles from "@ucd-lib/theme-sass/4_component/_index.css.js";
+import baseStyles from "@ucd-lib/theme-sass/1_base_html/_index.css.js";
+import buttons from "@ucd-lib/theme-sass/2_base_class/_index.css.js";
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+    form {
+      width:100%;
+    }
+  `;
+
+  return [elementStyles,baseStyles,teaserStyles,normalizeCss, buttons];
+}
+
+export function render() {
+  return html`
+  <style>
+    .vm-teaser__figure.category_loading{
+      background-color:#dcdcdc;
+      height:165px;
+      width:135px;
+    }
+    .load_teaser_a{
+      background-color:#dcdcdc;
+      width: 85%;
+      height:25px;
+    }
+    .load_teaser_b{
+      background-color:#dcdcdc;
+      width: 67%;
+      height:20px;
+    }
+    .load_teaser_c{
+      background-color:#dcdcdc;
+      width: 33.3%;
+      height:18px;
+    }
+    .container {
+      display: inline-grid;
+      grid-template-columns: 15% 85%;
+      width:100%;
+    }
+    .container-no-image {
+      display: inline-grid;
+      width:100%;
+    }
+    article {
+      margin-bottom: 50px;
+    }
+
+    .photo {
+      position: relative;
+      width:90%;
+      height:90%;
+    }
+
+    .photo:after {
+      content: "";
+      display:inline-block;
+    }
+
+    .content {
+      position: absolute;
+      width: 70%;
+      height: 70%;
+    }
+
+    .text_container {
+      vertical-align:top;
+      display:inline-block;
+    }
+    .name {
+      color:var(--ucd-blue-80); 
+      margin-bottom:0;
+    }
+    .title {
+      margin-bottom:0;
+    }
+    .info {
+      color:var(--ucd-blue-80); 
+      margin-bottom:0;
+    }
+    .svg-icon {
+      width: 20px;
+      height: 20px;
+      fill: #73ABDD;
+      margin-right: 5px;
+    }
+    .contact-list{
+      display:inline-block;
+      margin-top:5px;
+    }
+    .pipe {
+        font-size:30px;
+        vertical-align: middle;
+        font-weight: lighter;
+        line-height: 25px;
+        color:#36454F;
+    }
+
+    @media (max-width: 800px) {
+
+      .contact-list {
+        display:block;
+        margin-bottom:5px;
+      }
+
+      .contact-list .pipe {
+        display:none;
+      }
+      .photo {
+        width:90%;
+        height:90%;
+      }
+
+    }
+
+    @media (max-width: 550px) {
+      .container {
+        grid-template-columns: 35% 65%;
+      }
+      .photo {
+        width:80%;
+        height:80%;
+      }
+
+    }
+  </style>
+  <!-- 
+    Starts the Permalink Fetch
+  -->
+${this.eController ? html`
+    ${this.eController.render({
+      complete: (result) => this._onComplete(result),
+      initial: () => this._onLoading(),
+      pending: () => this._onPending(),
+      error: (e) => this._onError(e)
+      })
+    }`:html``
+}
+
+<article>
+  ${!this.LOADING ? html`
+      ${this.photo != "Empty"  && this.photo != undefined ? 
+      html`   
+      <div class="container">
+        <div class="photo"><img src="${this.photo.link}" alt="${this.photoAlt}"></div>
+        <div class="text_container"> 
+          <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
+          <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
+          <p class="contact-list">${this.contactPhone ? html`${this.svgIcon.phone} <a class="info" href="tel:${this.contactPhone}">${this.contactPhone}</a>  <span class="pipe">&#124;</span>`: html``}</p>
+          <p class="contact-list">${this.contactEmail ? html`${this.svgIcon.email} <a class="info" href="mailto:${this.contactEmail}">${this.contactEmail}</a> <span class="pipe">&#124;</span>`: html``}</p>
+          <p class="contact-list">${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl}">Book an Appointment</a></p>
+        </div>
+      </div>
+      `
+      :html`
+      <div class="container-no-image">
+        <div class="text_container"> 
+          <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
+          <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
+          <p class="contact-list">${this.contactPhone ? html`${this.svgIcon.phone} <a class="info" href="tel:${this.contactPhone}">${this.contactPhone}</a>  <span class="pipe">&#124;</span> `: html``}</p>
+          <p class="contact-list">${this.contactEmail ? html`${this.svgIcon.email} <a class="info" href="mailto:${this.contactEmail}">${this.contactEmail}</a> <span class="pipe">&#124;</span>`: html``}</p>
+          <p class="contact-list">${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl ? this.contactAppointmentUrl:"#"}">Book an Appointment</a></p>
+        </div>
+      </div>
+      `}
+
+    `:html`
+      <!-- 
+        If it is in the loading stage of the permalink fetch
+        it will render this
+        look.
+      -->
+      <div class="vm-teaser__figure category_loading"></div>
+      <div class="vm-teaser__body">
+        <div class="load_teaser_a"></div>
+        <br/>
+        <div class="load_teaser_b"></div>
+        <br/>
+        <div class="load_teaser_c"></div>
+        <br/>
+        <div class="load_teaser_c"></div>
+      </div>
+    `}
+</article>
+`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.17",
+  "version": "1.0.0",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {
@@ -11,10 +11,10 @@
   "dependencies": {
     "@lit-labs/task": "^1.0.0",
     "@ucd-lib/theme-sass": "^5.0.15",
-    "dompurify": "^2.3.6",
+    "dompurify": "^2.3.9",
     "ip-cidr": "^3.0.4",
     "lit": "^2.0.2",
-    "marked": "^4.0.14",
+    "marked": "^4.0.18",
     "photoswipe": "^4.1.3",
     "slim-select": "^1.26.2"
   }

package/ucdlib/ucdlib-sils-permalink/ucdlib-sils-permalink.js

@@ -1,6 +1,7 @@
 import { LitElement} from 'lit';
 import {render, styles} from "./ucdlib-sils-permalink.tpl.js";
 import {PermalinkController} from './ucdlib-sils-permalink-controller.js';
+import {TaskController} from '../../utils/controllers/task.js';
 
 /**
  * @class UcdlibSilsPermalink
@@ -99,7 +100,8 @@ export default class UcdlibSilsPermalink extends LitElement {
    */  
   firstUpdated(changedProperties){
     if(this.permalink != ''){
-       this.perma = new PermalinkController(this, this._requestUrl());
+       this.perma = new TaskController(this, this._requestUrl());
+
        this.requestUpdate();
     }
   }

package/utils/controllers/task.js

@@ -0,0 +1,36 @@
+import {Task} from '@lit-labs/task';
+
+export class TaskController {
+//   host;
+//   value;
+//   kinds = Names.kinds;
+//   task;
+  constructor(host, url) {
+    const baseUrl = url;
+    this.url = baseUrl;
+    this.host = host;
+    this.task = new Task(
+      this.host,
+      async () => {
+        const response = await fetch(`${baseUrl}`);
+        const result = await response.json();
+        const error = result.error;
+        if (error !== undefined) {
+          throw new Error(error);
+        }
+        return result;
+      },
+        
+      () => [this.url]
+    );
+
+  }
+
+
+  render(renderFunctions) {
+    return this.task.render(renderFunctions);
+  }
+
+
+
+}