From 46eced24ceceb453d5ebe6f58ef4612e88cb0b9e Mon Sep 17 00:00:00 2001 From: Piyush Mishra Date: Mon, 10 May 2021 20:27:34 +0530 Subject: [PATCH] fixes --- static/css/style.css | 32 -------------------------------- static/index.html | 38 ++++++++++++++++++++++++++++++++++++-- static/js/app.js | 29 +++++++++++++++++++---------- static/js/camera.js | 7 +++++-- static/js/message.js | 6 +++--- static/js/onload.js | 2 +- 6 files changed, 64 insertions(+), 50 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 4b1bd9e..9a9813e 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -6,36 +6,6 @@ src: url("../img/Itim-Regular.ttf"); } -:root { - --bg-color: #ffffff; - --bg-secondary-color: #f3f3f6; - --bg-tertiary-color: #cacad8; - --color-primary: #14854F; - --color-lightGrey: #d2d6dd; - --color-border: #d2d6dd; - --color-grey: #747681; - --color-darkGrey: #3f4144; - --color-error: #d43939; - --color-success: #28bd14; - --grid-maxWidth: 120rem; - --grid-gutter: 2rem; - --font-size: 1.8rem; - --font-color: #333333; - --font-family-sans: "Itim"; - --font-family-mono: monaco, "Consolas", "Lucida Console", monospace; - - --msg-other-bg-color : rgb(97, 182, 238); - --msg-me-bg-color : rgb(92, 175, 148); - --msg-reply-bg-color : rgb(209, 215, 219); - --msg-other-border-color : rgb(62, 127, 212); - --msg-me-border-color : rgb(64, 148, 116); - --msg-reply-border-color : rgb(94, 100, 105); - --msg-other-border-sel-color : rgb(58, 90, 139); - --msg-me-border-sel-color : rgb(48, 105, 86); - - --svg-filter: none; -} - * { scrollbar-width: auto; } @@ -262,9 +232,7 @@ input { } .clip-win.selected-clip { - width: fit-content; min-width: 250px; - height: fit-content; left: 50%; transform: translateX(-50%); border-radius: 15px; diff --git a/static/index.html b/static/index.html index 8b6d520..e72aa6d 100644 --- a/static/index.html +++ b/static/index.html @@ -4,10 +4,43 @@ + Lupt Chat -
+
- +
+
diff --git a/static/js/app.js b/static/js/app.js index 2edb6bd..4a099bc 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -15,10 +15,13 @@ var vayakti = {}; var typing = []; var no_name_message = false; -// Connection opened -socket.addEventListener('open', function (event) { - $('#progress_button').removeClass('is-hidden'); +// check if support ws +if(!('WebSocket' in window || 'MozWebSocket' in window)) { + $('initerror').text('Warning: Web Browser dosen\'t support websocket! Upgrade'); +} +// Connection opened +socket.onopen = function(event) { var params = window.location.search; params = params.substr(1,params.length).split('&'); @@ -31,12 +34,18 @@ socket.addEventListener('open', function (event) { frm.find('[name=kaksh_kunjika]').val(params[0]); frm.find('[name=kunjika]').val(params[1]); frm.find('[name=name]').val(params[2]); - + $('#progress_button').css('display', ''); connect(frm); -}); +} + +// Connection fail +socket.onerror = function(event) { + $('initerror').text('Warning: Failed to connect websocket! Refresh the '+ + 'page and if still don\'t work upgrade Web Browser'); +} // Listen for messages -socket.addEventListener('message', function (event) { +socket.onmessage = function(event) { var j = JSON.parse(event.data); switch(j.cmd) { case 'resp': @@ -100,13 +109,13 @@ socket.addEventListener('message', function (event) { }); break; } -}); +} function connect(frm) { if(actions.has_key('join') || actions.has_key('leave')) return; var frm = $(frm); var data = {}; - frm.serializeArray().forEach(el => { + frm.serializeArray().forEach(function(el) { if(typeof el.value == 'string') data[el.name] = el.value.trim(); else @@ -204,7 +213,7 @@ function changeColor() { function refreshVayaktiList() { var v = $('#vayakti_list'); v.empty(); - Object.keys(vayakti).forEach((key) => { + Object.keys(vayakti).forEach(function(key) { v.append($('') .append($('').append(vayakti[key])) .append($('').append(key))); @@ -216,6 +225,6 @@ function autosize(el){ el.style.cssText = 'height:auto; padding:0'; el.style.cssText = 'height:' + el.scrollHeight + 'px'; $('#reply_clip').css('bottom', (el.scrollHeight + 10) + 'px'); - $('#selected_clip').css('bottom', (el.scrollHeight + 10) + 'px'); + $('#selected_clip').css('bottom', (el.scrollHeight + 25) + 'px'); },0); } \ No newline at end of file diff --git a/static/js/camera.js b/static/js/camera.js index 5793982..856fd27 100644 --- a/static/js/camera.js +++ b/static/js/camera.js @@ -1,6 +1,6 @@ var Camera = class { static setupCamera() { - $('#file-input')[0].addEventListener('change', (e) => { + $('#file-input')[0].addEventListener('change', function(e) { const file = e.target.files[0]; if (!file) { return; @@ -19,11 +19,14 @@ var Camera = class { reader.readAsDataURL(result); reader.onloadend = function() { var base64data = reader.result; - if(base64data.length > 63000 && mime != 'image/jpeg') { + if(base64data.length > 63488 && mime != 'image/jpeg') { base64data = null; result = null; Camera.compressImage(file, 0.7, 'image/jpeg'); return; + } else if(base64data.length > 63488 && mime == 'image/jpeg') { + window.alert('file is too large!'); + return; } socket.send(JSON.stringify({ diff --git a/static/js/message.js b/static/js/message.js index 957eb0d..1aa37a2 100644 --- a/static/js/message.js +++ b/static/js/message.js @@ -4,7 +4,7 @@ let Messages = class { var elm = $(elm); elm.toggleClass('active'); - if($('.active').length == 0) + if($('.message.active').length == 0) $('#selected_clip').addClass('is-hidden'); else $('#selected_clip').removeClass('is-hidden'); @@ -49,7 +49,7 @@ let Messages = class { if(elm.length > 0) elm.remove(); if(typing.length == 0) return; var text = ''; - typing.forEach((val) => { + typing.forEach(function(val) { var name = vayakti[val]; if(name == undefined) name = ""; text += name+'('+val.substr(0,8)+')'+ ',' @@ -98,7 +98,7 @@ let Messages = class { else elm.append($('
', {class: 'message-by'}).append(vayakti[sender]+'('+sender.substr(0, 8)+')')) } - elm.append($('', {src: src})); + elm.append($('', {src: src, width: 300})); elm.click(function() { Messages.pick(this); }); diff --git a/static/js/onload.js b/static/js/onload.js index 2a474c3..733dfb0 100644 --- a/static/js/onload.js +++ b/static/js/onload.js @@ -2,7 +2,7 @@ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').match $('body').toggleClass('dark'); } -$(document).ready(() => { +$(document).ready(function() { $(".tabs > a").click(function() { var t = $(this);