MediaWiki:Common.js: Difference between revisions

Undo revision 104883 by Gurwinder (talk)
No edit summary
Tags: Manual revert Reverted
(Undo revision 104883 by Gurwinder (talk))
Tag: Undo
 
Line 263: Line 263:




$( function(){
$(function () {
// toggled by toggle button. also determines which toggle button image to use
var useCustom = false;
var useCustom = false;
 
// toggleImgs[0] to switch to custom, toggleImgs[1] to revert to default
var zoomInSVG =
var toggleImgs = [
'<svg width="22" height="22" viewBox="0 0 24 24">' +
'//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_search_black_24px.svg',
'<path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8L20 21.5 21.5 20z ' +
'//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_youtube_searched_for_black_24px.svg'
'M10 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8z ' +
];
'M11 7H9v2H7v2h2v2h2v-2h2V9h-2z"/>' +
var zoomInImg = '//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_zoom_in_black_24px.svg';
'</svg>';
var zoomOutImg = '//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_zoom_out_black_24px.svg';
 
var zoomOutSVG =
// create DOM elements
'<svg width="22" height="22" viewBox="0 0 24 24">' +
$('#content').prepend('<div id="zoomButtons" style="z-index: 9999;">\
'<path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8L20 21.5 21.5 20z ' +
<img id="zoomInIcon" src="' + zoomInImg + '" alt="zoom in"">\
'M7 9h6v2H7z"/>' +
<img id="zoomOutIcon" src="' + zoomOutImg + '" alt="zoom out"">\
'</svg>';
<img id="toggleButton" src="' + toggleImgs[+ useCustom] + '" alt="toggle zoom">&nbsp</div>');
 
$('#zoomButtons').css({'float': 'right'});
var toggleSVG =
'<svg width="22" height="22" viewBox="0 0 24 24">' +
// find DOM elements used later
'<path d="M5 4h14v2H5zm4 4h6l-2 12h-2z"/>' +
'</svg>';
 
$('#content').prepend(
'<div id="zoomButtons" style="z-index:9999; float:right; display:flex; gap:8px; cursor:pointer;">' +
'<span id="zoomInIcon">' + zoomInSVG + '</span>' +
'<span id="zoomOutIcon">' + zoomOutSVG + '</span>' +
'<span id="toggleButton">' + toggleSVG + '</span>' +
'</div>'
);
 
var $bodyContent = $('.mw-body-content');
var $bodyContent = $('.mw-body-content');
var $toggleButton = $('#toggleButton');
 
var sizes = [parseFloat($bodyContent.css('font-size'))];
// 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;
sizes[1] = sizes[0] + 2;
 
// the + converts bool to 0 or 1 to use as array index
function updateSize() {
function updateSize() {
$bodyContent.css({'font-size':(sizes[+ useCustom] + 'pt')});
$bodyContent.css('font-size', sizes[+useCustom] + 'pt');
}
}
function toggle() {
function toggle() {
useCustom = !useCustom;
useCustom = !useCustom;
$toggleButton.attr('src',toggleImgs[+ useCustom]);
updateSize();
updateSize();
}
}
function zoom(dif) {
function zoom(dif) {
sizes[1] += dif;
sizes[1] += dif;
Line 308: Line 314:
}
}
}
}
 
$( '#zoomInIcon' ).on( 'click', function(){
$('#zoomInIcon').on('click', function () {
console.log("Zoom +");
zoom(1);
zoom(1);
});
});
 
$( '#zoomOutIcon' ).on( 'click', function(){
$('#zoomOutIcon').on('click', function () {
console.log("Zoom -");
zoom(-1);
zoom(-1);
});
});
 
$( '#toggleButton' ).on( 'click', toggle );
$('#toggleButton').on('click', toggle);
});
});