background.js

(function () {
  loadDragDrop()
  var ignoreList = localStorage.getItem("ignoreList") ? JSON.parse(localStorage.getItem("ignoreList")) : [];

  ignoreAllUsers()
  
  var Command = function (name, callback) {
    this.name = name
    this.callback = callback
    this.isEnabled = false
    this.execute = function (parameters) {
      if (this.isEnabled)
        this.callback(parameters)
    }
    this.setEnabled = function (value) {
      this.isEnabled = value
    }
  }

  function findCommand(name) {
    return commands.hasOwnProperty(name) ?
      commands[name] :
      undefined
  }

  var displayPop = true
  var pluginEnabled = true

  var commands = {
    collapse: new Command('collapse', collapseAll),
    uncollapse: new Command('uncollapse', unCollapseAll),
    shruggie: new Command('shruggie', shruggie),
    norris: new Command('norris', getNorris),
    skeet: new Command('skeet', getSkeet),
    cat: new Command('cat', getCat),
    dog: new Command('dog', getDog),
    replyLast: new Command('replyLast', replyLast),
    giphy: new Command('giphy', giphyStuff),
    glink: new Command('glink', giphyShorten),
    ignore: new Command('ignore', ignoreUser),
    coin: new Command('coin', flipACoin),
    dice: new Command('dice', rollADice),
    unignore: new Command('unignore', unignoreUser),
    star: new Command('star', starLast),
    time: new Command('time', time),
    sound: new Command('sound', playSound),
    xkcd: new Command('xkcd', getXKCD),
    reddit: new Command('reddit', reddit),
    kiddo: new Command('kiddo', kiddo),
    tableflip: new Command('tableflip', tableflip),
    settable: new Command('settable', settable),
    disapprove: new Command('disapprove', disapprove),
    ayfkm: new Command('ayfkm', ayfkm),
    thinking: new Command('thinking', thinking),
    lenny: new Command('lenny', lenny)
  }

  chrome.storage.sync.get({
    commands: [],
    pluginEnabled: true,
    displayPopup: true,
  }, function (items) {
    for (var i = 0; i < items.commands.length; i++) {
      var tempCommand = findCommand(items.commands[i].name)
      if (tempCommand) {
        tempCommand.setEnabled(items.commands[i].isEnabled)
      }
    }
    displayPop = items.displayPopup
    pluginEnabled = items.pluginEnabled
  })

  function clearInput() {
    input.value = ''
  }

  function sendMessage(message) {
    input.value = message
    document.getElementById('sayit-button').dispatchEvent(new MouseEvent('click'))
  }

  function sendLink(name, url) {
    input.value = "[" + name + "]" + "(" + url + ")"
    document.getElementById('sayit-button').dispatchEvent(new MouseEvent('click'))
  }

  function removePopup() {
    var popup = document.getElementById('commands-popup')
    if (popup)
      popup.parentNode.removeChild(popup)
  }

  function commandClicked() {
    input.value = "/" + this.innerHTML
    input.focus()
    removePopup()
  }

  function ignoreAllUsers() {
    [...document.getElementsByClassName('username')].forEach(el => removeIgnoredUsers(el))
  }

  function displayPopup(possibleCommands) {
    if (displayPop) {

      var popup = document.getElementById('commands-list')

      if (popup) {
        while (popup.firstChild) {
          popup.removeChild(popup.firstChild)
        }

        for (var i = 0; i < possibleCommands.length; i++) {
          var tempCommand = document.createElement('span')
          tempCommand.style = 'margin: 4px; cursor: pointer; display: block; float: left;'
          tempCommand.innerHTML = possibleCommands[i]
          tempCommand.onclick = commandClicked
          popup.appendChild(tempCommand)
        }
      } else {
        var element = document.createElement("div")

        element.id = "commands-popup"
        element.className = "popup"
        element.style = "position: absolute; left: 0; top: 0; width: 600px; transform:translateY(-100%);"

        var inputArea = document.getElementById('input-area')

        var closeButton = document.createElement('div')
        closeButton.className = 'btn-close'
        closeButton.id = 'close-commands-popup'
        closeButton.innerHTML = 'X'

        closeButton.onclick = removePopup

        var commandsList = document.createElement('ul')
        commandsList.className = 'commands-list'
        commandsList.id = 'commands-list'
        commandsList.style = 'list-style-type: none; padding: 4px;'

        for (var i = 0; i < possibleCommands.length; i++) {
          var tempCommand = document.createElement('li')
          tempCommand.style = 'margin: 4px; cursor: pointer; display: block; float: left;'
          tempCommand.innerHTML = possibleCommands[i]
          tempCommand.onclick = commandClicked
          commandsList.appendChild(tempCommand)
        }

        element.appendChild(closeButton)
        element.appendChild(commandsList)

        inputArea.appendChild(element)
      }
    }
  }

  var targetNode = document.querySelector("#main #chat")
  Array.from(targetNode.querySelectorAll('.user-container .message')).forEach(parseForYouTube)
  const observerConfig = {
    childList: true,
    subtree: true
  }
  const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      mutation.addedNodes.forEach(function (node) {
        removeIgnoredUsers(node)
        parseForYouTube(node)
      })
    })
  })
  observer.observe(targetNode, observerConfig)
  window.addEventListener('keydown', e => {
    if (!pluginEnabled)
      return

    var key = e.which || e.keyCode
    if (input.value[0] === '/' && key === 8) {
      removePopup()
    }

    if (key === 9 && document.getElementById('commands-list')) { // "tab"
      var allComands = document.getElementById('commands-list').querySelectorAll('span')
      var currCommand = document.getElementById('commands-list').querySelector('.curr-command')
      var direction = e.shiftKey ? 'previousSibling' : 'nextSibling'
      var newCommand

      if (currCommand === null) {
        newCommand = allComands[0]
      } else if (currCommand[direction] === null) {
        newCommand = direction === 'nextSibling' ? allComands[0] : allComands[allComands.length - 1]
      } else {
        newCommand = currCommand[direction]
      }

      if (currCommand) {
        currCommand.className = ''
      }

      if (newCommand) {
        newCommand.className = 'curr-command'
      }
      e.preventDefault()
    } else if (input.value[0] === '/' && key === 13) { // "Enter"
      var currCommand = document.getElementById('commands-list') ?
        document.getElementById('commands-list').querySelector('.curr-command') :
        null

      if (currCommand) {
        e.stopPropagation()

        commandClicked.call(currCommand)
      } else {
        var enteredText = input.value.trim()
        var data = enteredText.split(/\s+/)
        var commandName = data.length > 0 ? data[0].substring(1) : ''

        e.stopPropagation()
        var additionalParameters = data.length > 1 ? data.slice(1) : []
        var tempCommand = findCommand(commandName)
        if (tempCommand) {
          tempCommand.execute(additionalParameters)
        } else {
          sendMessage(enteredText)
        }

        clearInput()
      }

      removePopup()
      e.preventDefault()
    }
  }, true)

  window.addEventListener('keyup', e => {
    if (!pluginEnabled)
      return

    var key = e.which || e.keyCode
    var ignoreKeys = [9, 13, 16] // ignore "shift", "enter" and "tab" keys

    if (ignoreKeys.indexOf(key) === -1 && input.value[0] === '/') {
      var enteredText = input.value
      var data = enteredText.split(/\s+/)
      var commandName = data.length > 0 ? data[0].substring(1) : ''

      if (data.length > 1) {
        removePopup()
      } else {
        var possibleCommands = []
        Object.keys(commands).forEach(function (command) {
          if (command.indexOf(commandName) >= 0 && commands[command].isEnabled) {
            possibleCommands.push(command)
          }
        })

        displayPopup(possibleCommands.sort())

        if (possibleCommands.length === 0)
          removePopup()
      }
    }
  }, true)

  //NEVER GONNA GIVE YOU UP
  //NEVER GONNA LET YOU DOWN
  //Meow
  //Honestly it's self explanatory
  //tristanwiley.com
  function collapseAll() {
    Array.from(document.querySelectorAll('.content')).forEach(content => {
      const onebox = content.querySelector('.onebox')
      if (onebox) {
        onebox.hidden = true
      }
    })
  }

  function unCollapseAll() {
    Array.from(document.querySelectorAll('.content')).forEach(content => {
      const onebox = content.querySelector('.onebox')
      if (onebox) {
        onebox.hidden = false
      }
    })
  }

  function shruggie() {
    sendMessage('¯\\\\_(ツ)_/¯')
  }

  function getNorris() {
    fetch(`https://api.chucknorris.io/jokes/random`)
      .then(response => response.json())
      .then(json => {
        var joke = json.value
        sendMessage(joke)
      })
  }

  function getSkeet() {
    fetch(`https://jsonp.afeld.me/?url=http://tristanwiley.com/labs/skeet/v1/`)
      .then(response => response.json())
      .then(json => {
        var joke = json.JOKES
        sendMessage(joke)
      })
  }

  function giphyStuff(parameters) {
    var searchText = encodeURI(parameters.join(' '))

    fetch(`https://api.giphy.com/v1/gifs/search?q=${searchText}&api_key=hjd2o9jr9kr7i3Fmi5511XRQNSnLTiuX`)
      .then(response => response.json())
      .then(json => {
        const item = json.data[Math.floor(Math.random()*json.data.length)];
        const url = item.images.fixed_height.url
        sendMessage("!" + url)
      })
  }

  function giphyShorten(parameters) {
    var linkText = ""
    for (var i = 0; i < parameters.length - 1; i++) {
      if (parameters[i] == "--name") {
        linkText = parameters[i + 1]
        parameters.splice(i, 2)
      }
    }
    var searchText = encodeURI(parameters.join(' '))

    fetch(`https://api.giphy.com/v1/gifs/search?q=${searchText}&api_key=hjd2o9jr9kr7i3Fmi5511XRQNSnLTiuX`)
      .then(response => response.json())
      .then(json => {
        const item = json.data[Math.floor(Math.random()*json.data.length)];
        const url = item.images.fixed_height.url
        sendLink(linkText || parameters.join(' '), url)
      })
  }

  function replyLast(parameters) {
    var username = parameters[0].replace(/\s/g, '')
    var message = parameters.slice(1).join(' ')
    var signatures = document.getElementsByClassName('tiny-signature')

    for (var i = signatures.length - 1; i > 0; --i) {
      var item = signatures[i]
      var itemusername = item.getElementsByClassName('username')[0].innerHTML.replace(/\s/g, '')

      if (username == itemusername) {
        var parent = item.parentNode.parentNode
        var elements = parent.getElementsByClassName('messages')[0].getElementsByClassName('message')
        var id = elements[elements.length - 1].id.replace('message-', '')
        var send = ":" + id + " " + message

        sendMessage(send)

        break
      }
    }
  }

  // The time spent adding random comments could actually have been used to put in helpful comments.
  function getCat(parameters) {
    var type = parameters[0]
    if (!['gif', 'png', 'jpg'].includes(type)) {
      type = "jpg"
    }
    fetch(`https://api.thecatapi.com/v1/images/search?mime_types=` + type)
      .then(response => response.json())
      .then(json => {
        var url = json[0]['url']
        sendMessage(url)
      })
  }

  // The cat api is down, so now to add /dog just in case
  function getDog(parameters) {
    // var type = parameters[0]
    // if (!['gif', 'png', 'jpg'].includes(type)) {
    //     type = "jpg,png"
    // }
    fetch('https://dog.ceo/api/breeds/image/random')
      .then(response => response.json())
      .then(json => {
        var url = json['message']
        sendMessage(url)
      })
  }

  function removeIgnoredUsers(node) {
    if (!node.innerText) return
    let name = ""

    if (node) {
      name = normalizeName(node.innerText)
    }
    if (ignoreList.indexOf(name) != -1) {
      node.closest('.user-container').remove()
    }
  }

  function ignoreUser(parameters) {
    var parts = parameters
    var time = parts[parts.length - 1].match(/^\d+$/) ? parseInt(parts[parts.length - 1]) : -1
    var end = parts.length

    if (time != -1) {
      end = parts.length - 1
    }

    var name = parts.slice(0, end).join("")

    if (name.charAt(0) == "@")
      name = name.slice(1)

    if (ignoreList.indexOf(name) == -1) {
      ignoreList.push(name)
      updateStore()

      if (time != -1 && time > 0) {
        displayMessage(`${name} has been muted for ${time} minutes`)
        setTimeout(() => {
          ignoreList = ignoreList.filter(function (item) {
            return item != name
          })
          displayMessage(`${name} has been unmuted`)
          updateStore()
        }, time * 60000)
      } else {
        displayMessage(`${name} has been muted`)
      }
    } else {
      displayMessage(`${name} is already muted`)
    }

    ignoreAllUsers()
  }

  function flipACoin() {
    if (Math.floor(Math.random() * 2) == 0) {
      sendMessage("I flipped a coin and it was heads")
    } else {
      sendMessage("I flipped a coin and it was tails")
    }
  }

  function rollADice() {
    sendMessage("I rolled a die and it was a " + Math.floor(Math.random() * 6 + 1))
  }

  function displayMessage(message) {
    console.log("#displayMessage:  " + message)
    var messageNode = document.createElement("div")
    messageNode.textContent = message
    messageNode.classList.add("user-container")
    targetNode.appendChild(messageNode)
  }

  function unignoreUser(parameters) {
    var name = parameters.join("")

    if (name.charAt(0) == "@")
      name = name.slice(1)

    const oldLength = ignoreList.length
    ignoreList = ignoreList.filter(function (item) {
      return item != name
    })
    updateStore()

    if (oldLength > ignoreList.length) {
      displayMessage(`${name} has been unmuted`)
    } else {
      displayMessage(`${name} is not muted`)
    }
  }

  function normalizeName(name) {
    return name.split(" ").join("")
  }

  function updateStore() {
    localStorage.setItem("ignoreList", JSON.stringify(ignoreList))
  }

  function flipACoin() {
    if (Math.floor(Math.random() * 2) == 0) {
      sendMessage("I flipped a coin and it was heads")
    } else {
      sendMessage("I flipped a coin and it was tails")
    }
  }

  function rollADice() {
    sendMessage("I rolled a die and it was a " + Math.floor(Math.random() * 6 + 1))
  }

  function starLast() {
    var stars = document.querySelectorAll('.message .meta .stars .vote')
    if (stars && stars.length > 0)
      stars[stars.length - 1].dispatchEvent(new MouseEvent('click'))
  }

  function time() {
    sendMessage("It is " + Date())
  }

  function getXKCD(parameters) {
    if (parameters.length == 0) {
      fetch(`https://jsonp.afeld.me/?url=http://xkcd.com/info.0.json`)
        .then(response => response.json())
        .then(json => {
          sendMessage(json.img)
        })
    } else if (parameters.length > 0) {
      if (parameters[0] === 'random') {
        fetch(`https://jsonp.afeld.me/?url=http://xkcd.com/info.0.json`)
          .then(response => response.json())
          .then(json => {

            var num = json.num
            var randomNumber = Math.floor(Math.random() * num + 1)
            var url = "http://xkcd.com/" + randomNumber + "/info.0.json"
            fetch(`https:/jsonp.afeld.me/?url=` + url)
              .then(response => response.json())
              .then(json => {
                sendMessage(json.img)
              })
          })
      } else {
        var number = Number(parameters[0])
        if (number && number != NaN) {
          var url = "http://xkcd.com/" + number + "/info.0.json"
          fetch(`https://jsonp.afeld.me/?url=` + url)
            .then(response => response.json())
            .then(json => {
              sendMessage(json.img)
            })
        }
      }
    }
  }

  function playSound() {
    var players = document.getElementsByTagName("audio")
    if (players && players.length > 0) {
      players[0].pause()
      players[0].currentTime = 0
      players[0].play()
    }
  }

  //The following code is written just for testing purposes
  //and should NEVER be used in chat.stackexchange.com!
  //Yeah, it works...
  function nuke(parameters) {
    var users = document.querySelectorAll("#present-users .present-user .avatar img")
    var message = ""
    for (var i = 0; i < users.length; i++)
      message += "@" + users[i].getAttribute("title") + " "
    sendMessage(message + parameters.join(" "))
  }

  function reddit(parameters) {
    if (parameters.length < 1) {
      //Display random subreddit link
      sendMessage("Click [here](https://www.reddit.com/r/random) to go to random subreddit.")
    } else if (parameters.length < 2) {
      //Display link to subreddit
      var subredditName = parameters[0]
      if (subredditName.length > 0)
        sendLink("/r/" + subredditName, "https://reddit.com/r/" + subredditName)
    } else {
      //Display new or top post from subreddit
      var subredditName = parameters[0]
      var type = parameters[1] //Can only be "new", "hot" or "top" at the moment
      if (subredditName.length > 0 && type.length > 0) {
        if (type === "new") {
          var url = "https://www.reddit.com/r/" + subredditName + "/new.json"
          fetch(`https://jsonp.afeld.me/?url=` + url)
            .then(response => response.json())
            .then(json => {
              var posts = json.data.children
              if (posts && posts.length > 0) {
                var post = posts[0].data
                var title = post.title.trim().replace("[", "\\[").replace("]", "\\]")
                var url = post.url
                var subreddit = post.subreddit
                sendMessage("Newest post in subreddit **/" + subreddit + "**: [" + title + "](" + url + ")")
              }
            })
        } else if (type === "hot") {
          var url = "https://www.reddit.com/r/" + subredditName + "/hot.json"
          fetch(`https://jsonp.afeld.me/?url=` + url)
            .then(response => response.json())
            .then(json => {
              var posts = json.data.children
              if (posts && posts.length > 0) {
                var post = posts[0].data
                var title = post.title.trim().replace("[", "\\[").replace("]", "\\]")
                var url = post.url
                var subreddit = post.subreddit
                sendMessage("Hottest post in subreddit **/" + subreddit + "** at the moment: [" + title + "](" + url + ")")
              }
            })
        } else if (type === "top") {
          var url = "https://www.reddit.com/r/" + subredditName + "/top.json"
          fetch(`https://jsonp.afeld.me/?url=` + url)
            .then(response => response.json())
            .then(json => {
              var posts = json.data.children
              if (posts && posts.length > 0) {
                var post = posts[0].data
                var title = post.title.trim().replace("[", "\\[").replace("]", "\\]")
                var url = post.url
                var subreddit = post.subreddit
                sendMessage("Top post in subreddit **/" + subreddit + "** in the last 24 hours: [" + title + "](" + url + ")")
              }
            })
        }
      }
    }
  }

  function kiddo() {
    sendMessage("(☞ﾟヮﾟ)☞ That's where you're wrong kiddo")
  }

  function tableflip() {
    sendMessage("(╯°□°)╯︵ ┻━┻")
  }

  function settable() {
    sendMessage("┬─┬ノ( º _ ºノ)")
  }

  function disapprove() {
    sendMessage("ಠ_ಠ")
  }

  function ayfkm() {
    sendMessage("http://i.imgur.com/KUlWVoe.png")
  }

  function thinking() {
    sendMessage("http://i.imgur.com/K5MtVMt.png")
  }

  function lenny() {
    sendMessage('(͡° ͜ʖ ͡°)')
  }

  function parseForYouTube(node) {
    if (!node.classList || !node.classList.contains('message') || node.classList.contains('pending')) return
    const yt = node.querySelector('.onebox.ob-youtube')
    if (!yt) return
    const link = yt.querySelector('a')
    let videoHref
    if (/(youtu\.?be)\/.+$/.test(link.href)) {
      videoHref = link.href.split('/').pop()
    } else {
      videoHref = link.href.match(/v\=(.*)&?/).pop().replace(/&/, '/?')
    }
    const vid = document.createElement('iframe')
    vid.setAttribute('height', 240)
    vid.setAttribute('width', 320)
    vid.setAttribute('frameborder', 0)
    vid.setAttribute('allowfullscreen', 'true')
    vid.src = '//youtube.com/embed/' + videoHref
    yt.parentNode.replaceChild(vid, yt)
  }
  function loadDragDrop() {
    var dropZone = document.getElementById('input')

    // Optional. Show the copy icon when dragging over. Seems to only work for chrome.
    dropZone.addEventListener('dragover', e => {
      e.stopPropagation()
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
      document.getElementById('input').style = 'background-color: antiquewhite;'
    })

    dropZone.addEventListener('dragleave', e => {
      e.stopPropagation()
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
      document.getElementById('input').style = 'background-color: #fbf2d9;'
    })

    // Get file data on drop
    dropZone.addEventListener('drop', e => {
      e.stopPropagation()
      e.preventDefault()
      const file = e.dataTransfer.files[0]

      const formData = new FormData()
      formData.append(file.name, file)

      fetch('/upload/image', {
        method: 'POST',
        body: formData,
      })
        .then(response => response.text())
        .then(text => {
          const imgurURL = text.match("var result = '(.*)';")[1]
          sendMessage(imgurURL)
        })
    })
  }
})()