crazy-github-suggestions.js

(function () {
  'use strict'

  function getLi(username, name) {
    var li = document.createElement('li'),
      small = document.createElement('small')

    small.textContent = name
    li.className = 'js-navigation-item'
    li.setAttribute('data-mentionable-type', 'user')
    li.setAttribute('data-value', username)
    li.appendChild(document.createTextNode(username + ' '))
    li.appendChild(small)

    return li
  }

  function getImageLi(username, name) {
    var li = getLi(username, name),
      img = document.createElement('img')

    img.height = 20
    // isaacs <3
    img.src = 'https://avatars3.githubusercontent.com/u/9287?v=3&s=40'
    img.width = 20
    li.appendChild(document.createTextNode(' '))
    li.appendChild(img)

    return li
  }

  function handleClick(evt) {
    evt.stopImmediatePropagation()
    evt.stopPropagation()
    evt.preventDefault()
    console.log(evt)
  }

  // Mutate `dropdownNode` by adding `<li>` elements with click event listeners
  function addLisToDropdown(dropdownNode) {
    var li = getLi('user1', 'User One'),
      imageLi = getImageLi('user2', 'User Two'),
      crazy = document.createElement('li')

    crazy.style = 'background: hotpink;' +
      'height: 31px;' +
      'left: 0;' +
      'opacity: .5;' +
      'position: absolute;' +
      'top: 64px;' +
      'width: 100%'

    // Add a click listener to the `<li>` element
    crazy.addEventListener('click', handleClick)

    // Add a click listener to the `<img />` element
    imageLi.lastChild.addEventListener('click', handleClick)

    dropdownNode.style = 'position: relative'
    dropdownNode.appendChild(li)
    dropdownNode.appendChild(imageLi)
    dropdownNode.appendChild(crazy)
  }

  // initialize
  new MutationObserver(function mutationCallback(mutations) {
    mutations.forEach(function eachMutation(mutation) {
      mutation.addedNodes.forEach(function eachAddedNode(node) {
        if (node.classList && node.classList.contains('mention-suggestions')) {
          addLisToDropdown(node)
        }
      })
    })
  }).observe(
    document,
    {
      attributes: true,
      attributeFilter: ['class', 'classList'],
      childList: true,
      subtree: true
    }
  )
})()