imported>Loramin at 23:42, 21 April 2021

2021-04-21T23:42:33Z

New page

/**
* 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();

MediaWiki:CheckboxLists.js - Revision history

imported>Loramin at 23:42, 21 April 2021