This is the workshop support page for the user script ViewAsOutline-Article.js. Comments and requests concerning the program are most welcome. Please post discussion threads below the section titled Discussions. Thank you. By the way, the various scripts I have written are listed at the bottom of the page.^[1]

This script is under development, and is not yet functional

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 for ViewAsOutline-Article.js

This script is under development, and is not yet functional

When completed, this script will

How to install this script

Important: this script was developed for use with the Vector skin (it's Wikipedia's default skin), and might not work with other skins. See the top of your Preferences appearance page, to be sure Vector is the chosen skin for your account.

To install this script, add this line to your vector.js page:

importScript("User:The Transhumanist/ViewAsOutline-Article.js");

Save the page and bypass your cache to make sure the changes take effect. By the way, only logged-in users can install scripts.

Explanatory notes (source code walk-through)

This section explains the source code, in detail. It is for JavaScript programmers, and for those who want to learn how to program in JavaScript. Hopefully, this will enable you to adapt existing source code into new user scripts with greater ease, and perhaps even compose user scripts from scratch.

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 Threefold:

to thoroughly document the script so that even relatively new JavaScript programmers can understand what it does and how it works, including the underlying programming conventions. This is so that the components and approaches can be modified, or used again and again elsewhere, with confidence. (I often build scripts by copying and pasting code that I don't fully understand, which often leads to getting stuck). To prevent getting stuck, the notes below include extensive interpretations, explanations, instructions, examples, and links to relevant documentation and tutorials, etc. Hopefully, this will help both you and I grok the source code and the language it is written in (JavaScript).
to refresh my memory of exactly how the script works, in case I don't look at the source code for weeks or months.
to document my understanding, so that it can be corrected. If you see that I have a misconception about something, please let me know!

In addition to plain vanilla JavaScript code, this script relies heavily on the jQuery library.

If you have any comments or questions, feel free to post them at the bottom of this page under Discussions. Be sure to {{ping}} me when you do.

General approach

(general approach goes here)

More specifically, starting at the beginning...

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 (the jQuery library)

mw is the alias for mediawiki (the mediawiki library)

These two aliases are set up like this:

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

That also happens to be a "bodyguard function", which 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 within the function. It does this via scoping.

The bodyguard function is used like a wrapper, with the alias-containing source code inside it, typically, wrapping the whole rest of the script. 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 of the bodyguard function I've found so far, see: Solving "$(document).ready is not a function" and other problems (Long live Spartacus!)

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 anything there for the script to work on (such as with scripts that will have nowhere to place the menu item mw.util.addPortletLink), and the script will fail.

In jQuery, it looks like this: $( document ).ready(function() {});

You can do that in jQuery shorthand, like this:

$().ready( function() {} );

Or even like this:

$(function() {});

The part of the script that is being made to wait goes inside the curly brackets. But you would generally start that on the next line, and put the ending curly bracket, closing parenthesis, and semicolon following that on a line of their own), like this:

1 $(function() {
2     // Body of function (or even the rest of the script) goes here, such as a click handler.
3 });

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

For the plain vanilla version see: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Only activate for vector skin

Initially each script I write is made to work only on the vector skin, the skin under which I developed it, and by default the only skin for which it is initially tested with. To limit the script to working for vector only, I use the following if control structure:

if ( mw.config.get( 'skin' ) === 'vector' ) {
}

To test it with another skin, remove or comment out the above code from the script.

Change log for ViewAsOutline-Article.js

2018-01-04
- Start script using {{subst:User:The Transhumanist/Template.js}}
- Turn off bullets using $( "ul" ).css( {"list-style-type":"none", "list-style-image":"none"} );

Task list

Bug reports

Desired/completed features

Completed features are marked with Done

Must be menu item activated
- On/off switch would be nice, but reversing everything would be problematic
- Single function menu item would suffice; undo by reloading page

Development notes for ViewAsOutline-Article.js

How will this be able to modify a page without redoing the various templates on the page?

This script needs to avoid adding wikicodes to headings and links that already have them, such as those in navigation footers and sidebars, and on book, glossary, category, and category tree pages.

A partial solution is with activation filters for page types already covered, or unintended:

Book pages
Category pages
Glossary pages
Template pages
Special pages

Another method that may work would be to have each script that modifies elements to add a class to those elements to indicate that they've been modified. Then elements of those classes could be excluded via the .not method. But this script would have to be run last.

Yet another method would be to combine all the code that is to work on article pages into one script.

Rough rough talk-through

Script dependencies

Discussions

This is where the actual talk page starts for ViewAsOutline-Article.js. Please post your discussion threads below...

Activation filter for article namespace pages?

Originally posted at User talk:Evad37

On some of my scripts, I use an activation filter that checks the title and runs only if the namespace up there matches:

	// Run this script only if "Book:" is in the page title
	if (document.title.indexOf( "Book:") != -1) {
		// (Body of script goes here)
	};

Now I need to do this with articles in the main namespace, but there is no prefix up there in the title to work off of.

What to do? The Transhumanist 13:02, 11 February 2018 (UTC)[reply]

(talk page watcher) Test the namespace with conditions like mw.config.get( 'wgNamespaceNumber' ) === 0. — JJMC89 (T·C) 17:17, 11 February 2018 (UTC)[reply]

Yep, you can do something like that, for any namespace (namespace numbers are listed at WP:NS). Or check for the inverse situation, so you don't have to nest everything inside an if statement:

	// Run this script only for main namespace
	if (mw.config.get('wgNamespaceNumber') !== 0) {
		return;
	};
    // (Body of script goes here)

The return statement only works within functions, but that's generally not a problem – you're whole script is usually wrapped inside a function, assuming you need to wait for the document ready and/or wait for resource loader modules to be loaded. - Evad37 [talk] 00:44, 12 February 2018 (UTC)[reply]

Many of my scripts approach an insane level of if statement nesting. I definitely need to apply this return approach.

I think your program snippet above means "If the namespace is not 'zero', end the function." And "return" ends the program if the body of the script is in the same function, and at the same level (or deeper) in that function, as the if statement. Am I reading that right? The Transhumanist 14:38, 12 February 2018 (UTC)[reply]

Yes, the "return" ends the function it is immediately within at the point, and so the program resumes execution from the point where the function was invoked – but since we've wrapped the whole script in $( function($) {...}); there's nothing more left to execute, and so the script ends. It doesn't matter if the "return" is within any number of "if"/"if-else" statements, "for" loops, "while" loops, etc – only having another (sub)function will change the scope it applies to. One thing to watch for, at deeper levels within your programs, is that when you are assigning a variable to a function call (var foo = someFunction(bar);), the variable is set to the return value, which is specified with "return someValue;" inside the function. Since we haven't explicitly set a return value, it would be undefined – but that doesn't matter for our purpose, since the function is just there to make the script wait before executing, and is not assigning a value to a variable. - Evad37 [talk] 02:09, 13 February 2018 (UTC)[reply]

Thank you JJMC89 and Evad37. The Transhumanist 14:38, 12 February 2018 (UTC)[reply]

What about "or"?

What about doing the same thing for more than one namespace? Such as "run script if the page is in the article namespace or the template namespace"? The Transhumanist 18:03, 13 February 2018 (UTC)[reply]

@The Transhumanist: You just need to negate the logic to work out when to return. NOT( isArticle OR isTemplate ) is equivalent to isNotArticle AND isNotTemplate. So in script (and putting the actual namespace number into a variable to avoid duplication), you get something like:

	// Run this script only for main and template namespaces
    var namespaceNumber = mw.config.get('wgNamespaceNumber');
	if ( namespaceNumber !== 0 && namespaceNumber !== 10 ) {
		return;
	};
    // (Body of script goes here)

Or you could go a bit further and assign the condition to a variable, so you can name it (makes it easier to read, and remember what you were doing), and negate it later with the ! operator:

	// Run this script only for main and template namespaces
    var namespaceNumber = mw.config.get('wgNamespaceNumber');
    var isArticleOrTemplate = (namespaceNumber === 0 || namespaceNumber === 10);
	if ( !isArticleOrTemplate ) {
		return;
	};
    // (Body of script goes here)

And that's alright for a couple of namespaces, but if you need to do more, rather than keep adding more ORs or ANDs to the condition, you can use the array method indexOf for the logical test (which returns -1 if a value isn't in the array tested)

	// Run this script only for main and template namespaces
    var namespaceNumber = mw.config.get('wgNamespaceNumber');
    var allowedNamespaces = [0, 2, 10, 828]; // main, user, template, module
    var isInAllowedNamespace = (allowedNamespaces.indexOf(namespaceNumber) !== -1);
	if ( !isInAllowedNamespace ) {
		return;
	};
    // (Body of script goes here)

- Evad37 [talk] 23:59, 13 February 2018 (UTC)[reply]

^

[1] 
v
t
e
User scripts by The Transhumanist under development
Semi-automated
editing
RedlinksRemover.js – remove red linked list items that are end nodes (last item of a branch), reiteratively, and delink the rest, from outlines and lists.
Search results page
enhancements
SearchSuite.js – suite of search features, each on a switch, so you can turn them on and off as desired (and it remembers the switch positions). SearchSuite replaces all the search scripts below.

StripSearchSorted.js – provides menu item that turns sorted strip search on/off; Includes the features of all the other search scripts below, and sorts the results alphabetically. Co-written by User:Evad37; he did the heavy-duty programming.
StripSearch.js – provides menu item that turns strip search on/off; strips search results down to bare pagenames.
StripSearchSansRedirecteds.js – strips search results down to bare pagenames, with redirected entries removed. No off switch.
StripSearchInWikicode.js – strips search results down to bare pagenames, and presents as bullet list with pagenames enclosed in double square bracket link delimiters (just like in wikicode). Redirected entries are also removed. No off switch.

StripSearchSimple.js – strips all search results down to bare pagenames. No off switch.
Viewing
enhancements
ViewAnnotationToggler.js – turns list item annotations off and on.

OutlineViewImageToggler.js – turns the display of images off and on, across all outlines.

OutlineViewTOCToggler.js – turns the TOC feature for all outlines off and on.
Viewing
enhancements
for list and
outline editors
hunting for
list items
ViewAsOutline-AllPagesWithPrefix.js – adds list item wikicodes to the on screen results of All pages with prefix, for easy copying/pasting into outlines and lists. No off switch.

ViewAsOutline-Category.js – removes the alphabetical headings, and adds list item wikicodes, for easy copying/pasting into outlines and lists. No off switch.
ViewAsOutline-Book.js – converts page to outline format on screen, with wikicodes for easy copy and paste into outlines and lists. No off switch.
ViewAsOutline-CategoryTree.js – on menu item click, converts tree to outline format on screen, with wikicodes for easy copying/pasting into outlines and lists. Refresh page to undo.
ViewAsOutline-Templates.js – converts navboxes and sidebar boxes on current page into outline format, with wikicodes displayed, for easy copying/pasting into outlines. No off switch. (Needs to be enhanced to show base links rather than pipes.)

ViewAsOutline-Glossary.js – converts glossaries to list format on screen, with wikicodes for easy copy-and-paste into outlines and lists. No off switch. (In early development, very rough. Currently, only converts bullet list glossary format.).
Coming
eventually
QuickPortal.js – portal tool, for creating and restarting portals. Will be expanded for modification and maintenance as well.

P-link.js – place links to portals.

OutlineDedupeHolding.js – remove duplicate list items from the outline's holding sections (See also, holding bin, place these, general concepts, and list section). That is, it will remove from each of these sections, in turn, all topics that exist anywhere else in the body of the page (not in templates).
StripSearchFilter.js – narrow down search results.
OutlineMain2LI.js – convert main links in outline to list items.
TopicPlacerFromBin.js – Topic placer (loads topics from holding bin into an array, then assists in placing each one). For use on lists and outlines.
FetchCategory.js – import category to present location.
FetchCategories.js – import categories to tagged locations.
FetchSection.js – import section to present location.

TopicSender.js – prompts for parent topic (outline), then checks if it is already there, if it isn't, then it sends it to the receiving section of that outline)
PlaceCategory.js –

OutlineViewConventional.js – change the viewed formatting of the current outline into that of a conventionally indented outline, without headings.

[2] v

[3] t

[4] e

[1]

v t e User scripts by The Transhumanist under development
Semi-automated editing	RedlinksRemover.js – remove red linked list items that are end nodes (last item of a branch), reiteratively, and delink the rest, from outlines and lists.
Search results page enhancements	SearchSuite.js – suite of search features, each on a switch, so you can turn them on and off as desired (and it remembers the switch positions). SearchSuite replaces all the search scripts below. StripSearchSorted.js – provides menu item that turns sorted strip search on/off; Includes the features of all the other search scripts below, and sorts the results alphabetically. Co-written by User:Evad37; he did the heavy-duty programming. StripSearch.js – provides menu item that turns strip search on/off; strips search results down to bare pagenames. StripSearchSansRedirecteds.js – strips search results down to bare pagenames, with redirected entries removed. No off switch. StripSearchInWikicode.js – strips search results down to bare pagenames, and presents as bullet list with pagenames enclosed in double square bracket link delimiters (just like in wikicode). Redirected entries are also removed. No off switch. StripSearchSimple.js – strips all search results down to bare pagenames. No off switch.
Viewing enhancements	ViewAnnotationToggler.js – turns list item annotations off and on. OutlineViewImageToggler.js – turns the display of images off and on, across all outlines. OutlineViewTOCToggler.js – turns the TOC feature for all outlines off and on.
Viewing enhancements for list and outline editors hunting for list items	ViewAsOutline-AllPagesWithPrefix.js – adds list item wikicodes to the on screen results of All pages with prefix, for easy copying/pasting into outlines and lists. No off switch. ViewAsOutline-Category.js – removes the alphabetical headings, and adds list item wikicodes, for easy copying/pasting into outlines and lists. No off switch. ViewAsOutline-Book.js – converts page to outline format on screen, with wikicodes for easy copy and paste into outlines and lists. No off switch. ViewAsOutline-CategoryTree.js – on menu item click, converts tree to outline format on screen, with wikicodes for easy copying/pasting into outlines and lists. Refresh page to undo. ViewAsOutline-Templates.js – converts navboxes and sidebar boxes on current page into outline format, with wikicodes displayed, for easy copying/pasting into outlines. No off switch. (Needs to be enhanced to show base links rather than pipes.) ViewAsOutline-Glossary.js – converts glossaries to list format on screen, with wikicodes for easy copy-and-paste into outlines and lists. No off switch. (In early development, very rough. Currently, only converts bullet list glossary format.).
Coming eventually	QuickPortal.js – portal tool, for creating and restarting portals. Will be expanded for modification and maintenance as well. P-link.js – place links to portals. OutlineDedupeHolding.js – remove duplicate list items from the outline's holding sections (See also, holding bin, place these, general concepts, and list section). That is, it will remove from each of these sections, in turn, all topics that exist anywhere else in the body of the page (not in templates). StripSearchFilter.js – narrow down search results. OutlineMain2LI.js – convert main links in outline to list items. TopicPlacerFromBin.js – Topic placer (loads topics from holding bin into an array, then assists in placing each one). For use on lists and outlines. FetchCategory.js – import category to present location. FetchCategories.js – import categories to tagged locations. FetchSection.js – import section to present location. TopicSender.js – prompts for parent topic (outline), then checks if it is already there, if it isn't, then it sends it to the receiving section of that outline) PlaceCategory.js – OutlineViewConventional.js – change the viewed formatting of the current outline into that of a conventionally indented outline, without headings.