mirror of
https://github.com/craigerl/aprsd.git
synced 2025-04-06 03:29:01 -04:00
WebChat: fixed content area scrolling
This patch fixes some issues when switching between tabs.
This commit is contained in:
parent
b393060edb
commit
7130ca2fd9
@ -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);
|
||||
}
|
||||
|
||||
@ -1,119 +1,126 @@
|
||||
<html>
|
||||
<head>
|
||||
<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> -->
|
||||
<!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> -->
|
||||
<!-- <link rel="stylesheet" href="/static/css/upstream/jquery-ui.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.1/jquery-ui.min.js"></script> -->
|
||||
<!-- <script src="/static/js/upstream/jquery-ui.min.js"></script> -->
|
||||
<!-- <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>
|
||||
<head>
|
||||
<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> -->
|
||||
<!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> -->
|
||||
<!-- <link rel="stylesheet" href="/static/css/upstream/jquery-ui.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.1/jquery-ui.min.js"></script> -->
|
||||
<!-- <script src="/static/js/upstream/jquery-ui.min.js"></script> -->
|
||||
<!-- <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="/static/css/upstream/jquery.toast.css">
|
||||
<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">
|
||||
<link rel="stylesheet" href="/static/css/index.css">
|
||||
<link rel="stylesheet" href="/static/css/tabs.css">
|
||||
<script src="/static/js/main.js"></script>
|
||||
<script src="/static/js/gps.js"></script>
|
||||
<script src="/static/js/send-message.js"></script>
|
||||
<link rel="stylesheet" href="/static/css/chat.css">
|
||||
<link rel="stylesheet" href="/static/css/index.css">
|
||||
<link rel="stylesheet" href="/static/css/tabs.css">
|
||||
<script src="/static/js/main.js"></script>
|
||||
<script src="/static/js/gps.js"></script>
|
||||
<script src="/static/js/send-message.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var initial_stats = {{ initial_stats|tojson|safe }};
|
||||
var latitude = parseFloat('{{ latitude|safe }}');
|
||||
var longitude = parseFloat('{{ longitude|safe }}');
|
||||
<script type="text/javascript">
|
||||
var initial_stats = {{ initial_stats|tojson|safe }};
|
||||
var latitude = parseFloat('{{ latitude|safe }}');
|
||||
var longitude = parseFloat('{{ longitude|safe }}');
|
||||
|
||||
var memory_chart = null
|
||||
var message_chart = null
|
||||
var memory_chart = null
|
||||
var message_chart = null
|
||||
|
||||
$(document).ready(function() {
|
||||
console.log(initial_stats);
|
||||
start_update();
|
||||
init_chat();
|
||||
//reset_Tabs();
|
||||
$(document).ready(function() {
|
||||
console.log(initial_stats);
|
||||
start_update();
|
||||
init_chat();
|
||||
//reset_Tabs();
|
||||
|
||||
console.log("latitude", latitude);
|
||||
console.log("longitude", longitude);
|
||||
console.log("latitude", latitude);
|
||||
console.log("longitude", longitude);
|
||||
|
||||
if (isNaN(latitude) || isNaN(longitude) && location.protocol != 'https:') {
|
||||
// Have to disable the beacon button.
|
||||
$('#send_beacon').prop('disabled', true);
|
||||
}
|
||||
if (isNaN(latitude) || isNaN(longitude) && location.protocol != 'https:') {
|
||||
// Have to disable the beacon button.
|
||||
$('#send_beacon').prop('disabled', true);
|
||||
}
|
||||
|
||||
$("#wipe_local").click(function() {
|
||||
console.log('Wipe local storage');
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
// 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);
|
||||
});
|
||||
$("#wipe_local").click(function() {
|
||||
console.log('Wipe local storage');
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
// 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);
|
||||
});
|
||||
});
|
||||
|
||||
<body>
|
||||
<div class="wc-container">
|
||||
<div class="wc-row header">
|
||||
<div class="container-sm">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h1>APRSD WebChat {{ version }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<span style='color: green'>{{ callsign }}</span>
|
||||
connected to
|
||||
<span style='color: blue' id='aprs_connection'>{{ aprs_connection|safe }}</span>
|
||||
<span id='uptime'>NONE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<form class="row gx-1 gy-1 justify-content-center align-items-center" id="sendform" name="sendmsg" action="">
|
||||
<div class="col-sm-3">
|
||||
<label for="to_call" class="visually-hidden">Callsign</label>
|
||||
<input type="search" class="form-control mb-2 mr-sm-2" name="to_call" id="to_call" placeholder="To Callsign" size="11" maxlength="9">
|
||||
</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">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input type="submit" name="submit" class="btn btn-primary mb-2" id="send_msg" value="Send" />
|
||||
<button type="button" class="btn btn-primary mb-2" id="send_beacon" value="Send GPS Beacon">Send GPS Beacon</button>
|
||||
<!-- <button type="button" class="btn btn-primary mb-2" id="wipe_local" value="wipe local storage">Wipe LocalStorage</button> -->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-sm" style="max-width: 800px">
|
||||
<ul class="nav nav-tabs" id="msgsTabList" role="tablist"></ul>
|
||||
</div>
|
||||
</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%">
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wc-container">
|
||||
<div class="wc-row header">
|
||||
<div class="container-sm">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h1>APRSD WebChat {{ version }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<span style='color: green'>{{ callsign }}</span>
|
||||
connected to
|
||||
<span style='color: blue' id='aprs_connection'>{{ aprs_connection|safe }}</span>
|
||||
<span id='uptime'>NONE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<form class="row gx-1 gy-1 justify-content-center align-items-center" id="sendform" name="sendmsg" action="">
|
||||
<div class="col-sm-3">
|
||||
<label for="to_call" class="visually-hidden">Callsign</label>
|
||||
<input type="search" class="form-control mb-2 mr-sm-2" name="to_call" id="to_call" placeholder="To Callsign" size="11" maxlength="9">
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label for="message" class="visually-hidden">Message</label>
|
||||
<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"/>
|
||||
<button type="button" class="btn btn-primary mb-2" id="send_beacon" value="Send GPS Beacon">Send GPS Beacon</button>
|
||||
<!-- <button type="button" class="btn btn-primary mb-2" id="wipe_local" value="wipe local storage">Wipe LocalStorage</button> -->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wc-row footer">
|
||||
<div class="container-sm" style="padding-top: 40px">
|
||||
<a href="https://badge.fury.io/py/aprsd"><img src="https://badge.fury.io/py/aprsd.svg" alt="PyPI version" height="18"></a>
|
||||
<a href="https://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a>
|
||||
<div class="container-sm" style="max-width: 800px">
|
||||
<ul class="nav nav-tabs" id="msgsTabList" role="tablist"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wc-row content" id="wc-content">
|
||||
<div class="container" style="max-width: 800px;">
|
||||
<div class="tab-content" id="msgsTabContent">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<div class="wc-row footer">
|
||||
<div class="container-sm" style="padding-top: 40px">
|
||||
<a href="https://badge.fury.io/py/aprsd"><img src="https://badge.fury.io/py/aprsd.svg" alt="PyPI version" height="18"></a>
|
||||
<a href="https://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user