main.js
· 1.7 KiB · JavaScript
Originalformat
(() => {
// cleanup and init
try {
document.querySelector('#virtual-timeline').parentNode.removeChild(document.querySelector('#selects'))
} catch {}
document.querySelector('#virtual-timeline').insertAdjacentHTML('beforebegin', '<div class="flex flex-wrap" id="selects"></div>')
const commentCountMap = new Map()
const commentThumbs = Array.from(document.querySelectorAll('#activity-panel img[alt*=commented]'))
const likeCountMap = new Map()
const likeThumbs = Array.from(document.querySelectorAll('#activity-panel img[alt*=liked]'))
const selects = document.querySelector('#selects')
const srcSet = new Set()
// count comments per img
commentThumbs.forEach(img => {
const count = commentCountMap.get(img.src) || 0
commentCountMap.set(img.src, count + 1)
srcSet.add(img.src)
})
// count likes per img
likeThumbs.forEach(img => {
const count = likeCountMap.get(img.src) || 0
likeCountMap.set(img.src, count + 1)
srcSet.add(img.src)
})
// map each img src to a tuple [ src, commentCount, likeCount ]
Array.from(srcSet)
.map(src => [
src,
commentCountMap.get(src) || 0,
likeCountMap.get(src) || 0,
])
// sort on likes, then comments DESC
.sort((a, b) => {
if (a[2] > b[2]) return -1
else if (a[2] < b[2]) return 1
else {
if (a[1] > b[1]) return -1
else if (a[1] < b[1]) return 1
}
return 0
})
// insert thumb into DOM with counts
.forEach(([ src, comments, likes ]) => {
selects.insertAdjacentHTML('beforeend', `<div style="flex: 0 0 50%;">
<img src="${src}" />
<span>${likes} likes</span>
<span>${comments} comments</span>
</div>`)
})
})()
| 1 | (() => { |
| 2 | // cleanup and init |
| 3 | try { |
| 4 | document.querySelector('#virtual-timeline').parentNode.removeChild(document.querySelector('#selects')) |
| 5 | } catch {} |
| 6 | document.querySelector('#virtual-timeline').insertAdjacentHTML('beforebegin', '<div class="flex flex-wrap" id="selects"></div>') |
| 7 | |
| 8 | const commentCountMap = new Map() |
| 9 | const commentThumbs = Array.from(document.querySelectorAll('#activity-panel img[alt*=commented]')) |
| 10 | const likeCountMap = new Map() |
| 11 | const likeThumbs = Array.from(document.querySelectorAll('#activity-panel img[alt*=liked]')) |
| 12 | const selects = document.querySelector('#selects') |
| 13 | const srcSet = new Set() |
| 14 | |
| 15 | // count comments per img |
| 16 | commentThumbs.forEach(img => { |
| 17 | const count = commentCountMap.get(img.src) || 0 |
| 18 | commentCountMap.set(img.src, count + 1) |
| 19 | srcSet.add(img.src) |
| 20 | }) |
| 21 | // count likes per img |
| 22 | likeThumbs.forEach(img => { |
| 23 | const count = likeCountMap.get(img.src) || 0 |
| 24 | likeCountMap.set(img.src, count + 1) |
| 25 | srcSet.add(img.src) |
| 26 | }) |
| 27 | |
| 28 | // map each img src to a tuple [ src, commentCount, likeCount ] |
| 29 | Array.from(srcSet) |
| 30 | .map(src => [ |
| 31 | src, |
| 32 | commentCountMap.get(src) || 0, |
| 33 | likeCountMap.get(src) || 0, |
| 34 | ]) |
| 35 | // sort on likes, then comments DESC |
| 36 | .sort((a, b) => { |
| 37 | if (a[2] > b[2]) return -1 |
| 38 | else if (a[2] < b[2]) return 1 |
| 39 | else { |
| 40 | if (a[1] > b[1]) return -1 |
| 41 | else if (a[1] < b[1]) return 1 |
| 42 | } |
| 43 | return 0 |
| 44 | }) |
| 45 | // insert thumb into DOM with counts |
| 46 | .forEach(([ src, comments, likes ]) => { |
| 47 | selects.insertAdjacentHTML('beforeend', `<div style="flex: 0 0 50%;"> |
| 48 | <img src="${src}" /> |
| 49 | <span>${likes} likes</span> |
| 50 | <span>${comments} comments</span> |
| 51 | </div>`) |
| 52 | }) |
| 53 | })() |