MediaWiki talk:Gadget-switcher.js

Disable/fix for mobile skin

Hi User:Jackmcbarn I see this gadget is loaded by default on the mobile experience but I do not see it being used anywhere.

Given top loaded styles are problematic for slow connections, can I ask that you fix this gadget to work on mobile or disable it on mobile for the time being (remove the mobile target)?

Please do let me know if I can help in any way. Jdlrobson (talk) 21:45, 16 February 2016 (UTC)[reply]

@Jdlrobson: It seems to work fine on https://en.m.wikipedia.org/wiki/Broadway_Hollywood_Building for me (radio buttons in infobox). Does it not work there for you? Jackmcbarn (talk) 22:16, 16 February 2016 (UTC)[reply]

Thanks for the quick response @Jackmcbarn :) I have updated the bug - it seems like this is the symptom of a larger problem https://phabricator.wikimedia.org/T126817 Jdlrobson (talk) 22:40, 16 February 2016 (UTC)[reply]

For anyone else reading this, here's the conversation we had on IRC:

<jdlrobson> jackmcbarn: i see it now yup i didnt realise that's what it did- that said do you know why it's top loading CSS given they are just radio buttons?
<jackmcbarn> i wasn't aware it was top loading any css
* jackmcbarn looks
<jackmcbarn> i can't see any css it's loading anywhere at all. where do you see it at?
<jdlrobson> yeh that's what legoktm was suggesting
<jdlrobson> i suspect there's some kind of bug in the stack..

Jackmcbarn (talk) 22:48, 16 February 2016 (UTC)[reply]

Looks like this is now fixed. For some reason, thanks to a mysterious ping from @Liridon:, I only just got this notification so thank you for looking into it! Jdlrobson (talk) 17:42, 20 July 2017 (UTC)[reply]

Gadget switcher broken

@Krinkle: your last edit seemed to have broken the gadget, the show all radio button disappeared, and most of the testcases for template {{switcher}} are not working. Lam-ang (talk) 06:11, 21 August 2018 (UTC)[reply]

Yes, we've got Uncaught ReferenceError: $showAllRadio is not defined after the recent changes. --Петар Петковић (talk) 12:05, 22 August 2018 (UTC)[reply]

Apologies. I've fixed issue now. Krinkle (talk) 16:59, 22 August 2018 (UTC)[reply]

More aesthetic layout for many images

Would it be possible to modify the template to allow for the organization of the clickable buttons in columns when there are above a certain number of images? Since the template accommodates up to 40 images, it is unwieldy to have a vertical list of 40, since that just takes up space. An example of this phenomenon is in my sandbox. Continuing this discussion from Template talk:Switcher. Pinging @PrimeHunter and Jackmcbarn: Ergo Sum 00:15, 24 November 2019 (UTC)[reply]

Pinging @Krinkle: per PrimeHunter's suggestion, who may be able to assist. Ergo Sum 05:50, 25 November 2019 (UTC)[reply]

An active example of the problem can now be found on 1838 Jesuit slave sale. Ergo Sum 05:50, 25 November 2019 (UTC)[reply]

Custom styles for labels

Hi Krinkle - apologies for the unsolicited ping, I understand you're the maintainer of the switcher gadget.

Would it be possible to make a change to the gadget which would permit custom styles being put on the <label> elements? Over here we've been discussing using it in a template, but by default the switcher radio buttons fly off to the other side, which isn't very helpful. Essentially, what I want to do is plonk the radio buttons on top of the templates - which I can do by setting them to display inline - but of course, there's no way to do that in the current gadget code.

No worries if it's not possible for any reason, I know this is a bit of an edge case - it'd just be useful here

Cheers! Naypta ☺ | ✉ talk page | 10:04, 10 June 2020 (UTC)[reply]

@Naypta: I wrote some new code to let you both change the style and move them to the top. To try it out, disable the switcher gadget in Special:Preferences, then add importScript('User:Jackmcbarn/switcher-unstable.js'); // Linkback: [[User:Jackmcbarn/switcher-unstable.js]] to Special:MyPage/common.js. I added example wikicode to use it at User:Jackmcbarn/switcher#Testing new features. Let me know if this is what you want, and if so, I'll put in a request to update the real gadget with it. Jackmcbarn (talk) 21:24, 27 July 2020 (UTC)[reply]

Disable show all?

Hi @Jackmcbarn: is there a way to disable the “show all” button? I would like to add that option as a feature on Template:Historical map series. Onceinawhile (talk) 15:03, 12 August 2020 (UTC)[reply]

@Onceinawhile: When I wrote this, I intentionally didn't allow suppressing "show all". When a user doesn't have JavaScript or has the switcher gadget disabled, they're effectively permanently in "show all" mode. My worry was that by allowing hiding that mode from most users, the templates that did so would quickly end up with really ugly or stretched out pages in that case. Do you think it's worth letting it be hidden anyway? It wouldn't be difficult to add that if there were a reason for it. Jackmcbarn (talk) 21:53, 12 August 2020 (UTC)[reply]

Hi Jackmcbarn, thanks very much for your answer here, and for creating this valuable gadget in the first place. If I understand you correctly, you are saying that because some readers will only ever see the showall mode, it is healthy for editors to be conscious of this - and permanent showall button ensures that.

It was Zero0000 who asked me about this originally, so I will defer to him as to value of optionality here.

Best regards, Onceinawhile (talk) 22:04, 12 August 2020 (UTC)[reply]

Yes, you understand me correctly. Jackmcbarn (talk) 00:13, 13 August 2020 (UTC)[reply]

Jackmcbarn, thanks for that explanation. I'm not tech-savvy enough to know, how many users still don't have JavaScript, and is there no way to program the gadget so that it doesn't need JavaScript? I've wanted to suppress the show all button in the past myself, so there is very much demand for this feature, but your reasoning makes sense if we're not yet ready to throw out support for those without JavaScript. {{u|Sdkb}} ^talk 00:21, 13 August 2020 (UTC)[reply]

Hi @Jackmcbarn:, thanks for the explanation. My knowledge of javascript is very primitive so maybe this suggestion is nonsense. An option which applied the javascript object.style.display="none" attribute to the showall line would not be effective for users with javascript off and would just make a little space for others. Not perfect, but something. Is there a better way to have the suppression of showall a javascript action so that it is only effective when javascript is on? Cheers. Zero^talk 02:33, 13 August 2020 (UTC)[reply]

@Zero0000: From a purely technical perspective, I can absolutely easily do that. My concern is that by doing so, editors would forget that the "show all" view still exists for some viewers and so would inadvertently make decisions that significantly harm the quality of it. Jackmcbarn (talk) 06:12, 13 August 2020 (UTC)[reply]

Space between the button and text

@Jackmcbarn: As discussed here, would it be possible to add a space between the radio button and 'Show all' text to make it a bit easier to read? Cheers, Number 57 20:34, 28 November 2022 (UTC)[reply]

@Izno: I agree with @Number 57:. Suggested change:

			$( '<label style="display:block"></label>' ).append( $radio, label.childNodes ).appendTo( container );

to

			$( '<label style="display:block; margin-left:1ex;"></label>' ).append( $radio, label.childNodes ).appendTo( container );

and

			$( '<label style="display:block">Show all</label>' ).prepend(

to

			$( '<label style="display:block; margin-left:1ex;">Show all</label>' ).prepend(

Thanks in advance,
cmɢʟee⎆τaʟκ 21:12, 10 July 2023 (UTC)[reply]

Please feel free to submit an edit request. Izno (talk) 19:57, 13 July 2023 (UTC)[reply]

Interface-protected edit request on 8 July 2023: Fix grammar of "Show all" label

This edit request has been answered. Set the |answered= or |ans= parameter to no to reactivate your request.

Is it possible to change the line

			$( '<label style="display:block">Show all</label>' ).prepend(

to

			$( '<label style="display:block">Show ' + (switchers.length > 2 ? 'all' : 'both') + '</label>' ).prepend(

so that the labels have correct grammar ("Show both" when there are two images and "Show all" when there are more)?

Thanks! cmɢʟee⎆τaʟκ 00:52, 8 July 2023 (UTC)[reply]

Show all isn't incorrect grammar for the case of two? Izno (talk) 01:27, 8 July 2023 (UTC)[reply]

Thanks for your reply, @Izno: I was taught to use "both" for exactly two items and "all" for more than two but haven't been able to find an authroritative source addressing this specifically, though Dual_(grammatical_number) states

“

The majority of modern Indo-European languages, including modern English, have lost the dual number through their development. Its function has mostly been replaced by the simple plural. They may however show residual traces of the dual, for example in the English distinctions: both vs. all, either vs. any, neither vs. none, and so on. A commonly used sentence to exemplify dual in English is "Both go to the same school." where both refers to two specific people who had already been determined in the conversation.

”

I've asked on http://en.wikipedia.org/w/index.php?title=Wikipedia:Reference_desk/Language&diff=prev&oldid=1164599617

Cheers,
cmɢʟee⎆τaʟκ 00:43, 10 July 2023 (UTC)[reply]

@Izno: Wikipedia:Reference_desk/Language#Can_"all"_apply_to_exactly_two_items? concurs that "all" is fine so I withdraw the change request. It would be good if the space-before-labels request could be addressed, though. Thanks, cmɢʟee⎆τaʟκ 21:01, 10 July 2023 (UTC)[reply]

The following discussion is closed and will soon be archived.

Interface-protected edit request on 27 July 2023: Add space between the button and text

This edit request has been answered. Set the |answered= or |ans= parameter to no to reactivate your request.

As per #Space between the button and text above, is it possible to change the lines

−

$( '<label style="display:block"></label>' ).append( $radio, label.childNodes ).appendTo( container );

+

$( '<label style="display:block; margin-left:1ex;"></label>' ).append( $radio, label.childNodes ).appendTo( container );

−

$( '<label style="display:block">Show all</label>' ).prepend(

+

$( '<label style="display:block; margin-left:1ex;">Show all</label>' ).prepend(

so that there is some space between the labels and the radio buttons?

Thanks in advance,
cmɢʟee⎆τaʟκ 21:27, 27 July 2023 (UTC)[reply]

Cmglee, I changed your request to use {{StringDiff}}. However, your proposed change won't work, it would just move the radio button+label to the right.

if ( typeof switchers == 'undefined' ) { mw.util.addCSS('.switcher-container label input{margin-right:0.5em}') }

works but shouldn't this gadget use ooUI instead? — Alexis Jazz (talk or ping me) 11:13, 21 August 2023 (UTC)[reply]

Wikipedia:Village pump (technical)#Switcher gadget: please take a quick look — Alexis Jazz (talk or ping me) 17:51, 21 August 2023 (UTC)[reply]

Hi @Alexis Jazz: Thank you very much for looking into this. I'm unfamiliar with Mediawiki software so cannot comment on what the correct approach is but am happy to beta-test it. https://commons.wikimedia.beta.wmflabs.org/wiki/Template:Switcher has adequate space between each radio button and its label, though there is much larger vertical separation between rows than on Template:Switcher/doc#Example: Firefox's Inspector shows that the wmflabs version has each label in a separate div where the original template has just label elements. Cheers, cmɢʟee⎆τaʟκ 16:05, 22 August 2023 (UTC)[reply]

 Not done for now: please establish a consensus for this alteration before using the {{Edit interface-protected}} template. Izno (talk) 21:47, 8 September 2023 (UTC)[reply]

This is fixing an obvious problem, rather than being a potentially controversial change. Number 57 21:52, 8 September 2023 (UTC)[reply]

@Number 57, have you tested the alternatives sufficiently? Consensus isn't just a question of why something needs changing but what needs to change, and I do not see above that there's a consensus on what needs to change. @Alexis Jazz said "that doesn't work" (and I trust Alexis on the point), provided a different suggestion but not a specific location to insert it in. I would have run with that suggestion if they had, or if there were actual agreement on the choice of change. Izno (talk) 23:23, 8 September 2023 (UTC)[reply]

No (and you know I haven't as I've made it clear that I don't know how to resolve this). The issue was that you appeared to be requiring a consensus for the change, when none is needed. It merely needs someone to have come up with a solution that works. If the solution above didn't work, you could have declined the edit request because it didn't work (or was unclear it would work) rather than saying the problem was a lack of consensus for the change. Also, no need to ping me as I have this on my watchlist. Cheers, Number 57 23:29, 8 September 2023 (UTC)[reply]

Izno, I just realized the condition could be simpler: (now with context and just to be safe mw.loader)

$.each( document.querySelectorAll( '.switcher-container' ), function ( i, container ) {
		if ( i == 0 ) { mw.loader.using(['mediawiki.util'], function(){mw.util.addCSS('.switcher-container label input{margin-right:0.5em}')}) }
		var selected, $radio;

The condition is only to prevent the CSS from being added multiple times. It wouldn't really hurt if the CSS would be re-added for each switcher but it'd be sloppy. — Alexis Jazz (talk or ping me) 03:11, 9 September 2023 (UTC)[reply]

You don't have to load mediawiki.util if you use mw.loader.addStyleTag(). Nardog (talk) 03:40, 9 September 2023 (UTC)[reply]

Nardog, thanks for the info! Indeed, that appears to work as well. According to https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.util addCSS may "call the mw.loader.addStyleTag method directly", so addStyleTag is a subset of addCSS it's complicated, addStyleTag returns an element and accepts a second argument to define the next node while addCSS calls addStyleTag and returns the stylesheet instead of the element. Either way, we're not using whatever is returned so it makes no difference for this. Loading mediawiki.util isn't a big deal as it is (almost?) universally loaded anyway, but using addStyleTag the code could indeed be shortened:

$.each( document.querySelectorAll( '.switcher-container' ), function ( i, container ) {
		if ( i == 0 ) { mw.loader.addStyleTag('.switcher-container label input{margin-right:0.5em}') }
		var selected, $radio;

— Alexis Jazz (talk or ping me) 05:31, 9 September 2023 (UTC)[reply]

Cool, I've made this adjustment. No comment on Nardog's. Izno (talk) 03:46, 9 September 2023 (UTC)[reply]

Implement in the Occitan Wikipedia. How?

Hello, this .js exists in the English and Catalan versions, but not in the Occitan one. As a bureaucrat of the OC wikipedia, I am not allowed to create it. Any idea on who could do this for us? Thanks in advance. Best regards. — J. F. B. (me´n parlar) 17:15, 3 January 2024 (UTC)[reply]

You need to be an interface admin. As a crat you have the technical ability to go to oc:Special:UserRights/Jfblanc and tick the "interfàcia d'administracion" box and save, which would then give you the ability to edit the page. Note that interface admins are required by WMF policy to have 2FA enabled. * Pppery * _{it has begun...} 19:02, 3 January 2024 (UTC)[reply]

Your wiki currently has no interface administrators [1] but you can both add the group to yourself and others. If you want it to be a gadget then oc:MediaWiki:Gadgets-definition also needs a line like * switcher [ResourceLoader |default] |switcher.js in MediaWiki:Gadgets-definition. This also requires an interface administrator. PrimeHunter (talk) 22:17, 3 January 2024 (UTC)[reply]

Interface-protected edit request on 1 August 2024 fix floating radio buttons

This edit request has been answered. Set the |answered= or |ans= parameter to no to reactivate your request.

Old solution
− label style="display:block" + label style="display:inline-block" Edit: also need this: − $( label ).remove(); + if ( j ) { $( '<br>' ).appendTo( container ); } $( label ).remove();

−

$( '<label style="display:block"></label>' )

+

$( '<label style="display:' + (j ? "block" : "inline-block") + '"></label>' )

This should fix the problem at 2024_Wayanad_landslides (sandbox). The map's right float was separating the circle of the radio button from the label. It's weird to see a radio button circle near the top left of the map while the other labels are below it. 142.113.140.146 (talk) 07:57, 1 August 2024 (UTC)[reply]

What sort of testing have you completed for this? — xaosflux ^Talk 13:32, 1 August 2024 (UTC)[reply]

Thank you for looking into this. Upon further testing on the non-first labels, I fixed a bug I accidentally introduced.

I originally used DevTools on the CSS of those 2 pages to add inline-block to the first label. I tested the result looks good on {Windows,Linux,Android} {Chrome,Firefox}. The bug is slightly different on Firefox Windows, but is also fixed. Android looks unchanged. I then tested a random sample of 10 pages from Special:WhatLinksHere/Template:Location_map, rejection-sampling out anything without radio buttons. The CSS editing worked.

I would appreciate testing from a registered editor with the access level to edit JavaScript (or userscripts). Someone can also propose another solution as I am unfamiliar with JQuery and my goal is just fixing the display of that article. 142.113.140.146 (talk) 19:08, 1 August 2024 (UTC)[reply]

 Done I used slightly different code to achieve the same result. * Pppery * _{it has begun...} 22:19, 19 August 2024 (UTC)[reply]