MediaWiki:Gadget-checkBox.js: Difference between revisions

From Working With Glass
Jump to navigation Jump to search
replace don't warp.
Hide reset from printing and make it small text at the bottom of the list instead of ugly button at the top.
 
Line 27: Line 27:
         }
         }


         // Find and replace each <li> with a <label>
         const $labels = [];
 
         $checklist.find("li").each(function () {
         $checklist.find("li").each(function () {
             const $li = $(this);
             const $li = $(this);
Line 47: Line 48:
                 .append($li.contents());
                 .append($li.contents());


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


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


        // Add Reset button
         const resetLink = $('<a>')
         const resetButton = $('<button>')
             .text('Reset this checklist')
             .text('Reset This Checklist')
            .attr('href', '#')
             .css({ margin: '10px 0', display: 'block' })
            .addClass('noprint')
             .on('click', function () {
             .css({
                display: 'inline-block',
                marginTop: '8px',
                fontSize: '0.85em',
                color: '#0077cc',
                textDecoration: 'underline',
                cursor: 'pointer'
            })
             .on('click', function (e) {
                e.preventDefault();
                 $checklist.find("input[type=checkbox]").each(function () {
                 $checklist.find("input[type=checkbox]").each(function () {
                     $(this).prop("checked", false);
                     $(this).prop("checked", false);
Line 68: Line 75:
             });
             });


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

Latest revision as of 08:54, 30 October 2025

//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 = {};
        }

        const $labels = [];

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

            $labels.push($label);
        });

        $checklist.empty();

        $labels.forEach(label => $checklist.append(label));

        const resetLink = $('<a>')
            .text('Reset this checklist')
            .attr('href', '#')
            .addClass('noprint')
            .css({
                display: 'inline-block',
                marginTop: '8px',
                fontSize: '0.85em',
                color: '#0077cc',
                textDecoration: 'underline',
                cursor: 'pointer'
            })
            .on('click', function (e) {
                e.preventDefault();
                $checklist.find("input[type=checkbox]").each(function () {
                    $(this).prop("checked", false);
                });
                localStorage.removeItem(checklistKey);
            });

        $checklist.append(resetLink);
    });
});