MediaWiki:Gadget-checkBox.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.

//This code was generated with Copilot.

$(function () {
    const $checklists = $("ul.checklist");
    if (!$checklists.length) return; // Exit early if no checklist found

    const pageKey = mw.config.get('wgPageName') || 'defaultChecklist';

    // Simple hash function for strings
    function hashString(str) {
        let hash = 0;
        for (let i = 0; i < str.length; i++) {
            hash = ((hash << 5) - hash) + str.charCodeAt(i);
            hash |= 0;
        }
        return hash.toString();
    }

    // Process each checklist separately
    $checklists.each(function (listIndex) {
        const $checklist = $(this);
        const checklistKey = `${pageKey}-checklist-${listIndex}`;
        let savedState = {};

        try {
            savedState = JSON.parse(localStorage.getItem(checklistKey)) || {};
        } catch (e) {
            savedState = {};
        }

        $checklist.find("li").each(function () {
            const $li = $(this);
            const rawText = $li.text().trim();
            const itemId = hashString(rawText);
            const isChecked = savedState[itemId] === true;

            const $checkbox = $('<input type="checkbox">')
                .prop("checked", isChecked)
                .on("change", function () {
                    savedState[itemId] = $(this).prop("checked");
                    localStorage.setItem(checklistKey, JSON.stringify(savedState));
                });

            const labelContent = $('<label>').append($checkbox).append(" ").append($li.contents());
            $li.empty().append(labelContent);
        });

        const resetButton = $('<button>')
            .text('Reset This Checklist')
            .css({ margin: '10px 0', display: 'block' })
            .on('click', function () {
                $checklist.find("li input[type=checkbox]").each(function () {
                    $(this).prop("checked", false);
                });
                localStorage.removeItem(checklistKey);
            });

        $checklist.before(resetButton);
    });
});