gsuiComProfile: attr avatar

gridsound · Nov 1, 2024 · d05ba6f · d05ba6f
1 parent 8c9a2d8
commit d05ba6f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/gsuiComProfile/gsuiComProfile.css b/gsuiComProfile/gsuiComProfile.css
@@ -45,7 +45,8 @@ gsui-com-profile[ itsme ] .gsuiComProfile-main {
 .gsuiComProfile-main-avatar img {
 	width: 100%;
 	height: 100%;
-	border-radius: inherit;
+	object-fit: cover;
+	border-radius: 0;
 }
 .gsuiComProfile-main-avatar:not( .userAvatarHas ) img,
 .gsuiComProfile-main-avatar.userAvatarHas .gsuiIcon {
@@ -232,7 +233,7 @@ gsui-com-profile:not( [ editing ] ) .gsuiComProfile-form {
 		grid-template-columns: var( --gsuiComProfile-height ) 1fr;
 		grid-template-rows: var( --gsuiComProfile-height ) 34px;
 	}
-	.gsuiComProfile-main-avatar {
-		border-radius: 4px;
+	.gsuiComProfile-main-avatar img {
+		border-radius: 6px;
 	}
 }
diff --git a/gsuiComProfile/gsuiComProfile.html.js b/gsuiComProfile/gsuiComProfile.html.js
@@ -3,7 +3,7 @@
 GSUsetTemplate( "gsui-com-profile", () => [
 	GSUcreateDiv( { class: "gsuiComProfile-main" },
 		GSUcreateDiv( { class: "gsuiComProfile-main-avatar" },
-			GSUcreateElement( "img" ),
+			GSUcreateElement( "img", { src: "" } ),
 			GSUcreateI( { class: "gsuiIcon", "data-icon": "musician" } ),
 		),
 		GSUcreateDiv( { class: "gsuiComProfile-main-info" },

diff --git a/gsuiComProfile/gsuiComProfile.js b/gsuiComProfile/gsuiComProfile.js
@@ -6,6 +6,7 @@ class gsuiComProfile extends gsui0ne {
 			$cmpName: "gsuiComProfile",
 			$tagName: "gsui-com-profile",
 			$elements: {
+				$avatar: ".gsuiComProfile-main-avatar img",
 				$email: ".gsuiComProfile-main-email-addr span",
 				$emailpub: ".gsuiComProfile-main-email-addr .gsuiIcon",
 				$username: ".gsuiComProfile-main-username",
@@ -22,6 +23,7 @@ class gsuiComProfile extends gsui0ne {
 			},
 		} );
 		Object.seal( this );
+		this.$elements.$avatar.onload = () => GSUsetAttribute( this, "hasavatar", true );
 		this.$elements.$form.onsubmit = e => {
 			const tar = e.target;
 
@@ -52,7 +54,7 @@ class gsuiComProfile extends gsui0ne {
 
 	// .........................................................................
 	static get observedAttributes() {
-		return [ "email", "emailpublic", "username", "lastname", "firstname", "emailtoverify" ];
+		return [ "email", "emailpublic", "username", "lastname", "firstname", "emailtoverify", "avatar" ];
 	}
 	$attributeChanged( prop, val ) {
 		switch ( prop ) {
@@ -61,6 +63,10 @@ class gsuiComProfile extends gsui0ne {
 			case "username": this.$elements.$username.textContent = val; break;
 			case "lastname": this.$elements.$lastname.textContent = val; break;
 			case "firstname": this.$elements.$firstname.textContent = val; break;
+			case "avatar":
+				GSUsetAttribute( this, "hasavatar", false );
+				this.$elements.$avatar.src = val || "";
+				break;
 		}
 	}
 }

diff --git a/gsuiComProfile/index.html b/gsuiComProfile/index.html
@@ -35,6 +35,7 @@
 </div>
 <div id="TEST-CTRLS">
 	<div><label><input id="itsme" type="checkbox" /> itsme</label></div>
+	<div><label><input id="avatar" type="checkbox" /> avatar</label></div>
 	<div><label><input id="email" type="checkbox" /> email</label></div>
 	<div><label><input id="emailpublic" type="checkbox" /> email public</label></div>
 	<div><label><input id="emailtoverify" type="checkbox" /> email to verify</label></div>
@@ -58,6 +59,7 @@
 const elCmp = document.querySelector( "gsui-com-profile" );
 const itsme = document.querySelector( "#itsme" );
 const email = document.querySelector( "#email" );
+const avatar = document.querySelector( "#avatar" );
 const emailpublic = document.querySelector( "#emailpublic" );
 const emailtoverify = document.querySelector( "#emailtoverify" );
 const emailsending = document.querySelector( "#emailsending" );
@@ -69,11 +71,13 @@
 emailtoverify.onchange = () => GSUtoggleAttribute( elCmp, "emailtoverify" );
 emailsending.onchange = () => GSUtoggleAttribute( elCmp, "emailsending" );
 emailsent.onchange = () => GSUtoggleAttribute( elCmp, "emailsent" );
+avatar.onchange = () => GSUtoggleAttribute( elCmp, "avatar", "../test-assets/avatar.jpg" );
 
 itsme.click();
 email.click();
 emailpublic.click();
 emailtoverify.click();
+avatar.click();
 document.querySelector( ".gsuiComProfile-main-edit" ).click();
 </script>
 </body>