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( '

\

<img src="' + zoomInImg + '" alt="zoom in" onclick="zoom(1)">\ <img src="' + zoomOutImg + '" alt="zoom out" onclick="zoom(-1)">\ <img id="toggleButton" src="' + toggleImgs[ +useCustom ] +

'" alt="toggle zoom" onclick="toggle()">&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(); } }