User:Novusistic/TUT zoom toggle.js

// This example user script is taken from // **https://www.mediawiki.org/wiki/Special:MyLanguage/ChickTech_High_School_Kickoff_2017/Tasks**.

// Determines whether the displayed page is using default font or custom font. It is toggled by // the toggle button and also determines which toggle button image to use. var useCustom = false;

// toggleImgs[0] to switch to custom, toggleImgs[1] to revert to default var toggleImgs = [ '//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_search_black_24px.svg', '//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_youtube_searched_for_black_24px.svg' ]; var zoomInImg = '//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_zoom_in_black_24px.svg'; var zoomOutImg = '//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_zoom_out_black_24px.svg';

// Creates DOM elements for zoom and toggle button images. $( '#firstHeading' ).append( ' \ \ \ &nbsp ' ); $( '#zoomButtons' ).css( { float: 'right' } );

// Finds DOM elements. To be used later. var $bodyContent = $( '.mw-body-content' ); var $toggleButton = $( '#toggleButton' );

// sizes[0] represents default font and sizes[1] is custom font. var sizes = [ parseFloat( $( '.mw-body-content' ).css( 'font-size' ) ) ];

// Sets default custom zoom of 2. sizes[ 1 ] = sizes[ 0 ] + 2;

/** * Update the font-size. * * Changes the font-size of the displayed page based on whether the font is default (size[0]) * or custom (size[1]). */ function updateSize { $bodyContent.css( { 'font-size': sizes[ +useCustom ] + 'pt' } ); }

/** * Toggles the font-size and magnifying glasses button images. */ function toggle { useCustom = !useCustom; $toggleButton.attr( 'src', toggleImgs[ +useCustom ] ); updateSize; }

/** * Updates the font-size by 1pt. * * It updates the font-size by 1pt. If zoom in button is clicked, it increases the font-size by * 1pt and vice-versa. * * @param {number} dif Amount by which to zoom in or zoom out. */ function zoom( dif ) { sizes[ 1 ] += dif;

if ( useCustom ) { updateSize; } else { toggle; } }