User talk:The Transhumanist/ViewAsOutline-Templates.js

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

{{User:The Transhumanist/Workshop boilerplate/Install}}

{{User:The Transhumanist/Workshop boilerplate/Explanatory notes}}

{{User:The Transhumanist/Workshop boilerplate/Aliases}}

{{User:The Transhumanist/Workshop boilerplate/Bodyguard function}}

{{User:The Transhumanist/Workshop boilerplate/The ready event listener-handler}}

{{User:The Transhumanist/Workshop boilerplate/Only activate for vector skin}}

• 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 "* "

• 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 "* "

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

{{Further|Pseudocode}}

Skipped.

in HTML, dd is used for these:

: test node

:: test subnode

: test node 2

: test node 3

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

becomes:

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

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

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.

• [https://stackoverflow.com/questions/33857817/convert-dt-dd-list-into-a-li-list-using-jquery 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?
• [http://css.maxdesign.com.au/listutorial/index.htm Listutorial: simple tutorials on CSS based lists] – another approach would be to change the CSS of the list
• [https://stackoverflow.com/questions/1027354/need-an-unordered-list-without-any-bullets Stack Overflow: Need an unordered list without any bullets]
• [http://api.jquery.com/css/ How to change CSS properties with jQuery]
• [https://stackoverflow.com/questions/577669/how-to-transform-html-table-to-list-with-jquery#577836 How to transform HTML table to list with JQuery?]
• [https://stackoverflow.com/questions/9229856/how-can-i-use-jquery-to-convert-an-html-table-into-divs How can I use jQuery to convert an HTML table into
  's?] – also covers converting a table to an unordered list

= Discussions =

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)

:{{ping|The Transhumanist}} The bullets are defined using the ::after CSS pseudo element [https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter ]. 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)

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)

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)

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)