MediaWiki:Common.js：修订间差异

2025年5月11日 (日) 00:24的版本

//上传重定向
mw.loader.using(['mediawiki.util', 'oojs-ui', 'mediawiki.storage'], function () {
    if (mw.config.get('wgCanonicalSpecialPageName') === 'Upload') {

        const STORAGE_KEY = 'uploadPreference';

        const savedChoice = mw.storage.get(STORAGE_KEY);

        // 用户之前选择了上传向导，自动跳转
        if (savedChoice === 'wizard') {
            window.location.href = mw.util.getUrl('Special:UploadWizard');
            return;
        }

        // 用户选择了继续使用传统上传，不再提示
        if (savedChoice === 'classic') {
            return;
        }

        // 否则弹出选择窗口
        var windowManager = new OO.ui.WindowManager();
        $(document.body).append(windowManager.$element);

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

        OO.inheritClass(UploadDialog, OO.ui.ProcessDialog);

        UploadDialog.static.name = 'UploadDialog';
        UploadDialog.static.title = '请选择上传方式';
        UploadDialog.static.actions = [
            {
                action: 'classic',
                label: '❌ 使用传统上传方式（更快）',
                flags: ['safe']
            }
        ];

        UploadDialog.prototype.initialize = function () {
            UploadDialog.super.prototype.initialize.call(this);

            var panel = new OO.ui.PanelLayout({ padded: true, expanded: false });

            // 创建“记住我的选择”复选框
            var rememberCheckbox = new OO.ui.CheckboxInputWidget({ selected: false });
            this._rememberCheckbox = rememberCheckbox;

            var rememberField = new OO.ui.FieldLayout(rememberCheckbox, {
                label: '记住我的选择，下次不再提示',
                align: 'inline'
            });

            // 创建“上传向导”按钮（跳转链接形式）
            var wizardButton = new OO.ui.ButtonWidget({
                label: '✅ 使用上传向导（推荐）',
                flags: ['primary', 'progressive'],
                href: mw.util.getUrl('Special:UploadWizard'),
                target: '_self',
                framed: true
            });

            // 给按钮添加“记住选择”逻辑
            wizardButton.on('click', () => {
                if (rememberCheckbox.isSelected()) {
                    mw.storage.set(STORAGE_KEY, 'wizard');
                }
            });

            // 拼接内容
            panel.$element.append(
                $('<p>').text('请选择你要使用的上传方式：'),

                $('<div>').css({
                    'margin': '12px 0',
                    'background': '#f8f9fa',
                    'padding': '10px',
                    'border': '1px solid #ccc',
                    'border-radius': '5px'
                }).append(
                    $('<strong>').text('✅ 上传向导（推荐）'),
                    $('<ul>').append(
                        $('<li>').text('支持多文件批量上传'),
                        $('<li>').text('显示上传进度条'),
                        $('<li>').text('信息填写更完整')
                    ),
                    $('<div>').css('margin-top', '8px').append(wizardButton.$element)
                ),

                $('<div>').css({
                    'margin-top': '15px',
                    'background': '#ffffff',
                    'padding': '10px',
                    'border': '1px dashed #bbb',
                    'border-radius': '5px'
                }).append(
                    $('<strong>').text('⚡️ 传统上传方式'),
                    $('<ul>').append(
                        $('<li>').text('界面更简单'),
                        $('<li>').text('加载速度快'),
                        $('<li>').text('适合上传单个文件')
                    )
                ),

                $('<div>').css('margin-top', '15px').append(rememberField.$element)
            );

            this.$body.append(panel.$element);
        };

        UploadDialog.prototype.getActionProcess = function (action) {
            if (action === 'classic') {
                if (this._rememberCheckbox.isSelected()) {
                    mw.storage.set(STORAGE_KEY, 'classic');
                }
                return new OO.ui.Process(() => this.close());
            }
            return UploadDialog.super.prototype.getActionProcess.call(this, action);
        };

        var dialog = new UploadDialog();
        windowManager.addWindows([dialog]);
        windowManager.openWindow(dialog);
    }
});
//---
// 显示右下角 loading 图标
$(function () {
    // 如果已加载，不再添加 loading
    if (window.__loadingIndicatorInit) return;
    window.__loadingIndicatorInit = true;
    // 设置 loading 图像
    var loadingImgUrl = 'https://wiki.ottohub.cn/images/0/02/Loading.png'; // 替换路径为你上传后的图片地址
     // ✅ 插入元素（强制 256x256 大小）
    var $loadingDiv = $('<div>', {
        id: 'loadingIndicator',
        css: {
            position: 'fixed',
            bottom: '20px',
            right: '20px',
            width: '256px',
            height: '256px',
            'z-index': 9999,
            'pointer-events': 'none'
        }
    }).append(
        $('<img>', {
            src: loadingImgUrl,
            alt: 'Loading...',
            css: {
                width: '100%',
                height: '100%',
                'object-fit': 'contain'
            }
        })
    );

    $('body').append($loadingDiv);

    // ✅ 封装移除函数
    function removeLoading(reason) {
    console.log(`Attempting to remove loading. Reason: ${reason}. Timestamp: ${Date.now()}`); // 新增
    const $el = $('#loadingIndicator');
    if ($el.length) {
        console.log(`[Common.js] 🔄 Removing loading. Element found. Reason: ${reason}`);
        $el.stop(true, true).fadeOut(300, function () {
            console.log(`[Common.js] ✅ Loading removed. Reason: ${reason}`); // 新增
            $(this).remove();
        });
    } else {
        console.log(`[Common.js] ⚠️ Loading element #loadingIndicator not found. Reason: ${reason}`); // 新增
    }
}

    // ✅ 确保能正常卸载 loading：

    // 情况1：标准资源加载完成
    window.addEventListener('load', function () {
    console.log('window.load event fired');
    removeLoading('window.load');
});

    // 情况2：页面 DOM 已构建（但不一定所有资源加载完成）
    document.addEventListener('DOMContentLoaded', function () {
    	 console.log('DOMContentLoaded event fired. document.readyState:', document.readyState);
        // 如果页面状态已经是 complete，则提前移除（补漏）
        if (document.readyState === 'complete') {
            removeLoading('document.readyState === complete in DOMContentLoaded');
        } else {
            // 等待微任务完成
            setTimeout(function () {
                if (document.readyState === 'interactive' || document.readyState === 'complete') {
                    removeLoading('DOMContentLoaded fallback');
                }
            }, 100); // 延迟一点
        }
    });

    // 情况3：兜底策略，10 秒后强制关闭
    setTimeout(function () {
        removeLoading('timeout fallback (10s)');
    }, 10000);
});