Completed
Push — master ( 75d991...74cbb3 )
by Ankit
03:12
created

$(document).ready   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 3

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 1
nc 1
nop 0
dl 0
loc 3
rs 10
c 0
b 0
f 0
1
$(document).ready(function(){
2
  var pre = $("<div class='loader'></div>").css({"width" : "60px", "height" : "60px", "z-index" : 10001, "margin" : "auto"});
3
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");
0 ignored issues
show
Bug introduced by
The variable WebSocket seems to be never declared. If this is a global, consider adding a /** global: WebSocket */ comment.

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.

Loading history...
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!");
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
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;
0 ignored issues
show
Unused Code introduced by
The variable user seems to be never used. Consider removing it.
Loading history...
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();
0 ignored issues
show
Coding Style Best Practice introduced by
By convention, constructors like webkitSpeechRecognition should be capitalized.
Loading history...
Bug introduced by
The variable webkitSpeechRecognition seems to be never declared. If this is a global, consider adding a /** global: webkitSpeechRecognition */ comment.

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.

Loading history...
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
448
});
449
console.log("Hello, Contact me at [email protected]");
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
450
451
452