curiouser/main.js

main.js · 1.7 KiB · JavaScript Raw

(() => {
  // 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	})()