PixelJoint chatterbox autoupdater.

PJChatterbox.user.js

// ==UserScript==
// @name         Chatterbox refresher
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Makes chatterbox more of a chat than small forum page.
// @author       Yanrishatum
// @match        http://pixeljoint.com/pixels/chatterbox.asp
// @match        http://pixeljoint.com/pixels/chatterbox.asp*
// @updateURL    http://yanrishatum.ru/pj/scripts/PJChatterbox.user.js
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
  'use strict';
  var refreshRate = 1000 * 30; // 30 seconds.
  var refreshID = 0;
  var refreshing = false;
  
  var randomUpdateEach = 10;
  var randomCounter = 0;
  
  var lastId = document.querySelector("#leftblockspan .bx .rowbx").previousElementSibling.name;
  function refresh()
  {
    if (refreshing) return;
    refreshing = true;
    var req = new XMLHttpRequest();
    req.open("GET", "http://pixeljoint.com/pixels/chatterbox.asp");
    req.responseType = "document";
    req.onreadystatechange = function()
    {
      if (req.readyState === 4)
      {
        randomCounter++;
        if (req.status === 200) updateMessageList(req.response);
        if (refreshCheckbox.checked) refreshID = setTimeout(refresh, refreshRate);
        refreshing = false;
      }
    }
    req.send();
  }
  
  function onRefreshChange()
  {
    if (refreshing) return;
    if (!refreshCheckbox.checked)
    {
      clearTimeout(refreshID);
      refreshID = 0;
    }
    else if (refreshID == 0)
    {
      refreshID = setTimeout(refresh, refreshRate);
    }
  }
  
  var updated = 0;
  var title = document.title;
  function onPageFocused()
  {
    updated = 0;
    document.title = title;
  }
  window.addEventListener("focus", onPageFocused);
  
  function updateMessageList(doc)
  {
    
    var messages = doc.querySelectorAll("#leftblockspan .bx .rowbx");
    var i = 0;
    if (updateRandomCheckbox.checked && randomCounter >= randomUpdateEach)
    {
      randomCounter = 0;
      updateRandomArt(getRandomArtZone(doc));
    }
    
    var newMessages = 0;
    for (i = 0; i < messages.length; i++)
    {
      var id = messages[i].previousElementSibling.name;
      if (id == lastId)
      {
        newMessages = i;
      }
      updateMessage(id, messages[i]);
    }
    
    i = newMessages;
    
    while (i > 0)
    {
      i--;
      insertMessage(messages[i]);
      updated++;
    }
    if (updated > 0)
    {
      document.title = "(" + updated + ") " + title;
      var message = "You have " + updated + " unread message" + (updated != 1 ? "s" : "" ) + " in chat.";
      notify("PixelJoint chat", message);
    }
  }
  
  var checkboxDiv;
  function createCheckbox(text, checked, cookie)
  {
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.checked = checked;
    var label = document.createElement("label");
    label.appendChild(checkbox);
    label.appendChild(document.createTextNode(text));
    if (!checkboxDiv)
    {
      var rep = document.querySelector("#bxReplyTo");
      checkboxDiv = document.createElement("div");
      rep.parentElement.insertBefore(checkboxDiv, rep);
    }
    checkboxDiv.appendChild(label);
    if (cookie)
    {
      checkbox.checked = GM_getValue(cookie, checked);
      checkbox.addEventListener("change", function()
      {
        GM_setValue(cookie, checkbox.checked);
      });
    }
    return checkbox;
  }
  
  var notifySound = document.createElement("audio");
  notifySound.src = "http://yanrishatum.ru/web/got_item.ogg";
  notifySound.preload = "auto";
  var refreshCheckbox = createCheckbox("Refresh", true, "chatterbox_refresh");
  refreshCheckbox.addEventListener("change", onRefreshChange);
  var soundCheckbox = createCheckbox("Play sound", true, "chatterbox_sound");
  var notifyCheckbox = createCheckbox("Notification", true, "chatterbox_notify");
  var updateRandomCheckbox = createCheckbox("Update random pixel art (~5 minutes)", true, "chatterbox_random");
  function notify(title, data)
  {
    // Icon: http://pixeljoint.com/pixelart/63583.htm
    if (notifyCheckbox.checked && window.Notification)
    {
      if (Notification.permission === "granted")
      {
        new Notification(title, { body:data, icon:"http://pixeljoint.com/files/icons/preview_123d.gif" });
      }
      else if (Notification.permission !== "denied")
      {
        Notification.requestPermission(function(result)
        {
          if (result) notify(title, data);
        });
      }
    }
    if (soundCheckbox.checked) notifySound.play();
  }
  
  function markNew(msg)
  {
    if (!msg.classList.contains("new"))
    {
      msg.classList.add("new");
      msg.onmouseover = function()
      {
        msg.classList.remove("new");
      }
    }
  }
  
  function insertMessage(msg)
  {
    var id = msg.previousElementSibling.name;
    var lastAnchor = document.querySelector("a[name='" + lastId + "']");
    
    msg = msg.cloneNode(true);
    lastAnchor.parentElement.insertBefore(msg, lastAnchor);
    lastAnchor = document.createElement("a");
    lastAnchor.name = id;
    msg.parentElement.insertBefore(lastAnchor, msg);
    markNew(msg);
    lastId = id;
  }
  
  function updateMessage(id, data)
  {
    var msg = document.querySelector("a[name='" + id + "']");
    if (msg)
    {
      msg = msg.nextElementSibling
      var msgComm = msg.querySelector(".comment p");
      var dataComm = data.querySelector(".comment p");
      if (msgComm.innerHTML != dataComm.innerHTML)
      {
        msgComm.innerHTML = dataComm.innerHTML;
        markNew(msg);
        updated++;
      }
    }
  }
  
  function getRandomArtZone(doc)
  {
    var boxes = doc.querySelectorAll("#rightblock .bx");
    for (var i = 0; i < boxes.length; i++)
    {
      if (boxes[i].previousElementSibling.innerHTML == "Random Pixel Art")
      {
        return boxes[i];
      }
    }
    return null;
  }
  function updateRandomArt(data)
  {
    getRandomArtZone(document).innerHTML = data.innerHTML;
  }
  
  var css = document.createElement("style");
  css.innerHTML = ".rowbx.new { border: 1px black dotted; } ";
  document.head.appendChild(css);
  window.forceRefreshChat = refresh;
  window.notifyTest = notify;
  if (refreshCheckbox.checked) refreshID = setTimeout(refresh, refreshRate);
  console.log("Chatterbox live-updater loaded!");
  // setInterval(refresh, 1000 * 30); // At first ask every 2 minutes
})();