SAK-47494 Update sakai-user-photo to update on atttribute updates (sa…

…kaiproject#10686) https://sakaiproject.atlassian.net/browse/SAK-47494
stetsche · Jul 12, 2022 · 054d1bf · 054d1bf
1 parent 668b782
commit 054d1bf
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 17 deletions.
diff --git a/commons/tool/src/webapp/WEB-INF/templates/comment.hbs b/commons/tool/src/webapp/WEB-INF/templates/comment.hbs
@@ -1,4 +1,4 @@
-<sakai-user-photo user-id="{{creatorId}}"></sakai-user-photo>
+<sakai-user-photo user-id="{{creatorId}}" popup="on"></sakai-user-photo>
 <div class="commons-comment-body">
     <span id="commons-comment-author-name-{{id}}"><a id="commons-author-name-{{id}}" href="javascript:;" class="commons-comment-author-name" data-user-id="{{creatorId}}">{{creatorDisplayName}}</a></span>
     <span id="commons-comment-content-{{id}}" class="commons-comment-content">{{{content}}}</span>

diff --git a/commons/tool/src/webapp/WEB-INF/templates/inplace_comment_editor.hbs b/commons/tool/src/webapp/WEB-INF/templates/inplace_comment_editor.hbs
@@ -1,4 +1,4 @@
-<sakai-user-photo user-id="{{#if currentUserId}}{{currentUserId}}{{else}}{{creatorId}}{{/if}}" no-popup></sakai-user-photo>
+<sakai-user-photo user-id="{{#if currentUserId}}{{currentUserId}}{{else}}{{creatorId}}{{/if}}"></sakai-user-photo>
 <div class="commons-editor-text-wrapper">
     <div class="commons-editor-text commons-comment-editor-text" data-post-id="{{id}}"><textarea id="commons-comment-textarea-{{id}}" class="commons-comment-textarea" data-post-id="{{id}}"></textarea></div>
     <div id="commons-comment-post-buttons-{{id}}">

diff --git a/commons/tool/src/webapp/WEB-INF/templates/post.hbs b/commons/tool/src/webapp/WEB-INF/templates/post.hbs
@@ -2,7 +2,7 @@
 
     <div class="commons-post-inner-container" id="commons-post-inner-container-{{id}}">
 
-        <sakai-user-photo user-id="{{creatorId}}"></sakai-user-photo>
+        <sakai-user-photo user-id="{{creatorId}}" popup="on"></sakai-user-photo>
         <div class="commons-post-text-container">
             <div class="commons-post-body">
                 <div class="commons-post-content">

diff --git a/commons/tool/src/webapp/WEB-INF/templates/posts.hbs b/commons/tool/src/webapp/WEB-INF/templates/posts.hbs
@@ -1,6 +1,6 @@
     <div class="commons-post-editor">
         <div class="commons-photo-text-wrapper">
-            <sakai-user-photo user-id="{{currentUserId}}" no-popup></sakai-user-photo>
+            <sakai-user-photo user-id="{{currentUserId}}"></sakai-user-photo>
             <div class="commons-editor-text-wrapper">
                 <div class="commons-editor-text"><div id="commons-post-creator-editor" contenteditable="true">{{tr 'post_editor_initial_text'}}</div></div>
             </div>

diff --git a/roster2/tool/src/handlebars/members_cards.handlebars b/roster2/tool/src/handlebars/members_cards.handlebars
@@ -12,7 +12,6 @@
                                 {{#if ../printMode}}
                                 print
                                 {{/if}}
-                                no-popup
             >
             </sakai-user-photo>
         </div> <!-- /roster-picture-card -->

diff --git a/roster2/tool/src/handlebars/members_photogrid.handlebars b/roster2/tool/src/handlebars/members_photogrid.handlebars
@@ -12,9 +12,9 @@
                                 {{#if ../printMode}}
                                 print
                                 {{/if}}
-                                {{#unless ../viewPicture}}
-                                no-popup
-                                {{/unless}}
+                                {{#if ../viewPicture}}
+                                popup="on"
+                                {{/if}}
             >
             </sakai-user-photo>
         </div> <!-- /roster-picture-card -->

diff --git a/roster2/tool/src/handlebars/members_table.handlebars b/roster2/tool/src/handlebars/members_table.handlebars
@@ -12,7 +12,6 @@
                                 {{#if ../printMode}}
                                 print
                                 {{/if}}
-                                no-popup
             >
             </sakai-user-photo>
         </td> <!-- /roster-table-cell -->

diff --git a/webcomponents/tool/src/main/frontend/js/grader/sakai-grader.js b/webcomponents/tool/src/main/frontend/js/grader/sakai-grader.js
@@ -359,7 +359,7 @@ export class SakaiGrader extends gradableDataMixin(SakaiElement) {
       <div class="grader ${this.graderOnLeft ? "on-left" : ""}">
         <div id="grader-submitted-block" class="grader-block">
           <div style="display: flex;">
-            <sakai-user-photo user-id="${this._getPhotoUserId()}" classes="grader-photo" ?official=${this.showOfficialPhoto}></sakai-user-photo>
+            <sakai-user-photo user-id="${this._getPhotoUserId()}" classes="grader-photo" popup="on"></sakai-user-photo>
             <div class="submitted-time" style="flex: 4;">
               ${this.submission.submittedTime || (this.submission.draft && this.submission.visible) ? html`
                 <span class="submitter-name">${this.renderSubmitter()}</span>

diff --git a/webcomponents/tool/src/main/frontend/js/sakai-user-photo.js b/webcomponents/tool/src/main/frontend/js/sakai-user-photo.js
@@ -10,7 +10,7 @@ import { html } from "./assets/lit-html/lit-html.js";
  * @element sakai-user-photo
  * @property {string} user-id - A Sakai user id
  * @property {string} [classes] - Extra classes to style the content
- * @property {boolean} [no-popup] Set this if you don't want the profile popup
+ * @property {string} [popup] By default, profile popups are off. Set this to "on" if you want them
  * @property {boolean} [official] Set this if you want the official Sakai photo
  * @property {string} [site-id] Set this to trigger permissions checks on the photo
  * @property {boolean} [print] Set this to trigger the render of a print friendly img tag
@@ -22,14 +22,15 @@ class SakaiUserPhoto extends SakaiElement {
     super();
 
     this.classes = "large-thumbnail";
+    this.popup = SakaiUserPhoto.OFF;
   }
 
   static get properties() {
 
     return {
       userId: { attribute: "user-id", type: String },
       classes: { type: String },
-      noPopup: { attribute: "no-popup", type: Boolean },
+      popup: { type: String },
       official: { type: Boolean },
       siteId: { attribute: "site-id", type: String },
       print: { type: Boolean },
@@ -45,12 +46,12 @@ class SakaiUserPhoto extends SakaiElement {
 
       this.url = `/direct/profile/${this.userId}/image/${this.official ? "official" : "thumb"}`
                   + (this.siteId && `?siteId=${this.siteId}`);
+    }
 
-      if (!this.noPopup) {
-        this.updateComplete.then(() => {
-          profile.attachPopups($(`#${this.generatedId}`));
-        });
-      }
+    if (this.popup == SakaiUserPhoto.ON && this.generatedId) {
+      this.updateComplete.then(() => {
+        profile.attachPopups($(`#${this.generatedId}`));
+      });
     }
   }
 
@@ -75,5 +76,8 @@ class SakaiUserPhoto extends SakaiElement {
   }
 }
 
+SakaiUserPhoto.OFF = "off";
+SakaiUserPhoto.ON = "on";
+
 const tagName = "sakai-user-photo";
 !customElements.get(tagName) && customElements.define(tagName, SakaiUserPhoto);