MediaWiki:Gadget-checkBox.js: Difference between revisions

From Working With Glass
Jump to navigation Jump to search
Oops, I set it up wrong. Fixed to look for div.
Hide reset from printing and make it small text at the bottom of the list instead of ugly button at the top.
 
(2 intermediate revisions by the same user not shown)
Line 3: Line 3:
$(function () {
$(function () {
     const $checklists = $("div.checklist");
     const $checklists = $("div.checklist");
     if (!$checklists.length) return; // Exit early if no checklist found
     if (!$checklists.length) return;


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


    // Simple hash function for strings
     function hashString(str) {
     function hashString(str) {
         let hash = 0;
         let hash = 0;
Line 17: Line 16:
     }
     }


    // Process each checklist separately
     $checklists.each(function (listIndex) {
     $checklists.each(function (listIndex) {
         const $checklist = $(this);
         const $checklist = $(this);
Line 28: Line 26:
             savedState = {};
             savedState = {};
         }
         }
        const $labels = [];


         $checklist.find("li").each(function () {
         $checklist.find("li").each(function () {
Line 42: Line 42:
                 });
                 });


             const labelContent = $('<label>').append($checkbox).append(" ").append($li.contents());
             const $label = $('<label>')
             $li.empty().append(labelContent);
                .css({ display: 'block', margin: '5px 0' })
                .append($checkbox)
                .append(" ")
                .append($li.contents());
 
             $labels.push($label);
         });
         });


         const resetButton = $('<button>')
        $checklist.empty();
             .text('Reset This Checklist')
 
             .css({ margin: '10px 0', display: 'block' })
        $labels.forEach(label => $checklist.append(label));
             .on('click', function () {
 
                 $checklist.find("li input[type=checkbox]").each(function () {
         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);
                     $(this).prop("checked", false);
                 });
                 });
Line 56: Line 75:
             });
             });


         $checklist.before(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);
    });
});