264
edits
MediaWiki:Common.js: Difference between revisions
no edit summary
No edit summary Tag: Reverted |
No edit summary Tags: Manual revert Reverted |
||
| Line 263: | Line 263: | ||
$(function () { | $( function(){ | ||
// toggled by toggle button. also determines which toggle button image to use | |||
var useCustom = false; | var useCustom = false; | ||
var | // 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'; | |||
var | |||
// create DOM elements | |||
$('#content').prepend('<div id="zoomButtons" style="z-index: 9999;">\ | |||
<img id="zoomInIcon" src="' + zoomInImg + '" alt="zoom in"">\ | |||
<img id="zoomOutIcon" src="' + zoomOutImg + '" alt="zoom out"">\ | |||
<img id="toggleButton" src="' + toggleImgs[+ useCustom] + '" alt="toggle zoom"> </div>'); | |||
var | $('#zoomButtons').css({'float': 'right'}); | ||
// find DOM elements used later | |||
$('#content').prepend( | |||
); | |||
var $bodyContent = $('.mw-body-content'); | var $bodyContent = $('.mw-body-content'); | ||
var $toggleButton = $('#toggleButton'); | |||
var sizes = [parseFloat($ | |||
// 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' | $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 314: | Line 308: | ||
} | } | ||
} | } | ||
$('#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 ); | ||
}); | }); | ||