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)

notjusttired Done! Kmdenmark (talk) 18:34, July 11, 2019 (EDT)

Great, thanks! notjusttired (talk) 18:46, 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 = $( '<input type="radio">' ).attr( 'name', radioName ).click( function () {
					$( activeElement ).hide();
					$( self ).show();
					activeElement = self;
				} );
				$( '<label style="display:inline-block"></label>' ).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 = $( '<input type="radio">' ).attr( 'name', radioName ).click( function () {
					 $( elements ).show();
					 activeElement = elements;
				} );
// Don't add show all to group
//				$( '<label style="display:inline-block" class="switcher-label-showall">Show all</label>' ).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 = $( '<input type="radio">' ).attr( 'name', radioName ).click( function () {
					$( activeElement ).hide();
					$( self ).show();
					activeElement = self;
				} );
				$( '<label style="display:block"></label>' ).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 = $( '<input type="radio">' ).attr( 'name', radioName ).click( function () {
					$( elements ).show();
					activeElement = elements;
				} );
				$( '<label style="display:block">Show all</label>' ).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)