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

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

Bug reports

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

Desired/completed features

 * Completed features are marked with ✅


 * convert li elements into dd elements, within navboxes only ❌
 * make the bullets disappear ✅
 * process the headings ✅
 * add heading delimiters ✅
 * force the navboxes into their uncollapsed state ✅
 * process the links
 * add wikilink formatting to the links ✅
 * 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)

Rough rough talk-through
Skipped.

dd elements
in HTML, dd is used for these:


 * test node
 * test subnode
 * test node 2
 * test node 3

jQuery for unordered list without bullets
becomes:

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  's? – also covers converting a table to an unordered list

Script dependencies
= 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:

I also tried this:

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 bullets are defined using the  CSS pseudo element . Which means that to override it, you have to add more CSS rules to the page. There is a handy function   that you can use:
 * Should do the trick. You do need to make sure that  is available, so you need to surround your script with:
 * I typically put the  line after the    line - Evad37 &#91;talk] 03:17, 31 December 2017 (UTC)
 * I typically put the  line after the    line - Evad37 &#91;talk] 03:17, 31 December 2017 (UTC)
 * I typically put the  line after the    line - Evad37 &#91;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:




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




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




 * And I also tried this:




 * 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  to override the image of a bullet that Vector uses by default. So that line should actually be
 * So your original code was pretty close too; its just that there are two css properties that control the bullets - Evad37 &#91;talk] 14:29, 1 January 2018 (UTC)
 * So your original code was pretty close too; its just that there are two css properties that control the bullets - Evad37 &#91;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:




 * But this did not work:




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



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, and also evaluate snippets of Javascript you type into it. - Evad37 &#91;talk] 04:42, 19 January 2018 (UTC)

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

Do all "mw." lines have dependencies? The Transhumanist 13:40, 1 January 2018 (UTC)
 * is always available, and contains lots of other useful stuff – see mw.config. Other mw modules, detailed at ResourceLoader/Core modules, aren't necessarily available unless you load them – see ResourceLoader/Migration_guide_(users) for further details. - Evad37 &#91;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)