Skip to content

Commit 0d90ee6

Browse files
il-coderil-coder
authored
Add files via upload
1 parent 0256484 commit 0d90ee6

File tree

3 files changed

+151
-7
lines changed

3 files changed

+151
-7
lines changed

‎chat.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,22 @@ li {
411411
background-color: white;
412412
}
413413

414+
#options a {
415+
display: block;
416+
text-decoration: none;
417+
font-size: 30px;
418+
padding: 15px;
419+
}
420+
#options a:hover {
421+
cursor: pointer;
422+
}
423+
.highlight {
424+
background-color: yellow;
425+
}
426+
#options {
427+
background-color: #EEE;
428+
}
429+
414430
@media only screen and (max-width: 600px) {
415431
#overlay {
416432
height:60%;

‎index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,11 @@ <h1 id="title">CHAT-APPLICATION</h1><br>
5757
</div>
5858
</div>
5959

60+
<div id='options' style='display:none; position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: solid black 2px;'>
61+
<a class='delete' href='javascript:do_nothing();' onclick='javascript:deletemsg(this.id)'>Delete</a>
62+
<a href='javascript:do_nothing();' class='reply' onclick='javascript:reply(this.id)'>Reply</a>
63+
</div>
64+
6065
<div id="chat">
6166
<div style="display: inline-block; width:80px;">
6267
<input type="button" id="goback" onclick="javascript:go_back();" value="&#8678;"></input></div>

‎start.js

Lines changed: 130 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
var p = document.getElementById("demo");
88
var socket;
9+
var replink='';
910
var u_name;
1011
var port;
1112
var c_id;
@@ -161,6 +162,11 @@ function connect()
161162
};
162163

163164
document.getElementById("send").onclick=function(){
165+
var lp = 0;
166+
if(replink!='')
167+
{
168+
lp = 1;
169+
}
164170
var mf= document.getElementById("mf");
165171
var ms = mf.value;
166172
if(ms=="")
@@ -172,14 +178,25 @@ function connect()
172178
var msg={
173179
type:"message",
174180
text:ms,
181+
link: replink,
182+
linkp: lp,
175183
date:Date.now(),
176184
name:u_name
177185
};
186+
var myid = msg.date;
178187
var time= new Date(msg.date);
179188
var timeStr = time.toLocaleTimeString();
180-
p.innerHTML += '<div class="clearfix"><div class="sent-tr"></div><div class="sent"><b>You ('+timeStr+') : </b><br>' + ms + '</div></div><br>';
189+
if(replink!='')
190+
{
191+
p.innerHTML += '<div class="clearfix"><div class="sent-tr"></div><div class="sent" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>You ('+timeStr+') : </b><br>'+ replink + '<br>' + ms + '</div></div><br>';
192+
}
193+
else
194+
{
195+
p.innerHTML += '<div class="clearfix"><div class="sent-tr"></div><div class="sent" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>You ('+timeStr+') : </b><br>' + ms + '</div></div><br>';
196+
}
181197
socket.send(JSON.stringify(msg));
182198
mf.value="";
199+
replink= '';
183200
document.getElementById("demo").scrollTop = document.getElementById("demo").scrollHeight;
184201
}
185202
};
@@ -188,7 +205,10 @@ function connect()
188205
var text = "";
189206
var msg = JSON.parse(event.data);
190207
var time = new Date(msg.date);
191-
var timeStr = time.toLocaleTimeString();
208+
var timeStr = time.toLocaleTimeString();
209+
var mylink= msg.link;
210+
var wlp = msg.linkp;
211+
var myid = msg.date;
192212
if(msg.type=="conn")
193213
{
194214
p.innerHTML += '<b><div class="brdcst">(' + timeStr + ') '+msg.text + ' joined on this channel.</div></b><br>';
@@ -226,15 +246,36 @@ function connect()
226246
}
227247
else if(msg.type=="message")
228248
{
229-
p.innerHTML += '<div class="clearfix"><div class="mesg-tr"></div><div class="mesg"><b>'+msg.name+ ' (' + timeStr + ') : </b><br>' + msg.text + '</div></div><br>';
249+
if(wlp)
250+
{
251+
p.innerHTML += '<div class="clearfix"><div class="mesg-tr"></div><div class="mesg" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>'+msg.name+ ' (' + timeStr + ') : </b><br>'+ mylink +'<br>' + msg.text + '</div></div><br>';
252+
}
253+
else
254+
{
255+
p.innerHTML += '<div class="clearfix"><div class="mesg-tr"></div><div class="mesg" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>'+msg.name+ ' (' + timeStr + ') : </b><br>' + msg.text + '</div></div><br>';
256+
}
230257
}
231258
else if(msg.type=="img-msg")
232259
{
233-
p.innerHTML += '<div class="clearfix"><div class="mesg-tr"></div><div class="mesg"><b>'+msg.name+ ' (' + timeStr + ') : </b><br>' + '<img src="' +decodeURIComponent(msg.text)+'" onclick = "javascript:showImage(this.src,false);" class="chatimg" alt="User Image">' + '</div></div><br>';
260+
if(wlp)
261+
{
262+
p.innerHTML += '<div class="clearfix"><div class="mesg-tr"></div><div class="mesg" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>'+msg.name+ ' (' + timeStr + ') : </b><br>'+ replink +'<br>'+ '<img src="' +decodeURIComponent(msg.text)+'" onclick = "javascript:showImage(this.src,false);" class="chatimg" alt="User Image">' + '</div></div><br>';
263+
}
264+
else
265+
{
266+
p.innerHTML += '<div class="clearfix"><div class="mesg-tr"></div><div class="mesg" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>'+msg.name+ ' (' + timeStr + ') : </b><br>' + '<img src="' +decodeURIComponent(msg.text)+'" onclick = "javascript:showImage(this.src,false);" class="chatimg" alt="User Image">' + '</div></div><br>';
267+
}
234268
}
235269
else if(msg.type=="doc-msg")
236270
{
237-
p.innerHTML += '<div class="clearfix"><div class="mesg-tr"></div><div class="mesg"><b>'+msg.name+ ' (' + timeStr + ') : </b><br>' + '<a class="document" id="' + msg.text + '" onclick="javascript:showDocs(this.id);">File : '+ msg.docName + '</a>' + '</div></div><br>';
271+
if(wlp)
272+
{
273+
p.innerHTML += '<div class="clearfix"><div class="mesg-tr"></div><div class="mesg" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>'+msg.name+ ' (' + timeStr + ') : </b><br>'+ replink +'<br>' + '<a class="document" id="' + msg.text + '" onclick="javascript:showDocs(this.id);">File : '+ msg.docName + '</a>' + '</div></div><br>';
274+
}
275+
else
276+
{
277+
p.innerHTML += '<div class="clearfix"><div class="mesg-tr"></div><div class="mesg" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>'+msg.name+ ' (' + timeStr + ') : </b><br>' + '<a class="document" id="' + msg.text + '" onclick="javascript:showDocs(this.id);">File : '+ msg.docName + '</a>' + '</div></div><br>';
278+
}
238279
}
239280
else if(msg.type=="typing")
240281
{
@@ -428,37 +469,69 @@ function cancelimg()
428469

429470
function sendimg()
430471
{
472+
var lp = 0;
473+
if(replink!='')
474+
{
475+
lp = 1;
476+
}
431477
var url = document.getElementById('userimage').src;
432478
url = encodeURIComponent(url);
433479
var msg={
434480
type:"img-msg",
435481
text:url,
436482
date:Date.now(),
483+
link: replink,
484+
linkp: lp,
437485
name:u_name
438486
};
439487
var time= new Date(msg.date);
440488
var timeStr = time.toLocaleTimeString();
441-
p.innerHTML += '<div class="clearfix"><div class="sent-tr"></div><div class="sent"><b>You ('+timeStr+') : </b><br><img src="' +decodeURIComponent(url)+'" onclick = "javascript:showImage(this.src,false);" class="chatimg" alt="User Image"></div></div><br>';
489+
var myid= Date.now();
490+
if(replink!='')
491+
{
492+
p.innerHTML += '<div class="clearfix"><div class="sent-tr"></div><div class="sent" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>You ('+timeStr+') : </b><br>' + replink +'<br><img src="' +decodeURIComponent(url)+'" onclick = "javascript:showImage(this.src,false);" class="chatimg" alt="User Image"></div></div><br>';
493+
}
494+
else
495+
{
496+
p.innerHTML += '<div class="clearfix"><div class="sent-tr"></div><div class="sent" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>You ('+timeStr+') : </b><br><img src="' +decodeURIComponent(url)+'" onclick = "javascript:showImage(this.src,false);" class="chatimg" alt="User Image"></div></div><br>';
497+
}
442498
socket.send(JSON.stringify(msg));
443499
cancelimg();
500+
replink= '';
444501
document.getElementById("demo").scrollTop = document.getElementById("demo").scrollHeight;
445502
}
446503

447504
function senddocs(url,name)
448505
{
449506
var url = encodeURIComponent(url);
507+
var lp = 0;
508+
if(replink!='')
509+
{
510+
lp = 1;
511+
}
450512
var msg={
451513
type:"doc-msg",
452514
text:url,
453515
docName: name,
516+
link: replink,
517+
linkp: lp,
454518
date:Date.now(),
455519
name:u_name
456520
};
457521
var time= new Date(msg.date);
458522
var timeStr = time.toLocaleTimeString();
459-
p.innerHTML += '<div class="clearfix"><div class="sent-tr"></div><div class="sent"><b>You ('+timeStr+') : </b><br> <a class="document" id="'+ url + '" onclick="javascript:showDocs(this.id);">File : '+name+'</a></div></div><br>';
523+
var myid= Date.now();
524+
if(replink!='')
525+
{
526+
p.innerHTML += '<div class="clearfix"><div class="sent-tr"></div><div class="sent" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>You ('+timeStr+') : </b><br>' + replink+ '<br> <a class="document" id="'+ url + '" onclick="javascript:showDocs(this.id);">File : '+name+'</a></div></div><br>';
527+
}
528+
else
529+
{
530+
p.innerHTML += '<div class="clearfix"><div class="sent-tr"></div><div class="sent" id="'+ myid +'" oncontextmenu="javascript:showoptions(this.id,event)"><b>You ('+timeStr+') : </b> <br> <a class="document" id="'+ url + '" onclick="javascript:showDocs(this.id);">File : '+name+'</a></div></div><br>';
531+
}
460532
socket.send(JSON.stringify(msg));
461533
cancelimg();
534+
replink='';
462535
document.getElementById("demo").scrollTop = document.getElementById("demo").scrollHeight;
463536
}
464537

@@ -524,6 +597,56 @@ function uploadFileAccess()
524597
document.getElementById("loadfile").click();
525598
}
526599

600+
function showoptions(input)
601+
{
602+
event.preventDefault();
603+
document.getElementsByClassName('reply')[0].id= '#' + input;
604+
document.getElementsByClassName('delete')[0].id= '#' + input;
605+
document.getElementById('options').style.display= 'block';
606+
window.onclick = function(event){
607+
if (document.getElementById('options').contains(event.target)) {
608+
}
609+
else {
610+
document.getElementById("options").style.display="none";
611+
}
612+
};
613+
}
614+
615+
function highlight(inp)
616+
{
617+
inp = inp.split('#')[1];
618+
var tobehl = document.getElementById(inp);
619+
if(tobehl==null)
620+
{
621+
alert('Referred message not found')
622+
}
623+
else
624+
{
625+
tobehl.parentNode.classList.add('highlight');
626+
setTimeout(function(){tobehl.parentNode.classList.remove('highlight');},1500)
627+
}
628+
}
629+
630+
function deletemsg(inp)
631+
{
632+
var gotid = inp.split('#')[1];
633+
var elem = document.getElementById(gotid);
634+
elem.parentNode.parentNode.removeChild(elem.parentNode.nextSibling);
635+
elem.parentNode.parentNode.removeChild(elem.parentNode);
636+
document.getElementById("options").style.display="none";
637+
}
638+
639+
function reply(inp)
640+
{
641+
replink = '<a href="' + inp + '" onclick="javsacript:highlight(this.href);">Replied To</a>';
642+
var t = document.getElementById('mf').value;
643+
document.getElementById('mf').value = 'REPLIED MESSAGE : ';
644+
document.getElementById('mf').value += t;
645+
document.getElementById("options").style.display="none";
646+
document.getElementById("demo").scrollTop = document.getElementById("demo").scrollHeight;
647+
document.getElementById('mf').focus();
648+
}
649+
527650
function loadHistory(input)
528651
{
529652
if (input.files[0])

0 commit comments

Comments
 (0)