470
edits
No edit summary |
No edit summary |
||
Line 110: | Line 110: | ||
}); | }); | ||
} | } | ||
}); | |||
$( function(){ | |||
// 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 | |||
$('#content').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()"> </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(); | |||
} | |||
} | |||
}); | }); | ||