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();