ankitjain28may /
openchat
| Conditions | 1 |
| Paths | 2 |
| Total Lines | 443 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | $(document).ready(function(){ |
||
| 4 | $('body').load('../public/assests/partials/app.html', function() { |
||
| 5 | $('body').append(pre); |
||
| 6 | |||
| 7 | |||
| 8 | var heightFrom; // global variable |
||
| 9 | // Websocket Connection Open |
||
| 10 | var conn = new WebSocket("ws://localhost:8080"); |
||
|
|
|||
| 11 | |||
| 12 | // For send Message to Web Socket Server |
||
| 13 | function sendTo(data) |
||
| 14 | { |
||
| 15 | conn.send(JSON.stringify(data)); |
||
| 16 | } |
||
| 17 | |||
| 18 | // For First time |
||
| 19 | function init() |
||
| 20 | { |
||
| 21 | var msg = { |
||
| 22 | "type": "OpenChat initiated..!" |
||
| 23 | }; |
||
| 24 | sendTo(msg); |
||
| 25 | } |
||
| 26 | |||
| 27 | conn.onopen = function() { |
||
| 28 | console.log("Connection established!"); |
||
| 29 | init(); |
||
| 30 | }; |
||
| 31 | |||
| 32 | // SideBar Load Request |
||
| 33 | function sidebarRequest() |
||
| 34 | { |
||
| 35 | var msg = { |
||
| 36 | "type": "Load Sidebar" |
||
| 37 | }; |
||
| 38 | sendTo(msg); |
||
| 39 | } |
||
| 40 | |||
| 41 | // Create Sidebar |
||
| 42 | function createSidebarElement(data, eleId) |
||
| 43 | { |
||
| 44 | // organising content according to time |
||
| 45 | $("#"+eleId).html(""); |
||
| 46 | var condition = data.length; |
||
| 47 | for (var i = 0; i < condition; i++) |
||
| 48 | { |
||
| 49 | |||
| 50 | var div1 = $("<div></div>").addClass("row sideBar-body"); |
||
| 51 | |||
| 52 | div1.attr({ |
||
| 53 | "id" : data[i].username |
||
| 54 | }); |
||
| 55 | |||
| 56 | var div2 = $("<div></div>").addClass("col-sm-3 col-xs-3 sideBar-avatar"); |
||
| 57 | var div3 = $("<div></div>").addClass("avatar-icon"); |
||
| 58 | var imgElement = $("<img>").attr({ |
||
| 59 | "src": "../public/assests/img/bg.png" |
||
| 60 | }); |
||
| 61 | div3.append(imgElement); |
||
| 62 | div2.append(div3); |
||
| 63 | div1.append(div2); |
||
| 64 | |||
| 65 | div2 = $("<div></div>").addClass("col-sm-9 col-xs-9 sideBar-main"); |
||
| 66 | div3 = $("<div></div>").addClass("row"); |
||
| 67 | var div4 = $("<div></div>").addClass("col-sm-8 col-xs-8 sideBar-name"); |
||
| 68 | var spanE = $("<span></span>").addClass("name-meta").text(data[i].name); |
||
| 69 | div4.append(spanE); |
||
| 70 | div3.append(div4); |
||
| 71 | |||
| 72 | div4 = $("<div></div>").addClass("col-sm-4 col-xs-4 pull-right sideBar-time"); |
||
| 73 | spanE = $("<span></span>").addClass("time-meta pull-right").text(data[i].time); |
||
| 74 | div4.append(spanE); |
||
| 75 | div3.append(div4); |
||
| 76 | div2.append(div3); |
||
| 77 | |||
| 78 | div1.append(div2); |
||
| 79 | $("#"+eleId).append(div1); |
||
| 80 | |||
| 81 | if (eleId === "message" && $("#text_reply").attr("name") == data[i].login_id) { |
||
| 82 | $("#"+data[i].username).addClass("active"); |
||
| 83 | } |
||
| 84 | } |
||
| 85 | } |
||
| 86 | |||
| 87 | |||
| 88 | // For updating Sidebar |
||
| 89 | function SideBar(msg) { |
||
| 90 | // Getting Div |
||
| 91 | if (msg != null) { |
||
| 92 | createSidebarElement(msg, "message"); |
||
| 93 | } |
||
| 94 | } |
||
| 95 | |||
| 96 | function toConversation() { |
||
| 97 | $(".side").addClass("hide"); |
||
| 98 | $(".message").addClass("show"); |
||
| 99 | $(".lowerBar").addClass("show"); |
||
| 100 | $(".reply-emojis").addClass("hide"); |
||
| 101 | $(".reply-recording").addClass("hide"); |
||
| 102 | } |
||
| 103 | |||
| 104 | function toSidebar() { |
||
| 105 | $(".side").removeClass("hide"); |
||
| 106 | $(".message").removeClass("show"); |
||
| 107 | $(".lowerBar").removeClass("show"); |
||
| 108 | $(".reply-emojis").removeClass("hide"); |
||
| 109 | $(".reply-recording").removeClass("hide"); |
||
| 110 | } |
||
| 111 | |||
| 112 | function width() { |
||
| 113 | if (window.innerWidth < 768) { |
||
| 114 | return true; |
||
| 115 | } |
||
| 116 | return false; |
||
| 117 | } |
||
| 118 | |||
| 119 | // Creating new Conversation or Loading Conversation |
||
| 120 | function newConversation(element, load) { |
||
| 121 | |||
| 122 | if (width()) { |
||
| 123 | toConversation(); |
||
| 124 | } |
||
| 125 | |||
| 126 | var msg = { |
||
| 127 | "details": element.id, |
||
| 128 | "load": load, |
||
| 129 | "type": "Initiated" |
||
| 130 | }; |
||
| 131 | sendTo(msg); |
||
| 132 | } |
||
| 133 | |||
| 134 | // Set Details |
||
| 135 | function setConversationDetails(details) { |
||
| 136 | $("#conversationHeading").html(""); |
||
| 137 | |||
| 138 | var headingEle = $("<div></div>").addClass("col-sm-2 col-md-1 col-xs-3 heading-avatar"); |
||
| 139 | var headingAva = $("<div></div>").addClass("heading-avatar-icon"); |
||
| 140 | var headingImg = $("<img>").attr({"src" : "../public/assests/img/ankit.png"}); |
||
| 141 | headingAva.append(headingImg); |
||
| 142 | headingEle.append(headingAva); |
||
| 143 | |||
| 144 | var headingEleName = $("<div></div>").addClass("col-sm-8 col-xs-7 heading-name"); |
||
| 145 | var headingNameMeta = $("<a></a>").addClass("heading-name-meta").text(details.name); |
||
| 146 | headingNameMeta.attr({ |
||
| 147 | "href": location.href.substring(0, location.href.lastIndexOf("/") + 1) + "account.php/" + details.username |
||
| 148 | }); |
||
| 149 | var headingOnline = $("<span></span>").addClass("heading-online"); |
||
| 150 | headingOnline.text(""); |
||
| 151 | if (details.login_status === "1") { |
||
| 152 | headingOnline.text("Online"); |
||
| 153 | } |
||
| 154 | headingEleName.append(headingNameMeta); |
||
| 155 | headingEleName.append(headingOnline); |
||
| 156 | |||
| 157 | var headingDot = $("<div></div>").addClass("col-sm-1 col-xs-1 heading-dot pull-right"); |
||
| 158 | var headingDotIcon = $("<i></i>").addClass("fa fa-ellipsis-v fa-2x").attr({"aria-hidden" : "true"}); |
||
| 159 | headingDot.append(headingDotIcon); |
||
| 160 | |||
| 161 | |||
| 162 | $("#conversationHeading").append(headingEle); |
||
| 163 | $("#conversationHeading").append(headingEleName); |
||
| 164 | $("#conversationHeading").append(headingDot); |
||
| 165 | |||
| 166 | $("#text_reply").attr({ |
||
| 167 | "name": details.id |
||
| 168 | }); |
||
| 169 | } |
||
| 170 | |||
| 171 | |||
| 172 | // Update Current Conversation |
||
| 173 | function updateConversation(data) { |
||
| 174 | |||
| 175 | var ele = document.getElementById("conversation"); |
||
| 176 | ele.innerHTML = ""; |
||
| 177 | |||
| 178 | if (data[0].type === 1) |
||
| 179 | { |
||
| 180 | // For showing previous message |
||
| 181 | if (data[0].load > 10) |
||
| 182 | { |
||
| 183 | var divE1 = $("<div></div>").addClass("row message-previous"); |
||
| 184 | var divE2 = $("<div></div>").addClass("col-sm-12 previous"); |
||
| 185 | var aElement = $("<a></a>").text("Show Previous Message!"); |
||
| 186 | aElement.attr({ |
||
| 187 | "id": data[0].username, |
||
| 188 | "name": data[0].load |
||
| 189 | }); |
||
| 190 | divE2.append(aElement); |
||
| 191 | divE1.append(divE2); |
||
| 192 | $("#conversation").append(divE1); |
||
| 193 | } |
||
| 194 | var noOfMessages = data.length - 1; |
||
| 195 | for (var i = noOfMessages; i >= 1; i--) { |
||
| 196 | // create element |
||
| 197 | var divElement1 = $("<div></div>").addClass("row message-body"); |
||
| 198 | var divElement2 = $("<div></div>").addClass("col-sm-12"); |
||
| 199 | var divElement3 = $("<div></div>"); |
||
| 200 | var messageText = $("<div></div>").addClass("message-text").text(data[i].message); |
||
| 201 | var spanElement = $("<span></span>").addClass("message-time pull-right").text(data[i].time); |
||
| 202 | |||
| 203 | if (data[i]["sent_by"] !== data[i].start) |
||
| 204 | { |
||
| 205 | divElement2.addClass("message-main-receiver"); |
||
| 206 | divElement3.addClass("receiver"); |
||
| 207 | } else { |
||
| 208 | divElement2.addClass("message-main-sender"); |
||
| 209 | divElement3.addClass("sender"); |
||
| 210 | } |
||
| 211 | divElement3.append(messageText); |
||
| 212 | divElement3.append(spanElement); |
||
| 213 | divElement2.append(divElement3); |
||
| 214 | divElement1.append(divElement2); |
||
| 215 | $("#conversation").append(divElement1); |
||
| 216 | } |
||
| 217 | |||
| 218 | if (noOfMessages < 21) { |
||
| 219 | ele.scrollTop = ele.scrollHeight; |
||
| 220 | } else { |
||
| 221 | ele.scrollTop = $("#conversation")[0].scrollHeight - heightFrom; |
||
| 222 | } |
||
| 223 | } |
||
| 224 | setConversationDetails(data[0]); |
||
| 225 | } |
||
| 226 | |||
| 227 | // For reply to other messages |
||
| 228 | function reply() { |
||
| 229 | |||
| 230 | var message = $("#text_reply").val(); |
||
| 231 | var id = $("#text_reply").attr("name"); |
||
| 232 | $("#text_reply").val(""); |
||
| 233 | if (message !== "") { |
||
| 234 | var msg = { |
||
| 235 | "name": id, |
||
| 236 | "reply": message, |
||
| 237 | "type": "reply" |
||
| 238 | }; |
||
| 239 | sendTo(msg); |
||
| 240 | } |
||
| 241 | } |
||
| 242 | |||
| 243 | function notFound(eleId) { |
||
| 244 | eleId = "#" + eleId; |
||
| 245 | $(eleId).text(""); |
||
| 246 | var divElement = $("<div></div>").addClass("notFound").text("Not Found"); |
||
| 247 | $(eleId).append(divElement); |
||
| 248 | } |
||
| 249 | |||
| 250 | function composeChoose() { |
||
| 251 | var text = document.getElementById("composeText").value; |
||
| 252 | if (text !== "") { |
||
| 253 | var msg = |
||
| 254 | { |
||
| 255 | "value": text, |
||
| 256 | "type": "Compose" |
||
| 257 | }; |
||
| 258 | sendTo(msg); |
||
| 259 | } else { |
||
| 260 | $("#compose").html("<div class=\"notFound\">Start New Chat</div>"); |
||
| 261 | } |
||
| 262 | } |
||
| 263 | |||
| 264 | //compose messages |
||
| 265 | function composeResult(arr) { |
||
| 266 | var ele = document.getElementById("compose"); |
||
| 267 | ele.innerHTML = ""; |
||
| 268 | |||
| 269 | if (arr !== "Not Found") { |
||
| 270 | createSidebarElement(arr, "compose"); |
||
| 271 | } else { |
||
| 272 | notFound("compose"); |
||
| 273 | } |
||
| 274 | } |
||
| 275 | |||
| 276 | function searchChoose() { |
||
| 277 | var text = $("#searchText").val(); |
||
| 278 | if (text !== "") { |
||
| 279 | var msg = { |
||
| 280 | "value": text, |
||
| 281 | "type": "Search" |
||
| 282 | }; |
||
| 283 | |||
| 284 | sendTo(msg); |
||
| 285 | } else { |
||
| 286 | sidebarRequest(); |
||
| 287 | } |
||
| 288 | |||
| 289 | } |
||
| 290 | |||
| 291 | function searchResult(arr) { |
||
| 292 | if (arr !== "Not Found") { |
||
| 293 | createSidebarElement(arr, "message"); |
||
| 294 | } else { |
||
| 295 | notFound("message"); |
||
| 296 | } |
||
| 297 | |||
| 298 | } |
||
| 299 | |||
| 300 | // Load previous messages |
||
| 301 | function previous(element) { |
||
| 302 | var user = element.id; |
||
| 303 | var lo = element.name; |
||
| 304 | heightFrom = $("#conversation")[0].scrollHeight; |
||
| 305 | newConversation(element, lo); |
||
| 306 | } |
||
| 307 | |||
| 308 | function hideComposeScreen() { |
||
| 309 | $(".side-two").css({ |
||
| 310 | "left": "-100%" |
||
| 311 | }); |
||
| 312 | } |
||
| 313 | |||
| 314 | // Audio Recognization |
||
| 315 | |||
| 316 | function startDictation() { |
||
| 317 | |||
| 318 | if (window.hasOwnProperty("webkitSpeechRecognition")) { |
||
| 319 | |||
| 320 | var recognition = new webkitSpeechRecognition(); |
||
| 321 | |||
| 322 | recognition.continuous = false; |
||
| 323 | recognition.interimResults = false; |
||
| 324 | |||
| 325 | recognition.lang = "en-IN"; |
||
| 326 | recognition.start(); |
||
| 327 | |||
| 328 | recognition.onresult = function(e) { |
||
| 329 | document.getElementById("text_reply").value = e.results[0][0].transcript; |
||
| 330 | recognition.stop(); |
||
| 331 | reply(); |
||
| 332 | }; |
||
| 333 | |||
| 334 | recognition.onerror = function() { |
||
| 335 | recognition.stop(); |
||
| 336 | } |
||
| 337 | |||
| 338 | } |
||
| 339 | } |
||
| 340 | |||
| 341 | |||
| 342 | // On Message |
||
| 343 | conn.onmessage = function(e) |
||
| 344 | { |
||
| 345 | var msg = JSON.parse(e.data); |
||
| 346 | // console.log(msg); |
||
| 347 | if (!width()) { |
||
| 348 | SideBar(msg.sidebar); |
||
| 349 | } else { |
||
| 350 | if (!$(".side").hasClass("hide")) { |
||
| 351 | SideBar(msg.sidebar); |
||
| 352 | } |
||
| 353 | } |
||
| 354 | |||
| 355 | if (typeof(msg.initial) !== "undefined") { |
||
| 356 | SideBar(msg.initial); |
||
| 357 | } |
||
| 358 | |||
| 359 | if (typeof(msg.conversation) !== "undefined") { |
||
| 360 | updateConversation(msg.conversation); |
||
| 361 | } |
||
| 362 | |||
| 363 | if (typeof(msg.reply) !== "undefined") { |
||
| 364 | var textAreaId = $("#text_reply").attr("name"); |
||
| 365 | if (msg.reply[0].id === textAreaId) { |
||
| 366 | updateConversation(msg.reply); |
||
| 367 | } |
||
| 368 | } |
||
| 369 | |||
| 370 | if (typeof(msg.Search) !== "undefined") { |
||
| 371 | searchResult(msg.Search); |
||
| 372 | } |
||
| 373 | |||
| 374 | if (typeof(msg.Compose) !== "undefined") { |
||
| 375 | composeResult(msg.Compose); |
||
| 376 | } |
||
| 377 | }; |
||
| 378 | |||
| 379 | // Event Listeners |
||
| 380 | $("body").on("click", ".sideBar-body", function() { |
||
| 381 | newConversation(this,20); |
||
| 382 | hideComposeScreen(); |
||
| 383 | $("#searchText").val(""); |
||
| 384 | $("#composeText").val(""); |
||
| 385 | }); |
||
| 386 | |||
| 387 | $("body").on("click", ".reply-send", |
||
| 388 | function() { |
||
| 389 | reply(); |
||
| 390 | }); |
||
| 391 | |||
| 392 | $("body").on("click", ".reply-recording", |
||
| 393 | function() { |
||
| 394 | startDictation(); |
||
| 395 | }); |
||
| 396 | |||
| 397 | $("body").on("click", ".lowerBar-recording", |
||
| 398 | function() { |
||
| 399 | startDictation(); |
||
| 400 | }); |
||
| 401 | |||
| 402 | $("body").on("click", ".lowerBar-back", |
||
| 403 | function() { |
||
| 404 | toSidebar(); |
||
| 405 | sidebarRequest(); |
||
| 406 | }); |
||
| 407 | |||
| 408 | $("body").on("click", ".previous a", |
||
| 409 | function() { |
||
| 410 | previous(this); |
||
| 411 | }); |
||
| 412 | |||
| 413 | $("body").on("keyup", "#searchText", |
||
| 414 | function() { |
||
| 415 | searchChoose(); |
||
| 416 | }); |
||
| 417 | |||
| 418 | $("body").on("keyup", "#composeText", |
||
| 419 | function() { |
||
| 420 | composeChoose(); |
||
| 421 | }); |
||
| 422 | |||
| 423 | $(".heading-compose").click(function() { |
||
| 424 | $(".side-two").css({ |
||
| 425 | "left": "0" |
||
| 426 | }); |
||
| 427 | }); |
||
| 428 | |||
| 429 | $(".newMessage-back").click(function() { |
||
| 430 | hideComposeScreen(); |
||
| 431 | $("#composeText").val(""); |
||
| 432 | }); |
||
| 433 | |||
| 434 | $("#conversation").scroll(function() { |
||
| 435 | var res = $(".message-previous").html(); |
||
| 436 | var scrollTop = $("#conversation").scrollTop(); |
||
| 437 | if (typeof(res) !== "undefined" && scrollTop < 100) { |
||
| 438 | $(".previous a").click(); |
||
| 439 | if (scrollTop < 3) { |
||
| 440 | $(".message-previous div").html("").removeClass("col-sm-12 previous").addClass("loader").css({"width" : "20px", "height" : "20px"}); |
||
| 441 | } |
||
| 442 | } |
||
| 443 | |||
| 444 | }); |
||
| 445 | |||
| 446 | }); |
||
| 447 | |||
| 452 |
Loading history...
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.