Bangumi EpPopuVisualizer

Greasy Fork is available in English.
Bangumi EpPopuVisualizer

标注ep的讨论人气
换行
// ==UserScript==
// @name         Bangumi EpPopuVisualizer
// @namespace    http://bgm.tv/user/prevails
// @version      2.7.1
// @description  标注ep的讨论人气
// @author       "Donuts."
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// @include      /^https?:\/\/(bgm\.tv|bangumi\.tv|chii\.in)\/(subject\/\d+)?$/
// @require      https://code.jquery.com/jquery-2.2.4.min.js
// @encoding     utf-8
// ==/UserScript==

function noNeed(isRoot) {
    if (isRoot) {
        return $('.load-epinfo').length === 0;
    } else {
        return ($('.focus.chl.anime').length === 0 && $('.focus.chl.real').length === 0) || $('.load-epinfo').length === 0;
    }
}

function getMax(arr) {
    if (arr.length === 0) {
        return 0;
    }
    return arr.reduce((a, b) => (a > b ? a : b));
}

function getValues($lis) {
    var ids = [];
    $lis.each(function () {
        var $a = $(this).find('a');
        var id = $a[0].id.replace("prg_", '');
        ids.push(id);
    });
    return ids.map(getEpValue);
}

function colorToRgbaX(color) {
    var r = parseInt(color.substr(1, 2), 16);
    var g = parseInt(color.substr(3, 2), 16);
    var b = parseInt(color.substr(5, 2), 16);
    return `rgba(${r},${g},${b},X)`;
}

function getPixel($e, attr) {
    return parseInt($e.css(attr));
}

function histogram_getHeight($a) {
    return getPixel($a, 'height') + 2 +
        getPixel($a, 'padding-top') + getPixel($a, 'padding-bottom');
}

function getShowMethod() {
    var viewMode = getCurrentMode();
    var $exampleEp = $('.load-epinfo:eq(0)');
    var bottomPx = $exampleEp.css('margin-bottom');
    var rightPx = $exampleEp.css('margin-right');
    var color = getCurrentModeColor();
    GM_addStyle(
        `.epv_popu_default{right:${rightPx};height:${bottomPx};}
        .epv_popu_histogram{bottom:${bottomPx};width:${rightPx};background:${color};}`);
    switch(viewMode) {
        case 'default':
        var colorX = colorToRgbaX(color);
        return function ($lis, values) {
            var max = getMax(values);
            if (max < 20) {
                max += (20 - max) / 2;
            }
            var colors = values.map((v) => (colorX.replace('X', v / max)));
            $lis.each(function (index) {
                var $a = $('a', this);
                $a.append(`<div class="epv_popu_default" style="background:${colors[index]};"></div>`);
            });
        };
        /////////////////////////////
        case 'histogram':
        var height = histogram_getHeight($exampleEp);
        return function ($lis, values) {
            var max = getMax(values);
            if (max < 20) {
                max += (20 - max) / 2;
            }
            var lengths = values.map((v) => (height * v / max));
            $lis.each(function (index) {
                var $a = $('a', this);
                $a.append(`<div class="epv_popu_histogram" style="height:${lengths[index]}px;"></div>`);
            });
        };
    }
}

function getEpValue(id) {
    var value = $(`#subject_prg_content > #prginfo_${id} .na`).html();
    value = value.substring(2, value.length - 1);
    return parseInt(value);
}

function init() {
    if (!GM_getValue('viewMode')) {
        GM_setValue('viewMode', "default");
    }
    if (!GM_getValue('default_color')) {
        GM_setValue('default_color', '#ff8040');
    }
    if (!GM_getValue('histogram_color')) {
        GM_setValue('histogram_color', '#f7bac0');
    }
}

var isControlPanelContentLoaded = false;

function addControlPanel() {
    var cp = 
        `<div id="ep_popu_visualizer_control_panel">
            <a class="l epv_control_panel_switch" href="javascript:;">EpPopuVisualizer 设置</a>
        </div>`;
    $('#columnHomeB').append(cp);
    $('.epv_control_panel_switch').click(function () {
        if (!isControlPanelContentLoaded) {
            loadControlPanelContent();
            isControlPanelContentLoaded = true;
        }
        $(".epv_content").slideToggle('fast');
    });
}

function refreshColorPickInputValue() {
    $('#epv_color_pick input').val(getCurrentModeColor());
}

function getCurrentModeColorKey() {
    return getCurrentMode() + "_color";
}

function getCurrentModeColor() {
    return GM_getValue(getCurrentModeColorKey());
}

function getCurrentMode() {
    return GM_getValue('viewMode');
}

function loadControlPanelContent() {
    var currentMode = getCurrentMode();
    var content =
        `<div class="epv_content" style="display:none;">
            <div id="epv_mode_select">模式切换: 
                <input type="radio" name="viewMode" 
                value="default" ${(currentMode === 'default' ? 'checked' : '')} /> 渐变色 (默认) 
                &nbsp;&nbsp;&nbsp;
                <input type="radio" name="viewMode" 
                value="histogram" ${(currentMode === 'histogram' ? 'checked' : '')} /> 条形图 
            </div>
            <div id="epv_color_pick">颜色选择: 
                <input type="text" id="epv_color_text_input"> 
                <input id="epv_color_input" type="color">
            </div>
        </div>`;
    $('#ep_popu_visualizer_control_panel').append(content);
    refreshColorPickInputValue();
    bindEventsToControlPanelInputs();
}

function bindEventsToControlPanelInputs() {
    $('#epv_mode_select input').click(function () {
        GM_setValue('viewMode', $(this).val());
        refreshColorPickInputValue();
    });
    $('#epv_color_pick input').change(function () {
        GM_setValue(getCurrentModeColorKey(), $(this).val());
        refreshColorPickInputValue();
    });
}

function addFixedStyleSheet() {
    GM_addStyle(`
        .epv_content > div {
            border-bottom: 1px dotted #e0e0e0;
            margin-top: 5px;
            padding: 4px 0 4px 12px;
        }
        #epv_color_input {
            height: 1.3em;
        }
        #ep_popu_visualizer_control_panel {
            padding-left: 10px;
        }
        .epv_popu_default {
            position: absolute;
            bottom: 0;
            width: 80%;
        }
        .epv_popu_histogram {
            position: absolute;
            right: 0;
        }`);
}

function main() {
    init();
    addFixedStyleSheet();
    var isRoot = location.pathname === '/';
    if (isRoot) {
        addControlPanel();
    }
    if (noNeed(isRoot)) {
        return;
    }
    var $uls = isRoot ? $('.infoWrapper_tv .prg_list') : $('.prg_list');
    var show = getShowMethod();
    $uls.each(function (index, element) {
        setTimeout(function () {
            var $lis = $('li:not(.subtitle)', element);
            var values = getValues($lis);
            show($lis, values);
        }, 150 * index + 500);
    });
}

main();