User talk:The Transhumanist/OutlineViewImageToggler.js

I'm using this page as a workspace. The talk page portion of it starts at #Discussions, below.

Script's workshop

This is the work area for developing the script and its documentation. The talk page portion of this page starts at #Discussions, below.

Description / instruction manual

(Script under development - not yet functional)

When completed, this script will

Explanatory notes

This section explains the source code, in detail.

You can only use so many comments in the source code before you start to choke or bury the programming itself. So, I've put short summaries in the source code, and have provided in-depth explanations here. My intention is twofold:

1. to thoroughly document the script so that even relatively new JavaScript beginners can understand what it does.
2. to refresh my memory of exactly how the script works, such as if I don't look at the source code for weeks or months.

The explanatory notes include examples, and links to relevant documentation pages, tutorials, etc.

In addition to some standard JavaScript code, this script also relies heavily on the jQuery library.

If you have any questions, feel free to ask me at the bottom of this page under Discussions. Trying to answer them will help me learn JavaScript better.

aliases

An alias is one string defined to mean another. Another term for "alias" is "shortcut". In the script, the following aliases are used:

$ is the alias for jQuery

mw is the alias for mediawiki

These two aliases are set up like this:

( function ( mw, $ ) {}( mediaWiki, jQuery ) );

That is a "bodyguard function", and is explained in the section below...

Bodyguard function

The bodyguard function assigns an alias for a name within the function, and reserves that alias for that purpose only. For example, if you want "t" to be interpreted only as "transhumanist".

Since the script uses jQuery, we want to defend jQuery's alias, the "$". The bodyguard function makes it so that "$" means only "jQuery" inside the function, even if it means something else outside the function. That is, it prevents other javascript libraries from overwriting the $() shortcut for jQuery. It does this via scoping.

The bodyguard function is used like a wrapper, with the alias-containing source code inside it. Here's what a jQuery bodyguard function looks like:

1 ( function($) {
2     // you put the body of the script here
3 } ) ( jQuery );

See also: bodyguard function solution.

To extend that to lock in "mw" to mean "mediawiki", use the following (this is what the script uses):

1 ( function(mw, $) {
2     // you put the body of the script here
3 } ) (mediawiki, jQuery);

For the best explanation I've found so far, see: Solving "$(document).ready is not a function" and other problems

The ready() event listener/handler

The ready() event listener/handler makes the rest of the script wait until the page (and its DOM) is loaded and ready to be worked on. If the script tries to do its thing before the page is loaded, there won't be anywhere for it to place the menu item (mw.util.addPortletLink), and the script will fail.

It looks like this: $( document ).ready() {});

The part of the script that is being made to wait goes inside the curly brackets (starting on the next line, with the ending curly bracket, closing parenthesis, and semicolon following that on a line of their own).

See also: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

The jQuery shorthand version of the same thing looks like this:

1 $(function() {<br>
2     // Handler for .ready() called.<br>
3 });

This is explained further on the jQuery page for .ready()

Development notes

Rough rough talk-through

Further information: Pseudocode