@ucd-lib/theme-elements 1.1.1 → 1.1.3

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

@@ -280,7 +280,6 @@ export default class UcdThemeHeader extends LitElement {
     } else {
       this._brandingBarLinks = [];
     }
-    console.log(ele.navItems);
   }
 
   /**

package/package.json

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

package/ucdlib/ucdlib-author-profile/ucdlib-author-profile.js

@@ -6,9 +6,9 @@ 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
+ * @property {String} host - Specify the host to choose from
  *
- * <ucdlib-theme-author-profile domain="sandbox" email='sabaggett@ucdavis.edu></ucdlib-theme-author-profile>
+ * <ucdlib-theme-author-profile host="sandbox" email='sabaggett@ucdavis.edu></ucdlib-theme-author-profile>
  */
 export default class UcdlibAuthorProfile extends LitElement {
   static get properties() {
@@ -16,20 +16,21 @@ export default class UcdlibAuthorProfile extends LitElement {
       results : {type: Object, attribute:false},
       email : {type: String},
       id: {type: Number},
-      nameLast: {type: String},
-      nameFirst: {type: String},
+      nameLast: {type: String, attribute: 'name-last'},
+      nameFirst: {type: String, attribute: 'name-first'},
       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},
+      contactWebsite: {type: String, attribute: 'contact-website'},
+      contactEmail: {type: String, attribute: 'contact-email'},
+      contactPhone: {type: String, attribute: 'contact-phone'},
+      contactWebsiteLabel: {type: String, attribute: 'contact-website-label'},
+      contactEmailLabel: {type: String, attribute: 'contact-email-label'},
+      contactPhoneLabel: {type: String, attribute: 'contact-phone-label'},
+      contactAppointmentUrl: {type: String, attribute: 'contact-appointment-url'},
+      positionTitle: {type: String, attribute: 'position-title'},
       photo: {type: Object},
       department: {type: String},
-      domain: {type: String},
+      host: {type: String},
+      apiPath: {type: String,  attribute: 'api-path'},
       sidebar: {type: Boolean}
     };
   }
@@ -46,7 +47,9 @@ export default class UcdlibAuthorProfile extends LitElement {
     this.ERROR = false;
     this.results = {};
     this.email = '';
-    this.domain = '';
+    this.host = window.location.origin;
+    this.apiPath =  '/wp-json/ucdlib-directory/person/';
+
 
     this.errorMessage = 'This is not an email.';
     
@@ -77,13 +80,13 @@ export default class UcdlibAuthorProfile extends LitElement {
   /**
    * @method updated
    * 
-   * @description request user data when email or domain changes
+   * @description request user data when email or host changes
    * 
    * @param {Object} props 
    * 
    */  
   updated(props){
-    if( props.has('email') || props.has('domain') ){
+    if( props.has('email') || props.has('host') || props.has('apiPath')){
       if( !this.email ) return;
       this.eController = new TaskController(this, this._requestUrl());
     }
@@ -194,11 +197,9 @@ export default class UcdlibAuthorProfile extends LitElement {
     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);
+    let url = (this.host || window.location.origin) + this.apiPath + String(email);
+
     this.requestUpdate();
     
     return url;

package/ucdlib/ucdlib-author-profile/ucdlib-author-profile.tpl.js

@@ -45,6 +45,10 @@ export function render() {
       grid-template-columns: 15% 85%;
       width:100%;
     }
+
+    .side-bar .contact-list{
+      display: block;
+    }
     .container {
       display: inline-grid;
       grid-template-columns: 15% 85%;
@@ -98,7 +102,7 @@ export function render() {
     }
     .contact-list{
       display:inline-block;
-      margin-top:5px;
+      margin: 5px 0;
     }
     .pipe {
         font-size:30px;
@@ -121,7 +125,6 @@ export function render() {
 
       .contact-list {
         display:block;
-        margin-bottom:5px;
       }
 
       .contact-list .pipe {
@@ -166,7 +169,7 @@ ${this.eController ? html`
         <div class="${this.sidebar ? 'side-bar':'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>
+            <h4 class="name"><a class="name" href="${this.link}">${this.nameFirst} ${this.nameLast}</a></h4>
             <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> ${this.contactAppointmentUrl ? html`<span class="pipe">&#124;</span>`:html`<span class="noApp-pipe">&#124;</span>`}`: html``}</p>
@@ -177,7 +180,7 @@ ${this.eController ? html`
       :html`
       <div class="container-no-image">
         <div class="text_container"> 
-          <h3 class="name"><a class="name" href="${this.link}">${this.nameFirst} ${this.nameLast}</a></h3>
+          <h4 class="name"><a class="name" href="${this.link}">${this.nameFirst} ${this.nameLast}</a></h4>
           <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> ${this.contactAppointmentUrl ? html`<span class="pipe">&#124;</span>`:html`<span class="noApp-pipe">&#124;</span>`}`: html``}</p>