From 7130ca2fd9425c438a787b5521e512bc5d572f18 Mon Sep 17 00:00:00 2001 From: Hemna Date: Fri, 15 Sep 2023 14:12:55 -0400 Subject: [PATCH] WebChat: fixed content area scrolling This patch fixes some issues when switching between tabs. --- aprsd/web/chat/static/js/send-message.js | 41 ++++- aprsd/web/chat/templates/index.html | 205 ++++++++++++----------- 2 files changed, 145 insertions(+), 101 deletions(-) diff --git a/aprsd/web/chat/static/js/send-message.js b/aprsd/web/chat/static/js/send-message.js index 31682bd..3f837b8 100644 --- a/aprsd/web/chat/static/js/send-message.js +++ b/aprsd/web/chat/static/js/send-message.js @@ -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); } diff --git a/aprsd/web/chat/templates/index.html b/aprsd/web/chat/templates/index.html index 6bd3161..0569e7f 100644 --- a/aprsd/web/chat/templates/index.html +++ b/aprsd/web/chat/templates/index.html @@ -1,119 +1,126 @@ - - - - - - - - - - + + + + + + + + + + - - + + - - + + - - - - - - + + + + + + - - + // When a tab is clicked, populate the to_call form field. + $(document).on('shown.bs.tab', 'button[data-bs-toggle="tab"]', function (e) { + var tab = $(e.target); + var callsign = tab.attr("callsign"); + var to_call = $('#to_call'); + to_call.val(callsign); + }); + }); - -
-
-
-
-
-

APRSD WebChat {{ version }}

-
-
-
-
- {{ callsign }} - connected to - {{ aprs_connection|safe }} - NONE -
-
-
-
-
- - -
-
- - -
-
- - - -
-
-
-
-
- -
-
-
-
-
+ + + + +
+
+
+
+
+

APRSD WebChat {{ version }}

+
+
+ {{ callsign }} + connected to + {{ aprs_connection|safe }} + NONE +
+
+
+
+
+ + +
+
+ + +
+
+ + + +
+
+
-
-
- PyPI version - +
+ +
+
+
+
+
- +
+
+ PyPI version + +
+
+
+