MediaWiki:CheckboxLists.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * Set the visible "checked" state of the list items when the page loads
 */
var initializeCheckboxes = function() {
  var $checkboxLis = $('.checkbox-list li');
  var status = getStateByPage('checkbox-status') || {};
  Object.keys(status).forEach(function(key) {
    if (!status[key]) return;

    var index = parseInt(key);
    if (index < 0) return; // A bogus index got set; ignore it
    $checkboxLis.eq(index).addClass('checked');
  });
};

/** Attach click handlers to the spans we added */
var listenForSpanClicks = function() {
  $('.checkbox-list li span').click(function(e) {
    if (e.originalTarget && e.originalTarget !== e.target) return; // for <li>s nested in other <lis>
    if (e.target.tagName === 'A') return; // don't prevent link clicks
    const $li = $(e.target).parent();
    toggleIsChecked($li);
    return false;
  });
};

/**
 * Both changes the DOM to make the item appear visibly checked, and updates
 * the "checked" status in local storage
 */
var toggleIsChecked = function($li) {
  var isChecked = !$li.is('.checked'); // Clicks toggle checked status

  $li.toggleClass('checked', isChecked);
  setCheckedStatus($li, isChecked);
};

/** 
 * Attach click handlers to the lis also, but only use them if the click was
 * on the left (checkbox) part
 */
var listenForLiClicks = function() {
  $('.checkbox-list li').click(function(e) {
    if (e.originalTarget && e.originalTarget !== e.target) return; // for <li>s nested in other <lis>
    if (e.offsetX > 50) return
    var $target = $(e.target);
    toggleIsChecked($target);
    return false;
  });
};

var wrapContentsInSpan = function($li) {
  return '<span>' + $li.html() + '</span>';
};

/**
 * Wrap the contents of all checbox LIs in a span so that clicks only work
 * on the text, not on the LI's entire (ie. page) width
 */
var addWrappingSpans = function() {
  $('.checkbox-list li')
    .map(function(i, li) { return $(li); })
    .each(function(i, $li) { $li.html(wrapContentsInSpan($li)); })
};

/**
 * Sets the status, in local storge, of the checkbox specified by the 
 * provided index, to the providd "isChecked" boolean
 */
var setCheckedStatus = function($li, isChecked) {
  var index = $('.checkbox-list li').index($li);
  if (index < 0) return; // Don't set index -1, it means something went wrong

  var status = getStateByPage('checkbox-status') || {};
  status[index] = isChecked;
  setStateByPage('checkbox-status', status);
};

var setupCheckboxes = function() {
  addWrappingSpans();
  listenForSpanClicks();
  listenForLiClicks();
  initializeCheckboxes();
};

setupCheckboxes();