View source for MediaWiki:Gadget-Feedback.js

(function ($, mw) {
    'use strict';

    /*
     * Feedback gadget runs on:
     *
     *   0 = Main namespace
     *   1 = Talk namespace
     *
     * Main namespace:
     *   - Feedback title widget
     *   - Feedback section
     *   - Resolve buttons
     *
     * Talk namespace:
     *   - Resolve buttons only
     */

    const namespace =
        mw.config.get('wgNamespaceNumber');

    if (
        namespace !== 0 &&
        namespace !== 1
    ) {
        return;
    }

    mw.loader.using([
        'mediawiki.api',
        'mediawiki.Title',
        'oojs-ui-core',
        'oojs-ui-windows'
    ]).then(function () {

        const api =
            new mw.Api();

        const FEEDBACK_PAGE_TEMPLATE =
            '{{#invoke:Transclude|main|Template:Feedback/Page}}';

        let windowManager;

        /* =========================================================
         * HELPERS
         * ========================================================= */

        function escapeTemplate(value) {
            return String(value || '')
                .replace(/&/g, '&amp;')
                .replace(/=/g, '&#61;')
                .replace(/\{/g, '&#123;')
                .replace(/\}/g, '&#125;')
                .replace(/\|/g, '&#124;')
                .replace(/\[/g, '&#91;')
                .replace(/\]/g, '&#93;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');
        }

        function sanitizeFilename(value) {
            return String(value || '')
                .replace(/[\\\/:*?"<>|#%{}]/g, '-')
                .replace(/\s+/g, ' ')
                .trim();
        }

        function getCurrentPage() {
            return mw.config.get('wgPageName');
        }

        function getCurrentUser() {
            return (
                mw.config.get('wgUserName') ||
                'Anonymous'
            );
        }

        function getDisplayTimestamp(date) {
		    date = date || new Date();
		
		    function pad(value) {
		        return String(value).padStart(2, '0');
		    }
		
		    return (
		        date.getUTCFullYear() +
		        '-' +
		        pad(date.getUTCMonth() + 1) +
		        '-' +
		        pad(date.getUTCDate()) +
		        ' ' +
		        pad(date.getUTCHours()) +
		        ':' +
		        pad(date.getUTCMinutes()) +
		        ' UTC'
		    );
		}
		
		function generateId(page, user, date) {
		    date = date || new Date();
		
		    function pad(value) {
		        return String(value).padStart(2, '0');
		    }
		
		    const timestamp =
		        date.getUTCFullYear() +
		        pad(date.getUTCMonth() + 1) +
		        pad(date.getUTCDate()) +
		        '-' +
		        pad(date.getUTCHours()) +
		        pad(date.getUTCMinutes()) +
		        pad(date.getUTCSeconds());
		
		    const cleanPage =
		        String(page || '')
		            .replace(/_/g, '-')
		            .replace(/[^a-zA-Z0-9-]/g, '')
		            .replace(/-+/g, '-')
		            .replace(/^-|-$/g, '');
		
		    const cleanUser =
		        String(user || 'Anonymous')
		            .replace(/[^a-zA-Z0-9_-]/g, '')
		            .replace(/-+/g, '-')
		            .replace(/^-|-$/g, '');
		
		    const suffix =
		        Math.random()
		            .toString(36)
		            .slice(2, 6);
		
		    return (
		        cleanPage +
		        '-' +
		        timestamp +
		        '-' +
		        cleanUser +
		        '-' +
		        suffix
		    );
		}

        function getTalkPage(pageName) {
            const title =
                mw.Title.newFromText(
                    pageName
                );

            if (!title) {
                throw new Error(
                    'Invalid page title.'
                );
            }

            if (
                typeof title.getTalkPageIfDefined ===
                    'function'
            ) {
                return title.getTalkPageIfDefined();
            }

            return title.getTalkPage();
        }

        /* =========================================================
         * DIALOG
         * ========================================================= */

        function FeedbackDialog(config) {
            FeedbackDialog.super.call(
                this,
                config
            );
        }

        OO.inheritClass(
            FeedbackDialog,
            OO.ui.MessageDialog
        );

        FeedbackDialog.prototype.getActionProcess =
            function (action) {

                const dialog =
                    this;

                if (
                    action === 'submit'
                ) {

                    const feedback =
                        dialog.feedbackInput
                            .getValue()
                            .trim();

                    const link =
                        dialog.linkInput
                            .getValue()
                            .trim();

                    const file =
                        dialog.imageInput
                            .getValue();

                    if (
                        feedback.length < 5
                    ) {
                        mw.notify(
                            'Feedback is too short.',
                            {
                                type:
                                    'warning'
                            }
                        );

                        return new OO.ui.Process();
                    }

                    if (
                        link &&
                        !/^https?:\/\//i.test(
                            link
                        )
                    ) {
                        mw.notify(
                            'The link must start with http:// or https://.',
                            {
                                type:
                                    'warning'
                            }
                        );

                        return new OO.ui.Process();
                    }

                    if (
                        file &&
                        !mw.config.get(
                            'wgUserName'
                        )
                    ) {
                        mw.notify(
                            'You must be logged in to upload an image.',
                            {
                                type:
                                    'warning'
                            }
                        );

                        return new OO.ui.Process();
                    }

                    return new OO.ui.Process(
                        function () {

                            dialog.close({
                                action:
                                    'submit'
                            });

                        }
                    );
                }

                return FeedbackDialog.super
                    .prototype
                    .getActionProcess.call(
                        this,
                        action
                    );
            };

        function createDialog() {

            const dialog =
                new FeedbackDialog({
                    classes: [
                        'feedback-dialog'
                    ]
                });

            dialog.feedbackInput =
                new OO.ui.MultilineTextInputWidget({
                    placeholder:
                        'What can be improved on this page? Is anything wrong? Is there anything you would like to see added?',
                    rows:
                        6,
                    autosize:
                        true
                });

            dialog.linkInput =
                new OO.ui.TextInputWidget({
                    placeholder:
                        'Optional link'
                });

            dialog.imageInput =
                new OO.ui.SelectFileInputWidget({
                    button: {
                        label:
                            'Choose image'
                    }
                });

            dialog.$form =
                $('<div>')
                    .addClass(
                        'feedback-dialog-form'
                    )
                    .append(

                        $('<div>')
                            .addClass(
                                'feedback-dialog-field'
                            )
                            .append(

                                $('<div>')
                                    .addClass(
                                        'feedback-dialog-label'
                                    )
                                    .text(
                                        'Feedback'
                                    ),

                                dialog.feedbackInput
                                    .$element
                            ),

                        $('<div>')
                            .addClass(
                                'feedback-dialog-field'
                            )
                            .append(

                                $('<div>')
                                    .addClass(
                                        'feedback-dialog-label'
                                    )
                                    .text(
                                        'Link (optional)'
                                    ),

                                dialog.linkInput
                                    .$element
                            ),

                        $('<div>')
                            .addClass(
                                'feedback-dialog-field'
                            )
                            .append(

                                $('<div>')
                                    .addClass(
                                        'feedback-dialog-label'
                                    )
                                    .text(
                                        'Image (optional)'
                                    ),

                                dialog.imageInput
                                    .$element
                            )
                    );

            return dialog;
        }

        /* =========================================================
         * IMAGE UPLOAD
         * ========================================================= */

        function uploadImage(
            file,
            page,
            date
        ) {

            if (!file) {
                return $.Deferred()
                    .resolve('')
                    .promise();
            }

            if (
                Array.isArray(file)
            ) {
                file =
                    file[0];
            }

            if (!file) {
                return $.Deferred()
                    .resolve('')
                    .promise();
            }

            const extension =
                file.name.indexOf('.') !== -1
                    ? file.name
                        .split('.')
                        .pop()
                        .toLowerCase()
                    : 'png';

            const filename =
                'Feedback ' +
                sanitizeFilename(
                    page.replace(
                        /_/g,
                        ' '
                    )
                ) +
                ' ' +
                sanitizeFilename(
                    date
                ) +
                ' ' +
                sanitizeFilename(
                    getCurrentUser()
                ) +
                '.' +
                extension;

            const filePageText =
                '==Summary==\n' +
                '{{File|Feedback Images}}\n\n' +
                '==Licensing==\n' +
                '{{Fairuse}}';

            return api.upload(
                file,
                {
                    filename:
                        filename,

                    text:
                        filePageText,

                    comment:
                        'Upload feedback image',

                    ignorewarnings:
                        true
                }
            ).then(function () {

                return filename;

            });
        }

        /* =========================================================
         * TALK PAGE INSERTION
         * ========================================================= */

        function insertFeedbackIntoTalkPage(
            talkPage,
            feedbackText,
            user,
            id,
            createddate,
            link,
            image
        ) {

            return api.get({

                action:
                    'query',

                prop:
                    'revisions',

                titles:
                    talkPage,

                rvprop:
                    'content|ids',

                rvslots:
                    'main',

                rvlimit:
                    1,

                formatversion:
                    2

            }).then(function (data) {

                const page =
                    data.query &&
                    data.query.pages &&
                    data.query.pages[0];

                const revision =
                    page &&
                    page.revisions &&
                    page.revisions[0];

                const oldText =
                    revision &&
                    revision.slots &&
                    revision.slots.main &&
                    revision.slots.main.content;

                const oldRevid =
                    revision &&
                    revision.revid;

                const template =
                    '{{Feedback\n' +
                    '|feedback=' +
                    escapeTemplate(
                        feedbackText
                    ) +
                    '\n' +
                    '|user=' +
                    escapeTemplate(
                        user
                    ) +
                    '\n' +
                    '|resolved=false\n' +
                    '|id=' +
                    escapeTemplate(
                        id
                    ) +
                    '\n' +
                    '|createddate=' +
                    escapeTemplate(
                        createddate
                    ) +
                    '\n' +
                    '|link=' +
                    escapeTemplate(
                        link
                    ) +
                    '\n' +
                    '|image=' +
                    escapeTemplate(
                        image
                    ) +
                    '\n' +
                    '|resolvedby=\n' +
                    '|resolveddate=\n' +
                    '}}\n';

                let newText =
                    oldText || '';

                const headingRegex =
                    /^==\s*Feedbacks\s*==[ \t]*\r?\n/m;

                if (
                    headingRegex.test(
                        newText
                    )
                ) {

                    newText =
                        newText.replace(
                            headingRegex,
                            function (
                                heading
                            ) {
                                return (
                                    heading +
                                    template
                                );
                            }
                        );

                } else {

                    if (
                        newText &&
                        !/\n$/.test(
                            newText
                        )
                    ) {
                        newText += '\n';
                    }

                    newText +=
                        '\n== Feedbacks ==\n' +
                        template;
                }

                const params = {

                    action:
                        'edit',

                    title:
                        talkPage,

                    text:
                        newText,

                    summary:
                        'Add feedback',

                    formatversion:
                        2
                };

                if (oldRevid) {
                    params.baserevid =
                        oldRevid;
                }

                return api.postWithToken(
                    'csrf',
                    params
                );
            });
        }

        /* =========================================================
         * SUBMIT FEEDBACK
         * ========================================================= */

        function submitFeedback(data) {

            const page =
                getCurrentPage();

            const user =
                getCurrentUser();

            const now =
			    new Date();
			
			const id =
			    generateId(
			        page,
			        user,
			        now
			    );
			
			const createddate =
			    getDisplayTimestamp(
			        now
			    );

            let talkTitle;

            try {

                talkTitle =
                    getTalkPage(
                        page
                    );

            } catch (error) {

                console.error(
                    '[Feedback] Cannot determine talk page:',
                    error
                );

                mw.notify(
                    'Cannot determine the talk page.',
                    {
                        type:
                            'error'
                    }
                );

                return;
            }

            if (!talkTitle) {

                mw.notify(
                    'This page does not have a talk page.',
                    {
                        type:
                            'error'
                    }
                );

                return;
            }

            const talkPage =
                talkTitle.getPrefixedText();

            mw.notify(
                'Submitting feedback...',
                {
                    type:
                        'info'
                }
            );

            uploadImage(
                data.file,
                page,
                createddate
            )
                .then(function (
                    image
                ) {

                    return insertFeedbackIntoTalkPage(
                        talkPage,
                        data.feedback,
                        user,
                        id,
                        createddate,
                        data.link,
                        image
                    );

                })
                .then(function () {

                    mw.notify(
                        'Feedback submitted!',
                        {
                            type:
                                'success'
                        }
                    );

                    refreshFeedbackUI();

                })
                .catch(function (
                    error
                ) {

                    console.error(
                        '[Feedback] Submission failed:',
                        error
                    );

                    mw.notify(
                        'Failed to submit feedback.',
                        {
                            type:
                                'error'
                        }
                    );
                });
        }

        function openFeedbackDialog() {

            const dialog =
                createDialog();

            windowManager.addWindows([
                dialog
            ]);

            dialog.feedbackInput
                .setValue('');

            dialog.linkInput
                .setValue('');

            try {

                dialog.imageInput
                    .setValue([]);

            } catch (e) {

                try {

                    dialog.imageInput
                        .setValue(null);

                } catch (ignore) {}
            }

            windowManager
                .openWindow(
                    dialog,
                    {
                        title:
                            'Submit feedback',

                        message:
                            dialog.$form,

                        actions: [

                            {
                                action:
                                    'submit',

                                label:
                                    'Submit',

                                flags: [
                                    'primary',
                                    'progressive'
                                ]
                            },

                            {
                                action:
                                    'cancel',

                                label:
                                    'Cancel',

                                flags: [
                                    'safe'
                                ]
                            }

                        ]
                    }
                )
                .closed
                .then(function (
                    data
                ) {

                    if (
                        !data ||
                        data.action !==
                            'submit'
                    ) {
                        return;
                    }

                    submitFeedback({

                        feedback:
                            dialog.feedbackInput
                                .getValue()
                                .trim(),

                        link:
                            dialog.linkInput
                                .getValue()
                                .trim(),

                        file:
                            dialog.imageInput
                                .getValue()
                    });
                });
        }

        /* =========================================================
         * TITLE WIDGET
         * ========================================================= */

        function createCountBox(
            type,
            count
        ) {

            if (!count) {
                return null;
            }

            return $('<span>')
                .addClass(
                    'feedback-title-count'
                )
                .addClass(
                    type === 'resolved'
                        ? 'feedback-title-count--resolved'
                        : 'feedback-title-count--unresolved'
                )
                .attr(
                    'role',
                    'button'
                )
                .attr(
                    'tabindex',
                    '0'
                )
                .attr(
                    'data-feedback-jump',
                    type
                )
                .text(
                    count
                );
        }

        function updateTitleCounts(
            unresolved,
            resolved
        ) {

            const widget =
                $('.feedback-title-widget');

            if (!widget.length) {
                return;
            }

            const counts =
                widget.find(
                    '.feedback-title-counts'
                );

            counts.empty();

            const unresolvedBox =
                createCountBox(
                    'unresolved',
                    unresolved
                );

            const resolvedBox =
                createCountBox(
                    'resolved',
                    resolved
                );

            if (unresolvedBox) {
                counts.append(
                    unresolvedBox
                );
            }

            if (resolvedBox) {
                counts.append(
                    resolvedBox
                );
            }
        }

        function loadTitleCounts() {

            return api.get({

                action:
                    'parse',

                text:
                    '{{#invoke:Feedback|counts}}',

                prop:
                    'text',

                formatversion:
                    2

            }).then(function (
                data
            ) {

                const html =
                    data.parse &&
                    data.parse.text;

                if (!html) {
                    return;
                }

                const wrapper =
                    $('<div>')
                        .html(html);

                const countData =
                    wrapper.find(
                        '.feedback-count-data'
                    );

                if (!countData.length) {
                    return;
                }

                updateTitleCounts(

                    Number(
                        countData.attr(
                            'data-unresolved'
                        )
                    ) || 0,

                    Number(
                        countData.attr(
                            'data-resolved'
                        )
                    ) || 0

                );

            }).catch(function (
                error
            ) {

                console.error(
                    '[Feedback] Could not load counts:',
                    error
                );

            });
        }

        function jumpToFeedback(
            filter
        ) {

            const section =
                document.getElementById(
                    'feedback-section'
                );

            if (!section) {
                return;
            }

            const filterButton =
                section.querySelector(
                    '[data-feedback-filter="' +
                    filter +
                    '"]'
                );

            if (filterButton) {
                filterButton.click();
            }

            section.scrollIntoView({
                behavior:
                    'smooth',

                block:
                    'start'
            });
        }

        function initTitleWidget() {

            if (
                namespace !== 0
            ) {
                return false;
            }

            const heading =
                $('#firstHeading');

            if (!heading.length) {
                return false;
            }

            if (
                heading.find(
                    '.feedback-title-widget'
                ).length
            ) {
                return true;
            }

            const widget =
                $('<span>')
                    .addClass(
                        'feedback-title-widget'
                    );

            const icon =
                $('<span>')
                    .addClass(
                        'feedback-title-icon'
                    )
                    .attr(
                        'aria-hidden',
                        'true'
                    );

            const label =
                $('<span>')
                    .addClass(
                        'feedback-title-label'
                    )
                    .text(
                        'Feedbacks'
                    );

            const newButton =
                $('<button>', {
                    type:
                        'button'
                })
                    .addClass(
                        'feedback-title-new-button'
                    )
                    .append(

                        $('<span>')
                            .addClass(
                                'feedback-title-new-icon'
                            )
                            .attr(
                                'aria-hidden',
                                'true'
                            ),

                        $('<span>')
                            .addClass(
                                'feedback-title-new-label'
                            )
                            .text(
                                'New'
                            )
                    );

            newButton.on(
                'click',
                openFeedbackDialog
            );

            const counts =
                $('<span>')
                    .addClass(
                        'feedback-title-counts'
                    );

            widget.append(
                icon,
                label,
                newButton,
                counts
            );

            heading.append(
                widget
            );

            loadTitleCounts();

            return true;
        }

        function initTitleWidgetWhenReady() {

            if (
                namespace !== 0
            ) {
                return;
            }

            if (
                initTitleWidget()
            ) {
                return;
            }

            let attempts = 0;

            const interval =
                setInterval(
                    function () {

                        attempts++;

                        if (
                            initTitleWidget() ||
                            attempts >= 30
                        ) {

                            clearInterval(
                                interval
                            );
                        }

                    },
                    100
                );
        }

        /* =========================================================
         * ARTICLE FEEDBACK
         * ========================================================= */

        function initPageFeedback() {

            if (
                namespace !== 0
            ) {
                return $.Deferred()
                    .resolve()
                    .promise();
            }

            return api.get({

                action:
                    'parse',

                text:
                    FEEDBACK_PAGE_TEMPLATE,

                prop:
                    'text',

                formatversion:
                    2

            }).then(function (
                data
            ) {

                const html =
                    data.parse &&
                    data.parse.text;

                if (!html) {
                    return;
                }

                const wrapper =
                    $('<div>')
                        .addClass(
                            'feedback-page-wrapper'
                        )
                        .html(html);

                const section =
                    wrapper.find(
                        '#feedback-section'
                    );

                if (!section.length) {
                    return;
                }

                const existing =
                    $('#feedback-section');

                if (existing.length) {
                    existing.remove();
                }

                const content =
                    $('#mw-content-text');

                if (!content.length) {
                    return;
                }

                content.append(
                    section
                );

                bindPageFeedback(
                    section
                );

            }).catch(function (
                error
            ) {

                console.error(
                    '[Feedback] Could not load page feedback:',
                    error
                );

            });
        }

        function setFeedbackFilter(
            section,
            filter
        ) {

            section
                .find(
                    '.feedback-page-filter'
                )
                .removeClass(
                    'feedback-page-filter--active'
                );

            section
                .find(
                    '[data-feedback-filter="' +
                    filter +
                    '"]'
                )
                .addClass(
                    'feedback-page-filter--active'
                );

            section
                .find(
                    '.feedback-page-list'
                )
                .removeClass(
                    'feedback-page-list--visible'
                );

            section
                .find(
                    '.feedback-page-list--' +
                    filter
                )
                .addClass(
                    'feedback-page-list--visible'
                );
        }

        function bindPageFeedback(
            section
        ) {

            section.on(
                'click',
                '.feedback-page-filter',
                function () {

                    setFeedbackFilter(
                        section,
                        $(this).attr(
                            'data-feedback-filter'
                        )
                    );
                }
            );

            section.on(
                'keydown',
                '.feedback-page-filter',
                function (
                    event
                ) {

                    if (
                        event.key === 'Enter' ||
                        event.key === ' '
                    ) {

                        event.preventDefault();

                        $(this).trigger(
                            'click'
                        );
                    }
                }
            );
        }

        /* =========================================================
         * TITLE COUNT EVENTS
         * ========================================================= */

        $(document).off(
            'click.feedbackTitleCount',
            '.feedback-title-count'
        );

        $(document).on(
            'click.feedbackTitleCount',
            '.feedback-title-count',
            function () {

                jumpToFeedback(
                    $(this).attr(
                        'data-feedback-jump'
                    )
                );
            }
        );

        $(document).off(
            'keydown.feedbackTitleCount',
            '.feedback-title-count'
        );

        $(document).on(
            'keydown.feedbackTitleCount',
            '.feedback-title-count',
            function (
                event
            ) {

                if (
                    event.key === 'Enter' ||
                    event.key === ' '
                ) {

                    event.preventDefault();

                    $(this).trigger(
                        'click'
                    );
                }
            }
        );

        /* =========================================================
         * RESOLVE EVENTS
         *
         * IMPORTANT:
         * These are attached to document because the buttons
         * live on Talk pages and may be generated dynamically.
         * ========================================================= */

        $(document).off(
            'click.feedbackResolve',
            '.feedback-resolve-button'
        );

        $(document).on(
            'click.feedbackResolve',
            '.feedback-resolve-button',
            function (
                event
            ) {

                event.preventDefault();
                event.stopPropagation();

                const button =
                    $(this);

                const id =
                    button.attr(
                        'data-feedback-id'
                    );

                const page =
                    button.attr(
                        'data-feedback-page'
                    );

                console.log(
                    '[Feedback] Resolve clicked:',
                    {
                        id:
                            id,

                        page:
                            page,

                        namespace:
                            namespace
                    }
                );

                if (!id) {

                    console.error(
                        '[Feedback] Resolve button has no data-feedback-id.'
                    );

                    mw.notify(
                        'This feedback has no ID and cannot be resolved.',
                        {
                            type:
                                'warning'
                        }
                    );

                    return;
                }

                resolveFeedback(
                    id,
                    page
                );
            }
        );

        $(document).off(
            'keydown.feedbackResolve',
            '.feedback-resolve-button'
        );

        $(document).on(
            'keydown.feedbackResolve',
            '.feedback-resolve-button',
            function (
                event
            ) {

                if (
                    event.key === 'Enter' ||
                    event.key === ' '
                ) {

                    event.preventDefault();

                    $(this).trigger(
                        'click'
                    );
                }
            }
        );

        /* =========================================================
         * RESOLUTION
         * ========================================================= */

        function resolveFeedback(
            id,
            page
        ) {

            console.log(
                '[Feedback] Starting resolution:',
                {
                    id:
                        id,

                    page:
                        page
                }
            );

            if (!id) {

                mw.notify(
                    'This feedback has no ID and cannot be resolved.',
                    {
                        type:
                            'warning'
                    }
                );

                return;
            }

            /*
             * On Talk:Legato, page comes from:
             *
             * data-feedback-page="Legato"
             *
             * Therefore we must NOT use wgPageName here.
             */

            page =
                page ||
                getCurrentPage();

            let talkTitle;

            try {

                talkTitle =
                    getTalkPage(
                        page
                    );

            } catch (error) {

                console.error(
                    '[Feedback] Cannot determine talk page:',
                    error
                );

                mw.notify(
                    'Cannot determine the talk page.',
                    {
                        type:
                            'error'
                    }
                );

                return;
            }

            if (!talkTitle) {

                mw.notify(
                    'This page does not have a talk page.',
                    {
                        type:
                            'error'
                    }
                );

                return;
            }

            const talkPage =
                talkTitle.getPrefixedText();

            console.log(
                '[Feedback] Resolved target:',
                {
                    page:
                        page,

                    talkPage:
                        talkPage,

                    id:
                        id
                }
            );

            mw.notify(
                'Resolving feedback...',
                {
                    type:
                        'info'
                }
            );

            /*
             * Get the current talk-page source.
             */
            api.get({

                action:
                    'query',

                prop:
                    'revisions',

                titles:
                    talkPage,

                rvprop:
                    'content|ids',

                rvslots:
                    'main',

                rvlimit:
                    1,

                formatversion:
                    2

            })

                .then(function (
                    data
                ) {

                    console.log(
                        '[Feedback] Talk page API response:',
                        data
                    );

                    const pageData =
                        data.query &&
                        data.query.pages &&
                        data.query.pages[0];

                    const revision =
                        pageData &&
                        pageData.revisions &&
                        pageData.revisions[0];

                    if (!revision) {

                        throw new Error(
                            'Talk page revision not found.'
                        );
                    }

                    const oldText =
                        revision
                            .slots
                            .main
                            .content;

                    console.log(
                        '[Feedback] Current talk page loaded.',
                        {
                            revid:
                                revision.revid,

                            length:
                                oldText
                                    ? oldText.length
                                    : 0
                        }
                    );

                    const newText =
                        replaceFeedbackTemplate(
                            oldText,
                            id
                        );

                    if (
                        newText === oldText
                    ) {

                        throw new Error(
                            'Feedback template with this ID was not found on the talk page.'
                        );
                    }

                    console.log(
                        '[Feedback] Feedback template changed.'
                    );

                    /*
                     * Save the modified talk page.
                     *
                     * baserevid protects against someone changing
                     * the page between our read and our edit.
                     */

                    return api.postWithToken(
                        'csrf',
                        {

                            action:
                                'edit',

                            title:
                                talkPage,

                            text:
                                newText,

                            baserevid:
                                revision.revid,

                            summary:
                                'Resolve feedback',

                            formatversion:
                                2
                        }
                    );

                })

                .then(function (
                    result
                ) {

                    console.log(
                        '[Feedback] Edit result:',
                        result
                    );

                    if (
                        result &&
                        result.edit &&
                        result.edit.result !==
                            'Success'
                    ) {

                        throw new Error(
                            'MediaWiki edit was not successful.'
                        );
                    }

                    mw.notify(
                        'Feedback resolved!',
                        {
                            type:
                                'success'
                        }
                    );

                    /*
                     * On Talk pages there is no article feedback
                     * section to refresh, so just reload the page.
                     *
                     * This also guarantees the newly resolved
                     * template is rendered by MediaWiki.
                     */

                    if (
                        namespace === 1
                    ) {

                        window.location.reload();

                        return;
                    }

                    refreshFeedbackUI();

                })

                .catch(function (
                    error
                ) {

                    console.error(
                        '[Feedback] Resolution failed:',
                        error
                    );

                    mw.notify(
                        'Failed to resolve feedback.',
                        {
                            type:
                                'error'
                        }
                    );
                });
        }

        /* =========================================================
         * REPLACE FEEDBACK TEMPLATE
         * ========================================================= */

        function replaceFeedbackTemplate(
            text,
            id
        ) {

            if (
                !text ||
                !id
            ) {
                return text;
            }

            const targetId =
                String(id).trim();

            console.log(
                '[Feedback] Looking for template ID:',
                targetId
            );

            /*
             * Find Feedback templates.
             *
             * This matches the templates generated by the
             * Feedback gadget:
             *
             * {{Feedback
             * |feedback=...
             * |user=...
             * |resolved=false
             * |id=UUID
             * ...
             * }}
             */

            const templateRegex =
                /\{\{Feedback\b[\s\S]*?\}\}/gi;

            const matches =
                text.match(
                    templateRegex
                );

            if (!matches) {

                console.error(
                    '[Feedback] No Feedback templates found on talk page.'
                );

                return text;
            }

            console.log(
                '[Feedback] Feedback templates found:',
                matches.length
            );

            let targetTemplate =
                null;

            for (
                let i = 0;
                i < matches.length;
                i++
            ) {

                const template =
                    matches[i];

                const idMatch =
                    template.match(
                        /\|\s*id\s*=\s*([^\r\n|}]*)/i
                    );

                if (!idMatch) {
                    continue;
                }

                const templateId =
                    idMatch[1].trim();

                console.log(
                    '[Feedback] Checking template ID:',
                    templateId
                );

                if (
                    templateId ===
                    targetId
                ) {

                    targetTemplate =
                        template;

                    break;
                }
            }

            if (!targetTemplate) {

                console.error(
                    '[Feedback] Feedback ID not found:',
                    targetId
                );

                return text;
            }

            console.log(
                '[Feedback] Matching Feedback template found.'
            );

            let updatedTemplate =
                targetTemplate;

            const resolver =
                getCurrentUser();

            const date =
                getDisplayTimestamp();

            /*
             * resolved
             */

            if (
                /\|\s*resolved\s*=/i.test(
                    updatedTemplate
                )
            ) {

                updatedTemplate =
                    updatedTemplate.replace(
                        /(\|\s*resolved\s*=\s*)[^\r\n|}]*/i,
                        '$1true'
                    );

            } else {

                updatedTemplate =
                    updatedTemplate.replace(
                        /\{\{Feedback\b/i,
                        '{{Feedback\n|resolved=true'
                    );
            }

            /*
             * resolvedby
             */

            if (
                /\|\s*resolvedby\s*=/i.test(
                    updatedTemplate
                )
            ) {

                updatedTemplate =
                    updatedTemplate.replace(
                        /(\|\s*resolvedby\s*=\s*)[^\r\n|}]*/i,
                        '$1' +
                        escapeTemplate(
                            resolver
                        )
                    );

            } else {

                updatedTemplate =
                    updatedTemplate.replace(
                        /\{\{Feedback\b/i,
                        '{{Feedback\n|resolvedby=' +
                        escapeTemplate(
                            resolver
                        )
                    );
            }

            /*
             * resolveddate
             */

            if (
                /\|\s*resolveddate\s*=/i.test(
                    updatedTemplate
                )
            ) {

                updatedTemplate =
                    updatedTemplate.replace(
                        /(\|\s*resolveddate\s*=\s*)[^\r\n|}]*/i,
                        '$1' +
                        escapeTemplate(
                            date
                        )
                    );

            } else {

                updatedTemplate =
                    updatedTemplate.replace(
                        /\{\{Feedback\b/i,
                        '{{Feedback\n|resolveddate=' +
                        escapeTemplate(
                            date
                        )
                    );
            }

            return text.replace(
                targetTemplate,
                updatedTemplate
            );
        }

        /* =========================================================
         * REFRESH
         * ========================================================= */

        function refreshFeedbackUI() {

            loadTitleCounts();

            const oldSection =
                $('#feedback-section');

            if (
                oldSection.length
            ) {
                oldSection.remove();
            }

            initPageFeedback();
        }

        /* =========================================================
         * INIT
         * ========================================================= */

        function init() {

            /*
             * WindowManager is only needed on Main namespace
             * because the feedback submission dialog lives there.
             */

            if (
                namespace === 0
            ) {

                windowManager =
                    new OO.ui.WindowManager();

                $(document.body).append(
                    windowManager.$element
                );

                initTitleWidgetWhenReady();

                initPageFeedback();
            }

            /*
             * Resolve handlers are registered above for BOTH
             * Main and Talk namespaces.
             */

            console.log(
                '[Feedback] Gadget initialized.',
                {
                    namespace:
                        namespace,

                    page:
                        mw.config.get(
                            'wgPageName'
                        )
                }
            );
        }

        init();

    }).catch(function (
        error
    ) {

        console.error(
            '[Feedback] Gadget failed to load dependencies:',
            error
        );

    });

})(jQuery, mediaWiki);