264
edits
No edit summary Tags: Manual revert Reverted |
Tag: Undo |
||
| Line 263: | Line 263: | ||
$( function(){ | $(function () { | ||
var useCustom = false; | var useCustom = false; | ||
var zoomInSVG = | |||
'<svg width="22" height="22" viewBox="0 0 24 24">' + | |||
' | '<path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8L20 21.5 21.5 20z ' + | ||
' | 'M10 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8z ' + | ||
'M11 7H9v2H7v2h2v2h2v-2h2V9h-2z"/>' + | |||
var | '</svg>'; | ||
var | |||
var zoomOutSVG = | |||
'<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 ' + | ||
'M7 9h6v2H7z"/>' + | |||
'</svg>'; | |||
var toggleSVG = | |||
'<svg width="22" height="22" viewBox="0 0 24 24">' + | |||
'<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 sizes = [parseFloat($bodyContent.css('font-size'))]; | |||
var sizes = [parseFloat($ | |||
sizes[1] = sizes[0] + 2; | sizes[1] = sizes[0] + 2; | ||
function updateSize() { | function updateSize() { | ||
$bodyContent.css( | $bodyContent.css('font-size', sizes[+useCustom] + 'pt'); | ||
} | } | ||
function toggle() { | function toggle() { | ||
useCustom = !useCustom; | useCustom = !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 () { | ||
zoom(1); | zoom(1); | ||
}); | }); | ||
$( '#zoomOutIcon' ).on( 'click', function(){ | $('#zoomOutIcon').on('click', function () { | ||
zoom(-1); | zoom(-1); | ||
}); | }); | ||
$( '#toggleButton' ).on( 'click', toggle ); | $('#toggleButton').on('click', toggle); | ||
}); | }); | ||