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 = $("div.checklist");
    if (!$checklists.length) return;

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

    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();
    }

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

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

        // Find and replace each <li> with a <label>
        $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 $label = $('<label>')
                .css({ display: 'block', margin: '5px 0' })
                .append($checkbox)
                .append(" ")
                .append($li.contents());

            $li.replaceWith($label);
        });

        // Remove the <ul> wrapper if empty
        $checklist.find("ul").each(function () {
            if (!$(this).children().length) {
                $(this).remove();
            }
        });

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

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