From 5088627dbb6dde2b36c052587f97e0980689cde2 Mon Sep 17 00:00:00 2001 From: Piyush Mishra Date: Mon, 5 Mar 2018 19:46:38 +0530 Subject: [PATCH] Added upload Image/Video/File --- web/client.js | 63 ++++++++++++++++++++++++++++++++++++++----- web/images/file.png | Bin 0 -> 299 bytes web/images/image.png | Bin 0 -> 411 bytes web/images/video.png | Bin 0 -> 297 bytes web/index.jsp | 3 +++ web/style.css | 44 ++++++++++++++++++++++++++++++ 6 files changed, 103 insertions(+), 7 deletions(-) create mode 100644 web/images/file.png create mode 100644 web/images/image.png create mode 100644 web/images/video.png diff --git a/web/client.js b/web/client.js index 4e3842e..064b9f3 100644 --- a/web/client.js +++ b/web/client.js @@ -58,13 +58,13 @@ window.setInterval(function() { function join(channel) { - if (document.domain == 'uchats.herokuapp.com') { + //if (document.domain == 'uchats.herokuapp.com') { ws = new WebSocket('wss://uchats.herokuapp.com/uchatsserver') - } + /*} else { // for local installs ws = new WebSocket('ws://' + location.hostname+":"+location.port + '/uchatsserver') - } + }*/ var wasConnected = false @@ -190,10 +190,10 @@ function pushMessage(args) { // Text var textEl = document.createElement('pre') textEl.classList.add('text') - - textEl.textContent = args.text || '' + + textEl.innerHTML = args.text || '' textEl.innerHTML = textEl.innerHTML.replace(/(\?|https?:\/\/)\S+?(?=[,.!?:)]?\s|$)/g, parseLinks) - + if ($('#parse-latex').checked) { // Temporary hotfix for \rule spamming, see https://github.com/Khan/KaTeX/issues/109 textEl.innerHTML = textEl.innerHTML.replace(/\\rule|\\\\\s*\[.*?\]/g, '') @@ -221,7 +221,6 @@ function pushMessage(args) { updateTitle() } - function insertAtCursor(text) { var input = $('#chatinput') var start = input.selectionStart || 0 @@ -297,6 +296,56 @@ $('#footer').onclick = function() { $('#chatinput').focus() } +$('#uploadimage').onchange = function() { + file = this.files[0]; + reader = new FileReader(); + + reader.addEventListener("load", function () { + args = {}; + args.cmd = "chat"; + args.text = ''; + send(args); + }, false); + + if (file) { + reader.readAsDataURL(file); + } +} + +$('#uploadvideo').onchange = function() { + file = this.files[0]; + reader = new FileReader(); + + reader.addEventListener("load", function () { + args = {}; + args.cmd = "chat"; + args.text = ''; + send(args); + }, false); + + if (file) { + reader.readAsDataURL(file); + } +} + +$('#uploadfile').onchange = function() { + file = this.files[0]; + reader = new FileReader(); + + reader.addEventListener("load", function () { + args = {}; + args.cmd = "chat"; + args.text = 'File: '+file.name+''; + send(args); + }, false); + + if (file) { + reader.readAsDataURL(file); + } +} + $('#chatinput').onkeydown = function(e) { if (e.keyCode == 13 /* ENTER */ && !e.shiftKey) { e.preventDefault() diff --git a/web/images/file.png b/web/images/file.png new file mode 100644 index 0000000000000000000000000000000000000000..242e4e5cf10c059df19352f25b8799993238965b GIT binary patch literal 299 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc3?z4jzqJQaMFBn`u0Z<#|Nq_H-LC0T)TFymzP&WM8u9AJ3fB=cTp8cIk=ELpN7ARvH;hiB%@nW?F% zGq|@e2HMJ4666=m;PC858ivL>4nJa0`PlBg3pY5H=O z_D9UDyq2Op%M(rlg^WC1977~7CnqE%xG?b;G$a@*xJ+abTy&zTAW+0n)XlQQF)@*o l(amS7!MhGI7iJzFh9_?suAH%I6$k2O@O1TaS?83{1OOadXH@_I literal 0 HcmV?d00001 diff --git a/web/images/image.png b/web/images/image.png new file mode 100644 index 0000000000000000000000000000000000000000..94517912aeff772cf79ebcefed67634c31c53a7d GIT binary patch literal 411 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VTavfC3y=napU%7MffQ$fM`SSr z1Gg{;GcwGYBLNg-FY)wsWq-uX%4?-1_(sm0fq_xO)5S5w;`G`ntNoY*MO?4XRy%zc{7kKrC3wyX>!PS|KIWlx<~b|8UzL0WwE=u zE$ZjVNRHeDaSQfy4W$WswHsI7`zH8i$)keFPf7zmE~;8@wwRH9UE|Lym$V9&hFv+l zCeP#Al<`njxgN@xNA DPfnkz literal 0 HcmV?d00001 diff --git a/web/images/video.png b/web/images/video.png new file mode 100644 index 0000000000000000000000000000000000000000..a2e9d37a29865ffda39bac99ede6647ce5794ab5 GIT binary patch literal 297 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc3?z4jzqJQa`2jv5u0Z<#|NjOC2Aei*>g(&< zw{KrpS66?3|A7Mswr$(S&CPw}$Pp70lNmE+eE$5ot*tF6C}`!%m9JmFPEAdH^5lt- zkkIAJm+kEAN=iz^#lnVFfNpYP-2qoJYU;^MMo$&$Nw?Rh=@Ddga4}$&+{j^+B$#qU>4e3Crii&McR$|P h%gHCO#?jq`fkE7!G0=DG1P7pY22WQ%mvv4FO#t(AV^IJA literal 0 HcmV?d00001 diff --git a/web/index.jsp b/web/index.jsp index cd09586..01d326f 100644 --- a/web/index.jsp +++ b/web/index.jsp @@ -15,6 +15,9 @@ diff --git a/web/style.css b/web/style.css index 18abc33..b707335 100644 --- a/web/style.css +++ b/web/style.css @@ -3,19 +3,23 @@ body { margin: 0; overflow-y: scroll; } + body, input, textarea { font-family: 'DejaVu Sans Mono', monospace; font-size: 12px; } + input[type="checkbox"] { margin: 0; margin-right: 1em; } + label { vertical-align: 3px; } + input, textarea { background: none; @@ -23,11 +27,13 @@ textarea { outline: none; resize: none; } + h4 { font-size: 12px; margin: 1em 0; font-weight: bold; } + pre { tab-size: 2; white-space: pre-wrap; @@ -35,37 +41,48 @@ pre { tab-size: 4; -moz-tab-size: 4; } + a { color: inherit; text-decoration: none; cursor: pointer; } + a:hover { text-decoration: underline; } + ul { padding-left: 0; } + ul li { list-style: inside; } + .hidden { display: none; } + .container { max-width: 600px; margin: 0 auto; } + .messages { border-left: 1px solid; } + #messages { padding-top: 2em; } + .message { padding-bottom: 1em; } + .nick { + float: left; width: 16em; margin-left: -17em; @@ -74,29 +91,54 @@ ul li { white-space: nowrap; overflow: hidden; } + .trip { font-size: 10px; } + .text { margin: 0; margin-left: 1em; } + .text p { margin: 0; } + +.select-wrapper { + background-repeat: no-repeat; + background-size: cover; + float:left; + display: block; + position: relative; + width: 20px; + height: 20px; + margin: 5px; +} +.fotterbutton { + width: 20px; + height: 20px; + margin-right: 100px; + opacity: 0; + filter: alpha(opacity=0); /* IE 5-7 */ +} + #footer { position: fixed; bottom: 0; width: 100%; } + #chatform { border-top: 1px solid; } + #chatinput { width: 100%; padding: 1em; box-sizing: border-box; } + #sidebar { position: fixed; top: 0; @@ -106,9 +148,11 @@ ul li { border-left: solid 1px; overflow-y: auto; } + #sidebar-content { width: 180px; } + @media only screen and (max-width: 600px) { .messages { border: none;