User talk:The Transhumanist/RedlinksRemover.js

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/RedlinksRemover.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.

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!)

Load dependencies

Many of my scripts create menu items using mw.util.addPortletLink, which is provided in a resource module. Therefore, in those scripts it is necessary to make sure the supporting resource module (mediawiki.util) is loaded, otherwise the script could fail (though it could still work if the module happened to already be loaded by some other script). To load the module, use mw.loader, like this:

// For support of mw.util.addPortletLink
mw.loader.using( ['mediawiki.util'], function () {
// Body of script goes here.
} );

mw.loader.using is explained at mw:ResourceLoader/Core modules#mw.loader.using.

For more information, see the API Documentation for mw.loader.

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()

var

This is the reserved word var, which is used to declare variables. A variable is a container you can put a value in. To declare the variable portletlink, write this:

var portletlink

A declared variable has no value, until you assign it one, such as like this:

portletlink = "yo mama";

You can combine declaration and assignment in the same statement, like this:

var portletlink = mw.util.addPortletLink('p-tb', '#', 'Remove red links');

Caveat: if you assign a value to a variable that does not exist, the variable will be created automatically. If it is created outside of a function, it will have global scope. For user scripts used on Wikipedia, having a variable of global scope means the variable may affect other scripts that are running, as the scripts are technically part of the same program, being called via import from a .js page (.js pages are programs). So, be careful. Here are some scope-related resources:

• The Horror of Implicit Globals
• Scope in JavaScript

mw.util.addPortletLink

This adds a menu item to one of MediaWiki's menus. Use "p-tb" to signify the toolbox menu on the sidebar menu.

First you stick it in a variable, for example, "portletlink":

var portletlink = mw.util.addPortletLink('p-tb', '#', 'Remove redlinks');

It has up to 7 parameters. Only 3 are used above.

General usage:

mw.util.addPortletLink( 'portletId', 'href', 'text', 'id', 'tooltip', 'accesskey', 'nextnode');

It's components:

• mw.util.addPortletLink: the ResourceLoader module to add links to the portlets.
• portletId: the id of the portlet (that is, menu) where the new menu item is to be placed. The various menus ("portlets") are::
  • p-navigation: Navigation section in left sidebar
  • p-interaction: Interaction section in left sidebar
  • p-tb: Toolbox section in left sidebar
  • coll-print_export: Print/export section in left sidebar
  • p-personal Personal toolbar at the top of the page
  • p-views Upper right tabs in Vector only (read, edit, history, watch, etc.)
  • p-cactions Drop-down menu containing move, etc. (in Vector); subject/talk links and action links in other skins
• href: Link to a Wikipedia or external page (the initial purpose of portletlink was to link somewhere)
• text: Text that displays in the menu (the title of the
• id: HTML id (optional)
• tooltip: Tooltip to display on mouseover (optional)
• accesskey: Shortcut key press (optional)
• nextnode: id of the existing portlet link to place the new portlet link before (optional) (Don't forget: ids have a leading "#")

The optional fields must be included in the above order. To skip a field without changing it, use the value null, that is, no space between the quotes for that parameter.

To place the menu items in alphabetical order, and so that they don't move around in the menu, for your last menu item specify the id of an existing menu item to anchor it. Then set "next node" for the next to last item as the id for the menu item you just set, and so on.

See the complete documentation at https://www.mediawiki.org/wiki/ResourceLoader/Modules#addPortletLink and Help:Customizing toolbars.

Important: All we've done so far above is assign mw.util.addPortletLink to a variable. It won't do anything until we bind the variable to a click handler (see below).

click handler

To make a menu item that does something when you click on it, you have to "bind" mw.util.addPortletLink, via its variable, to a handler. Like this:

(The variable used in this example is "portletlink").

1 $(portletlink).click( function(e) {
2     e.preventDefault();
3     //do some stuff
4 }

The "handler" is the part between the curly brackets.

To read about function(e), see what does e mean in this function definition?
jQuery's event objects are explained here: http://api.jquery.com/category/events/event-object/
e.preventDefault() is short for event.preventDefault(), one of jQuery's event objects.

What is the default being prevented? Portletlink's default action is to link somewhere. We don't want it to do that, and so that is what e.preventDefault(); is for.

Calling a function

In JavaScript, a function is a subroutine, essentially, a program within the main program. Functions are usually placed at the end of the program, after its core, but can also be located in a library, like jQuery. You call a function by its name. The function "example" is called like this:

example();

See also: JavaScript Function Invocation.

window.location.href

window.location.href returns the current URL.

The window object represents the current window in the browser, and is at the top of the Browser Object Model hierarchy.

The location object pertains to the URL of the current document, and href is one of its properties.

redlinks = [];

This line assigns the variable redlinks to an empty array (represented by opening and closing square brackets).

Arrays are ordered sets of items.

We created this array to store all the redlinks that are on the page. (See below).

document.getElementsByTagName

The following line of code declares and assigns to the variable "a" all the elements in the document with the tag "<a>", creating an array:

var a = document.getElementsByTagName('a');

using a for loop to process an array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement

getAttribute('class')

This method returns the value of the attribute specified for an element it is attached to (with a dot, for example someElement.getAttribute('attribute')). This allows elements to be processed by a particular attribut, such as their class.

https://www.w3schools.com/jsref/met_element_getattribute.asp

https://www.w3schools.com/jsref/met_element_getattribute.asp

https://www.w3schools.com/html/html_attributes.asp

.length

.href.replace

.replace

decodeURIComponent

localStorage

This didn't work:

localStorage.OLUtils_redlinks = JSON.stringify(redlinks);

So I used this, and it worked:

jsonString = JSON.stringify(redlinks);
localStorage.OLUtils_redlinks = jsonString;

JSON.stringify() method

JSON.stringify()

Difference between JSON.stringify and JSON.parse

alert()

alert() is short for "window.alert()".

This command makes a message box with a message appear, with an OK button. The script will not continue until the OK button is pushed.

The message is included within the parentheses. It can be a string, a variable, or an object. If it is a variable or an object, its value or contents is displayed in the message.

JSON.parse() method

JSON.parse()

Difference between JSON.stringify and JSON.parse

RegExp

• The RegExp Global Object
• [ ]
• [ ]
• [ ]
• [ ]

Bug reports

• Missing dependencies? (fixed 2017-02-12  Done - Fixed it wasn't dependencies, it was misplaced and missing function calls.
  • The script won't work. Fixed But there's a weird work-around:
    1. Run the Feb 28 2016 version at the same time
    2. Use it on a page with redlinks
    3. Go to your RedlinksRemover.js and bypass the cache
       Resolved
       – don't need work-around any more
• 2017-02-13 Red link removal stopped working Fixed
  • The script puts the target page into edit mode, but then doesn't edit anything Fixed
• 2017-04-06 The script runs the functions at the end of the script, when the "Remove red links" menu has not been clicked, and I don't know why

Desired/completed features

Completed features are marked with  Done

• Remove redlinked entries in outlines
  • Remove redlinked bullet entries that both have no annotation and have no children. (If one has an annotation, or a child, don't remove it.) Because this could create new candidates, this function needs to be looped.
    • Check for annotation
    • To check for children, see if any bullet entries that follow it have more bullets than it does
    • If no changes are made during a complete loop, stop. (How do you check for changes?)
    • To prevent infinite looping, stop after 10 iterations (it can always be run again)
  • When no more candidates are to be are to be found, remove redcats, and delink the remaining redlinks.
• Save title to variable.  Done don't have to. Can check title directly.
  • Some features will work only on outlines, and will check the title variable for "Outline of" first.  Done used
  • (if match "Outline of" in title, then do....)  Done used if (document.title.indexOf("Outline ") != -1) {}
• Integrate anno.js (the annotation toggler).
  • get it working right first
• For stream editing commands, the script will have an optional interactive mode.
• For Macro compatibility, all toggles will have an on-"button" and an off-"button".
• Entry linker (checks unlinked entry names for the existence of non-disambiguation page article titles. If one exists, linkify it.)
• Entry inserter (checks template for entries missing in the current outline, then checks each title for existence.
• If one exists, insert it, but not if it is a disambiguation page.)
• Display a random outline, but not if currently in edit mode.
• Display next outline in the main list of outlines, but not if currently in edit mode.

Trycatch needed, and more

The Transhumanist, where you use local storage.getItem() or setItem() you should always wrap that in try catch, as it can fail at any moment (even if you checked previously). This can be due to the browser running out of storage space for the domain, or because the browser is running in privacy mode or with an ad blocker extensions or something. Also, your new RegExp() calls should be lifted outside of the for loops, so that they aren't continuously recreated. For wpTextbox1.value, realise that sometimes the content might be managed by an editor (The syntaxhighlighting beta does this for instance). We use the jquery.textSelection plugin to abstract way from these differences. Don't check document.title, check mw.config.get( 'wgTitle' ) or mw.config.get( 'wgPageName' ). And when you use mw.util.addPortlink, you have to ensure that the mediawiki.util plugin is loaded already, which you can do by using mw.loader.using. —TheDJ (talk • contribs) 14:47, 27 October 2017 (UTC)

Rough rough talk through