MediaWiki talk:Gadget-switcher.js

New version
User:Kmdenmark Please delete the existing code and replace with the code below - but without the "pre" bits. This will add classes (for formatting) to allow different parts to be hidden or shown. I haven't been able to test it but it's only currently used in a single (unfinished) page and in some examples. Changes 1. put options in horizontal list instead. 2. Hide "show all". Thanks notjusttired (talk) 15:58, July 11, 2019 (EDT)

( function {	'use strict';	$( function  { $( document.querySelectorAll( '.switcher-container' ) ).each( function ( i ) {			var activeElement, $showAllRadio;			var elements = [], container = this, radioName = 'switcher-' + i;			$( this ).children.each( function { var self = this, $showRadio; var $labelContainer = $( self ).find( '.switcher-label' ); var $labelText = $labelContainer.contents; if ( !$labelText.length ) { return; }				elements.push( self ); $showRadio = $( ' ' ).attr( 'name', radioName ).click( function {					$( activeElement ).hide;					$( self ).show;					activeElement = self;				} ); $( ' ' ).append( $showRadio, $labelText ).appendTo( container ); if ( !activeElement ) { activeElement = self; $showRadio.prop( 'checked', true ); } else if ( $labelContainer.is( '[data-switcher-default]' ) ) { $showRadio.click; } else { $( self ).hide; }				$labelContainer.remove; } );			if ( elements.length > 1 ) {

$showAllRadio = $( ' ' ).attr( 'name', radioName ).click( function {					 $( elements ).show;					 activeElement = elements;				} ); // Don't add show all to group //				$( 'Show all ' ).prepend( $showAllRadio ).appendTo( container ); } else if ( elements.length === 1 ) { $showRadio.remove; }		} );	} ); } );

Please create -- notjusttired (talk) 09:09, July 2, 2019 (EDT)
Please create the page MediaWiki:Gadget-switcher.js by coping the code below, taken from Wikipedia, but without the "pre" bits. ( function {	'use strict';	$( function  { $( document.querySelectorAll( '.switcher-container' ) ).each( function ( i ) {			var activeElement, $showAllRadio;			var elements = [], container = this, radioName = 'switcher-' + i;			$( this ).children.each( function { var self = this, $showRadio; var $labelContainer = $( self ).find( '.switcher-label' ); var $labelText = $labelContainer.contents; if ( !$labelText.length ) { return; }				elements.push( self ); $showRadio = $( ' ' ).attr( 'name', radioName ).click( function {					$( activeElement ).hide;					$( self ).show;					activeElement = self;				} ); $( ' ' ).append( $showRadio, $labelText ).appendTo( container ); if ( !activeElement ) { activeElement = self; $showRadio.prop( 'checked', true ); } else if ( $labelContainer.is( '[data-switcher-default]' ) ) { $showRadio.click; } else { $( self ).hide; }				$labelContainer.remove; } );			if ( elements.length > 1 ) {				$showAllRadio = $( ' ' ).attr( 'name', radioName ).click( function { $( elements ).show; activeElement = elements; } );				$( 'Show all ' ).prepend( $showAllRadio ).appendTo( container );			} else if ( elements.length === 1 ) {				$showRadio.remove;			}		} ); } ); } );

Purpose
This is an interactive gadget that is used with Template:Switcher and Template:Radio_button_input, it shows clickable buttons.

The aim is to create something like this latin alphabet switcher to make a simple on / off box

User:Kmdenmark notjusttired (talk) 09:09, July 2, 2019 (EDT)


 * notjusttired Done!
 * Thanks User:Kmdenmark 21:06, July 2, 2019 (EDT)