Mercurial > xmpp-account-manager

comparison avatar.js @ 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 5aa1bf7154b0
children 8724e28ccbd7
comparison
equal deleted inserted replaced
10:e47b9bd55192 11:aedf80eefc19
8 const avatar_size = document.getElementById('avatar-size'); 8 const avatar_size = document.getElementById('avatar-size');
9 const avatar_file = document.getElementById('avatar-file'); 9 const avatar_file = document.getElementById('avatar-file');
10 const avatar_upload = document.getElementById('avatar-upload'); 10 const avatar_upload = document.getElementById('avatar-upload');
11 const avatar_change = document.getElementById('avatar-change'); 11 const avatar_change = document.getElementById('avatar-change');
12 const avatar_access = document.getElementById('avatar-access'); 12 const avatar_access = document.getElementById('avatar-access');
13 const spinner_img = document.getElementById('avatar-spinner');
14 const access_model_spinner_img = document.getElementById('access-model-avatar-spinner');
13 15
14 avatar_img.src = DEFAULT_AVATAR; 16 avatar_img.src = DEFAULT_AVATAR;
15 const iq = $iq({type: 'get'}) 17 const iq = $iq({type: 'get'})
16 .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'}) 18 .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'})
17 .c('items', {node: 'urn:xmpp:avatar:metadata'}); 19 .c('items', {node: 'urn:xmpp:avatar:metadata'});
18 connection.sendIQ(iq, onAvatarMetadata, onAvatarRetrievalError.bind(null, 'PubSub metadata query failed.')); 20 connection.sendIQ(iq, onAvatarMetadata, onAvatarRetrievalError.bind(null, 'PubSub metadata query failed.'));
21 spinner_img.hidden = false;
19 22
20 function onAvatarMetadata(result_iq) 23 function onAvatarMetadata(result_iq)
21 { 24 {
22 const item = parseXPath(result_iq, './pubsub:pubsub/pubsub:items/pubsub:item'); 25 const item = parseXPath(result_iq, './pubsub:pubsub/pubsub:items/pubsub:item');
23 if (item == null) 26 if (item == null)
62 return onAvatarRetrievalError('invalid width or height in image data.'); 65 return onAvatarRetrievalError('invalid width or height in image data.');
63 avatar_img.onload = null; 66 avatar_img.onload = null;
64 }; 67 };
65 */ 68 */
66 avatar_img.src = url; 69 avatar_img.src = url;
70 spinner_img.hidden = true;
67 } 71 }
68 72
69 function onAvatarRetrievalError(string) 73 function onAvatarRetrievalError(string)
70 { 74 {
71 console.log('Failed to retrieve avatar, an empty one is displayed instead: ' + string); 75 console.log('Failed to retrieve avatar, an empty one is displayed instead: ' + string);
72 avatar_img.src = DEFAULT_AVATAR; 76 avatar_img.src = DEFAULT_AVATAR;
77 spinner_img.hidden = true;
73 } 78 }
74 79
75 avatar_upload.addEventListener('click', function (evt) { 80 avatar_upload.addEventListener('click', function (evt) {
76 avatar_file.click(); 81 avatar_file.click();
77 }); 82 });
88 bytes: avatar_data.bytes, 93 bytes: avatar_data.bytes,
89 width: avatar_img.naturalWidth, 94 width: avatar_img.naturalWidth,
90 height: avatar_img.naturalHeight, 95 height: avatar_img.naturalHeight,
91 }); 96 });
92 connection.sendIQ(metadata_iq, onAvatarMetadataUpload, onAvatarUploadError); 97 connection.sendIQ(metadata_iq, onAvatarMetadataUpload, onAvatarUploadError);
98 spinner_img.hidden = false;
99 });
100
101 function onAvatarMetadataUpload(iq)
102 {
93 const data_iq = $iq({type: 'set'}) 103 const data_iq = $iq({type: 'set'})
94 .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'}) 104 .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'})
95 .c('publish', {node: 'urn:xmpp:avatar:data'}) 105 .c('publish', {node: 'urn:xmpp:avatar:data'})
96 .c('item', {id: avatar_data.id}) 106 .c('item', {id: avatar_data.id})
97 .c('data', {xmlns: 'urn:xmpp:avatar:data'}) 107 .c('data', {xmlns: 'urn:xmpp:avatar:data'})
98 .t(avatar_data.data); 108 .t(avatar_data.data);
99 connection.sendIQ(data_iq, onAvatarDataUpload, onAvatarUploadError); 109 connection.sendIQ(data_iq, onAvatarDataUpload, onAvatarUploadError);
100 });
101
102 function onAvatarMetadataUpload(iq)
103 {
104 console.log("onAvatarMetadataUpload", iq);
105 } 110 }
106 111
107 function onAvatarDataUpload(iq) 112 function onAvatarDataUpload(iq)
108 { 113 {
109 console.log('Avatar successfully uploaded!', iq); 114 console.log('Avatar successfully uploaded!', iq);
110 avatar_change.disabled = true; 115 avatar_change.disabled = true;
111 avatar_size.innerHTML = ''; 116 avatar_size.innerHTML = '';
117 spinner_img.hidden = true;
112 } 118 }
113 119
114 function onAvatarUploadError(iq) 120 function onAvatarUploadError(iq)
115 { 121 {
116 console.log("onAvatarUploadError", iq); 122 console.log("onAvatarUploadError", iq);
123 spinner_img.hidden = true;
117 } 124 }
118 125
119 avatar_file.addEventListener('change', function (evt) { 126 avatar_file.addEventListener('change', function (evt) {
120 const file = evt.target.files[0]; 127 const file = evt.target.files[0];
121 avatar_data.type = file.type; 128 avatar_data.type = file.type;
171 } 178 }
172 179
173 avatar_access.addEventListener('change', function (evt) { 180 avatar_access.addEventListener('change', function (evt) {
174 const iq = configurePEPField('urn:xmpp:avatar:metadata', 'pubsub#access_model', evt.target.value); 181 const iq = configurePEPField('urn:xmpp:avatar:metadata', 'pubsub#access_model', evt.target.value);
175 connection.sendIQ(iq, onAvatarConfigured, onAvatarConfigureError.bind(null, 'PubSub configuration failed.')); 182 connection.sendIQ(iq, onAvatarConfigured, onAvatarConfigureError.bind(null, 'PubSub configuration failed.'));
183 access_model_spinner_img.hidden = false;
176 }); 184 });
177 185
178 function onAvatarConfigured(result_iq) 186 function onAvatarConfigured(result_iq)
179 { 187 {
180 console.log('Successfully set avatar access model.') 188 console.log('Successfully set avatar access model.')
189 access_model_spinner_img.hidden = true;
181 } 190 }
182 191
183 function onAvatarConfigureError(string) 192 function onAvatarConfigureError(string)
184 { 193 {
185 console.log('Failed to configure avatar node: ' + string); 194 console.log('Failed to configure avatar node: ' + string);
195 access_model_spinner_img.hidden = true;
186 } 196 }
187 } 197 }