Mercurial > xmpp-account-manager

changeset 11:aedf80eefc19

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Also use a spinner on avatar get/set.
author Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date Sat, 22 Dec 2018 16:19:08 +0100
parents e47b9bd55192
children 139b223dafb0
files avatar.js index.xhtml nickname.js
diffstat 3 files changed, 18 insertions(+), 7 deletions(-) [+]
line wrap: on
line diff
--- a/avatar.js
+++ b/avatar.js
@@ -10,12 +10,15 @@ function initAvatar(connection) {
     const avatar_upload = document.getElementById('avatar-upload');
     const avatar_change = document.getElementById('avatar-change');
     const avatar_access = document.getElementById('avatar-access');
+    const spinner_img = document.getElementById('avatar-spinner');
+    const access_model_spinner_img = document.getElementById('access-model-avatar-spinner');
 
     avatar_img.src = DEFAULT_AVATAR;
     const iq = $iq({type: 'get'})
         .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'})
             .c('items', {node: 'urn:xmpp:avatar:metadata'});
     connection.sendIQ(iq, onAvatarMetadata, onAvatarRetrievalError.bind(null, 'PubSub metadata query failed.'));
+    spinner_img.hidden = false;
 
     function onAvatarMetadata(result_iq)
     {
@@ -64,12 +67,14 @@ function initAvatar(connection) {
         };
         */
         avatar_img.src = url;
+        spinner_img.hidden = true;
     }
 
     function onAvatarRetrievalError(string)
     {
         console.log('Failed to retrieve avatar, an empty one is displayed instead: ' + string);
         avatar_img.src = DEFAULT_AVATAR;
+        spinner_img.hidden = true;
     }
 
     avatar_upload.addEventListener('click', function (evt) {
@@ -90,6 +95,11 @@ function initAvatar(connection) {
                                 height: avatar_img.naturalHeight,
                             });
         connection.sendIQ(metadata_iq, onAvatarMetadataUpload, onAvatarUploadError);
+        spinner_img.hidden = false;
+    });
+
+    function onAvatarMetadataUpload(iq)
+    {
         const data_iq = $iq({type: 'set'})
             .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'})
                 .c('publish', {node: 'urn:xmpp:avatar:data'})
@@ -97,11 +107,6 @@ function initAvatar(connection) {
                         .c('data', {xmlns: 'urn:xmpp:avatar:data'})
                             .t(avatar_data.data);
         connection.sendIQ(data_iq, onAvatarDataUpload, onAvatarUploadError);
-    });
-
-    function onAvatarMetadataUpload(iq)
-    {
-        console.log("onAvatarMetadataUpload", iq);
     }
 
     function onAvatarDataUpload(iq)
@@ -109,11 +114,13 @@ function initAvatar(connection) {
         console.log('Avatar successfully uploaded!', iq);
         avatar_change.disabled = true;
         avatar_size.innerHTML = '';
+        spinner_img.hidden = true;
     }
 
     function onAvatarUploadError(iq)
     {
         console.log("onAvatarUploadError", iq);
+        spinner_img.hidden = true;
     }
 
     avatar_file.addEventListener('change', function (evt) {
@@ -173,15 +180,18 @@ function initAvatar(connection) {
     avatar_access.addEventListener('change', function (evt) {
         const iq = configurePEPField('urn:xmpp:avatar:metadata', 'pubsub#access_model', evt.target.value);
         connection.sendIQ(iq, onAvatarConfigured, onAvatarConfigureError.bind(null, 'PubSub configuration failed.'));
+        access_model_spinner_img.hidden = false;
     });
 
     function onAvatarConfigured(result_iq)
     {
         console.log('Successfully set avatar access model.')
+        access_model_spinner_img.hidden = true;
     }
 
     function onAvatarConfigureError(string)
     {
         console.log('Failed to configure avatar node: ' + string);
+        access_model_spinner_img.hidden = true;
     }
 }
--- a/index.xhtml
+++ b/index.xhtml
@@ -58,14 +58,14 @@
 </p>
 <h2>Avatar</h2>
 <p>
-<img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/><br/>
+<img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/> <img src="spinner.svg" width="24" height="24" id="avatar-spinner"/><br/>
 <input type="file" style="display:none" accept="image/*" id="avatar-file"/>
 <button id="avatar-upload">Choose a new avatar</button><br/>
 <button id="avatar-change" disabled="">Upload this avatar</button><br/>
 <label>Who can see your avatar? <select id="avatar-access">
 <option value="open">Anyone (pick this if you use public groupchats)</option>
 <option value="presence">Only your contacts</option>
-</select></label>
+</select></label> <img src="spinner.svg" width="24" height="24" id="access-model-avatar-spinner" hidden=""/>
 </p>
 <h2>Contact list</h2>
 <table>
--- a/nickname.js
+++ b/nickname.js
@@ -8,6 +8,7 @@ function initNickname(connection) {
         .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'})
             .c('items', {node: 'http://jabber.org/protocol/nick'});
     connection.sendIQ(iq, onNickname, onNicknameRetrievalError.bind(null, 'PubSub query failed.'));
+    spinner_img.hidden = false;
 
     function onNickname(result_iq)
     {