@ucd-lib/theme-elements 1.0.0 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/brand/ucd-theme-author-profile/ucd-theme-author-profile.js +34 -28
  2. package/brand/ucd-theme-author-profile/ucd-theme-author-profile.tpl.js +29 -21
  3. package/package.json +1 -1
package/brand/ucd-theme-author-profile/ucd-theme-author-profile.js CHANGED
@@ -8,7 +8,7 @@ import {TaskController} from '../../utils/controllers/task.js';
8
8
  * @property {String} email - Email to reference person
9
9
  * @property {String} domain - Specify the domain to choose from
10
10
  *
11
- * <ucdlib-author-profile domain="sandbox" email='sabaggett@ucdavis.edu></ucdlib-author-profile>
11
+ * <ucdlib-theme-author-profile domain="sandbox" email='sabaggett@ucdavis.edu></ucdlib-theme-author-profile>
12
12
  */
13
13
  export default class UcdlibAuthorProfile extends LitElement {
14
14
  static get properties() {
@@ -73,21 +73,19 @@ export default class UcdlibAuthorProfile extends LitElement {
73
73
 
74
74
 
75
75
  /**
76
- * @method firstUpdated
76
+ * @method updated
77
77
  *
78
- * @description updated when the page first renders
78
+ * @description request user data when email or domain changes
79
79
  *
80
- * @param {Object} changedProperties
80
+ * @param {Object} props
81
81
  *
82
82
  */
83
- firstUpdated(){
84
- if(this.email != ''){
83
+ updated(props){
84
+ if( props.has('email') || props.has('domain') ){
85
+ if( !this.email ) return;
85
86
  this.eController = new TaskController(this, this._requestUrl());
86
-
87
- this.requestUpdate();
88
87
  }
89
88
  }
90
-
91
89
 
92
90
  /**
93
91
  * @method validationLink
@@ -128,6 +126,7 @@ export default class UcdlibAuthorProfile extends LitElement {
128
126
  */
129
127
  _onError(e){
130
128
  this.ERROR = true;
129
+ console.log(this.ERROR);
131
130
  console.error(e);
132
131
  }
133
132
 
@@ -141,37 +140,44 @@ export default class UcdlibAuthorProfile extends LitElement {
141
140
  *
142
141
  */
143
142
  _onComplete(results){
144
- this.COMPLETE = true;
145
- this.PENDING = false;
146
- this.LOADING = false;
147
143
  this.results = results;
144
+ if(this.results.data != undefined) {
145
+ this.ERROR = true;
146
+ }
147
+ else {
148
+ this.COMPLETE = true;
149
+ this.PENDING = false;
150
+ this.LOADING = false;
148
151
 
149
- this.id = this.results.id;
150
152
 
151
- this.nameLast = this.results.nameLast;
153
+ this.id = this.results.id;
152
154
 
153
- this.nameFirst = this.results.nameFirst;
155
+ this.nameLast = this.results.nameLast;
154
156
 
155
- this.link = this.results.link;
157
+ this.nameFirst = this.results.nameFirst;
156
158
 
157
- this.contactWebsite = this.results.contactWebsite.length !== 0 ? this.results.contactWebsite[0].value :null;
159
+ this.link = this.results.link;
158
160
 
159
- this.contactEmail = this.results.contactEmail.length !== 0 ? this.results.contactEmail[0].value : null;
161
+ this.contactWebsite = this.results.contactWebsite.length !== 0 ? this.results.contactWebsite[0].value :null;
160
162
 
161
- this.contactPhone = this.results.contactPhone.length !== 0 ? this.results.contactPhone[0].value : null;
163
+ this.contactEmail = this.results.contactEmail.length !== 0 ? this.results.contactEmail[0].value : null;
162
164
 
163
- this.contactAppointmentUrl = this.results.contactAppointmentUrl;
164
-
165
- this.positionTitle = this.results.positionTitle;
165
+ this.contactPhone = this.results.contactPhone.length !== 0 ? this.results.contactPhone[0].value : null;
166
166
 
167
- this.photo = Object.keys(this.results.photo).length !== 0 ? this.results.photo : "Empty";
167
+ this.contactAppointmentUrl = this.results.contactAppointmentUrl != "" ? this.results.contactAppointmentUrl : undefined;
168
+
169
+ this.positionTitle = this.results.positionTitle;
168
170
 
169
- this.department = this.results.department.title;
170
-
171
- this.photoAlt = this.nameFirst + "_" + this.nameLast + "_Img";
171
+ this.photo = Object.keys(this.results.photo).length !== 0 ? this.results.photo : "Empty";
172
172
 
173
- this.requestUpdate();
173
+ this.department = this.results.department.title;
174
+
175
+ this.photoAlt = this.nameFirst + "_" + this.nameLast + "_Img";
174
176
 
177
+ this.requestUpdate();
178
+ }
179
+
180
+
175
181
 
176
182
  }
177
183
 
@@ -211,4 +217,4 @@ export default class UcdlibAuthorProfile extends LitElement {
211
217
 
212
218
  }
213
219
 
214
- customElements.define('ucdlib-author-profile', UcdlibAuthorProfile);
220
+ customElements.define('ucdlib-theme-author-profile', UcdlibAuthorProfile);
package/brand/ucd-theme-author-profile/ucd-theme-author-profile.tpl.js CHANGED
@@ -102,6 +102,9 @@ export function render() {
102
102
  line-height: 25px;
103
103
  color:#36454F;
104
104
  }
105
+ .noApp-pipe {
106
+ display:none;
107
+ }
105
108
 
106
109
  @media (max-width: 800px) {
107
110
 
@@ -151,42 +154,47 @@ ${this.eController ? html`
151
154
  <div class="container">
152
155
  <div class="photo"><img src="${this.photo.link}" alt="${this.photoAlt}"></div>
153
156
  <div class="text_container">
154
- <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
157
+ <h3 class="name"><a class="name" href="${this.link}">${this.nameFirst} ${this.nameLast}</a></h3>
155
158
  <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
156
159
  <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>
157
- <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>
158
- <p class="contact-list">${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl}">Book an Appointment</a></p>
160
+ <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>
161
+ <p class="contact-list">${this.contactAppointmentUrl ? html`${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl ? this.contactAppointmentUrl:"#"}">Book an Appointment</a>`: html``}</p>
159
162
  </div>
160
163
  </div>
161
164
  `
162
165
  :html`
163
166
  <div class="container-no-image">
164
167
  <div class="text_container">
165
- <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
168
+ <h3 class="name"><a class="name" href="${this.link}">${this.nameFirst} ${this.nameLast}</a></h3>
166
169
  <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
167
170
  <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>
168
- <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>
169
- <p class="contact-list">${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl ? this.contactAppointmentUrl:"#"}">Book an Appointment</a></p>
171
+ <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>
172
+ <p class="contact-list">${this.contactAppointmentUrl ? html`${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl ? this.contactAppointmentUrl:"#"}">Book an Appointment</a>`: html``}</p>
170
173
  </div>
171
174
  </div>
172
175
  `}
173
176
 
174
177
  `:html`
175
- <!--
176
- If it is in the loading stage of the permalink fetch
177
- it will render this
178
- look.
179
- -->
180
- <div class="vm-teaser__figure category_loading"></div>
181
- <div class="vm-teaser__body">
182
- <div class="load_teaser_a"></div>
183
- <br/>
184
- <div class="load_teaser_b"></div>
185
- <br/>
186
- <div class="load_teaser_c"></div>
187
- <br/>
188
- <div class="load_teaser_c"></div>
189
- </div>
178
+ ${this.ERROR ? html`
179
+ <p>Person does not exist!</p>
180
+ `: html`
181
+ <!--
182
+ If it is in the loading stage of the permalink fetch
183
+ it will render this
184
+ look.
185
+ -->
186
+ <div class="vm-teaser__figure category_loading"></div>
187
+ <div class="vm-teaser__body">
188
+ <div class="load_teaser_a"></div>
189
+ <br/>
190
+ <div class="load_teaser_b"></div>
191
+ <br/>
192
+ <div class="load_teaser_c"></div>
193
+ <br/>
194
+ <div class="load_teaser_c"></div>
195
+ </div>
196
+ `}
197
+
190
198
  `}
191
199
  </article>
192
200
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ucd-lib/theme-elements",
3
- "version": "1.0.0",
3
+ "version": "1.0.3",
4
4
  "description": "Custom elements for the UCD brand theme",
5
5
  "main": "index.js",
6
6
  "scripts": {