Help:JavaScript

From Homestar Runner Wiki

(Difference between revisions)

Revision as of 22:49, 1 October 2009

You can add JavaScript to any page, to let you customize how the page looks. If you use the Monobook skin (the default) you can put the Javascript here. If you use Tavistyle you can put it here, or if you use Cologne Blue you can put it here.

There are a lot of "helper" functions available. To use them, put {{subst:utilities}} at the top of this page. When you save, this will become

// include utility functions
document.write('<script type="text/javascript" src="/index.php?title=User:Phlip/utilities.js&action=raw&ctype=text/javascript&dontcountme=s"></script>');

which will include all the relevant code. If you want to stop using them, just remove those two lines.

They have been tested in Firefox and Internet Explorer (5.0, 5.5 and 6.0).

If you don't understand JavaScript, feel free to skip down to Examples and mix & match the pieces into the template in General.

General

You need to set up the code to be run when the page has loaded (otherwise it will try to edit a page that doesn't exist yet). Your JavaScript page should basically look like:

{{subst:utilities}}

function doeverything()
{
  // code goes here
}
if (window.addEventListener) window.addEventListener("load",doeverything,false);
else if (window.attachEvent) window.attachEvent("onload",doeverything);

and put the things below where it says // code goes here.

Available functions

All these functions are on an object called utilities. So to call them you need to type utilities.function(parameters).

Information

getArticleFullTitle

utilities.getArticleFullTitle()

Returns the title of the current page, like "Help:JavaScript".

alert("You're looking at " + utilities.getArticleFullTitle());

getArticleTitle

utilities.getArticleTitle()

Returns the title of the current page without the namespace, like "JavaScript". This is useful if you want to be able to find the associated talk page (see talknamespace)

getArticleNamespace

utilities.getArticleNamespace()

Returns the namespace of the current page. Note that this returns a magical number – to get the actual name, see namespaces below.

getArticleURL

utilities.getArticleURL()

Returns the URL for the page you're looking at. Note that this is a link to the article, not the exact page you're looking at – for example if you're editing a page, it will still link to the real page (not the edit page). If you want the full link, use window.location.

localurl

utilities.localurl(page [, namespace [, extras]])

Returns the URL of the given page. Again, the namespace should be a number. Examples:

utilities.localurl("Main Page")
utilities.localurl("User:Me") // this works
utilities.localurl("Me", 2)   // this works too
utilities.localurl("Me", 2, "action=edit") // an "edit" link for User:Me
utilities.localurl(utilities.getArticleTitle(), utilities.getArticleNamespace(), "action=edit") // an "edit" link for the current page

namespaces

utilities.namespaces[number]

An array of the names of each namespace. This is blank for the Main namespace, and the name for all the others.

var ns = utilities.getArticleNamespace();
if (ns == 0)
  alert("You're looking at the main namespace!");
else
  alert("You're looking at " + utilities.namespaces[ns] + "!");

namespacedescription

utilities.namespacedescription[number]

An array of the descriptions of each namespace – what the tabs are labeled with in Monobook. For example "Project Page" for a HRWiki namespace page, etc.

articlenamespace

utilities.articlenamespace[number]

An array of the article namespace for each talk namespace. For example 2 is "User" and 3 is "User talk", so utilities.articlenamespace[2]<code> and <code>utilities.articlenamespace[3]<code> are both 2.


 talknamespace

<code>utilities.talknamespace[number]

An array of the talk namespace for each article namespace. For example 2 is "User" and 3 is "User talk", so utilities.talknamespace[2]<code> and <code>utilities.talknamespace[3]<code> are both 3. <code>utilities.talknamespace[-1] (the Special namespace) doesn't exist.

var ns = getArticleNamespace();
var talkpage = utilities.localurl(utilities.getArticleTitle(), utilities.talknamespace[ns]);

Monobook-specific

These functions only work in the Monobook skin – if you try to use them elsewhere you'll get a big obnoxious error message telling you to fix it.

addMonobookQuickbarLink

utilities.addMonobookQuickbarLink(URL, title [, where])

Adds a link to the "quickbar" (the bar with links to your user page, your talk page, logout, etc). "Where" should be one of:

"userpage" if you want the link to appear before your userpage link.
"mytalk" if you want the link to appear before your my talk link.
"preferences" if you want the link to appear before your preferences link.
"watchlist" if you want the link to appear before your my watchlist link.
"mycontris" if you want the link to appear before your my contributions link.
"logout" if you want the link to appear before your log out link.
Leave it off entirely if you want the link to appear after your log out link.

utilities.addMonobookQuickbarLink(utilities.localurl("Main Page"), "Back Home", "userpage")
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "Outta Here")

addMonobookTab

utilities.addMonobookTab(URL, title, padding [, at start])

Adds a link to the tab bar (the bar with links to the page, the talk page, edit, history, etc). padding lets you group the tabs together (like edit and history are) – if it's set to true it will be separated from the other links, if you set it to false it won't be. at start says whether to add the tab to the start or to the end (the tab bar changes too much to be able to say "put it here"... some pages don't have an "edit" link if they're protected, Special pages only have the "special" tab...). If you leave at start off, it will put it on the end.

utilities.addMonobookQuickbarLink("http://www.somesite.com/", "A", true)  //  \
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "B", false) //   } these links will all be grouped together
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "C", false) //  /
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "Loner", true) //  this one will start a new group

addMonobookNavboxLink

utilities.addMonobookNavboxLink(URL, title [, which one [, at start]])

Adds a link to the navigation boxes (the ones to the left). If which one is left off it will add to the "navigation" box. It can be set to:

"navigation" to add to navigation
"tb" to add to the toolbox
"ext" to add to external links

Again, at start can be true to add it to the top, or false (or leave it off) to add it to the bottom.

utilities.addMonobookNavboxLink(utilities.localurl("Toons"), "Toons")
utilities.addMonobookNavboxLink("http://www.somesite.com/", "Some Site", "ext")

addMonobookBottomTabs

utilities.addMonobookBottomTabs([no CSS])

Copies the tab bar to the bottom of the page. If you use addMonobookTab, this should come after those (so the new tabs will be copied too). Normally this adds a lot of extra CSS to the page to get it to work – if you'd rather add the CSS yourself to your custom CSS, then you can pass a true for no CSS – usually you can just leave it off entirely and it will work without extra effort.

Cologne Blue-specific

These functions only work in the Cologne Blue skin – if you try to use them elsewhere you'll get a big obnoxious error message telling you to fix it.

cologneBlueNewMessages

utilities.cologneBlueNewMessages()

Returns true if you nave new messages. The Cologne Blue "You have new messages" message isn't as "in your face" as the Monobook and TaviStyle ones are. This allows you to fix that, if you want.

if (utilities.cologneBlueNewMessages())
  alert ("Dude! Check your messages!");

addCologneBlueQuickbarLink

utilities.addCologneBlueQuickbarLink(URL, title, section [, at start])

Adds a link to the "quickbar" (the links to the left). section is the title of the section to add the link under. at start can be set to true to add the link to the top of the section, or false (or left off entirely) to add it to the bottom. If the section doesn't exist, it'll be added to the bottom.

utilities.addMonobookNavboxLink(utilities.localurl("Toons"), "Toons", "Browse")
utilities.addMonobookNavboxLink("http://www.somesite.com/", "Some Site", "External Links")

addCologneBlueTopbarLink

utilities.addCologneBlueTopbarLink(URL, title [, at start])

Adds a link to the first top bar (the one with the Main Page, Log Out, etc links).

addCologneBlueSubtopbarLink

utilities.addCologneBlueSubtopbarLink(URL, title [, at start])

Adds a link to the second top bar (the one with the Printable Version, etc links).

TaviStyle-specific

These functions only work in the TaviStyle skin – if you try to use them elsewhere you'll get a big obnoxious error message telling you to fix it.

addTavistyleTopbarLink

utilities.addTavistyleTopbarLink(URL, title, row [, at start])

Add a link to the red links at the top of the page. Setting row to 1 will add it to the top row (Home, Forum, etc), 2 will add it to the second row (RecentChanges, etc). 3 will add a new row. at start can be set to true to add the link to the start of the row, or false (or left off entirely) to add it to the end.

addTavistyleBottombarLink

utilities.addTavistyleBottombarLink(URL, title, row [, at start])

Add a link to the red links at the top of the page. Setting row to 1 will add it to the top row (Edit, talk, etc), 2 will add it to the second row (Your user page, your talk, etc). 3 will add a new row. at start can be set to true to add the link to the start of the row, or false (or left off entirely) to add it to the end.

Examples

For Monobook

Add a couple of new links to the Quickbar:

utilities.addMonobookQuickbarLink(utilities.localurl("Main Page"), "Back Home", "userpage") // add it before the "userpage" link
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "Outta Here") // add it at the end

Add a "Validate this page" tab:

utilities.addMonobookTab("http://validator.w3.org/check?uri=" + escape(utilities.getArticleURL()), "Validate", true)

Add another row of tabs to the bottom of the screen:

utilities.addMonobookBottomTabs()

For Cologne Blue

Add a "You've got new messages" banner:

if (utilities.cologneBlueNewMessages())
{
  var div = document.createElement("div")
  div.setAttribute("style", "background: #FFCE7B; border: 1px solid #FFA500; color: black; font-weight: bold; margin: 2em 0 1em; padding: 0.5em 1em");
  div.innerHTML = 'You have <a href="' + utilities.localurl("Username", 3) + '">new messages</a>.';    
  var article = document.getElementById('article');
  article.insertBefore(div, article.firstChild);
}