User:Bhsd/widget/colorMod.js

注意：在保存之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Internet Explorer：按住Ctrl的同时单击刷新，或按Ctrl-F5
• Opera：前往菜单 → 设置（Mac为Opera → Preferences），然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件。

//<nowiki>
// 用於[[Widget:colorMod]]，可以使用ES6语法
/**
 * @Function: 用户可以自行调低某几位角色的应援色亮度。
 * @Dependencies: mediawiki.storage, oojs-ui-windows, ext.gadget.site-lib
 * @Author: [[User:Bhsd]]
 */
"use strict";
/*global mw, $, OO, wgULS*/
(() => {
    const main = () => {
        // 1. 在开头统一处理繁简文字信息
        mw.messages.set( $.extend( wgULS({
            'widget-cm-intro': '本页面使用了亮度较高的应援色，您可以在这里调节对应颜色的亮度：', 'widget-cm-rin': '星空凛',
            'widget-cm-dialog': '调节应援色亮度', 'widget-cm-kinako': '樱小路希奈子', 'widget-cm-lanzhu': '钟岚珠',
            'widget-cm-popup': '本页面使用了亮度较高的角色应援色。为了便于阅读，您可以点击调色板按钮自行调节对应颜色的亮度。', 
            'widget-cm-eli': '绚濑绘里', 'widget-cm-kotori': '南小鸟', 'widget-cm-yoshiko': '津岛善子/夜羽',
            'widget-cm-yuzuha': '皇柚叶', 'widget-cm-harukazesayaka': '晴风小夜香', 'widget-cm-kosuzu': '徒町小铃'
        }, {
            'widget-cm-intro': '此頁面使用了亮度較高的應援色，您可以在這裡調節對應顏色的亮度：', 'widget-cm-rin': '星空凜',
            'widget-cm-dialog': '調節應援色亮度', 'widget-cm-kinako': '櫻小路希奈子', 'widget-cm-lanzhu': '鐘嵐珠',
            'widget-cm-popup': '本頁面使用了亮度較高的角色應援色。為了便於閱讀，您可以點擊調色板按鈕自行調節對應顏色的亮度。', 
            'widget-cm-eli': '絢瀨繪里', 'widget-cm-kotori': '南小鳥', 'widget-cm-yoshiko': '津島善子/夜羽',
            'widget-cm-yuzuha': '皇柚葉', 'widget-cm-harukazesayaka': '晴風小夜香', 'widget-cm-kosuzu': '徒町小鈴'
        }), {
			'widget-cm-keke': '唐可可', 'widget-cm-shiki': '若菜四季', 'widget-cm-5yncri5e': '5yncri5e!', 
            'widget-cm-ginko': '百生吟子', 
			'widget-cm-label': '：亮度降低', 'widget-cm-stop': '不再提示'
		}) );
        let mkeys, mvals, dialog, popup; // 只在必要时生成一次dialog
        // 必须保留rgb中的空格
        const colors = { eli: ["rgb(122, 238, 255)", "rgb(116, 226, 242)", "rgb(110, 214, 230)", "rgb(104, 202, 217)", "rgb(98, 190, 204)"], 
        	kotori: ["rgb(206, 191, 191)", "rgb(196, 181, 181)", "rgb(185, 172, 172)", "rgb(175, 162, 162)", "rgb(165, 153, 153)"], 
        	rin: ["rgb(255, 248, 50)", "rgb(242, 236, 48)", "rgb(230, 223, 45)", "rgb(217, 211, 43)", "rgb(204, 199, 40)"], 
        	yoshiko: ["rgb(193, 202, 212)", "rgb(183, 192, 201)", "rgb(174, 182, 191)", "rgb(164, 172, 180)", "rgb(154, 162, 170)"], 
            lanzhu: ["rgb(248, 200, 196)", "rgb(242, 196, 191)", "rgb(230, 185, 181)", "rgb(217, 175, 171)", "rgb(204, 165, 161)"], 
            keke: ["rgb(160, 255, 249)", "rgb(152, 242, 236)", "rgb(144, 230, 224)", "rgb(136, 217, 211)", "rgb(128, 204, 199)"], 
            kinako: ["rgb(255, 244, 66)", "rgb(242, 233, 63)", "rgb(229, 221, 60)", "rgb(217, 209, 56)", "rgb(204, 196, 53)"], 
            shiki: ["rgb(178, 255, 221)", "rgb(170, 242, 211)", "rgb(161, 229, 200)", "rgb(152, 217, 189)", "rgb(143, 204, 177)"], 
            yuzuha: ["rgb(239, 239, 239)", "rgb(227, 227, 227)", "rgb(215, 215, 215)", "rgb(203, 203, 203)", "rgb(191, 191, 191)"], 
            harukazesayaka: ["rgb(255, 236, 80)", "rgb(242, 224, 76)", "rgb(230, 212, 72)", "rgb(217, 201, 68)", "rgb(204, 189, 64)"], 
            ginko: ["rgb(162, 215, 221)", "rgb(154, 204, 210)", "rgb(146, 194, 199)", "rgb(138, 183, 188)", "rgb(130, 172, 177)"], 
            kosuzu: ["rgb(250, 215, 100)", "rgb(238, 204, 95)", "rgb(225, 194, 90)", "rgb(213, 183, 85)", "rgb(200, 172, 80)"],
            '5yncri5e': ["rgb(255, 232, 64)", "rgb(242, 221, 61)", "rgb(229, 209, 58)", "rgb(217, 197, 54)", "rgb(204, 184, 51)"]
        },
            // 调色板对话框的文字提示
            $intro = $('<p>', {text: mw.msg( 'widget-cm-intro' )}),
            // 2. 准备核心元素、函数和事件
            $wrapper = $('<div>', {id: 'colorMod-wrapper'}),
            wrapperPool = {},
            // 这个函数用于生成调色板对话框的select，避免重复劳动。
            generateWrapper = (key, i) => {
            const color = colors[key],
                val = mvals[i];
            wrapperPool[key] = wrapperPool[key] || $('<div>', {html: [
                mw.msg( `widget-cm-${key}` ), mw.msg('widget-cm-label'),
                // value不能作为attr
                $('<select>', {html: color.map((ele, i) => new Option(`${i * 5}%`, i))}).val( val )
                    .change(function() { $(this).next().css('color', color[ this.value ]); }),
                $('<span>', {text: '文字'}).css('color', color[val])
            ]});
            return wrapperPool[key];
        },
            style = mw.loader.addStyleTag(''), // 这里不用mw.util.addCSS是为了避免在代码块里定义const
            // 这个函数用于生成CSS
            generateStyle = () => {
            style.textContent = '#mw-content-text .mw-parser-output {' +
                mkeys.map((key, i) => `--${key}-color: ${colors[key][ mvals[i] ]}`).join(';') + ';}';
        },
            isMobile = mw.config.get('skin') == 'minerva',
            actions = [ {action: 'reject', label: mw.msg( "ooui-dialog-message-reject" )},
            {action: 'accept', label: mw.msg( "ooui-dialog-message-accept" ), flags: 'progressive'}
        ],
            openDialog = () => {
            if (!dialog) { dialog = new OO.ui.MessageDialog({id: 'colorMod'}); }
            mw.dialog(dialog, actions, [$intro, $wrapper], mw.msg( 'widget-cm-dialog' )).then(action => {
                const $select = $wrapper.find( 'select' );
                if (action == 'reject') {
                    $select.val(i => mvals[i]).change(); // 还原选项
                    return;
                }
                $select.each(function(i) {
                    mvals[i] = this.value;
                    mw.storage.set(`${ mkeys[i] }-color`, this.value);
                });
                generateStyle();
            });
        };
        $('.mw-indicators').on('click', '#mw-indicator-colorMod', openDialog); // 桌面版比较麻烦，采用delegate
        // 3. 首次訪問時顯示提示
        if (!mw.storage.getObject( 'colorMod-popup' )) {
            popup = new OO.ui.PopupWidget({$content: $('<div>', {html: [ $('<p>', {text: mw.msg( 'widget-cm-popup' )}),
                $('<a>', {text: mw.msg( 'widget-cm-stop' ), href: '#'}).click(e => { e.preventDefault(); })
            ]}), padded: true, width: 260, classes: ['colorMod-tip']});
            popup.$element.appendTo( document.body ).one('click', () => {
                popup.toggle( false );
                mw.storage.setObject( 'colorMod-popup', true );
            });
        }
        // 4. 更新数据
        mw.hook( 'wikipage.content' ).add($content => {
            const $indicator = $content.find( '.mw-parser-output .page-actions-menu__list-item' ).first();
            if ($indicator.length === 0) { return; }
            console.log('Hook: wikipage.content, 开始构建应援色调色板');
            mkeys = Object.keys( $indicator.children( 'span' ).data() ).reverse();
            // 手机版创建调色板按钮，需要防止二次创建
            if (isMobile && $('#page-actions > #mw-indicator-colorMod').length === 0) {
                $indicator.attr('id', 'mw-indicator-colorMod').insertAfter( '#language-selector' ).click( openDialog )
                    .children().wrapAll('<a>'); // Wikitext无法添加<a>元素，只能在这里用JS添加
            }
            // 根据localStorage调整初始颜色
            mvals = mkeys.map(key => mw.storage.get( `${key}-color` ) || 0);
            generateStyle();
            mkeys.forEach(key => { // 处理渐变色
                $content.find( `.Lyrics_gradient.${key}-lyrics, .Lyrics_gradient.${key}-lyrics rt` )
                    // 如果之前已经替换过了也没有关系
                    .css('background-image', (i, val) => val.replace( colors[key][0], `var(--${key}-color)` ));
            });
            $wrapper.html( mkeys.map( generateWrapper ) ); // 事件全都绑定在$wrapper上
            if (mw.storage.getObject( 'colorMod-popup' )) { return; }
            popup.toggle( true ).setFloatableContainer( $('#mw-indicator-colorMod') );
        });
    },
        handler = () => {
        mw.widget = mw.widget || {};
        if (mw.widget.colorMod) { return; }
        mw.widget.colorMod = true;
        mw.loader.using(['mediawiki.storage', 'oojs-ui-windows', 'ext.gadget.site-lib']).then(main);
    };
    if (window.jQuery) { handler(); }
    else { window.addEventListener('jquery', handler); }
}) ();
//</nowiki>
// [[category:jQuery小部件]] {{DEFAULTSORT:ColorMod}}