Calculate comment age clientside, show timestamp in mouseover title (#191)

Resolves outdated comment ages thanks to caching and will show timestamps in local time.

nyaa/routes.py

@@ -38,6 +38,10 @@ SERACH_PAGINATE_DISPLAY_MSG = ('Displaying results {start}-{end} out of {total}
                                'what you were looking for.')
 
 
+# For static_cachebuster
+_static_cache = {}
+
+
 def redirect_url():
     url = flask.request.args.get('next') or \
         flask.request.referrer or \
@@ -46,7 +50,7 @@ def redirect_url():
         return '/'
     return url
 
-_static_cache = {}
+
 @app.template_global()
 def static_cachebuster(static_filename):
     ''' Adds a ?t=<mtime> cachebuster to the given path, if the file exists.
@@ -71,6 +75,7 @@ def static_cachebuster(static_filename):
 
     return _static_cache[static_filename]
 
+
 @app.template_global()
 def modify_query(**new_values):
     args = flask.request.args.copy()

nyaa/static/js/main.js

@@ -88,6 +88,8 @@ function _format_time_difference(seconds) {
 	if (seconds < 0) {
 		suffix = "";
 		prefix = "After ";
+	} else if (seconds == 0) {
+		return "Just now"
 	}
 
 	var parts = [];
@@ -104,11 +106,12 @@ function _format_time_difference(seconds) {
 	}
 	return prefix + parts.join(" ") + suffix;
 }
-function _format_date(date) {
+function _format_date(date, show_seconds) {
 	var pad = function (n) { return ("00" + n).slice(-2); }
 	var ymd = date.getFullYear() + "-" + pad(date.getMonth()+1) + "-" + pad(date.getDate());
 	var hm = pad(date.getHours()) + ":" + pad(date.getMinutes());
-	return ymd + " " + hm;
+	var s = show_seconds ? ":" + pad(date.getSeconds()) : ""
+	return ymd + " " + hm + s;
 }
 
 // Add title text to elements with data-timestamp attribute
@@ -119,11 +122,20 @@ document.addEventListener("DOMContentLoaded", function(event) {
 	for (var i = 0; i < timestamp_targets.length; i++) {
 		var target = timestamp_targets[i];
 		var torrent_timestamp = parseInt(target.getAttribute('data-timestamp'));
+		var swap_flag = target.getAttribute('data-timestamp-swap') != null;
+
 		if (torrent_timestamp) {
 			var timedelta = now_timestamp - torrent_timestamp;
-			target.setAttribute('title', _format_time_difference(timedelta));
 
-			target.innerText = _format_date(new Date(torrent_timestamp*1000));
+			var formatted_date = _format_date(new Date(torrent_timestamp*1000), swap_flag);
+			var formatted_timedelta = _format_time_difference(timedelta);
+			if (swap_flag) {
+				target.setAttribute('title', formatted_date);
+				target.innerText = formatted_timedelta;
+			} else {
+				target.setAttribute('title', formatted_timedelta);
+				target.innerText = formatted_date;
+			}
 		}
 	};
 

nyaa/templates/view.html

@@ -143,7 +143,7 @@
 			</div>
 			<div class="col-md-10">
 				<div class="row">
-					<a href="#com-{{ loop.index }}"><small>{{ comment.created_time | timesince }}</small></a>
+					<a href="#com-{{ loop.index }}"><small data-timestamp-swap data-timestamp="{{ comment.created_utc_timestamp|int }}">{{ comment.created_time.strftime('%Y-%m-%d %H:%M UTC') }}</small></a>
 					{% if g.user.is_moderator or g.user.id == comment.user_id %}
 					<form class="delete-comment-form" action="{{ url_for('delete_comment', torrent_id=torrent.id, comment_id=comment.id) }}" method="POST">
 						<button name="submit" type="submit" class="btn btn-danger btn-xs" title="Delete">Delete</button>