Mercurial > xmpp-account-manager
comparison client.js @ 5:cd0434bb2eb1
Add a spinner on connecting/disconnecting.
author | Emmanuel Gil Peyrot <linkmauve@linkmauve.fr> |
---|---|
date | Sat, 22 Dec 2018 16:04:56 +0100 |
parents | 5e97e1808a35 |
children | e47b9bd55192 |
comparison
equal
deleted
inserted
replaced
4:5e97e1808a35 | 5:cd0434bb2eb1 |
---|---|
4 let connection = null; | 4 let connection = null; |
5 | 5 |
6 const jid_element = document.getElementById('jid'); | 6 const jid_element = document.getElementById('jid'); |
7 const pass_element = document.getElementById('pass'); | 7 const pass_element = document.getElementById('pass'); |
8 const connect_button = document.getElementById('connect'); | 8 const connect_button = document.getElementById('connect'); |
9 const spinner_img = document.getElementById('spinner'); | |
9 | 10 |
10 const connected_div = document.getElementById('connected'); | 11 const connected_div = document.getElementById('connected'); |
11 | 12 |
12 const avatar_img = document.getElementById('avatar'); | 13 const avatar_img = document.getElementById('avatar'); |
13 | 14 |
72 if (status == Strophe.Status.CONNECTING) { | 73 if (status == Strophe.Status.CONNECTING) { |
73 console.log('Strophe is connecting.'); | 74 console.log('Strophe is connecting.'); |
74 connect_button.value = 'disconnect'; | 75 connect_button.value = 'disconnect'; |
75 jid_element.disabled = true; | 76 jid_element.disabled = true; |
76 pass_element.disabled = true; | 77 pass_element.disabled = true; |
78 spinner_img.hidden = false; | |
77 } else if (status == Strophe.Status.CONNFAIL) { | 79 } else if (status == Strophe.Status.CONNFAIL) { |
78 console.log('Strophe failed to connect.'); | 80 console.log('Strophe failed to connect.'); |
79 onDisconnected(); | 81 onDisconnected(); |
80 } else if (status == Strophe.Status.DISCONNECTING) { | 82 } else if (status == Strophe.Status.DISCONNECTING) { |
81 console.log('Strophe is disconnecting.'); | 83 console.log('Strophe is disconnecting.'); |
84 spinner_img.hidden = false; | |
82 } else if (status == Strophe.Status.DISCONNECTED) { | 85 } else if (status == Strophe.Status.DISCONNECTED) { |
83 console.log('Strophe is disconnected.'); | 86 console.log('Strophe is disconnected.'); |
84 onDisconnected(); | 87 onDisconnected(); |
85 } else if (status == Strophe.Status.CONNECTED) { | 88 } else if (status == Strophe.Status.CONNECTED) { |
86 console.log('Strophe is connected.'); | 89 console.log('Strophe is connected.'); |
89 } | 92 } |
90 | 93 |
91 function onConnected() | 94 function onConnected() |
92 { | 95 { |
93 connected_div.hidden = false; | 96 connected_div.hidden = false; |
97 spinner_img.hidden = true; | |
94 initRoster(connection); | 98 initRoster(connection); |
95 initPEP(connection); | 99 initPEP(connection); |
96 initNickname(connection); | 100 initNickname(connection); |
97 initAvatar(connection); | 101 initAvatar(connection); |
98 } | 102 } |
100 function onDisconnected() | 104 function onDisconnected() |
101 { | 105 { |
102 connect_button.value = 'connect'; | 106 connect_button.value = 'connect'; |
103 jid_element.disabled = false; | 107 jid_element.disabled = false; |
104 pass_element.disabled = false; | 108 pass_element.disabled = false; |
109 spinner_img.hidden = true; | |
105 for (let item of document.getElementById('roster-table')) { | 110 for (let item of document.getElementById('roster-table')) { |
106 item.remove(); | 111 item.remove(); |
107 } | 112 } |
108 for (let item of document.getElementById('pep-table')) { | 113 for (let item of document.getElementById('pep-table')) { |
109 item.remove(); | 114 item.remove(); |