Browse Source

properly calculate log scroll offset
remove startup scroll-to-bottom hack
set document title via kojs

Andrew Dolgov 3 months ago
parent
commit
2225e801f0
3 changed files with 15 additions and 25 deletions
  1. 2 1
      index.php
  2. 2 2
      js/functions.js
  3. 11 22
      js/tt-irc.js

+ 2 - 1
index.php

@@ -15,8 +15,9 @@
 	$user_theme = get_user_theme_path();
 ?>
 <!DOCTYPE html>
+<html id="html-root">
 <head>
-	<title>Tiny Tiny IRC</title>
+	<title data-bind="text: documentTitle">Tiny Tiny IRC</title>
 
 	<?php stylesheet_tag("css/default.css") ?>
 	<?php stylesheet_tag("lib/bootstrap/css/bootstrap.min.css") ?>

+ 2 - 2
js/functions.js

@@ -650,8 +650,8 @@ function img_check_size(img) {
 			window.setTimeout(function() {
 				image_embed_cache[$(img).attr('src')].upd_done = 1;
 
-				/* global update_buffer, log_scroll_offset */
-				update_buffer(log_scroll_offset());
+				/* global update_buffer, log_bottom_offset */
+				update_buffer(log_bottom_offset());
 			}, 100);
 		}
 

+ 11 - 22
js/tt-irc.js

@@ -30,8 +30,6 @@ let log_last_scroll_top = 0;
 let url_data_cache = [];
 let image_embed_cache = [];
 
-const STARTUP_TIMESTAMP = new Date().getTime();
-
 const ALLOW_EMOTICONS = get_cookie('ttirc_emoticons') != "false";
 const ALLOW_EMBEDS = get_cookie("ttirc_noembed_mode") != "true";
 
@@ -297,7 +295,7 @@ const Message = function(data, chan) {
 								self.message_formatted('');
 								self.message.notifySubscribers();
 
-								update_buffer(log_scroll_offset());
+								update_buffer(log_bottom_offset());
 							});
 						} else {
 							url_data_cache[link.attr('href')] = [];
@@ -862,7 +860,7 @@ function Model() {
 		return self.activeStatus() == 2;
 	}, self);
 
-	self.updateTitle = ko.computed(function() {
+	self.documentTitle = ko.computed(function() {
 
 		const conn = self.activeConnection();
 		let title = "Tiny Tiny IRC";
@@ -892,7 +890,7 @@ function Model() {
 			}
 		}
 
-		document.title = title;
+		return title;
 	}, self);
 
 	self.faviconBadge = function(number, is_hl) {
@@ -1241,10 +1239,6 @@ function init_second_stage(params) {
 
 	hide_spinner();
 
-	window.setInterval(() => {
-		model.updateTitle()
-	}, 2000);
-
 	update_initial();
 }
 
@@ -1352,7 +1346,7 @@ function init() {
 		report_error(message, filename, lineno, colno, error);
 	};
 
-	ko.applyBindings(model);
+	ko.applyBindings(model, $('#html-root')[0]);
 
 	// url data cache maintenance
 	window.setInterval(function() {
@@ -1489,7 +1483,7 @@ function handle_update(rv) {
 
 	let lines_added = 0;
 
-	const scroll_offset = log_scroll_offset();
+	const scroll_offset = log_bottom_offset();
 
 	for (let i = 0; i < lines.length; i++) {
 
@@ -1684,16 +1678,12 @@ function update_filter_muted() {
 // custom value may be passed to test pre-update scroll position instead of post-update one
 function update_buffer(scroll_offset) {
 
-	const tab = get_selected_tab();
-	if (!tab) return;
-
 	const log = $("#log");
-	const is_starting = ((new Date().getTime()) - STARTUP_TIMESTAMP) / 1000 < 10;
 
 	if (scroll_offset == undefined)
-		scroll_offset = log.prop('scrollHeight') - log.prop('offsetHeight') - log.scrollTop();
+		scroll_offset = log.prop('scrollHeight') - log.prop('clientHeight') - log.scrollTop();
 
-	const scroll_to_bottom = is_starting || scroll_offset <= 512;
+	const scroll_to_bottom = scroll_offset <= 512;
 
 	if (scroll_to_bottom) window.setTimeout(function() {
 		log.scrollTop(log.prop('scrollHeight'));
@@ -1701,8 +1691,6 @@ function update_buffer(scroll_offset) {
 
 	update_chanmute(model.activeChannel());
 	update_filter_muted();
-
-	model.updateTitle();
 }
 
 /*function send_topic(evt) {
@@ -2673,6 +2661,7 @@ function highlight_tab_if_needed(connection_id, channel, message) {
 			if (is_highlight(connection_id, message)) {
 				chan.highlight(true);
 				model.new_highlights(model.new_highlights()+1);
+				model.new_messages(model.new_messages()+1);
 				is_hl = true;
 			}
 		}
@@ -2825,8 +2814,8 @@ function channel_search_clear() {
 	channel_search();
 }
 
-/* exported log_scroll_offset */
-function log_scroll_offset() {
+/* exported log_bottom_offset */
+function log_bottom_offset() {
 	const log = $("#log");
-	return log.prop('scrollHeight') - log.prop('offsetHeight') - log.scrollTop();
+	return log.prop('scrollHeight') - log.prop('clientHeight') - log.scrollTop();
 }