MediaWiki:Gadget-ReadingMode.js
OBS: Efter du har publicerat sidan kan du behöva tömma din webbläsares cache för att se ändringarna.
- Firefox / Safari: Håll ned Skift och klicka på Uppdatera sidan eller tryck Ctrl-F5 eller Ctrl-R (⌘-R på Mac)
- Google Chrome: Tryck Ctrl-Skift-R (⌘-Skift-R på Mac)
- Internet Explorer / Edge: Håll ned Ctrl och klicka på Uppdatera eller tryck Ctrl-F5
- Opera: Tryck Ctrl-F5.
if ( mw.config.get('wgNamespaceNumber') === 0 && mw.config.get('wgAction') === 'view' ) {
$( function () {
'use strict';
var
c = mw.cookie,
title = 'View optimized for reading',
exittitle = 'Exit the reading mode',
text = 'Reading mode',
exittext = 'Exit reading mode',
settingstext = 'Settings',
settingstitle = 'Settings for the reading mode',
typeofoptions = 'Choose type of options',
typeofoptionstitle = 'Settings',
buttonfontsizetext = 'Font size',
buttonfontsizetitle = 'Increase or decrease the font size',
buttonfontfamilytext = 'Typeface',
buttonfontfamilytitle = 'Change the typeface',
buttontextaligntext = 'Text alignment',
buttontextaligntitle = 'Set preference for text alignment',
buttonmaxwidthtext = 'Line length',
buttonmaxwidthtitle = 'Set the maximum line length',
buttonreferencevisibilitytext = 'Reference visibility',
buttonreferencevisibilitytitle = 'Decide whether or not references should be shown',
buttonresettext = 'Reset',
buttonresettitle = 'Delete all reading mode cookies',
fontsizemsg = 'Set the font size in pixels',
fontfamilymsg = 'Enter the name of the preferred typeface',
textalignmsg = 'Set the way the text should align',
maxwidthmsg = 'Set the maximum number of characters per line',
referencevisibilitymsg = 'Decide whether or not the numbers in brackets for references should be shown',
textalignleft = 'Left',
textalignright = 'Right',
textaligncenter = 'Centered',
textalignjustify = 'Justified',
referencevisibilityshow = 'Show',
referencevisibilityhide = 'Hide',
savetext = 'Save',
savetitle = 'Save the input and close the dialog';
if ( mw.config.get('wgUserLanguage') === 'sv' ) {
title = 'Vy optimerad för läsning';
exittitle = 'Gå ur läsläget';
text = 'Läsläge';
exittext = 'Gå ur läsläget';
settingstext = 'Inställningar';
settingstitle = 'Inställningar för läsläget';
typeofoptions = 'Välj typ av inställningar';
typeofoptionstitle = 'Inställningar';
buttonfontsizetext = 'Teckenstorlek';
buttonfontsizetitle = 'Öka eller minska teckenstorleken';
buttonfontfamilytext = 'Typsnitt';
buttonfontfamilytitle = 'Ändra typsnitt';
buttontextaligntext = 'Marginaljustering';
buttontextaligntitle = 'Ändra inställningar för marginaljustering';
buttonmaxwidthtext = 'Radbredd';
buttonmaxwidthtitle = 'Bestäm maximal radbredd';
buttonreferencevisibilitytext = 'Synlighet för noter';
buttonreferencevisibilitytitle = 'Bestäm huruvida noter ska vara synliga eller ej';
buttonresettext = 'Återställ';
buttonresettitle = 'Ta bort alla cookies för läsläget';
fontsizemsg = 'Bestäm teckenstorlek i antal pixlar';
fontfamilymsg = 'Skriv in namnet på önskat typsnitt';
textalignmsg = 'Bestäm hur texten ska justeras';
maxwidthmsg = 'Bestäm maximalt antal tecken per rad';
referencevisibilitymsg = 'Bestäm huruvida siffrorna inom hakparenteser för referenser ska visas';
textalignleft = 'Rak vänstermarginal';
textalignright = 'Rak högermarginal';
textaligncenter = 'Centrerad';
textalignjustify = 'Rak vänster- och högermarginal';
referencevisibilityshow = 'Visa';
referencevisibilityhide = 'Dölj';
savetext = 'Spara';
savetitle = 'Spara inställningar och stäng dialogrutan';
}
$( '#firstHeading' ).append( '<button id="gadget-readingmode-button" title="' + title + '">' + text + '</button>' );
$( '#gadget-readingmode-button' )
.after( '<button id="gadget-readingmode-settings" class="gadget-readingmode-hidden" title="' + settingstitle + '">' + settingstext + '</button>' )
.click( function( e ) {
var
btn = $( e.target ),
cookiefontsize = c.get( 'gadget-readingmode-fontsize' ),
cookiefontfamily = c.get( 'gadget-readingmode-fontfamily' ),
cookietextalign = c.get( 'gadget-readingmode-textalign' ),
cookiemaxwidth = c.get( 'gadget-readingmode-maxwidth' ),
cookiereferencevisibility = c.get( 'gadget-readingmode-referencevisibility' ),
textelems = $( '#mw-content-text' ).find( 'p, dt' );
if ( btn.text() === text ) {
btn.text( exittext );
} else {
btn.text( text );
}
if ( btn.attr( 'title' ) === title ) {
btn.attr( 'title', exittitle );
} else {
btn.attr( 'title', title );
}
$( '#mw-navigation, #siteNotice, #mw-page-base, .hanvisning_bas, #gadget-readingmode-settings' ).toggleClass( 'gadget-readingmode-hidden' );
textelems.toggleClass( 'gadget-readingmode-centeredtext' );
$( '#content' ).toggleClass( 'gadget-readingmode-noleftmargin' );
$( 'table, .tright, .tleft, .mw-indicators, h1, h2, h3, h4, h5, h6, #toc, .huvudartikel, dd' ).toggleClass( 'gadget-readingmode-removefloat' );
$( 'ol, ul' ).toggleClass( 'gadget-readingmode-centeredlist' );
if ( cookiefontsize ) {
$( '.gadget-readingmode-centeredtext' ).css( 'font-size', cookiefontsize + 'px' );
}
if ( cookiefontfamily ) {
$( '.gadget-readingmode-centeredtext' ).css( 'font-family', cookiefontfamily );
}
if ( cookietextalign ) {
$( '.gadget-readingmode-centeredtext' ).css( 'text-align', cookietextalign );
}
if ( cookiemaxwidth ) {
$( '.gadget-readingmode-centeredtext' ).css( 'max-width', cookiemaxwidth + 'ch' );
}
if ( cookiereferencevisibility ) {
if ( cookiereferencevisibility === 'hidden' ) {
$( '.reference' ).addClass( 'gadget-readingmode-hiddenreference' );
}
}
if ( $( '#gadget-readingmode-settings' ).hasClass( 'gadget-readingmode-hidden' ) ) {
textelems.css( {
'font-size': '',
'font-family': '',
'text-align': '',
'max-width': ''
} );
$( '.reference' ).removeClass( 'gadget-readingmode-hiddenreference' );
}
} );
$( '#gadget-readingmode-settings' ).click( function() {
var dialog = $(
'<div>' +
'<p>' + typeofoptions + '</p>' +
'<div id="gadget-readingmode-buttoncontainer">' +
'<button id="gadget-readingmode-button-fontsize" title="' + buttonfontsizetitle + '">' + buttonfontsizetext + '</button>' +
'<button id="gadget-readingmode-button-fontfamily" title="' + buttonfontfamilytitle + '">' + buttonfontfamilytext + '</button>' +
'<button id="gadget-readingmode-button-textalign" title="' + buttontextaligntitle + '">' + buttontextaligntext + '</button>' +
'<button id="gadget-readingmode-button-maxwidth" title="' + buttonmaxwidthtitle + '">' + buttonmaxwidthtext + '</button>' +
'<button id="gadget-readingmode-button-referencevisibility" title="' + buttonreferencevisibilitytitle + '">' + buttonreferencevisibilitytext + '</button>' +
'</div>' +
'</div>'
);
if ( !$( '.gadget-readingmode-dialog' ).length ) {
dialog.dialog( {
title: typeofoptionstitle,
dialogClass: 'gadget-readingmode-dialog',
close: function( e ) {
$( e.target ).dialog( 'destroy' ).remove();
}
} );
if ( c.get( 'gadget-readingmode-fontsize' ) || c.get( 'gadget-readingmode-fontfamily' ) || c.get( 'gadget-readingmode-textalign' ) || c.get( 'gadget-readingmode-maxwidth' ) || c.get( 'gadget-readingmode-referencevisibility' ) ) {
$( '#gadget-readingmode-buttoncontainer' ).after(
'<hr>' +
'<button id="gadget-readingmode-button-reset" title="' + buttonresettitle + '">' + buttonresettext + '</button>'
);
$( '#gadget-readingmode-button-reset' ).click( function() {
c.set( 'gadget-readingmode-fontsize', null );
c.set( 'gadget-readingmode-fontfamily', null );
c.set( 'gadget-readingmode-textalign', null );
c.set( 'gadget-readingmode-maxwidth', null );
c.set( 'gadget-readingmode-referencevisibility', null );
$( '.gadget-readingmode-centeredtext' ).css( {
'font-size': '',
'font-family': '',
'text-align': '',
'max-width': ''
} );
$( '.reference' ).removeClass( 'gadget-readingmode-hiddenreference' );
dialog.dialog( 'destroy' ).remove();
} );
}
$( '#gadget-readingmode-button-fontsize' ).click( function() {
dialog.html(
'<p>' + fontsizemsg + '</p>' +
'<input type="number">' +
'<button id="gadget-readingmode-button-save-fontsize" class="gadget-readingmode-button-save" title="' + savetitle + '">' + savetext + '</button>'
);
$( '.gadget-readingmode-dialog input' ).focus();
$( '#gadget-readingmode-button-save-fontsize' ).click( function() {
var input = $( '.gadget-readingmode-dialog input' ).val();
if ( /\d/.test( input ) ) {
c.set( 'gadget-readingmode-fontsize', input );
$( '.gadget-readingmode-centeredtext' ).css( 'font-size', input + 'px' );
dialog.dialog( 'destroy' ).remove();
}
} );
} );
$( '.gadget-readingmode-dialog' ).on( 'keyup', 'input', function( e ) {
if ( e.which === 13 ) {
$( '.gadget-readingmode-button-save' ).click();
}
} );
$( '#gadget-readingmode-button-fontfamily' ).click( function() {
dialog.html(
'<p>' + fontfamilymsg + '</p>' +
'<input>' +
'<button id="gadget-readingmode-button-save-fontfamily" class="gadget-readingmode-button-save" title="' + savetitle + '">' + savetext + '</button>'
);
$( '.gadget-readingmode-dialog input' ).focus();
$( '#gadget-readingmode-button-save-fontfamily' ).click( function() {
var input = $( '.gadget-readingmode-dialog input' ).val();
c.set( 'gadget-readingmode-fontfamily', input );
$( '.gadget-readingmode-centeredtext' ).css( 'font-family', input );
dialog.dialog( 'destroy' ).remove();
} );
} );
$( '#gadget-readingmode-button-textalign' ).click( function() {
dialog.html(
'<p>' + textalignmsg + '</p>' +
'<input type="radio" name="textalign" value="left"><label for="gadget-readingmode-textalign-left">' + textalignleft + '</label>' +
'<input type="radio" name="textalign" value="right"><label for="gadget-readingmode-textalign-right">' + textalignright + '</label>' +
'<input type="radio" name="textalign" value="center"><label for="gadget-readingmode-textalign-center">' + textaligncenter + '</label>' +
'<input type="radio" name="textalign" value="justify"><label for="gadget-readingmode-textalign-justify">' + textalignjustify + '</label>' +
'<button id="gadget-readingmode-button-save-textalign" class="gadget-readingmode-button-save" title="' + savetitle + '">' + savetext + '</button>'
);
$( '#gadget-readingmode-button-save-textalign' ).click( function() {
var value = $( '.gadget-readingmode-dialog input[name=textalign]:checked' ).val();
if ( $( '.gadget-readingmode-dialog input[name=textalign]' ).is( ':checked' ) ) {
c.set( 'gadget-readingmode-textalign', value );
$( '.gadget-readingmode-centeredtext' ).css( 'text-align', value );
dialog.dialog( 'destroy' ).remove();
}
} );
} );
$( '#gadget-readingmode-button-maxwidth' ).click( function() {
dialog.html(
'<p>' + maxwidthmsg + '</p>' +
'<input type="number">' +
'<button id="gadget-readingmode-button-save-maxwidth" class="gadget-readingmode-button-save" title="' + savetitle + '">' + savetext + '</button>'
);
$( '.gadget-readingmode-dialog input' ).focus();
$( '#gadget-readingmode-button-save-maxwidth' ).click( function() {
var input = $( '.gadget-readingmode-dialog input' ).val();
if ( /\d/.test( input ) ) {
c.set( 'gadget-readingmode-maxwidth', input );
$( '.gadget-readingmode-centeredtext' ).css( 'max-width', input + 'ch' );
dialog.dialog( 'destroy' ).remove();
}
} );
} );
$( '#gadget-readingmode-button-referencevisibility' ).click( function() {
dialog.html(
'<p>' + referencevisibilitymsg + '</p>' +
'<input type="radio" name="referencevisibility" value="shown"><label for="gadget-readingmode-referencevisibility-show">' + referencevisibilityshow + '</label>' +
'<input type="radio" name="referencevisibility" value="hidden"><label for="gadget-readingmode-referencevisibility-hide">' + referencevisibilityhide + '</label>' +
'<button id="gadget-readingmode-button-save-referencevisibility" class="gadget-readingmode-button-save" title="' + savetitle + '">' + savetext + '</button>'
);
$( '#gadget-readingmode-button-save-referencevisibility' ).click( function() {
var value = $( '.gadget-readingmode-dialog input[name=referencevisibility]:checked' ).val();
if ( $( '.gadget-readingmode-dialog input[name=referencevisibility]' ).is( ':checked' ) ) {
c.set( 'gadget-readingmode-referencevisibility', value );
if ( value === 'hidden' ) {
$( '.reference' ).addClass( 'gadget-readingmode-hiddenreference' );
} else if ( value === 'shown' ) {
$( '.reference' ).removeClass( 'gadget-readingmode-hiddenreference' );
}
dialog.dialog( 'destroy' ).remove();
}
} );
} );
}
} );
} );
}