hemna/aprsd
1
0
Fork 0
mirror of https://github.com/craigerl/aprsd.git synced 2025-08-03 05:52:26 -04:00
Code Issues Projects Releases Wiki Activity

WebChat: fixed content area scrolling

Browse Source 
This patch fixes some issues when switching between tabs.
This commit is contained in:
Hemna 2023-09-15 14:12:55 -04:00
parent b393060edb
commit 7130ca2fd9
2 changed files with 145 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
aprsd/web/chat/static/js/send-message.js
View File

@ -165,6 +165,41 @@ function init_messages() {
}
}
function scroll_main_content(callsign=false) {
var wc = $('#wc-content');
var d = $('#msgsTabContent');
var scrollHeight = wc.prop('scrollHeight');
var clientHeight = wc.prop('clientHeight');
//console.log("#wc-content clientHeight " + clientHeight + " scrollHeight " + scrollHeight);
//console.log("#msgsTabContent clientHeight "+ d.prop('clientHeight') + " scrollHeight " + d.prop('scrollHeight'));
if (callsign) {
div_id = content_divname(callsign);
c_div = $(content_divname(callsign));
//console.log("c_div("+div_id+") " + c_div);
c_height = c_div.height();
c_scroll_height = c_div.prop('scrollHeight');
//console.log("callsign height " + c_height + " scrollHeight " + c_scroll_height);
if (c_height === undefined) {
console.log("c_height is undefined");
return false;
}
if (c_height > clientHeight) {
wc.animate({ scrollTop: c_scroll_height }, 500);
} else {
console.log("scroll to 0 " + callsign)
wc.animate({ scrollTop: 0 }, 500);
}
} else {
if (scrollHeight > clientHeight) {
wc.animate({ scrollTop: wc.prop('scrollHeight') }, 500);
} else {
console.log("scroll to 0 " + callsign)
wc.animate({ scrollTop: 0 }, 500);
}
}
}
function create_callsign_tab(callsign, active=false) {
//Create the html for the callsign tab and insert it into the DOM
var callsignTabs = $("#msgsTabList");
@ -328,6 +363,7 @@ function sent_msg(msg) {
msg_html = create_message_html(d, t, msg['from'], msg['to'], msg['message'], ack_id, msg, false);
append_message(msg['to'], msg, msg_html);
save_data();
scroll_main_content(msg['from']);
}
function from_msg(msg) {
@ -355,6 +391,7 @@ function from_msg(msg) {
msg_html = create_message_html(d, t, from, false, msg['message'], false, msg, false);
append_message(from, msg, msg_html);
save_data();
scroll_main_content(from);
}
function ack_msg(msg) {
@ -392,11 +429,11 @@ function ack_msg(msg) {
//$('.ui.accordion').accordion('refresh');
save_data();
scroll_main_content();
}
function callsign_select(callsign) {
var tocall = $("#to_call");
tocall.val(callsign);
var d = $('#wc-content');
d.animate({ scrollTop: d.prop('scrollHeight') }, 500);
scroll_main_content(callsign);
}

19
aprsd/web/chat/templates/index.html
View File

@ -1,6 +1,7 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/static/js/upstream/jquery.toast.js"></script>
<!--<script src="/static/js/upstream/jquery.min.js"></script> -->
@ -11,10 +12,16 @@
<!-- <script src="https://cdn.socket.io/4.1.2/socket.io.min.js" integrity="sha384-toS6mmwu70G0fw54EGlWWeA4z3dyJ+dlXBtSURSKN4vyRFOcxd3Bzjj/AoOwY+Rg" crossorigin="anonymous"></script> -->
<script src="/static/js/upstream/socket.io.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,200,1,200">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,200,1,200">
<link rel="stylesheet" href="/static/css/upstream/jquery.toast.css">
<link rel="stylesheet" href="/static/css/chat.css">
@ -88,7 +95,7 @@
</div>
<div class="col-sm-3">
<label for="message" class="visually-hidden">Message</label>
<input type="text" class="form-control mb-2 mr-sm-2" name="message" id="message" size="40" maxlength="40" placeholder="Message">
<input type="search" class="form-control mb-2 mr-sm-2" name="message" id="message" size="40" maxlength="40" placeholder="Message">
</div>
<div class="col-auto">
<input type="submit" name="submit" class="btn btn-primary mb-2" id="send_msg" value="Send"/>
@ -104,7 +111,7 @@
</div>
<div class="wc-row content" id="wc-content">
<div class="container" style="max-width: 800px;">
<div class="tab-content" id="msgsTabContent" style="height: 100%">
<div class="tab-content" id="msgsTabContent">
</div>
</div>
</div>