issue#73 changes (#74)

* issue#73 changes

* person page change

* Updated theme version to 1.1.2

brand-app/pages/page-ucdlib-author-profile.tpl.js

@@ -22,7 +22,7 @@ export function render() {
   <p>Use the <code>email</code> attribute to query an employee: </p>
   ${this.sampleList.map(email => this.examplePanel(
     html`
-      <ucdlib-author-profile domain="stage" email='${email}'></ucdlib-author-profile>
+      <ucdlib-author-profile host="https://library.ucdavis.edu" email='${email}'></ucdlib-author-profile>
     `)  
   )}
 
@@ -44,17 +44,17 @@ export function render() {
         </p>
       </div>
       <div class='l-second panel'>
-        <ucdlib-author-profile domain="stage" email='${this.sampleList[0]}' sidebar></ucdlib-author-profile>
-        <ucdlib-author-profile domain="stage" email='${this.sampleList[1]}' sidebar></ucdlib-author-profile>
+        <ucdlib-author-profile host="https://library.ucdavis.edu" email='${this.sampleList[0]}' sidebar></ucdlib-author-profile>
+        <ucdlib-author-profile host="https://library.ucdavis.edu" email='${this.sampleList[1]}' sidebar></ucdlib-author-profile>
       </div>
   </div>
     `)}
 
   <h2>Changing the Data Source</h2>
   <p>By default, this element queries data from <code>https://library.ucdavis.edu</code>. 
-    However, the <code>domain</code> attribute can be used to query a subdomain of the site instead:</p>
+    However, the <code>host</code> attribute can be used to query a subdomain of the site instead:</p>
     ${this.examplePanel(html`
-        <ucdlib-author-profile domain="stage" email='[email protected]'></ucdlib-author-profile>
+        <ucdlib-author-profile host="https://library.ucdavis.edu" email='[email protected]'></ucdlib-author-profile>
       `)}
 
   `;}

elements/package.json

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

elements/ucdlib/ucdlib-author-profile/ucdlib-author-profile.js

@@ -6,30 +6,31 @@ 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='[email protected]></ucdlib-theme-author-profile>
+ * <ucdlib-theme-author-profile host="sandbox" email='[email protected]></ucdlib-theme-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},
+      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;

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

@@ -166,7 +166,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>
+            <h3 class="name"><a class="name"  href="${this.link}">${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> ${this.contactAppointmentUrl ? html`<span class="pipe">&#124;</span>`:html`<span class="noApp-pipe">&#124;</span>`}`: html``}</p>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme",
-  "version": "0.0.1",
+  "version": "1.1.2",
   "description": "University branding, additional theme support, theme elements",
   "main": "index.js",
   "scripts": {