User talk:The Transhumanist/ViewAsOutline-Templates.js

This is the workshop support page for the user script ViewAsOutline-Templates.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.

This script is operational: its main features work; it is under further development

This script provides the menu item Navbox as list that, when clicked, changes the formatting of all navboxes on the page to include (right on the screen) the wikicode for formatting outlines. It makes headings look like this: == Heading == (just like you see inside WP's wiki editor). It also converts the lists in the navboxes from horizontal to vertical bullet lists. It then disables the graphical bullets, and wraps * [[]] around the page names. This allows you to copy and paste the material right from the screen to an outline you are editing in another window without having to type in the wikicodes manually. To undo the view, reload the page.

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

This script is operational: its main features work; it is under further development

This script provides the menu item Navbox as list that, when clicked, changes the formatting of all navboxes on the page to include (right on the screen) the wikicode for formatting outlines. It makes headings look like this: == Heading == (just like you see inside WP's wiki editor). It also converts the lists in the navboxes from horizontal to vertical bullet lists. It then disables the graphical bullets, and wraps * [[]] around the page names. This allows you to copy and paste the material right from the screen to an outline you are editing in another window without having to type in the wikicodes manually. To undo the view, reload the page.

To copy/paste, simply select the material desired, including headings. It will all display in the proper left alignment in the edit window.

The script still needs some visual fine tuning.

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-Templates.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:

1. 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).
2. to refresh my memory of exactly how the script works, in case I don't look at the source code for weeks or months.
3. 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.

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

• 2017-12-29
  • Start script, basing it on User:The Transhumanist/ViewAsOutline-CategoryTree.js
  • Removed the hlist class, making the lists in navbox templates revert to standard li format
• 2018-01-01
  • Add class navbox-ul to uls in navboxes to make them more easily targetable
• 2018-01-04
  • Make the bullets disappear
  • Add *[[]] wikicode to links
  • Add heading delimiters ("==") to the row titles
• 2018-01-08
  • Removed the menu item, so the navbox conversion runs by default
• 2018-01-12
  • Force navboxes into show state (uncollapsed)
• 2018-01-16
  • Fixed 2 bugs: Remove all instances of hlist, so that the li elements in all navboxes are shown vertically, with no trailing bullet
  • Fixed bug: Add hlist back in for navbar class, so that the formatting of view/talk/edit links are unaffected
  • Fixed bug: removed bullets from bottom section (where category/portal/wikiproject links are)
  • Fixed bug: page names no longer multi-wrap with "* [[]]"

Task list

Bug reports

• The li elements are showing up horizontally in some navboxes even though the hlist class has been removed  Fixed
• The li elements in some navboxes have a trailing (square) bullet, even though the hlist class has been removed  Fixed
• The view/talk/edit links at the top get formatted (vertically, with bullet), and they shouldn't  Fixed
• Bullets are showing up for the category/portal/wikiproject links at the bottom, and they shouldn't  Fixed
• It's multi-linking some entries (wrapping with "* [[]]" twice or more), due to nested ul elements  Fixed
• Links in headings are getting wrapped with "* [[]]"

Desired/completed features

Completed features are marked with  Done

• convert li elements into dd elements, within navboxes only Cancelled
• make the bullets disappear  Done
• process the headings  Done
  • add heading delimiters  Done
• force the navboxes into their uncollapsed state  Done
• process the links
  • add wikilink formatting to the links  Done
  • remove the piped names, and replace with link titles
  • remove parens portions of the new piped names
  • for the headings that are linked, add copy as top item its list with link brackets
• process by level (for navboxes more than 2 levels deep)
  • heading level
  • bullet level
• Rearrange the headings & list items into a single column (rather than side-by-side)

Development notes

Rough rough talk-through

Further information: Pseudocode

Skipped.

dd elements

in HTML, dd is used for these:

test node

test subnode

test node 2

test node 3

making bullets go bye bye

html/css for unordered list without bullets

ul {

   list-style-type: none;

}

jQuery for unordered list without bullets

 
$('.someElements').css( propertyName, value )

becomes:

$( 'ul' ).css( list-style-type, none )
$( 'ul' ).css( list-style-image, none )

parsing levels

I need a way to add the appropriate number of equals signs for headings, and bullets for offspring list items.

There's some nesting already in some of the navboxes, and it was causing the "* [[]]" to wrap multiple times. That could be used to advantage, but it doesn't cover every case.

research

• Convert dt/dd list into a li list using jquery? – this is the opposite of what I need to do. Perhaps there is a way to reverse it?
• Listutorial: simple tutorials on CSS based lists – another approach would be to change the CSS of the list
• Stack Overflow: Need an unordered list without any bullets
• How to change CSS properties with jQuery
• How to transform HTML table to list with JQuery?
• How can I use jQuery to convert an HTML table into <div>'s? – also covers converting a table to an unordered list

Discussions

I want to make the bullets disappear

Dear Evad,

Happy Hollidays! I hope yours went well.

I've been spending mine banging my head against some new scripts. And I've run into an enigma...

I'd like to remove the bullets from unordered lists, and the following code doesn't have any effect:

// Make the bullets go bye bye
$( ".navbox").find( "ul" ).css( "list-style-type", "none" );

I also tried this:

// Make the bullets go bye bye
$( "ul" ).css( "list-style-type", "none" );

And it didn't work either.

Do you have any idea what I'm doing wrong? The Transhumanist 14:47, 30 December 2017 (UTC)

@The Transhumanist: The bullets are defined using the ::after CSS pseudo element [1]. Which means that to override it, you have to add more CSS rules to the page. There is a handy function mw.util.addCSS() that you can use:

// Make the bullets go bye bye
mw.util.addCSS('.hlist dd:after, .hlist li:after { content: ""; }');

Should do the trick. You do need to make sure that mw.util is available, so you need to surround your script with:

// Load dependencies
mw.loader.using( ['mediawiki.util'], function () {

    // ... your script goes here ...

});

I typically put the mw.loader.using line after the $(function() { line - Evad37 [talk] 03:17, 31 December 2017 (UTC)

It didn't work, because hlist no longer exists. I'm not trying to remove bullets from horizontal lists. I had already removed the class hlist from all elements to force them to regular li format:

$( ".navbox").find( "*" ).removeClass( "hlist" );

Once they were converted to normal vertical lists, I wanted to remove the bullets. So I tried this, and it didn't work:

// Make the ul's targettable by adding a class to them
$( ".navbox").find( "ul" ).addClass( "navbox-ul" ); //this part worked

// Make the bullets go bye bye, by altering the elements' style
var elements = document.getElementsByClassName('navbox-ul');
elements.style.listStyleType="none";

I tried your line using navbox-list instead of hlist, but it also didn't work:

// Make the bullets go bye bye
mw.util.addCSS('.navbox-list dd:after, .navbox-list li:after { content: ""; }');

And I also tried this:

// Make the bullets go bye bye
$( ".navbox-ul" ).css( "list-style-type", "none" );

And it didn't work either, which was rather disappointing, since .css seemed like a pretty straight-forward jQuery method. The Transhumanist 13:40, 1 January 2018 (UTC)

Sorry, I misunderstood what was going on. Your last block of code is pretty close, but you also need to set list-style-image: none; to override the image of a bullet that Vector uses by default. So that line should actually be

// Make the bullets go bye bye
$( ".navbox-ul" ).css( {"list-style-type":"none", "list-style-image":"none"} );

So your original code was pretty close too; its just that there are two css properties that control the bullets - Evad37 [talk] 14:29, 1 January 2018 (UTC)

Your solution worked! Thank you.

By the way, based on your explanation, I tried this, and it also worked:

// Make the bullets go bye bye
$( ".navbox-ul" ).css( "list-style-type", "none" );
$( ".navbox-ul" ).css( "list-style-image", "none" );

But this did not work:

// Make the bullets go bye bye, by altering the elements' style
var elements = document.getElementsByClassName('navbox-ul');
elements.style.listStyleType="none";
elements.style.listStyleImage="none";

I don't know why. The Transhumanist 12:32, 4 January 2018 (UTC)

How do you set all navboxes to the show state?

In the script above, I'd like to force all the navigation footers on the page to be uncollapsed. I've also run into this obstacle on another script, for working on pages like this, where I need the boxes expanded. How is that done in a script? The Transhumanist 07:51, 6 January 2018 (UTC)

I went back and looked at the HTML source more closely, after studying the .css method, and found "display: none". So I checked what was there when the boxes were displaying, and invoked that with this line of code:

// Force the navboxes to show
$('tr').css('display', 'table-row');

I'm guessing the .find method may allow this to be restricted to occurrences of tr within navboxes only. I'll keep you posted. The Transhumanist 07:09, 13 January 2018 (UTC)

It does. The Transhumanist 06:47, 18 January 2018 (UTC)

Forcing show state in sidebars

I've learned that looking at page source is a tricky business - it doesn't show the current state. Just looking at the page source isn't good enough; it turns out that other scripts (like NavFrame in mw:common.js) change the source after that picture is taken, requiring that you view selected source to see its current state.

So, while in "view page source" NavContent in a series box showed no indication of being collapsed (and so no code available to change), looking at the current page source (via "View Selection Source" in drop-down menu on right-click) reveals that some JavaScript came along afterward and added some styling (display: none). When expanded, that changes (to display: block).

So, I added a few "display; block"s of my own. :) Now I have a script, that among other things, forces all the content in sidebar and series boxes to be displayed, which is very useful for someone inspecting and collecting list components. Still needs refining of the formatting though. The script is ViewAsOutline-Sidebar.js.

This (acquiring JavaScript) is a grueling learning curve!

Do you have any suggestions that might make this journey easier? :) The Transhumanist 06:47, 18 January 2018 (UTC)

I always use "Inspect" (Chrome)/"Inspect Element" (Firefox) from the right-click menu, as that shows the HTML (technically the DOM, I think) in it's current state, and allows you to experiment with adding/changing/deleting bits of HTML/CSS and seeing the effects. The other tools in the same pane can also be useful, particular seeing an element's current styles, and where they come from. And the Console can show the value of variables if you use console.log(), and also evaluate snippets of Javascript you type into it. - Evad37 [talk] 04:42, 19 January 2018 (UTC)

Loading dependencies

By the way, do I need to load any dependencies for the following code?

 		// ============== activation filters ==============
	        // Only activate on Vector skin
	        if ( mw.config.get( 'skin' ) === 'vector' ) {

Do all "mw." lines have dependencies? The Transhumanist 13:40, 1 January 2018 (UTC)

mw.config is always available, and contains lots of other useful stuff – see mw:mw.config. Other mw modules, detailed at mw:ResourceLoader/Core modules, aren't necessarily available unless you load them – see mw:ResourceLoader/Migration_guide_(users)#mw.loader for further details. - Evad37 [talk] 14:10, 1 January 2018 (UTC)

Thank you. Reading them now. Also, I've added these links to User:The Transhumanist/Outline of scripts, for future reference. The Transhumanist 22:12, 5 January 2018 (UTC)