Mercurial > support-chat / file comparison
comparison: src/js/supportchat.js
src/js/supportchat.js
- changeset 36
- 562ff07a3968
- parent 34
- 510ca613996a
- child 37
- 010783d24970
equal
deleted
inserted
replaced
| 35:43152bfafcc4 | 36:562ff07a3968 |
|---|---|
| 1 /* Config */ | |
| 2 | |
| 3 var support_config = { | |
| 4 login_domain: "anon.localhost", | |
| 5 bosh_url: "/http-bind", | |
| 6 muc_server: "support.localhost", | |
| 7 team_rooms: { | |
| 8 "Sales": "sales@support.localhost", | |
| 9 "Technical": "technical@support.localhost" | |
| 10 }, | |
| 11 send_invites: true | |
| 12 }; | |
| 13 | |
| 14 /*** XMPP handling */ | |
| 15 var conn = null; | |
| 16 | |
| 17 /* Called by Strophe when status of connection changes | |
| 18 (from disconnected to connected, vice-versa, etc.) | |
| 19 */ | |
| 20 function handle_connection_status(status, err) | |
| 21 { | |
| 22 if(err) | |
| 23 alert("Connection error: " + err); //FIXME: Handle gracefully | |
| 24 } | |
| 25 | |
| 26 /* Initiate the connection to the XMPP server */ | |
| 27 function start_connection() | |
| 28 { | |
| 29 conn = new Strophe.Connection(support_config.bosh_url); | |
| 30 var ret = true; | |
| 31 try | |
| 32 { | |
| 33 conn.connect(support_config.login_domain, null, handle_connection_status, 50); | |
| 34 } | |
| 35 catch(e) | |
| 36 { | |
| 37 alert("Connection error: " + e); //FIXME | |
| 38 ret = false; | |
| 39 } | |
| 40 return ret; | |
| 41 } | |
| 42 | |
| 43 | |
| 44 /*** UI handling */ | |
| 45 | |
| 46 /* Initial UI state */ | |
| 47 var ui_state = "question"; | |
| 48 | |
| 49 /* Change the UI state (question, wait, converse) */ | |
| 50 function set_ui_state(new_state) | |
| 51 { | |
| 52 if(ui_state != new_state) | |
| 53 { | |
| 54 $("#support-"+ui_state).hide(); | |
| 55 $("#support-"+(ui_state=new_state)).show(); | |
| 56 } | |
| 57 } | |
| 58 | |
| 59 /* Handle the user submitting the question form */ | |
| 60 function on_question_submit() | |
| 61 { | |
| 62 var question_type = $("#support-question-type").val(); | |
| 63 var question_name = $("#support-question-name").val(); | |
| 64 var question_text = $("#support-question-text").val(); | |
| 65 | |
| 66 var our_nick = question_name; | |
| 67 | |
| 68 set_ui_state("wait"); | |
| 69 | |
| 70 // Create our question room | |
| 71 var question_muc = new MUC(conn, { | |
| 72 // Handle room joins | |
| 73 joined: function (stanza, muc, nick) | |
| 74 { | |
| 75 if(nick == our_nick) | |
| 76 // We joined the question room, now join the team room and tell them | |
| 77 team_muc.join(support_config.team_rooms[question_type], our_nick); | |
| 78 else if(ui_state == "wait") | |
| 79 { | |
| 80 // We were waiting for an assistant, and one just joined | |
| 81 var html = "<span class='muc-message'><span class='muc-nick'>" + htmlescape(nick) + "</span>" + " is answering your query</span><br/>\n"; | |
| 82 $("#support-log").append(html).scrollTop($("#support-log")[0].scrollHeight); | |
| 83 $("#support-send-button").click(function () | |
| 84 { | |
| 85 question_muc.send_message($("#support-input").val()); | |
| 86 $("#support-input").val(""); | |
| 87 }); | |
| 88 set_ui_state("converse"); | |
| 89 } | |
| 90 }, | |
| 91 | |
| 92 // Handle incoming messages | |
| 93 message: function (stanza, muc, nick, message) | |
| 94 { | |
| 95 var html = "<span class='muc-message'><span class='muc-nick'>" + htmlescape(nick) + "</span>" + ": " + htmlescape(message) + "</span><br/>\n"; | |
| 96 $("#support-log").append(html).scrollTop($("#support-log")[0].scrollHeight); | |
| 97 } | |
| 98 }); | |
| 99 | |
| 100 // Get a unique room name from the server and then join the question MUC | |
| 101 conn.sendIQ($iq({to: support_config.muc_server, type: "get"}) | |
| 102 .c("query", { xmlns: "http://jabber.org/protocol/muc#unique" }), | |
| 103 function (result) // Success | |
| 104 { | |
| 105 var unique = Strophe.getText(result.getElementsByTagName("unique")[0]); | |
| 106 question_muc.join(unique + "@" + support_config.muc_server, our_nick); | |
| 107 }, | |
| 108 function (result) // Failure to get unique room name | |
| 109 { | |
| 110 var unique = "support-"+Math.floor(Math.random()*512); | |
| 111 question_muc.join(unique + "@" + support_config.muc_server, our_nick); | |
| 112 }); | |
| 113 | |
| 114 // Create the team MUC object (it will be joined after we join the question MUC) | |
| 115 var team_muc = new MUC(conn, { | |
| 116 joined: function (stanza, muc, nick) | |
| 117 { | |
| 118 if(nick != our_nick) | |
| 119 return; | |
| 120 | |
| 121 var sent = false; | |
| 122 for(var nick in team_muc.occupants) | |
| 123 { | |
| 124 //FIXME: Check affiliation | |
| 125 sent = true; | |
| 126 if(nick == our_nick) | |
| 127 continue; | |
| 128 else if(support_config.send_invites) | |
| 129 team_muc.send_invite(team_muc.jid+"/"+nick, question_text + "\n" + question_muc.jid); | |
| 130 else | |
| 131 team_muc.send_private_message(nick, question_text + "\n" + question_muc.jid); | |
| 132 } | |
| 133 if(!sent) | |
| 134 { | |
| 135 set_ui_state("offline"); | |
| 136 } | |
| 137 }, | |
| 138 | |
| 139 error: function (stanza, muc, error) | |
| 140 { | |
| 141 if(error == "conflict") | |
| 142 { | |
| 143 our_nick += "_"; | |
| 144 muc.join(support_config.team_rooms[question_type], our_nick); | |
| 145 } | |
| 146 else | |
| 147 alert("unhandled error: " + error); | |
| 148 } | |
| 149 }); | |
| 150 } | |
| 151 | |
| 152 function build_ui() | |
| 153 { | |
| 154 return $(' \ | |
| 155 <div id="support-chat"> \ | |
| 156 <div id="support-question"> \ | |
| 157 <h2>What is the nature of your question?</h2> \ | |
| 158 <select id="support-question-type"> \ | |
| 159 <option>Sales</option> \ | |
| 160 <option>Technical</option> \ | |
| 161 </select> \ | |
| 162 <h2>What is your name?</h2> \ | |
| 163 <input id="support-question-name" type="text" /> \ | |
| 164 <h2>Your question:</h2> \ | |
| 165 <textarea id="support-question-text"></textarea><br/> \ | |
| 166 <input id="support-question-submit" type="submit" /> \ | |
| 167 </div> \ | |
| 168 <div id="support-wait"> \ | |
| 169 Please wait while we find someone to \ | |
| 170 answer your query... \ | |
| 171 <br/><br/><br/><br/> \ | |
| 172 <center><img src="waiting.gif" alt="Waiting" /></center> \ | |
| 173 </div> \ | |
| 174 <div id="support-converse"> \ | |
| 175 <div id="support-log"></div> \ | |
| 176 <div id="support-input-container"><textarea id="support-input" type="text" value=""></textarea></div> \ | |
| 177 <input id="support-send-button" type="submit" value="Send" /> \ | |
| 178 <div style="clear:right;"></div> \ | |
| 179 </div> \ | |
| 180 <div id="support-offline"> \ | |
| 181 <p>Sorry, there are no assistants available \ | |
| 182 to answer your question at the moment. \ | |
| 183 </p> \ | |
| 184 <div id="support-offline-form"> \ | |
| 185 <p>To receive a reply to your question via \ | |
| 186 email, please enter your email address \ | |
| 187 below: \ | |
| 188 </p> \ | |
| 189 <input id="support-offline-email" type="text" /> \ | |
| 190 <input id="support-send-button" type="submit" value="Submit" /> \ | |
| 191 </div> \ | |
| 192 <div id="support-offline-thanks"> \ | |
| 193 <p>Thank you. Your question has been submitted \ | |
| 194 and will be replied to as soon as an assistant \ | |
| 195 becomes available.</p> \ | |
| 196 </div> \ | |
| 197 </div> \ | |
| 198 </div> \ | |
| 199 '); | |
| 200 } | |
| 201 | |
| 202 function display_ui() | |
| 203 { | |
| 204 // Display pop-up, showing question form | |
| 205 var ui = build_ui(); | |
| 206 | |
| 207 ui.appendTo("body"); | |
| 208 | |
| 209 if(start_connection()) | |
| 210 { | |
| 211 $("#support-question-submit").click(on_question_submit); | |
| 212 ui.dialog({ | |
| 213 title:"Live Support", | |
| 214 height: 400, | |
| 215 width: 285 | |
| 216 }); | |
| 217 } | |
| 218 } | |
| 219 | |
| 220 /*** Helper functions */ | |
| 221 function htmlescape(s) | |
| 222 { | |
| 223 return s.replace(/&/g,'&'). | |
| 224 replace(/>/g,'>'). | |
| 225 replace(/</g,'<'). | |
| 226 replace(/"/g,'"'); | |
| 227 } | |
| 228 | |
| 229 function activate_links() | |
| 230 { | |
| 231 $("[href='#support-chat']").click(display_ui); | |
| 232 } | |
| 233 | |
| 234 $(activate_links); //FIXME (debugging) |
