Mercurial > xmpp-account-manager

changeset 15:3eed9fe0bd7c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
End spinners with either a green ✔ or a red ✘.
author Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date Sat, 22 Dec 2018 18:38:27 +0100
parents 962f64b156dd
children c3e2e0c62486
files avatar.js client.js index.xhtml nickname.js util.js
diffstat 5 files changed, 47 insertions(+), 25 deletions(-) [+]
line wrap: on
line diff
--- a/avatar.js
+++ b/avatar.js
@@ -18,7 +18,7 @@ function initAvatar(connection) {
         .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;
+    displaySpinner(spinner_img);
 
     function onAvatarMetadata(result_iq)
     {
@@ -67,14 +67,14 @@ function initAvatar(connection) {
         };
         */
         avatar_img.src = url;
-        spinner_img.hidden = true;
+        hideSpinner(spinner_img);
     }
 
     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;
+        hideSpinner(spinner_img);
     }
 
     avatar_upload.addEventListener('click', function (evt) {
@@ -95,7 +95,7 @@ function initAvatar(connection) {
                                 height: avatar_img.naturalHeight,
                             });
         connection.sendIQ(metadata_iq, onAvatarMetadataUpload, onAvatarUploadError);
-        spinner_img.hidden = false;
+        displaySpinner(spinner_img);
     });
 
     function onAvatarMetadataUpload(iq)
@@ -114,13 +114,13 @@ function initAvatar(connection) {
         console.log('Avatar successfully uploaded!', iq);
         avatar_change.hidden = true;
         avatar_size.innerHTML = '';
-        spinner_img.hidden = true;
+        spinnerOk(spinner_img);
     }
 
     function onAvatarUploadError(iq)
     {
         console.log("onAvatarUploadError", iq);
-        spinner_img.hidden = true;
+        spinnerError(spinner_img);
     }
 
     avatar_file.addEventListener('change', function (evt) {
@@ -180,18 +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;
+        displaySpinner(access_model_spinner_img);
     });
 
     function onAvatarConfigured(result_iq)
     {
         console.log('Successfully set avatar access model.')
-        access_model_spinner_img.hidden = true;
+        spinnerOk(access_model_spinner_img);
     }
 
     function onAvatarConfigureError(string)
     {
         console.log('Failed to configure avatar node: ' + string);
-        access_model_spinner_img.hidden = true;
+        spinnerError(access_model_spinner_img);
     }
 }
--- a/client.js
+++ b/client.js
@@ -75,13 +75,13 @@ document.addEventListener('DOMContentLoa
             connect_button.classList.add('disconnect');
             jid_element.disabled = true;
             pass_element.disabled = true;
-            spinner_img.hidden = false;
+            displaySpinner(spinner_img);
         } else if (status == Strophe.Status.CONNFAIL) {
             console.log('Strophe failed to connect.');
             onDisconnected();
         } else if (status == Strophe.Status.DISCONNECTING) {
             console.log('Strophe is disconnecting.');
-            spinner_img.hidden = false;
+            displaySpinner(spinner_img);
         } else if (status == Strophe.Status.DISCONNECTED) {
             console.log('Strophe is disconnected.');
             onDisconnected();
@@ -96,7 +96,7 @@ document.addEventListener('DOMContentLoa
         jid_element.hidden = true;
         pass_element.hidden = true;
         connected_div.hidden = false;
-        spinner_img.hidden = true;
+        hideSpinner(spinner_img);
         initRoster(connection);
         initPEP(connection);
         initNickname(connection);
@@ -111,7 +111,7 @@ document.addEventListener('DOMContentLoa
         jid_element.disabled = false;
         pass_element.hidden = false;
         pass_element.disabled = false;
-        spinner_img.hidden = true;
+        hideSpinner(spinner_img);
         connected_div.hidden = true;
         let table = document.getElementById('roster-table');
         while (table.hasChildNodes()) {
--- a/index.xhtml
+++ b/index.xhtml
@@ -43,7 +43,7 @@
 <input type="email" id="jid" placeholder="JID" title="Enter your JID (or XMPP address), on the form “you@your-server.tld”"/>
 <input type="password" id="pass" placeholder="Password" title="Enter the password used for this JID"/>
 <input type="submit" id="connect" value="Log in"/>
-<img src="spinner.svg" width="24" height="24" id="connect-spinner" hidden=""/>
+<img width="24" height="24" id="connect-spinner" hidden=""/>
 </form>
 </div>
 
@@ -56,7 +56,7 @@
 <div class="col-sm-8">
 <p>
 <input id="nick" placeholder="Nickname"/>
-<img src="spinner.svg" width="24" height="24" id="nick-spinner"/>
+<img width="24" height="24" id="nick-spinner"/>
 </p>
 <p>
 Enter your nickname, so people you know can recognize you.
@@ -72,7 +72,7 @@ Enter your nickname, so people you know 
 <p>This image allows your contact to quickly identify you.</p>
 </div>
 <div class="col-sm-8">
-<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/>
+<img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/> <img width="24" height="24" id="avatar-spinner"/><br/>
 <input type="file" style="display:none" accept="image/*" id="avatar-file"/>
 <p><label>Upload new avatar<br/>
 <button id="avatar-upload">Choose file…</button></label><br/>
@@ -80,7 +80,7 @@ Enter your nickname, so people you know 
 <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> <img src="spinner.svg" width="24" height="24" id="access-model-avatar-spinner" hidden=""/>
+</select></label> <img width="24" height="24" id="access-model-avatar-spinner" hidden=""/>
 </p>
 </div>
 </div>
--- a/nickname.js
+++ b/nickname.js
@@ -8,7 +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;
+    displaySpinner(spinner_img);
 
     function onNickname(result_iq)
     {
@@ -18,13 +18,13 @@ function initNickname(connection) {
         const id = item.getAttributeNS(null, 'id');
         const nick = parseXPath(item, './nickname:nick');
         nick_input.value = nick.textContent;
-        spinner_img.hidden = true;
+        hideSpinner(spinner_img);
     }
 
     function onNicknameRetrievalError(string)
     {
         console.log('Failed to retrieve nickname: ' + string);
-        spinner_img.hidden = true;
+        hideSpinner(spinner_img);
     }
 
     nick_input.addEventListener('blur', function (evt) {
@@ -35,18 +35,18 @@ function initNickname(connection) {
                         .c('nick', {xmlns: 'http://jabber.org/protocol/nick'})
                             .t(nick_input.value);
         connection.sendIQ(iq, onNicknameChanged, onNicknameChangeError);
-        spinner_img.hidden = false;
+        displaySpinner(spinner_img);
     });
 
-    function onNicknameChanged(iq)
+    function onNicknameChanged(result_iq)
     {
-        console.log("onNicknameChanged", iq);
-        spinner_img.hidden = true;
+        console.log("Nickname successfully changed.");
+        spinnerOk(spinner_img);
     }
 
     function onNicknameChangeError(iq)
     {
         console.log("onNicknameChangeError", iq);
-        spinner_img.hidden = true;
+        spinnerError(spinner_img);
     }
 }
--- a/util.js
+++ b/util.js
@@ -41,3 +41,25 @@ function configurePEPField(node, key, va
                             .up()
                         .up();
 }
+
+function displaySpinner(spinner) {
+    spinner.src = 'spinner.svg';
+    spinner.hidden = false;
+}
+
+function spinnerOk(spinner) {
+    spinner.src = 'ok.svg';
+    spinner.hidden = false;
+    setTimeout(function () {
+        spinner.hidden = true;
+    }, 1000);
+}
+
+function spinnerError(spinner) {
+    spinner.src = 'error.svg';
+    spinner.hidden = false;
+}
+
+function hideSpinner(spinner) {
+    spinner.hidden = true;
+}