From 514ea1bbc35569957b71a01ffe124886b76a9619 Mon Sep 17 00:00:00 2001 From: fatchan Date: Fri, 6 Dec 2019 05:50:01 +0000 Subject: [PATCH] improve time utils for relative time string and color to be more fradient instead of hard transitions --- gulp/res/js/post.js | 4 +-- helpers/timeutils.js | 51 ++++++++++++++++++++++++++++----------- models/pages/boardlist.js | 14 ++++++++--- views/mixins/post.pug | 4 +-- 4 files changed, 52 insertions(+), 21 deletions(-) diff --git a/gulp/res/js/post.js b/gulp/res/js/post.js index 226f4138..41fd9a2f 100644 --- a/gulp/res/js/post.js +++ b/gulp/res/js/post.js @@ -13,7 +13,7 @@ pug_mixins["post"] = pug_interp = function(post, truncate, manage=false, globalm var block = (this && this.block), attributes = (this && this.attributes) || {}; pug_html = pug_html + "\u003Cdiv" + (" class=\"anchor\""+pug_attr("id", post.postId, true, false)) + "\u003E\u003C\u002Fdiv\u003E\u003Cdiv" + (pug_attr("class", pug_classes([`post-container ${post.thread || ban === true ? '' : 'op'}`], [true]), false, false)+pug_attr("data-board", post.board, true, false)+pug_attr("data-post-id", post.postId, true, false)+pug_attr("data-user-id", post.userId, true, false)) + "\u003E"; const postURL = `/${post.board}/thread/${post.thread || post.postId}.html`; -pug_html = pug_html + "\u003Cdiv class=\"post-info\"\u003E\u003Clabel\u003E"; +pug_html = pug_html + "\u003Cdiv class=\"post-info\"\u003E\u003Clabel class=\"noselect\"\u003E"; if (globalmanage) { pug_html = pug_html + "\u003Cinput" + (" class=\"post-check\""+" type=\"checkbox\" name=\"globalcheckedposts\""+pug_attr("value", post._id, true, false)) + "\u002F\u003E "; ipHashSub = post.ip.hash.slice(-10); @@ -62,7 +62,7 @@ pug_html = pug_html + "\u003Ctime" + (" class=\"post-date\""+pug_attr("datetime" if (post.userId) { pug_html = pug_html + "\u003Cspan" + (" class=\"user-id\""+pug_attr("style", pug_style(`background-color: #${post.userId}`), true, false)) + "\u003E" + (pug_escape(null == (pug_interp = post.userId) ? "" : pug_interp)) + "\u003C\u002Fspan\u003E "; } -pug_html = pug_html + "\u003C\u002Flabel\u003E\u003Cspan class=\"post-links\"\u003E\u003Ca" + (" class=\"no-decoration\""+pug_attr("href", `${postURL}#${post.postId}`, true, false)) + "\u003ENo.\u003C\u002Fa\u003E\u003Cspan class=\"post-quoters\"\u003E\u003Ca" + (" class=\"no-decoration\""+pug_attr("href", `${postURL}#postform`, true, false)) + "\u003E" + (pug_escape(null == (pug_interp = post.postId) ? "" : pug_interp)) + "\u003C\u002Fa\u003E"; +pug_html = pug_html + "\u003C\u002Flabel\u003E\u003Cspan class=\"post-links\"\u003E\u003Ca" + (" class=\"noselect no-decoration\""+pug_attr("href", `${postURL}#${post.postId}`, true, false)) + "\u003ENo.\u003C\u002Fa\u003E\u003Cspan class=\"post-quoters\"\u003E\u003Ca" + (" class=\"no-decoration\""+pug_attr("href", `${postURL}#postform`, true, false)) + "\u003E" + (pug_escape(null == (pug_interp = post.postId) ? "" : pug_interp)) + "\u003C\u002Fa\u003E"; if (!post.thread) { pug_html = pug_html + " \u003Cspan\u003E\u003Ca" + (pug_attr("href", `${postURL}#postform`, true, false)) + "\u003E[Reply]\u003C\u002Fa\u003E\u003C\u002Fspan\u003E"; } diff --git a/helpers/timeutils.js b/helpers/timeutils.js index c57a7eb3..17d645e8 100644 --- a/helpers/timeutils.js +++ b/helpers/timeutils.js @@ -1,7 +1,7 @@ 'use strict'; const YEAR = 31536000000 - , MONTH = 2592000000 + , MONTH = 2629800000 , WEEK = 604800000 , DAY = 86400000 , HOUR = 3600000 @@ -17,37 +17,60 @@ module.exports = { }, //string representing how long since date A to date B - 'relativeString': (currentTime, eventTime) => { - const difference = currentTime.getTime() - eventTime.getTime(); + 'relativeString': (now, relativeTo) => { + const difference = now.getTime() - relativeTo.getTime(); let amount = 0; let ret = ''; - let color; if (difference < MINUTE) { - return { color: '#39d6bc', text:'Now' }; + return 'Now'; } else if (difference < HOUR) { amount = Math.round(difference / MINUTE); - color = '#008000'; - ret += `${amount} minute` + ret += `${amount} minute`; } else if (difference < DAY) { amount = Math.round(difference / HOUR); - color = '#84c100'; - ret += `${amount} hour` + ret += `${amount} hour`; } else if (difference < WEEK) { amount = Math.round(difference / DAY); - color = '#fffd00'; ret += `${amount} day`; } else if (difference < MONTH) { amount = Math.round(difference / WEEK); - color = '#ff6700'; ret += `${amount} week`; } else if (difference < YEAR) { amount = Math.round(difference / MONTH); - color = '#ff0000'; ret += `${amount} month`; } else { - return { color: '#ff000047', text: 'More than a year ago' }; + return 'More than a year ago'; } - return { color, text: `${ret}${amount > 1 ? 's' : ''} ago` }; + return `${ret}${amount > 1 ? 's' : ''} ago`; + }, + + 'relativeColor': (now, relativeTo) => { + const difference = now.getTime() - relativeTo.getTime(); + let r = 0 + , g = 0 + , b = 0; + if (difference < MINUTE) { + g = 170; + b = 255; + } else if (difference < HOUR) { + r = (difference / HOUR) * 127; + g = 255; + } else if (difference < DAY) { + r = 127 + (difference / DAY) * 127; + g = 255; + } else if (difference < WEEK) { + g = 255 - (difference / WEEK) * 127; + r = 255; + } else if (difference < MONTH) { + g = 128 - (difference / MONTH) * 127; + r = 255; + } else if (difference < YEAR) { + r = 255 - (difference / YEAR) * 255 + } //else, leave it black for >1 year + r = (Math.round(r*0.85).toString(16)).padStart(2, '0'); + g = (Math.round(g*0.85).toString(16)).padStart(2, '0'); + b = (Math.round(b).toString(16)).padStart(2, '0'); + return `#${r}${g}${b}`; } }; diff --git a/models/pages/boardlist.js b/models/pages/boardlist.js index b64b02c1..739ea1b1 100644 --- a/models/pages/boardlist.js +++ b/models/pages/boardlist.js @@ -2,7 +2,7 @@ const { enableWebring } = require(__dirname+'/../../configs/main.js') , { Boards, Webring } = require(__dirname+'/../../db/') - , { relativeString } = require(__dirname+'/../../helpers/timeutils.js') + , { relativeColor, relativeString } = require(__dirname+'/../../helpers/timeutils.js') , pageQueryConverter = require(__dirname+'/../../helpers/pagequeryconverter.js') , limit = 20; @@ -51,14 +51,22 @@ module.exports = async (req, res, next) => { if (localBoards) { for (let i = 0; i < localBoards.length; i++) { if (localBoards[i].lastPostTimestamp) { - localBoards[i].lastPostTimestamp = relativeString(now, new Date(localBoards[i].lastPostTimestamp)); + const lastPostDate = new Date(localBoards[i].lastPostTimestamp); + localBoards[i].lastPostTimestamp = { + text: relativeString(now, lastPostDate), + color: relativeColor(now, lastPostDate) + } } } } if (webringBoards) { for (let i = 0; i < webringBoards.length; i++) { if (webringBoards[i].lastPostTimestamp) { - webringBoards[i].lastPostTimestamp = relativeString(now, new Date(webringBoards[i].lastPostTimestamp)); + const lastPostDate = new Date(webringBoards[i].lastPostTimestamp); + webringBoards[i].lastPostTimestamp = { + text: relativeString(now, lastPostDate), + color: relativeColor(now, lastPostDate) + } } } } diff --git a/views/mixins/post.pug b/views/mixins/post.pug index 4022b3b5..96431ff4 100644 --- a/views/mixins/post.pug +++ b/views/mixins/post.pug @@ -4,7 +4,7 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false) div(class=`post-container ${post.thread || ban === true ? '' : 'op'}` data-board=post.board data-post-id=post.postId data-user-id=post.userId) - const postURL = `/${post.board}/thread/${post.thread || post.postId}.html`; .post-info - label + label.noselect if globalmanage input.post-check(type='checkbox', name='globalcheckedposts' value=post._id) | @@ -40,7 +40,7 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false) span.user-id(style=`background-color: #${post.userId}`) #{post.userId} | span.post-links - a.no-decoration(href=`${postURL}#${post.postId}`) No. + a.noselect.no-decoration(href=`${postURL}#${post.postId}`) No. span.post-quoters a.no-decoration(href=`${postURL}#postform`) #{post.postId} if !post.thread