Gebruiker:Freestyle/common.js

// Voeg leesmodus toe aan persoonlijke JavaScript
$(function() {
  // Functie om te controleren of darkmode actief is
  function isDarkModeActive() {
    return document.documentElement.classList.contains('skin-theme-clientpref-night');
  }

  // Creëer de leesmodus-knop
  var leesmodusLink = $('<li id="pt-leesmodus"><a>🕮 Lees-modus</a></li>');
  
  // Voeg de leesmodus-knop toe naast de afmeld-knop
  $('#pt-logout').after(leesmodusLink);
  
  // Oorspronkelijke stijl opslaan
  var originalStyles = {
    body: $('body').attr('style') || '',
    content: $('#content').attr('style') || ''
  };
  
  // Leesmodus actief of niet
  var leesmodusActief = false;
  
  // Functie voor activeren leesmodus
  function activeerLeesmodus() {
    // Maak een lijst van elementen om te verbergen, zonder de persoonlijke tools
    $('#mw-panel, #left-navigation, #footer, #siteNotice, #siteSub, #contentSub, #jump-to-nav, .mw-indicators, .mw-editsection, #catlinks').hide();

    // Alleen voor Vector-2022
    if (mw.config.get('skin') === 'vector-2022') {
      $('.vector-header-container').children().not('#p-personal').hide();
      $('#vector-main-menu-dropdown').hide();
    }
    
    // Bepaal kleuren op basis van huidige thema
    var isDark = isDarkModeActive();
    var bgColor = isDark ? '#1c1f2b' : '#f8f9fa';
    var contentBgColor = isDark ? '#2a2e3a' : 'white';
    var textColor = isDark ? '#d5d9e0' : 'inherit';
    var borderColor = isDark ? '#444' : '#ddd';
    var shadowColor = isDark ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)';
    var personalToolsBg = isDark ? 'rgba(40, 44, 55, 0.9)' : 'rgba(255, 255, 255, 0.9)';
    
    // Behoud personal tools, waaronder onze leesmodus-knop
    $('#p-personal').css({
      'top': '10px',
      'right': '20px',
      'z-index': '1000',
      'background-color': personalToolsBg,
      'border-radius': '5px',
      'padding': '5px',
      'box-shadow': '0 0 5px ' + shadowColor
    });
    
    // Verberg andere elementen in de header, maar niet #p-personal
    $('#mw-head').children().not('#p-personal').hide();
    
    // Pas de stijl aan voor betere leesbaarheid
    $('body').css({
      'background-color': bgColor,
      'padding': '20px'
    });
    
    $('#content').css({
      'margin': '0 auto',
      'max-width': '800px',
      'background-color': contentBgColor,
      'color': textColor,
      'padding': '30px',
      'border': '1px solid ' + borderColor,
      'box-shadow': '0 0 10px ' + shadowColor,
      'border-radius': '5px'
    });
    
    // Vergroot de tekst
    $('#mw-content-text').css({
      'font-size': '130%',
      'line-height': '1.6'
    });
    
    // Verander de knoptekst naar "X Sluiten"
    $('#pt-leesmodus a').text('❎ Sluiten');
    
    // Plaats de inhoud wat meer naar boven, ivm onnodige witruimte
    // Versmal de breedte naar 80% en centreer de artikelinhoud
    $('#content').css({
      'margin-top': '-2em',
      'width': '80%',
      'margin-left': 'auto',
      'margin-right': 'auto'
    });
    
    leesmodusActief = true;
  }
  
  // Functie voor deactiveren leesmodus
  function deactiveerLeesmodus() {
    // Maak alle verborgen elementen weer zichtbaar
    $('#mw-panel, #mw-head, #left-navigation, #footer, #siteNotice, #siteSub, #contentSub, #jump-to-nav, .mw-indicators, .mw-editsection, #catlinks').show();
    $('#mw-head').children().show();
    // Alleen voor Vector-2022
    if (mw.config.get('skin') === 'vector-2022') {
      $('.vector-header-container').show();
      $('#vector-main-menu-dropdown').show();
    }
    
    // Herstel originele stijlen
    $('body').attr('style', originalStyles.body);
    $('#content').attr('style', originalStyles.content);
    $('#p-personal').attr('style', '');
    $('#mw-content-text').css({
      'font-size': '',
      'line-height': ''
    });
    
    // Verander de knoptekst terug naar "Lees-modus"
    $('#pt-leesmodus a').text('🕮 Lees-modus');
    
    leesmodusActief = false;
  }
  
  // Event handler voor de leesmodus-knop
  $('#pt-leesmodus').on('click', function() {
    if (leesmodusActief) {
      deactiveerLeesmodus();
    } else {
      activeerLeesmodus();
    }
  });
  
  // Voeg wat stijl toe aan de leesmodus-knop
  $('<style>')
    .text('#pt-leesmodus { cursor: pointer; } #pt-leesmodus:hover { text-decoration: underline; }')
    .appendTo('head');
});