crafting_interpreters_bookmarklet.js

// for https://craftinginterpreters.com to re-align aside elements after using a translation service
// copy & paste whole script into a tool like https://chriszarate.github.io/bookmarkleter/
// to make it a convenient bookmarklet
const AVOID_CONFLICT_NAME = '__aside_listeners'
const handles = window[AVOID_CONFLICT_NAME]|| []
handles.forEach(it=>it())
$('aside').each(function(){
  const cur = $(this)

  let prev = cur.prev();
  while(prev.css('display') === 'none'){
    prev = prev.prev()
  }
  if (prev[0].nodeName.toLowerCase() === 'aside'){
    cur.css('top', prev.position().top + prev.height() + 10)
  } else {
    cur.css('top', prev.position().top)
  }

  function mouseIn(){
    cur.css('background', '#FFFFFFF8')
    cur.css('z-index', '100')
  }
  function mouseOut(){
    cur.css('background', 'transparent')
    cur.css('z-index', '')
  }
  prev.on('mouseenter', mouseIn).on('mouseleave', mouseOut)
  handles.push(()=>{
    prev.off('mouseenter', mouseIn).off('mouseleave', mouseOut)
  })
});
window[AVOID_CONFLICT_NAME]= handles