rDrama
/
rDrama
9
10
Fork 7
Code Issues Pull Requests Packages Releases Wiki Activity

Add unread comments counter to submission listing and submission

remotes/1693045480750635534/spooky-22
Yo Mama 2021-09-27 18:58:29 +02:00
parent 2cb566009d
commit 54007e91cb
4 changed files with 125 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
files/templates/comments.html
View File

@ -383,11 +383,6 @@
{% macro single_comment(c, level=1) %}
<!---beginning of comment {{c.id}}--->
<script>
var date = new Date('{{c.created_datetime}}');
document.getElementById('timestamp-{{c.id}}').title = date.toString();
</script>
{% set ups=c.upvotes %}
{% set downs=c.downvotes %}
{% set score=ups-downs %}
@ -882,6 +877,13 @@
{% endif %}
<script>
(() => {
const date = new Date('{{c.created_datetime}}');
document.getElementById('timestamp-{{c.id}}').title = date.toString();
})()
</script>
{% endmacro %}
{% for comment in comments %}

77
files/templates/default.html
View File

@ -207,6 +207,83 @@
}
}
// New comment counts
// comment counts format: {"123412": {c: 12, t: 23532456263}}
const COMMENT_COUNTS_ID = "comment-counts"
/**
* Display the number of new comments present since the last time the post was opened
*/
function showNewCommentCounts(postId, lastTotalComs) {
const comments = JSON.parse(localStorage.getItem(COMMENT_COUNTS_ID)) || {}
const lastCount = comments["" + postId]
if (lastCount) {
const newComments = lastTotalComs - lastCount.p
if (newComments > 0) {
document.querySelectorAll(`#post-${postId} .new-comments`).forEach(elem => {
elem.textContent = ` (+${newComments})`
elem.classList.remove("d-none")
})
}
}
}
/**
* Saves the comment count to the localStorage
*
* @param postId The id of the post associated with the comments
* @param lastTotalComs The new amount, If null it will just increment the previous amount
*/
function saveCommentsCount(postId, lastTotalComs = null) {
const comments = JSON.parse(localStorage.getItem(COMMENT_COUNTS_ID)) || {}
lastTotalComs = lastTotalComs || (comments["" + postId] || { c: 0 }).c + 1
comments["" + postId] = { p: lastTotalComs, t: Date.now() }
window.localStorage.setItem(COMMENT_COUNTS_ID, JSON.stringify(comments))
//TODO: increment count on submit response and new comment
//TODO: restrict on display unread comments flag
}
/**
* Cleans the expired entries (5 days). It runs every hour.
*/
function cleanCommentsCache() {
const LAST_CACHE_CLEAN_ID = "last-cache-clean"
const EXPIRE_INTERVAL_MILLIS = 5 * 24 * 60 * 60 * 1000
const CACHE_CLEAN_INTERVAL = 60 * 60 * 1000 // 1 hour
function cleanCache() {
const lastCacheClean = JSON.parse(localStorage.getItem(LAST_CACHE_CLEAN_ID)) || Date.now()
const now = Date.now()
if (now - lastCacheClean > CACHE_CLEAN_INTERVAL) {
const comments = JSON.parse(localStorage.getItem(COMMENT_COUNTS_ID)) || {}
for (let [key, value] of Object.entries(comments)) {
if (now - value.t > EXPIRE_INTERVAL_MILLIS) {
delete comments[key]
}
}
window.localStorage.setItem(COMMENT_COUNTS_ID, JSON.stringify(comments))
}
window.localStorage.setItem(LAST_CACHE_CLEAN_ID, JSON.stringify(now))
}
// So it does not slow the load of the main page with the clean up
setTimeout(cleanCache, 500)
}
cleanCommentsCache()
</script>
{% endif %}

39
files/templates/submission.html
View File

@ -76,15 +76,6 @@
</script>
{% endif %}
<script>
var date = new Date('{{p.created_datetime}}');
document.getElementById('timestamp').title = date.toString();
{% if p.edited_utc %}
var date = new Date('{{p.edited_datetime}}');
document.getElementById('edited_timestamp').title = date.toString();
{% endif %}
</script>
<meta charset="utf-8" />
<meta property="og:type" content="article" />
@ -450,7 +441,12 @@
<div class="post-actions mt-2">
<ul class="list-inline text-right d-flex">
<li class="list-inline-item"><a {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}><i class="fas fa-comment-dots"></i>{{p.comment_count}}</a></li>
<li class="list-inline-item">
<a {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}>
<i class="fas fa-comment-dots"></i>{{p.comment_count}}
<span class="text-info d-none new-comments"></span>
</a>
</li>
{% if v and v.id==p.author_id %}
{% if p.private %}
@ -592,7 +588,12 @@
<div class="post-actions">
<ul class="list-inline text-right d-flex">
<li class="list-inline-item mr-auto"><a {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}><i class="fas fa-comment-dots"></i>{{p.comment_count}}</a></li>
<li class="list-inline-item mr-auto">
<a {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}>
<i class="fas fa-comment-dots"></i>{{p.comment_count}}
<span class="text-info d-none new-comments"></span>
</a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" role="button" class="copy-link" data-clipboard-text="{% if 'rdrama' in request.host %}https://taytay.life{{p.permalink}}{% else %}{{p.permalink | full_link}}{% endif %}"><i class="fas fa-link"></i>Copy link</a></li>
{% if v %}
@ -734,6 +735,22 @@
</div>
<script>
// closure to avoid variable conflicts
(() => {
const date = new Date('{{p.created_datetime}}');
document.getElementById('timestamp').title = date.toString();
{% if p.edited_utc %}
const dateEdited = new Date('{{p.edited_datetime}}');
document.getElementById('edited_timestamp').title = dateEdited.toString();
{% endif %}
showNewCommentCounts({{p.id}}, {{p.comment_count}})
saveCommentsCount({{p.id}}, {{p.comment_count}})
})()
</script>
{% if v and v.id==p.author_id %}
{% include "delete_post_modal.html" %}
{% endif %}

22
files/templates/submission_listing.html
View File

@ -17,15 +17,6 @@
{% for p in listing %}
<script>
var date = new Date('{{p.created_datetime}}');
document.getElementById('timestamp-{{p.id}}').title = date.toString();
{% if p.edited_utc %}
var date = new Date('{{p.edited_datetime}}');
document.getElementById('edited_timestamp-{{p.id}}').title = date.toString();
{% endif %}
</script>
{% set ups=p.upvotes %}
{% set downs=p.downvotes %}
{% set score=ups-downs %}
@ -400,6 +391,19 @@
</div>
<script>
(() => {
const date = new Date('{{p.created_datetime}}');
document.getElementById('timestamp-{{p.id}}').title = date.toString();
{% if p.edited_utc %}
const dateEdited = new Date('{{p.edited_datetime}}');
document.getElementById('edited_timestamp-{{p.id}}').title = dateEdited.toString();
{% endif %}
showNewCommentCounts({{p.id}}, {{p.comment_count}})
})()
</script>
{% if p.active_flags %}
<div id="flaggers-{{p.id}}" class="flaggers d-none">
<strong><i class="far fa-fw fa-flag"></i> Reported by:</strong>