diff options
| -rw-r--r-- | public/assets/css/hootstream.css | 29 | ||||
| -rw-r--r-- | public/assets/js/lib/views/stream/hootstream.js | 14 | ||||
| -rw-r--r-- | public/assets/js/util/format.js | 12 |
3 files changed, 52 insertions, 3 deletions
diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css index e0d9e45..19141ba 100644 --- a/public/assets/css/hootstream.css +++ b/public/assets/css/hootstream.css @@ -272,6 +272,35 @@ caret-color: #888; } +/** Read more */ +#hootevents .readMore { + opacity: 0.7; + transition: opacity 0.1s, color 0.5s; +} +#hootevents a { + transition: opacity 0.1s, color 0.5s; +} +#hootevents .readMore:hover, +#hootevents a:hover { + opacity: 0.9; + animation: readMore 3600s infinite; + color: #38f; +} +@keyframes readMore { + 0% { + color: #38f; + } + 60% { + color: #8de; + } + 80% { + color: #def; + } + 100% { + color: #38f; + } +} + /** MEDIA QUERY: DARK MODE */ @media (prefers-color-scheme: dark) { .search_form input[type="text"]:focus { diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js index ed6de22..2de184a 100644 --- a/public/assets/js/lib/views/stream/hootstream.js +++ b/public/assets/js/lib/views/stream/hootstream.js @@ -27,6 +27,7 @@ var HootStream = View.extend({ case "userLink": case "threadLink": case "keywordLink": + case "readMore": event.preventDefault(); console.log(">>", url.pathname); app.router.pushState(url.pathname); @@ -44,7 +45,10 @@ var HootStream = View.extend({ function (item) { // console.log(item.type, item.thread_id); return item.type === "thread" - ? this.renderThread(threadLookup[item.thread_id]).reduce( + ? this.renderThread({ + ...threadLookup[item.thread_id], + query: data.query, + }).reduce( ($el, $item) => $el.append($item), $("<div class='thread'>") ) @@ -119,13 +123,14 @@ var HootStream = View.extend({ return els; }, - renderThread: function ({ thread, comments, files, images }) { + renderThread: function ({ query, thread, comments, files, images }) { if (!thread || !thread.length) { console.error("Missing thread"); console.error(thread, comments, files, images); return ["<div>Missing thread!</div>"]; } thread = thread.shift(); + const isViewingThread = query.thread === thread.id; // console.log(thread, comments, files, images); const postedToday = +new Date() / 1000 - thread.lastmodified < 86400; const age_opacity = get_age_opacity(thread.lastmodified); @@ -146,7 +151,10 @@ var HootStream = View.extend({ comment_opacity: age_opacity * get_size_opacity(comments.length), }), this.renderFiles(postedToday ? files : files.slice(0, 10)), - ...this.renderHoots({ hoots: comments.slice(0, 1), tag: "first_post" }), + ...this.renderHoots({ + hoots: comments.slice(0, 1).map(trimComment(isViewingThread)), + tag: "first_post", + }), ...this.renderHoots({ hoots: postedToday ? comments.slice(1) : comments.slice(1).slice(-5), }), diff --git a/public/assets/js/util/format.js b/public/assets/js/util/format.js index 55b57c2..54ebf9c 100644 --- a/public/assets/js/util/format.js +++ b/public/assets/js/util/format.js @@ -301,6 +301,18 @@ function get_scale_opacity(value, scale) { } return scale[scale.length - 1][1]; } +function trimComment(isViewingThread) { + return function (comment) { + return isViewingThread || comment.comment.length < 1024 + ? comment + : { + ...comment, + comment: + comment.comment.substr(0, 1024).replace(/\s+\w+$/, "") + + `... <a href="/stream/thread/${comment.thread}" class="readMore">Read more...</a>`, + }; + }; +} function tidy_urls(s, short_urls) { var ret = s |