Discussion on Boards.ie user scripts

stupidusername

28064212 I'm just having a look at the script for the spam report link, and I'm wondering could you give me a line-by-line breakdown of what's happening in the code? If it's not too much trouble.

I'd be interested in trying to write some of this stuff myself, but there's a number of things in here that I don't get.

function getParameterByName(name)
{
	name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
	var regexS = "[\\?&]" + name + "=([^&#]*)";
	var regex = new RegExp(regexS);
	var results = regex.exec(window.location.search);
	if(results == null)
		return "";
	else
		return decodeURIComponent(results[1].replace(/\+/g, " "));
}
var loc = window.location.toString();
if(loc.indexOf("showthread.php") != -1)
{
	var users = document.getElementsByClassName("bigusername");
	for(var i = 0; i < users.length; i++)
	{
		var tr1 = users[i].parentNode.parentNode.parentNode;
		var tr2 = tr1.nextSibling;
		while(tr2 && tr2.nodeType == 3) // skips text nodes (e.g. whitespace)
	        tr2 = tr2.nextSibling;
		var td = tr2.firstChild;
		while(td && td.nodeType == 3) // skips text nodes (e.g. whitespace)
	        td = td.nextSibling;
		var link = document.createElement("a");
		link.href = "http://www.boards.ie/vbulletin/newreply.php?do=newreply&t=2056491247&customspamlink=" + users[i].href;
		link.innerHTML = "Spammer";
		td.appendChild(link);
	}
}
else
{
	document.getElementById("vB_Editor_001_textarea").value = getParameterByName("customspamlink");
	document.getElementsByName("emailupdate")[0].value = MYCHOICE;
	document.getElementById("vB_Editor_001_textarea").focus();
}

Thanks a million.

28064212

stupidusername wrote: »

28064212 I'm just having a look at the script for the spam report link, and I'm wondering could you give me a line-by-line breakdown of what's happening in the code? If it's not too much trouble.

I'd be interested in trying to write some of this stuff myself, but there's a number of things in here that I don't get.

Thanks a million.

Sure, no problem . I'm assuming you do know some Javascript? Let me know if anything isn't clear.

If you're not already using it, download the Firebug extension, it's very handy for inspecting the HTML of a page

function getParameterByName(name)
{
/* You can pretty much ignore how this function works, just need to know what it does.
It reads the current URL and returns the value of the given parameter.
If the URL is http://www.test.com/?parama=v1&paramb=v2,
getParameterByName("parama") will return v1, and getParameterByName("paramb") will return v2 */
}
var loc = window.location.toString();
/*This gets the current URL. Because the script runs on two different pages, it
needs to check which one it's on (which the if statement does) */
if(loc.indexOf("showthread.php") != -1)
{// In this branch, we're on a page which displays a thread
	// This gets an array of all the bigusername elements (username displayed beside a post, above the avatar)
	var users = document.getElementsByClassName("bigusername");
	for(var i = 0; i < users.length; i++)
	{
		//I use tr1 and tr2 to get the row for each post that contains the "report post" button
		//It's always in the same place relative to the bigusername element
		var tr1 = users[i].parentNode.parentNode.parentNode;
		var tr2 = tr1.nextSibling;
		// These while loops just skip text-only elements. I want the first non-text element
		while(tr2 && tr2.nodeType == 3)
	        tr2 = tr2.nextSibling;
		var td = tr2.firstChild;
		while(td && td.nodeType == 3)
	        td = td.nextSibling;
		var link = document.createElement("a"); // create a link element
		// set the target to the newreply page of the spammer notification thread, adding the
		// customspamlink parameter and the users profile url
		link.href = "http://www.boards.ie/vbulletin/newreply.php?do=newreply&t=2056491247&customspamlink=" + users[i].href;
		// Set the text of the link to Spammer
		link.innerHTML = "Spammer";
		// Place the link after the report post button
		td.appendChild(link);
	}
}
else
{// If we're not on showthread, we're on the reply page (script only runs on two different pages)
	// Get the value of the customspamlink parameter
	document.getElementById("vB_Editor_001_textarea").value = getParameterByName("customspamlink");
	// Set the subscription method to the choice defined above ("Do Not Follow" by default)
	document.getElementsByName("emailupdate")[0].value = MYCHOICE;
	// Move the cursor to the 
	document.getElementById("vB_Editor_001_textarea").focus();
}

stupidusername

28064212 wrote: »

Sure, no problem . I'm assuming you do know some Javascript? Let me know if anything isn't clear.

If you're not already using it, download the Firebug extension, it's very handy for inspecting the HTML of a page

	// This gets an array of all the bigusername elements (username displayed beside a post, above the avatar)
	var users = document.getElementsByClassName("bigusername");
	for(var i = 0; i < users.length; i++)
	{
		//I use tr1 and tr2 to get the row for each post that contains the "report post" button
		//It's always in the same place relative to the bigusername element
		var tr1 = users[i].parentNode.parentNode.parentNode;
		var tr2 = tr1.nextSibling;
		// These while loops just skip text-only elements. I want the first non-text element
		while(tr2 && tr2.nodeType == 3)
	        tr2 = tr2.nextSibling;
		var td = tr2.firstChild;
		while(td && td.nodeType == 3)
	        td = td.nextSibling;

Yeah I'm ok with Javascript, though a bit rusty. I'm only really having problems with the array here. I mean I know in theory you should be getting at each post on the page... but then doesn't that mean that 'users' is an array of the user objects on the page? and for each of these objects you can get at that users memberID etc needed for the reporting spam link? 'bigusername' is the class name that's on each user on the page, right?

Eoin

Its an array of all elements on the page which have that CSS class. In this case those elements all contain hyperlinks to user profiles, from which you can extract their user id.

They're not user objects as such.

stupidusername

ah yeah I get ya. it's getting the memberID URL from the username link. I see it now. cool, that's great. all I need now is a good idea of what to have a go at thanks guys

strobe

I was trying to use the Beta skin before, and stopped using it when the hover over menu drove me crazy, appearing whenever I went up to a tab and had hovered for a brief second. So I went back to it to have a look at the code, to see if I could maybe write a script to delay the display of menu items on the hover, and discovered there is a way to change this with Zero Delay.

So I wanted to look at this to see how it's done. I can see that there's a function called populatePrefs() and there's a div with id of prefmenu, which has another div inside with id of prefmenucontents. and that's where I get lost. Obviously I would need to get at the items that are shown in div 'prefmenucontents' but is this a matter of getting at the elements, as was above? or is there some more code on the page I should be looking at for this?

Oh and should I start a thread in Development for this, instead of getting into the specifics of it here?

Boards.ie: Danny

Discussion split & moved from Site Development, it's become more a Q&A on general JS development

28064212

Thanks Danny. For anyone interested, the original thread with Greasemonkey scripts for Boards is here.

strobe wrote: »

I was trying to use the Beta skin before, and stopped using it when the hover over menu drove me crazy, appearing whenever I went up to a tab and had hovered for a brief second. So I went back to it to have a look at the code, to see if I could maybe write a script to delay the display of menu items on the hover, and discovered there is a way to change this with Zero Delay.

So I wanted to look at this to see how it's done. I can see that there's a function called populatePrefs() and there's a div with id of prefmenu, which has another div inside with id of prefmenucontents. and that's where I get lost. Obviously I would need to get at the items that are shown in div 'prefmenucontents' but is this a matter of getting at the elements, as was above? or is there some more code on the page I should be looking at for this?

Changing pre-existing functionality on the page in Greasemonkey is tricky. As far as I can see, the beta menu functions are in cascade.js. It's obfuscated, but you can use this to get readable code: http://jsbeautifier.org/.

There is a way to do it, but it requires using Greasemonkey's "unsafeWindow", which, as the name indicates, isn't very safe, so I wouldn't really recommend it. That said, here's the code for the script (include it on all boards.ie pages):

unsafeWindow.$(document).ready(function(){
	var i = {
		interval: 500,
		sensitivity: 2,
		over: unsafeWindow.addCat,
		timeout: 400,
		out: unsafeWindow.removeCat
	};
	unsafeWindow.$(".navitem").hoverIntent(i);
});

The key parameter is interval. This is the number of milliseconds before the menu is displayed. By default, it's only 100, this makes it 500 (half-second).

unsafeWindow provides Greasemonkey with access to functions and variables which already exist on the page (e.g. the addCat function in cascade.js). However, it breaks the restricted security model of Greasemonkey. Userscripts run with a higher security access than webpage scripts, but if a userscript calls something within the webpage script, the webpage script now has more access than it should.

So if, for examply, Boards.ie's Danny knew you were using it, they could edit the function you're calling (addCat) to do something malicious. There may be other exploits that I'm not aware of, so don't assume Danny's good nature is the only thing you have to rely on.

stupidusername

hmmm well you wouldn't want to be going about it like that then. but could you make up your own javascript that would override that function? without this unsafe version..?

but in general you're saying that if there's already a function there, you can't/shouldn't be going trying to do something with it? so the point would be just to add new functionality.

since the CSS is in the the source code, I assume that can be changed easier?

sorry for all the questions

28064212

stupidusername wrote: »

hmmm well you wouldn't want to be going about it like that then. but could you make up your own javascript that would override that function? without this unsafe version..?

True, didn't think of that. You could get all the sub-elements of each navigation header and stick them into your own version of the menu, then override the hover function of each navigation item to show your menu instead of the default. Certainly code-able, although might be a pain to do it.

stupidusername wrote: »

but in general you're saying that if there's already a function there, you can't/shouldn't be going trying to do something with it? so the point would be just to add new functionality.

As you point out above, you can just override the function. The advantage of the "unsafe" approach is it's just modifying the existing function slightly. The whole code's only 10 lines long. Using the override method means writing your own version of boards' menu code

stupidusername wrote: »

since the CSS is in the the source code, I assume that can be changed easier?

Not sure what you mean here?

stupidusername

28064212 wrote: »

True, didn't think of that. You could get all the sub-elements of each navigation header and stick them into your own version of the menu, then override the hover function of each navigation item to show your menu instead of the default. Certainly code-able, although might be a pain to do it.

No sorry I meant override the if for zerodelay of populatePrefs() with a function on the main page.

28064212 wrote: »

Not sure what you mean here?

I mean the CSS can be changed easy here with script, yes? it's not as big a deal because it's on the same page as the source code.

28064212

stupidusername wrote: »

No sorry I meant override the if for zerodelay of populatePrefs() with a function on the main page.

Ah ok, well then you just gave me the alternative idea by accident

You wouldn't be able to override it without using unsafeWindow. You can't access a function or variable in a different script from a Greasemonkey one (unless you use unsafeWindow). The value would have to be held somewhere in the DOM. For example, if the checkbox "Zero Delay" had a value of "0" which was read by the cascade script, you could use the GM script to change that value to something else.

However, the cascade script just checks whether "Zero Delay" is on or off, and then uses that to decide what the delay should be

stupidusername wrote: »

I mean the CSS can be changed easy here with script, yes? it's not as big a deal because it's on the same page as the source code.

Not exactly. The CSS of any element is easy to change because Greasemonkey allows you access to the DOM of the page (the Document Object Model). It doesn't allow you access to other scripts, which aren't part of the DOM

stupidusername

28064212 wrote: »

Ah ok, well then you just gave me the alternative idea by accident

You wouldn't be able to override it without using unsafeWindow. You can't access a function or variable in a different script from a Greasemonkey one (unless you use unsafeWindow). The value would have to be held somewhere in the DOM. For example, if the checkbox "Zero Delay" had a value of "0" which was read by the cascade script, you could use the GM script to change that value to something else.

However, the cascade script just checks whether "Zero Delay" is on or off, and then uses that to decide what the delay should be

It's all kinda confusing can I think of the zerodelay value as needing to be a global variable, in order to access it with my script? it kinda sounds like it's the same idea.
This is what's in the cascade script re zerodelay:

if(zerodelay===!0)

Is that not a check to see if it's not 0?

This is actually getting off the original idea of what I wanted to know, but it's good to learn how it all works.

28064212 wrote: »

Not exactly. The CSS of any element is easy to change because Greasemonkey allows you access to the DOM of the page (the Document Object Model). It doesn't allow you access to other scripts, which aren't part of the DOM

So I can change the CSS, but it's nothing to do with it being on the same page?

Eoin

You can change the style of an element on the page, which I am 99% sure will take priority over its CSS class. It won't remove all the attributes that were set in the CSS, just the ones you've changed:

e.g.

CSS file has this:

#myDiv
{
border: dashed red 2px;
background-color: blue;
}

and your page has this div:

[html]<div id="myDiv">This is my Div</div>[/html]

Using JavaScript you can change the border from dashed red 2 pixels to a solid black 1 pixel border, and it should keep the blue background.

document.getElementById("myDiv").style.border = 'solid black 1px';

But you can't change the contents of an external CSS file (without doing something quite complex anyway).

Edit - or you could add a new CSS file with the same class names. I don't know if it's the correct thing to do, but my experience has always been that the last CSS file takes precedence.

28064212

stupidusername wrote: »

It's all kinda confusing can I think of the zerodelay value as needing to be a global variable, in order to access it with my script? it kinda sounds like it's the same idea.

This is what's in the cascade script re zerodelay:

if(zerodelay===!0)

Is that not a check to see if it's not 0?

The javascript variable zerodelay is declared as either true or false when the page is rendered (look at the source code of this page and search for zerodelay). That's handled server-side, i.e. when you request a page from boards, it checks your preferences, then sends you a page with the line "var zerodelay = false;" of "var zerodelay = true;". cascade.js can access this variable, as it's declared prior to the line <script type="text/javascript" src="http://b-static.net/javascript/cascade.js?v=1b21"></script&gt;. Greasemonkey can't access this variable as it's outside its scope.

If you look at the HTML for the Zero Delay option in your preferences, you'll see this line: <input type="checkbox" value="on" name="zerodelay">. You can use GM to change that value, because it's available through the DOM. If that line instead read: <input type="checkbox" value="0" name="zerodelay">, that would suggest that there was an actual numerical value attached to the delay preference, so you could set the value of the input to something else to fool your settings. But in that case, the page would be rendering with a line of "var zerodelay = 100;" instead of using true or false.

The line "if(zerodelay===!0)" isn't very clear, as it suggests zerodelay is numerical instead of boolean. It would be simpler to have "if(zerodelay)", but the writers probably had a reason for doing it that way

stupidusername wrote: »

This is actually getting off the original idea of what I wanted to know, but it's good to learn how it all works.

Well it's just general discussion on Boards scripts, so it's all good

stupidusername wrote: »

So I can change the CSS, but it's nothing to do with it being on the same page?

Pretty much

stupidusername

i'm sure that'll all make more sense later, when i've a less tired head on me.

trying to think of ideas for scripts. one thing I would find handy would be to have the title of the page display the unread private message status when you get a new one. most people work in multiple tabs now, and a lot of the time I'd be off doing other things, not really on boards, so when I get a new message, I'd like the title to change to 1 unread PM, or something.

I realise this would probably have to work with the JQuery stuff though, so I'm guessing it's not possible here. I'll have to have a think about it.

28064212

stupidusername wrote: »

i'm sure that'll all make more sense later, when i've a less tired head on me.

trying to think of ideas for scripts. one thing I would find handy would be to have the title of the page display the unread private message status when you get a new one. most people work in multiple tabs now, and a lot of the time I'd be off doing other things, not really on boards, so when I get a new message, I'd like the title to change to 1 unread PM, or something.

I realise this would probably have to work with the JQuery stuff though, so I'm guessing it's not possible here. I'll have to have a think about it.

Good idea for a script alright. But you don't have to worry about jQuery. A good way of approaching GM scripts is to look at the page and see if the data you need is anywhere on the page i.e. in a HTML element. In the case of the private messages count, it's on every page in the top-right. Now you just need to figure out how to access the element that contains the text, parse it, extract the number, and add it to the title

Eoin

And check every 20 secs or whatever. I like that idea too.

stupidusername

so it's a good idea? yay!

hmmm, the checking every 20 seconds will be a new one for me.

Eoin

Give this a go:

http://www.w3schools.com/jsref/met_win_setinterval.asp

stupidusername

you guys are great, thanks!

stupidusername

Ok, i've gotten the class under which the private message count is. and I know it's: document.getElementsByClassName("classnamehere"), but how do I actually get to see these elements? i mean obviously I throw them into an array or something, but since i want to view what's there to manipulate, before writing code and installing script....how do I? A really basic thing, I do realise, but still...

or is it a matter of writing it into the script, and just outputting the array on the screen? to do that i'd have to go uploading the script and installing it..right?

28064212

Well, "alert()" calls are useful for a specific element. For example:

alert(document.getElementsByClassName('classname')[0].innerHTML)

will display the html inside the first instance of an element with that class name. Alternatively, you could create a div, position it somewhere on the page, then add text to it with a loop.

However, in this instance, there's another way: use document.getElementsByTagName('a'). This will return an array of all the links. Use a for loop to iterate through it, searching for the Private Messages link. Once you have that object, you can use stuff like parentNode and nextSibling to get objects relative to that one, then you can go about getting the count

stupidusername

well I might explore the getElementsByClassName() anyway, but thanks. What I meant was do I have to write and upload script to view the elements, or can I just alter the URL with document.getElementsByClassName somehow to display them, but that idea seems kinda silly now.

Eoin

It depends on what condition you're looking for. Are you looking for a certain string in a span?

For example, it sounds like you might first want to see if the element contains "Unread" as this is the span that tells you how many private messages you have. If it doesn't contain "Unread 0", then that could mean that it's telling you that there are no unread messages, and therefore you should change the title.

This is very rough, but might give you an idea:

var myelements = document.getElementsByClassName("classnamehere");
for (var i = 0; i < myelements.length); i++)
{
    // check if the element contains the word "Unread".
    if (myelements[i].innerHTML.indexOf("Unread") > 1 && myelements[i].innerHTML.indexOf("Unread 0") < 0)
    {
         // do something here.      
         break;
    }
}

Eoin

Sorry, I had that written before there were more replies.

To test scripts, I just save the page locally and write my JavaScript down the bottom of the page. Seems to work for me, but I only use chrome - not greasemonkey on firefox etc.

stupidusername

ach, it seems so obvious when you see the code it's just all this elements and innerHTML stuff I've never dealt with before, it's so abstract to me for now. anyway, yes i'll save it locally I think...

Eoin

Don't worry about the syntax. That's easy to learn with a bit of practice. The important thing is knowing what it is you want to do, and then you just need to google to find out the exact wording to use.

What I normally recommend is to write some "pseudo-code" first, so you know the outline of what it is you're doing, and then work on the syntax.

search for all elements with a classname of "mycssclass".

start loop
    if the array element's contents contains Unread then this is the correct div
        get the number of unread messages in the div 
        add it to the title of the page
        stop loop as we're done
    end if
end loop

Now you just have to think of what to google for to convert that into real script.

Using alert() can be very handy as it gives you feedback very quickly, and also very importantly, an alert normally won't show after an error in your script.

An error might be a mistake in the logic rather than a syntax error, so won't always show up in the console. So if you can't figure why a line of code isn't being run, put in alerts from where you know it's working, and move it down line by line until it stops appearing.

28064212

Eoin wrote: »

To test scripts, I just save the page locally and write my JavaScript down the bottom of the page. Seems to work for me, but I only use chrome - not greasemonkey on firefox etc.

It's a lot easier in Firefox. In the Greasemonkey options, you just need to set your script editor (notepad, or preferably something better). Then navigate to the page you want the script to run on, go to the Greasemonkey menu and select "New User Script". Add your code, save it, then refresh the page and it'll run.

stupidusername

I had done Eoins version last night. I have an alert, and it's popping up, but always with 0. going to try it with getElementsByTagName now...

Procasinator

Alert is kind of a poor man's debugger these days. Don't get me wrong, I still use it every so often. But I much prefer to use either console.log or the debugger available in Chrome (or whatever alternatives the browser you are using offers such as Firebug or built in tools in IE9)

For instance, this video covers some of the basics in Chrome's Developer Tools:
http://www.youtube.com/watch?v=nOEw9iiopwI