remove jquery.timeago.js in favor of a native js implementation

12 files changed, 74 insertions, 67 deletions

diff --git a/view/js/main.js b/view/js/main.js
index 94e860575..2eb126b6f 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -25,6 +25,7 @@ var savedTitle = '';
 var followUpPageLoad = false;
 var window_needs_alert = true;
 var expanded_items = [];
+var updateTimeout = [];
 
 var page_cache = {};
 
@@ -58,28 +59,6 @@ $.ajaxSetup({cache: false});
 
 var tf = new Function('n', 's', 'var k = s.split("/")['+aStr['plural_func']+']; return (k ? k : s);');
 
-jQuery.timeago.settings.strings = {
-	prefixAgo     : aStr['t01'],
-	prefixFromNow : aStr['t02'],
-	suffixAgo     : aStr['t03'],
-	suffixFromNow : aStr['t04'],
-	seconds       : aStr['t05'],
-	minute        : aStr['t06'],
-	minutes       : function(value){return tf(value, aStr['t07']);},
-	hour          : aStr['t08'],
-	hours         : function(value){return tf(value, aStr['t09']);},
-	day           : aStr['t10'],
-	days          : function(value){return tf(value, aStr['t11']);},
-	month         : aStr['t12'],
-	months        : function(value){return tf(value, aStr['t13']);},
-	year          : aStr['t14'],
-	years         : function(value){return tf(value, aStr['t15']);},
-	wordSeparator : aStr['t16'],
-	numbers       : aStr['t17'],
-};
-
-jQuery.timeago.settings.allowFuture = true;
-
 $(document).ready(function() {
 
 	$(document).on('click focus', '.comment-edit-form', handle_comment_form);
@@ -514,14 +493,12 @@ function viewsrc(id) {
 
 function showHideComments(id) {
 	if($('#collapsed-comments-' + id).is(':visible')) {
-		$('#collapsed-comments-' + id + ' .autotime').timeago('dispose');
 		$('#collapsed-comments-' + id).hide();
 		$('#hide-comments-label-' + id).html(aStr.showmore);
 		$('#hide-comments-total-' + id).show();
 		$('#hide-comments-icon-' + id).toggleClass('bi-chevron-down bi-chevron-up');
 
 	} else {
-		$('#collapsed-comments-' + id + ' .autotime').timeago();
 		$('#collapsed-comments-' + id).show();
 		$('#hide-comments-label-' + id).html(aStr.showfewer);
 		$('#hide-comments-total-' + id).hide();
@@ -718,8 +695,6 @@ function updateConvItems(mode,data) {
 			}
 
 			// trigger the autotime function on all newly created content
-			$("> .wall-item-outside-wrapper .autotime, > .thread-wrapper .autotime",this).timeago();
-			$("> .shared_header .autotime",this).timeago();
 
 			if((mode === 'append' || mode === 'replace') && (loadingPage)) {
 				loadingPage = false;
@@ -818,6 +793,59 @@ function updateConvItems(mode,data) {
 
 	followUpPageLoad = true;
 
+	updateRelativeTime('.autotime');
+
+}
+
+function updateRelativeTime(selector) {
+	// Get all elements with the given selector
+	const timeElements = document.querySelectorAll(selector);
+	if (timeElements.length === 0) return;
+
+	// Default time style and map for supported options
+	const styleMap = ['narrow', 'short', 'long'];
+	const style = styleMap.find(s => selector.includes(s)) || 'long';
+
+	// Create an instance of RelativeTimeFormat
+	const rtf = new Intl.RelativeTimeFormat(lang, {
+		localeMatcher: 'best fit', // 'best fit' or 'lookup'
+		numeric: 'always', // 'always' or 'auto'
+		style: style // 'long', 'short', or 'narrow'
+	});
+
+	const now = Date.now(); // Get the current time only once
+
+	// Helper function to calculate the time difference in appropriate units
+	function getRelativeTime(diffInSeconds) {
+		const isFuture = diffInSeconds > 0;
+		const absDiffInSeconds = Math.abs(diffInSeconds);
+
+		if (absDiffInSeconds < 60) return { value: absDiffInSeconds, unit: 'second' };
+		if (absDiffInSeconds < 3600) return { value: Math.floor(absDiffInSeconds / 60), unit: 'minute' };
+		if (absDiffInSeconds < 86400) return { value: Math.floor(absDiffInSeconds / 3600), unit: 'hour' };
+		if (absDiffInSeconds < 2592000) return { value: Math.floor(absDiffInSeconds / 86400), unit: 'day' };
+		if (absDiffInSeconds < 31536000) return { value: Math.floor(absDiffInSeconds / 2592000), unit: 'month' };
+		return { value: Math.floor(absDiffInSeconds / 31536000), unit: 'year' };
+	}
+
+	// Process each element
+	timeElements.forEach(element => {
+		const timestamp = new Date(element.title).getTime();
+		if (isNaN(timestamp)) return; // Skip invalid timestamps
+
+		const diffInSeconds = Math.floor((timestamp - now) / 1000); // Time difference in seconds
+		const { value, unit } = getRelativeTime(diffInSeconds);
+
+		// Format the relative time and set it as the element's text
+		const formattedTime = rtf.format(diffInSeconds > 0 ? value : -value, unit);
+		element.textContent = formattedTime;
+	});
+
+	// Avoid duplicate timeout registrations for the same selector
+	if (!updateTimeout.includes(selector)) {
+		updateTimeout.push(selector);
+		setTimeout(() => updateRelativeTime(selector), 60000); // Re-run the update every 60 seconds
+	}
 }
 
 function scrollToItem() {
@@ -834,7 +862,6 @@ function scrollToItem() {
 		if($(this).data('b64mids').indexOf(submid) > -1 && !$(this).hasClass('toplevel_item')) {
 			if($('.collapsed-comments').length) {
 				var scrolltoid = $('.collapsed-comments').attr('id').substring(19);
-				$('#collapsed-comments-' + scrolltoid + ' .autotime').timeago();
 				$('#collapsed-comments-' + scrolltoid).show();
 				$('#hide-comments-label-' + scrolltoid).html(aStr.showfewer);
 				$('#hide-comments-total-' + scrolltoid).hide();
@@ -1155,7 +1182,7 @@ function pageUpdate() {
 		scroll_next = false;
 		updatePageItems(update_mode,data);
 		$("#page-spinner").hide();
-		$(".autotime").timeago();
+		updateRelativeTime('.autotime');
 		in_progress = false;
 	});
 }
@@ -1216,7 +1243,7 @@ function dolike(ident, verb) {
 				$('#thread-wrapper-' + data.orig_id).replaceWith(data.html);
 			}
 
-			$('#wall-item-ago-' + data.id + ' .autotime').timeago();
+			updateRelativeTime('.autotime');
 			collapseHeight();
 			liking = 0;
 		}
@@ -1457,7 +1484,7 @@ function post_comment(id) {
 				$("#comment-edit-preview-" + id).hide();
 				$("#comment-edit-text-" + id).val('').blur().attr('placeholder', aStr.comment);
 				$('#wall-item-comment-wrapper-' + id).before(data.html);
-				$('#wall-item-ago-' + data.id + ' .autotime').timeago();
+				updateRelativeTime('.autotime');
 				$('body').css('cursor', 'unset');
 				collapseHeight();
 				commentBusy = false;
@@ -1487,7 +1514,7 @@ function preview_comment(id) {
 		function(data) {
 			if(data.preview) {
 				$("#comment-edit-preview-" + id).html(data.preview);
-				$("#comment-edit-preview-" + id + " .autotime").timeago();
+				updateRelativeTime('.autotime');
 				$("#comment-edit-preview-" + id + " a").click(function() { return false; });
 			}
 		},
@@ -1517,7 +1544,7 @@ function preview_post() {
 		function(data) {
 			if(data.preview) {
 				$("#jot-preview-content").html(data.preview);
-				$("#jot-preview-content .autotime").timeago();
+				updateRelativeTime('.autotime');
 				$("#jot-preview-content" + " a").click(function() { return false; });
 			}
 		},
diff --git a/view/js/mod_articles.js b/view/js/mod_articles.js
index 8b31c0f52..5ebe46aa0 100644
--- a/view/js/mod_articles.js
+++ b/view/js/mod_articles.js
@@ -1,5 +1,5 @@
 $(document).ready( function() {
-	$(".autotime").timeago();
+	updateRelativeTime('.autotime');
 
 	/* autocomplete @nicknames */
 	$(".comment-edit-form  textarea").editor_autocomplete(baseurl+"/acl?f=&n=1");
diff --git a/view/js/mod_cards.js b/view/js/mod_cards.js
index 8b31c0f52..5ebe46aa0 100644
--- a/view/js/mod_cards.js
+++ b/view/js/mod_cards.js
@@ -1,5 +1,5 @@
 $(document).ready( function() {
-	$(".autotime").timeago();
+	updateRelativeTime('.autotime');
 
 	/* autocomplete @nicknames */
 	$(".comment-edit-form  textarea").editor_autocomplete(baseurl+"/acl?f=&n=1");
diff --git a/view/js/mod_connections.js b/view/js/mod_connections.js
index cb3ecc922..c8bd494d2 100644
--- a/view/js/mod_connections.js
+++ b/view/js/mod_connections.js
@@ -2,6 +2,6 @@ $(document).ready(function() {
 	$("#contacts-search").name_autocomplete(baseurl + '/acl', 'a', true, function(data) {
 		$("#contacts-search-xchan").val(data.xid);
 	});
-	$(".autotime").timeago();
+	updateRelativeTime('.autotime');
 });
 
diff --git a/view/js/mod_hq.js b/view/js/mod_hq.js
index 1e4c02768..2c2aca37b 100644
--- a/view/js/mod_hq.js
+++ b/view/js/mod_hq.js
@@ -1,6 +1,5 @@
 $(document).ready(function() {
-
-	$('.autotime').timeago();
+	updateRelativeTime('.autotime');
 
 	if (bParam_mid) {
 		src = 'hq';
diff --git a/view/php/theme_init.php b/view/php/theme_init.php
index f4083b3ff..abe4851af 100644
--- a/view/php/theme_init.php
+++ b/view/php/theme_init.php
@@ -19,7 +19,6 @@ head_add_js('/library/sprintf.js/dist/sprintf.min.js');
 head_add_js('/library/textcomplete/textcomplete.min.js');
 head_add_js('autocomplete.js');
 
-head_add_js('/library/jquery.timeago.js');
 head_add_js('/library/readmore.js/readmore.js');
 
 head_add_js('/library/sjcl/sjcl.js');
diff --git a/view/tpl/chat.tpl b/view/tpl/chat.tpl
index 766205ee0..1020399c7 100644
--- a/view/tpl/chat.tpl
+++ b/view/tpl/chat.tpl
@@ -206,7 +206,7 @@ function update_chats(chats) {
             chat_issue_notification(item.name + ':\n' + item.text, 'Hubzilla Chat');
 		}
 		$('#chatLineHolder').append(newNode);
-		$(".autotime").timeago();
+		updateRelativeTime('.autotime');
 
 		var elem = document.getElementById('chatTopBar');
 		elem.scrollTop = elem.scrollHeight;
diff --git a/view/tpl/head.tpl b/view/tpl/head.tpl
index d2efcced9..18941f454 100644
--- a/view/tpl/head.tpl
+++ b/view/tpl/head.tpl
@@ -8,6 +8,7 @@
 {{$linkrel}}
 {{$plugins}}
 <script>
+	var lang = '{{$lang}}';
 	var updateInterval = {{$update_interval}};
 	var sse_enabled = {{$sse_enabled}};
 	var localUser = {{if $local_channel}}{{$local_channel}}{{else}}false{{/if}};
diff --git a/view/tpl/js_strings.tpl b/view/tpl/js_strings.tpl
index 46536a89a..38168ccfe 100644
--- a/view/tpl/js_strings.tpl
+++ b/view/tpl/js_strings.tpl
@@ -39,26 +39,6 @@
 		'pin_item'    : "{{$pin_item}}",
 		'unpin_item'  : "{{$unpin_item}}",
 
-		'plural_func' : "{{$plural_func}}",
-
-		't01' : "{{$t01}}",
-		't02' : "{{$t02}}",
-		't03' : "{{$t03}}",
-		't04' : "{{$t04}}",
-		't05' : "{{$t05}}",
-		't06' : "{{$t06}}",
-		't07' : "{{$t07}}",
-		't08' : "{{$t08}}",
-		't09' : "{{$t09}}",
-		't10' : "{{$t10}}",
-		't11' : "{{$t11}}",
-		't12' : "{{$t12}}",
-		't13' : "{{$t13}}",
-		't14' : "{{$t14}}",
-		't15' : "{{$t15}}",
-		't16' : "{{$t16}}",
-		't17' : "{{$t17}}",
-
 		'monthNames' : [ "{{$January}}","{{$February}}","{{$March}}","{{$April}}","{{$May}}","{{$June}}","{{$July}}","{{$August}}","{{$September}}","{{$October}}","{{$November}}","{{$December}}" ],
 		'monthNamesShort' : [ "{{$Jan}}","{{$Feb}}","{{$Mar}}","{{$Apr}}","{{$MayShort}}","{{$Jun}}","{{$Jul}}","{{$Aug}}","{{$Sep}}","{{$Oct}}","{{$Nov}}","{{$Dec}}" ],
 		'dayNames' : ["{{$Sunday}}","{{$Monday}}","{{$Tuesday}}","{{$Wednesday}}","{{$Thursday}}","{{$Friday}}","{{$Saturday}}"],
diff --git a/view/tpl/messages_widget.tpl b/view/tpl/messages_widget.tpl
index ebd76ec89..2201095bd 100644
--- a/view/tpl/messages_widget.tpl
+++ b/view/tpl/messages_widget.tpl
@@ -40,7 +40,7 @@
 							{7}
 							<strong title="{4}">{4}</strong>
 						</div>
-						<small class="messages-timeago opacity-75" title="{1}"></small>
+						<small class="autotime-narrow opacity-75" title="{1}"></small>
 					</div>
 					<div class="text-truncate">
 						<small class="opacity-75" title="{5}">{5}</small>
@@ -82,7 +82,7 @@
 							{{$e.icon}}
 							<strong title="{{$e.author_name}}">{{$e.author_name}}</strong>
 						</div>
-						<small class="messages-timeago opacity-75" title="{{$e.created}}"></small>
+						<small class="autotime-narrow opacity-75" title="{{$e.created}}"></small>
 					</div>
 					<div class="text-truncate">
 						<small class="opacity-75" title="{{$e.author_addr}}">{{$e.author_addr}}</small>
@@ -116,7 +116,8 @@
 	let file;
 
 	$(document).ready(function () {
-		$('.messages-timeago').timeago();
+		updateRelativeTime('.autotime-narrow');
+
 		if (bParam_mid) {
 			$('.message[data-b64mid=\'' + bParam_mid + '\']').addClass('active');
 		}
@@ -251,7 +252,7 @@
 				$('.message[data-b64mid=\'' + bParam_mid + '\']').addClass('active');
 			}
 			$('#messages-loading').hide();
-			$('.messages-timeago').timeago();
+			updateRelativeTime('.autotime-narrow');
 
 		});
 
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 97901e052..c1d7edd66 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -401,8 +401,6 @@
 			}).appendTo('#nav-' + notifyType + '-menu');
 		}
 
-		$("#nav-" + notifyType + "-menu .notifications-autotime").timeago();
-
 		if($('#tt-' + notifyType + '-only').hasClass('active'))
 			$('#nav-' + notifyType + '-menu [data-thread_top=false]').addClass('tt-filter-active');
 
@@ -421,6 +419,8 @@
 				});
 			}
 		}
+
+		updateRelativeTime('.autotime-narrow');
 	}
 
 	function sse_updateNotifications(type, mid) {
@@ -552,7 +552,7 @@
 					<div class="text-truncate pe-1">
 						<strong title="{2} - {3}">{2}</strong>
 					</div>
-					<small class="notifications-autotime opacity-75" title="{5}"></small>
+					<small class="autotime-narrow opacity-75" title="{5}"></small>
 				</div>
 				<div class="text-truncate">{4}</div>
 			</div>
diff --git a/view/tpl/pinned_item.tpl b/view/tpl/pinned_item.tpl
index 90905a145..aa5b94664 100644
--- a/view/tpl/pinned_item.tpl
+++ b/view/tpl/pinned_item.tpl
@@ -214,5 +214,5 @@
 </script>
 {{/if}}
 <script>
-	$(".pinned-item .autotime").timeago();
+	updateRelativeTime('.autotime');
 </script>