Userscripts.org

I realise that the code for this particular script is not easy to understand, and the code that does the work is entirely undocumented, so I'm going to run through it here for you.

The main greasemonkey script looks like this:

==========================================================================

// Create functions to be inserted into the document head
var newScript= document.createTextNode("\nvar arrVerbage = [\"Leave unmoderated\",\n                \"Burn this user's karma!\",\n                \"Burn this user's karma!\",\n                \"Burn this troll's karma!\",\n                \"Burn this user's karma!\",\n                \"Mod up!\",\n                \"Mod up!\",\n                \"Mod up!\",\n                \"LOLZ!\",\n                \"Mod Down!\",\n                \"Mod up!\"]\nfunction writeConfirmation(object)\n{\n   var id = object.id;\n   var selectedValue=object.value;\n   if(!document.getElementById(\"bttn_\" + id))\n   {\n      var parentDiv = object.parentNode;\n      var button = document.createElement(\"button\");\n\n      button.appendChild(document.createTextNode(arrVerbage[selectedValue]));\n      button.setAttribute(\"onclick\",\"doTheModThing(document.getElementById(\\\"\" + id + \"\\\"));\");\n      button.setAttribute(\"id\",\"bttn_\" + id);\n      parentDiv.appendChild(button);\n   }\n   else\n   {\n      if(selectedValue == 0)\n         document.getElementById(\"bttn_\" + id).parentNode.removeChild(document.getElementById(\"bttn_\" + id));\n        else\n         document.getElementById(\"bttn_\" + id).innerHTML = arrVerbage[selectedValue];\n   }\n}\n\nvar doTheModThing = D2.doModerate;\nD2.doModerate = function(obj) { writeConfirmation(obj);}\n");

// Create the element
var newNode = document.createElement("script");
newNode.appendChild(newScript);

// Insert the code and watch it go!
document.getElementsByTagName("head").item(0).appendChild(newNode);

Simple-looking enough if word-wrap isn't on, but nasty if it is. Here are the parts:

1)
==========================================================================

// Create functions to be inserted into the document head
var newScript= document.createTextNode(<script to add to the head tag of slashdots article.pl>);

// Create the element
var newNode = document.createElement("script");
newNode.appendChild(newScript);

// Insert the code and watch it go!
document.getElementsByTagName("head").item(0).appendChild(newNode);

Fairly straight-forward stuff, as long as you are used to using the childNode/parentNode method of working with xml and xhtml.

2)
==========================================================================

// Array of labels for the button to be inserted next to the moderation selectbox

// The value of the selectbox (0-10) matches the index of the array

var arrVerbage = ["Leave unmoderated",

                "Burn this user's karma!",

                "Burn this user's karma!",

                "Burn this troll's karma!",

                "Burn this user's karma!",

                "Mod up!",

                "Mod up!",

                "Mod up!",

                "LOLZ!",

                "Mod Down!",

                "Mod up!"]


// Function to replace D2.doModerate(object) - D2.doModerate is supposed to be called from the selectbox onchange event

// Creates and writes a confirmation button next to the moderation selectbox

// object is the selectbox [called in the page as D2.doModerate(this)]

function writeConfirmation(object)

{

// Get the selectboxes id tag and value

   var id = object.id;

   var selectedValue=object.value;

// if the button hasn't already been created, create and append it

   if(!document.getElementById("bttn_" + id))

   {

      var parentDiv = object.parentNode;

      var button = document.createElement("button");

// Use appropriate term from the array above as the text

      button.appendChild(document.createTextNode(arrVerbage[selectedValue]));

// Set the onclick to call the renamed doModerate method, passing the selectbox as the argument using getElementById(selectboxID)

      button.setAttribute("onclick","doTheModThing(document.getElementById(\"" + id + "\"));");

      button.setAttribute("id","bttn_" + id);

      parentDiv.appendChild(button);

   }

   else

// button already exists

   {

// if the value is 0, the user has selected "normal" (ie. "Do Not Mod"), so we don't need the button any more

      if(selectedValue == 0)

// delete the button

         document.getElementById("bttn_" + id).parentNode.removeChild(document.getElementById("bttn_" + id));

        else

// value isn't 0 (normal), so update the text on the button with the appropriate text from the array

         document.getElementById("bttn_" + id).innerHTML = arrVerbage[selectedValue];

   }

}

// Hijack calls to D2.doModerate (made by the selectbox) and re-route them to the new function above

var doTheModThing = D2.doModerate;

D2.doModerate = function(obj) { writeConfirmation(obj);}

I realise that using appendChild on the document head is probably a much more difficult way of doing things than using unsafeWindow, but I think safety is important, and it was an interesting exercise in pain, if nothing else.

Please comment/review/whatever if you like Moderatrix, because it's 5 hours of my life that I'll never get back :P

-Luke (aka slashdots beav007 (746004))

Edit: Yay, code tags!