pleroma keyboard navigation

kbn.user.js

// ==UserScript==
// @name     KBN
// @version  1
// @grant    none
// @match    https://fedi.z0ne.moe/*
// ==/UserScript==


function l() {
  const args = Array.from(arguments)
  args.unshift("color: purple; background: #777; padding: 2px; border-radius: 2px;")
  args.unshift("%cKBN")
  console.log.apply(
    console,
    args
  )
}

l("starting up")


const style = document.createElement("style")
style.append(document.createTextNode(`
  .kbn-current {
		position: relative;
	}
	.kbn-current::after {
    content: " ";
    display: block;
    position: absolute;
    right: 0;
    height: 100%;
    width: 1rem;
    background: linear-gradient(to left, gold, rgba(0,0,0,0));
    top: 0;
	}
`))
document.body.append(style)

function nextStatus(el) {
  let container = el.parentElement
  
  while(container) {
    container = container.nextElementSibling
    if (container && container.children && container.children.length > 0) {
      return container.querySelector(".status-el")
    }
  }
  return null
}


function prevStatus(el) {
  let container = el.parentElement

  while(container) {
    container = container.previousElementSibling
    if (container && container.children && container.children.length > 0) {
      return container.querySelector(".status-el")
    }
  }
  
  return null
}

function scroll(el) {
  el.parentElement.scrollIntoView()
  window.scrollBy(0, -document.getElementById("nav").clientHeight)
}

document.body.addEventListener("keyup", ev => {
  const curr = document.querySelector(".kbn-current")

  if (!curr && (ev.key == "j" || ev.key == "k")) {
    const el = document.querySelector(".timeline > .status-el")
    el.classList.add("kbn-current")
  	return
  }
  let el = curr
  
  switch (ev.key) {
    case "j": // next
      el = nextStatus(el)
      if (el) {
        curr.classList.remove("kbn-current")
        el.classList.add("kbn-current")
        scroll(el)
      }
      break
      
    case "k": // prev
      el = prevStatus(el)
      if (el) {
        curr.classList.remove("kbn-current")
        el.classList.add("kbn-current")
        scroll(el)
      } else {
        document.querySelector(".timeline .loadmore-button").click()
      }
      break
      
    case "l": // love / favorite
			el.querySelector(".favorite-button").click()
      break
      
    case "h": // boost
			el.querySelector(".retweet-button").click()
      break
      
    case "r": // reply
			el.querySelector(".icon-reply").click()
      break
  }
}, true)