User:Xover/focus.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

// Global to track whether we're currently focussed or blurred.
var vFocusState = 'blurry'; // By default we're blurred.

// Make sure the utilities module is loaded (will only load if not already)
mw.loader.using(['mediawiki.util', 'mediawiki.cookie'], function () {

  // Wait for the page to be parsed
  $(document).ready(function () {

    // First time through, check for a cookie.
    let myFocusState = mw.cookie.get('vFocusState') || vFocusState;

    // If cookie differs from default, switch to state from the cookie.
    // NB: Logic is the exact opposite from the if/else below!
    // This is not a toggle. The later one is.
    // If cookie says we should be focussed, then focus; and blur if blurred.
    if (myFocusState != vFocusState) {
      if (myFocusState == 'blurry') {
        vBlur();
      } else if (myFocusState == 'focussed') {
        vFocus();
      } else {
        // TODO: Error handling? What error handling?
        vBlur(); // Let's just default back to blurry in that case.
      }
    }

    // Put a clickable dingus somewhere (top left corner) to control focus state
    var dingus = $("<img/>", {
      'src': 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Screenshot_font_awesome.svg/20px-Screenshot_font_awesome.svg.png',
      'id': 'focus-dingus'
    });
    dingus.css({
      'position': 'fixed',
      'top': '0',
      'left': '0'
    });

    // Attach a function to its click handler
    // NB: This is a toggle, unlike the above.
    // If we're blurred, then focus; if focussed, then blur.
    dingus.click(function() {
      let myFocusState = mw.cookie.get('vFocusState');
      if (myFocusState == 'blurry') {
        vFocus();
      } else if (myFocusState == 'focussed') {
        vBlur();
      } else {
        // TODO: Error handling? What error handling?
        vBlur(); // Let's just default back to blurry in that case.
      }
    });
    dingus.appendTo('body');
  });
});

function vFocus() {
  mw.cookie.set('vFocusState', 'focussed'); // Save current state in cookie.

  $('#mw-page-base').hide('slow');
  $('#mw-head-base').hide('slow');
  $('#mw-panel').hide('slow');
  $('#p-personal').hide('slow');
  $('#p-search').hide('slow');
  $('.mw-indicators').hide('slow');
  $('#content').css('margin-left', '0');
  $('#right-navigation').css('margin-top', '0');
  $('#left-navigation').css('margin-top', '0');

  // Additional elements for page history
  $('#contentSub').hide('slow');
  $('#mw-history-searchform').hide('slow');
  $('.mw-history-legend').hide('slow');
  $('.mw-history-compareselectedversions-button').css('float', 'right');

  // Additional elements for the watchlist
//  $('#mw-content-text > p').hide('slow');
  $('#mw-wlheader-showupdated').hide('slow');
  $('#mw-watchlist-resetbutton').hide('slow');
  $('#mw-watchlist-form').hide('slow');
}

function vBlur() {
  mw.cookie.set('vFocusState', 'blurry'); // Save current state in cookie.

  $('#mw-page-base').show('slow');
  $('#mw-head-base').show('slow');
  $('#mw-panel').show('slow');
  $('#p-personal').show('slow');
  $('#p-search').show('slow');
  $('.mw-indicators').show('slow');
  $('#content').css('margin-left', '11em');
  $('#right-navigation').css('margin-top', '2.5em');
  $('#left-navigation').css('margin-top', '2.5em');

  // Additional elements for page history
  $('#contentSub').show('slow');
  $('#mw-history-searchform').show('slow');
  $('.mw-history-legend').show('slow');
  $('.mw-history-compareselectedversions-button').css('float', 'none');

  // Additional elements for the watchlist
//  $('#mw-content-text > p').show('slow');
  $('#mw-wlheader-showupdated').show('slow');
  $('#mw-watchlist-resetbutton').show('slow');
  $('#mw-watchlist-form').show('slow');
}