Talk:Snippets/Auto-number headings

Dynamic execution

@Krinkle: Thanks for this script. Based on a user's request, I was wondering how to make it work when the page content updates dynamically. mw.hook( 'wikipage.content' ).add( ... ) is a native way to do it, but I notice your snippet does not use jQuery (on purpose?). Matěj Suchánek (talk) 08:47, 2 August 2022 (UTC)

@Matěj Suchánek Good question!

Using the hook would result in bugs that I'm not sure how to avoid, for so I felt it was cleaner to leave that part out. For the simple case of a full-page render, such as previewing a source edit, or post-edit when using VisualEditor, we could re-select the TOC and perform otherwise the same logic. However, the wikipage.content is not specific to a full-page render, it can also be applied to portions of content, or content without a TOC. This would lead to a situation where we've already inserted some numbers but then are given the impossible task of adding numbers to only part of a page, possibly without a TOC that time.

My suggestion would be to use the CSS version of the snippet instead. That should work automatically in every context, including dynamic updates that re-render all or some of the page in any way imaginable. To do this, reduce the JS snippet to only the "else" branch where the body class is set. This does not require a hook. The downside, as documented in the CSS snippet, is that this may in some cases result in headings that have different numbers than the TOC. Krinkle (talk) 19:34, 11 August 2023 (UTC)

Thanks for your answer. Now there is an interesting actuality. When I was writing my question in 2022, we didn't have the new vector-2022. In vector-2022, TOC doesn't have numbers and document.querySelector('#toc') refers to nothing, so CSS is basically the only useful part in that skin. Matěj Suchánek (talk) 12:46, 13 August 2023 (UTC)

Replace counter-reset by counter-set in the CSS!

The current version of this snippet does not seem to be compliant with the current CSS standard and it does indeed fail to reset counters on e.g. Firefox 116. According to the discussion on StackOverflow the respective CSS-property has changed to the counter-intuitive counter-set statement.

The down-side is that may not work on Safari at least up to version 17. Sm8ps (talk) 19:07, 9 August 2023 (UTC)

This is a wiki that anyone can edit. Why don't you fix it yourself? Pppery (talk) 21:38, 9 August 2023 (UTC)

Because I do not want to interfere with Krinkle's original work as long as there is no fix/solution that works for all browsers. Furthermore I am by no means a specialist in JS/CSS. Therefore I believe a broader discussion of the issue than my singular point of view is necessary. What is yours on the matter? Sm8ps (talk) 13:44, 10 August 2023 (UTC)

@Sm8ps Could you explain in more detail, or share a screenshot of, the malfunction you perceive in Firefox 116? I may be missing it, but it seems to work as intended:

https://phabricator.wikimedia.org/F37397846 Krinkle (talk) 19:24, 11 August 2023 (UTC)

Thanks for reaching out, @Krinkle! The counters are not reset but keep on, cf. screenshot (link to my private cloud). Sm8ps (talk) 18:54, 12 August 2023 (UTC)

Double number bug on some talk pages in vector and vector-2022

Hey Krinkle. Thanks for making and recently updating this gadget. Your recent updates fixed the breakages in timeless/modern/monobook so that's great. But I think there's one more regression to fix. Some talk pages in vector and vector-2022 have headings like 1 2 Heading, 3 4 Next heading, etc. Examples (make sure to enable the enwiki gadget "Auto-number headings"):

• https://en.wikipedia.org/wiki/MediaWiki_talk:Gadget-autonum.css?useskin=vector
• https://en.wikipedia.org/wiki/User_talk:Robertsky?useskin=vector-2022

I updated the enwiki gadget to use your latest .js and .css snippet so should be running the latest version. w:MediaWiki:Gadget-autonum.js, w:MediaWiki:Gadget-autonum.css

Can you take a look when you get a chance? Thank you very much. Novem Linguae (talk) 16:35, 1 June 2024 (UTC)

Wrap numbers in a class

Could the numbers be wrapped in an element with a class so that user scripts can filter them out?

E.g. replace

    if (num) headline.prepend(num.textContent + ' ');

with

    if (num) {
		var span = document.createElement('span');
		span.className = 'tpl-autonum-num';
		span.textContent = num.textContent + ' ';
		headline.prepend(span);
	}

(Tested it.) JWBTH (talk) 13:56, 22 July 2024 (UTC)

Would also be preferred to use mw.hook('wikipage.content').add() for #toc for asynchronously reloaded content like in DiscussionTools. JWBTH (talk) 14:03, 22 July 2024 (UTC)

What do you mean "filter out"? I assume you don't mean hiding or removing from a gadget, because the snippet is opt-in. Presumably when someone enables the snippet, they want the numbers. Happy to add a class either way, but would like to know what you'd like to do with it, as there may be other ways to do that. One thing to keep in mind is that the snippet tries to add the number through CSS first when possible. So the class would be missing from those pages. Is that okay? Krinkle (talk) 00:12, 28 July 2024 (UTC)

Is that okay?

Yes, if the snippet was CSS-only, there would be no problem at all.

What do you mean "filter out"?

User scripts may need to access the section's original headline as rendered text (not wikitext/HTML) for a wide range of purposes. I'm unaware of the existing means to do it that would be straightforward enough (i.e. wouldn't require additional requests, parsing, normalizing, etc.) other than taking it from the headline element itself. The alternative is the TOC, but it may be absent and gadgets may alter it as well. So a reasonable trade-off that I use is to extract the headline from the page while not including traces of popular gadgets. It's good when these gadgets use classes, it's bad when they append unidentifiable text/HTML. Hence my request. JWBTH (talk) 01:18, 28 July 2024 (UTC)

Thanks that's makes sense. My first inclination is to make the gadget show the number via CSS even when in the JS fallback. This could be done by way of a data-attribute. This has the benefit of consistent styling, as well as making use cases like yours work without needing to specifically support this snippet. If I can't get that to work I'll add the span with class! Krinkle (talk) 16:47, 28 July 2024 (UTC)

@JWBTH:  Done in CSS edit and JS edit. Does this work for you? Krinkle (talk) 21:16, 28 July 2024 (UTC)

content: attr(data-autonum) " ";

Great solution, thanks! JWBTH (talk) 23:39, 29 July 2024 (UTC)

CSS counter resets don't seem to be working correctly

@Krinkle, Thanks for writing this code. I'm using MediaWiki 1.42 and the JS works great with the TOC. However, the CSS code counter resets didn't work correctly when there was no TOC. I was receiving numbered output like this:

2

2.3

The 2.1 autonumber was missing since autonum-h3, autonum-h4, etc. were not getting reset. I'm new to MediaWiki so I'm not sure if something else in my other CSS, JS, or installed extensions messed up your code. Therefore, I'm including the fix that worked for me as a reference in case somebody else has issues with the counter reset in the future. I changed the counter-reset CSS statements to this:

.tpl-autonum .mw-parser-output {
  counter-reset: autonum-h2;
}
.tpl-autonum .mw-parser-output h2 {
  counter-reset: autonum-h3;
}
.tpl-autonum .mw-parser-output h3 {
  counter-reset: autonum-h4;
}
.tpl-autonum .mw-parser-output h4 {
  counter-reset: autonum-h5;
}
.tpl-autonum .mw-parser-output h5 {
  counter-reset: autonum-h6;
}

The numbers reset and displayed correctly when using CSS after making this change.

Thanks, Andrew 2600:4040:2C93:1600:3502:442E:B5C0:6805 01:56, 8 October 2024 (UTC)