« Utilisateur:Daniel/common.js » : différence entre les versions

Version du 13 novembre 2023 à 16:31

/*******************************************************************************/
/* Javascript ...	pour test avant de passer en common pour tous				*/
/*																				*/
/* http://www.mediawiki.org/w/index.php?...										*/
/********************************************************************************/

alert("Dans D/common.js");

// toggled by toggle button. 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';

// create DOM elements
$('#firstHeading').append('<div id="zoomButtons">\
<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</div>');
$('#zoomButtons').css({'float': 'right'});

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

// sizes[0] is default, sizes[1] is custom
var sizes = [parseFloat($('.mw-body-content').css('font-size'))];
// default custom zoom of 2
sizes[1] = sizes[0] + 2;

// the + converts bool to 0 or 1 to use as array index
function updateSize() {
	$bodyContent.css({'font-size':(sizes[+ useCustom] + 'pt')});
}
function toggle() {
	useCustom = !useCustom;
	$toggleButton.attr('src',toggleImgs[+ useCustom]);
	updateSize();
}
function zoom(dif) {
	sizes[1] += dif;
	if (useCustom) {
		updateSize();
	} else {
		toggle();
	}
}