Steamcn 7L Optimisation

try to take over the world!

当前为 2017-08-11 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Steamcn 7L Optimisation
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  try to take over the world!
// @icon         https://steamcn.com/favicon-hq.ico
// @author       Bisumaruko
// @match        https://steamcn.com/forum.php?*steamcn_gift
// @require      https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-sliderAccess.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.0.5/fuse.min.js
// @grant        GM_addStyle
// ==/UserScript==

/* global window, fetch, Fuse, GM_addStyle */

const $ = jQuery;

// inject css
$('head').append('<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css">', '<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" rel="stylesheet" type="text/css">');
GM_addStyle(`
    [class*="7LOptimise"] #ga_id {
        display: none !important;
    }
    [class*="7LOptimise"] [class="7LSearchBox"] {
        display: block !important;
    }
    [class="7LSearchBox"] {
        width: 500px;
        height: 27px;
        display: none;
        padding-left: 5px;
        border: 1px solid;
        border-color: #E4E4E4 #E0E0E0 #E0E0E0 #E4E4E4;
        box-sizing: border-box;
    }
    [class="7LSearchResult"] {
        width: 500px;
        height: 100px;
        display: none;
        position: absolute;
        padding: 5px;
        background-color: white;
        box-sizing: border-box;
    }
    [class="7LSearchResult"] > span {
        width: 100%;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: 1px solid white;
        cursor: pointer;
    }
    [class="7LSearchResult"] > span:hover {
        border-color: #57bae8;
    }
`);

let fuse = {};
let searchTimer = null;

const games = [];
const handler = () => {
    // initialise
    const $body = $('body');
    const $gaID = $('#ga_id');
    const $gaType = $('#ga_type');
    const searchBox = $('<input/>', {
        type: 'text',
        class: '7LSearchBox',
        placeholder: '选择要赠出的礼物(点击输入名称过滤)'
    });
    const searchResult = $('<div/>', {
        class: '7LSearchResult',
        text: 'Searching...'
    });
    // unbind chosen plugin
    $gaID.chosen('destroy');
    $gaType.chosen('destroy');

    // override original change event on gaType
    $gaType.off('change').change(async () => {
        const type = $gaType.val();

        $gaID.empty();

        if (type === 'steam') $body.addClass('7LOptimise');else {
            const res = await fetch(`https://steamcn.com/plugin.php?id=steamcn_gift:chosen&type=${type}`);

            if (res.ok) {
                const data = await res.text();

                $gaID.append(data);
                $body.removeClass('7LOptimise');
            }
        }
    });

    // cache game list
    $gaID.children().each((index, element) => {
        const $ele = $(element);
        const text = $ele.text().trim();
        const value = $ele.val();
        const game = text.replace(/^【.+?】/, '').replace(/\(([^)]*)\)[^(]*$/, '').trim();

        if ($.isNumeric(value)) {
            games.push({
                game,
                text,
                value
            });
        }
    });
    // remove all options to save resources
    $gaID.empty();
    // insert search box replacement
    $gaID.after(searchBox, searchResult);
    $body.addClass('7LOptimise');

    // initialise fuse
    fuse = new Fuse(games, {
        shouldSort: true,
        includeScore: true,
        threshold: 0.1,
        location: 0,
        distance: 100,
        maxPatternLength: 32,
        keys: ['game']
    });

    // bind event to search box
    searchBox.keyup(e => {
        const $ele = $(e.delegateTarget);
        const input = $ele.val();

        if (input.length > 0) {
            searchResult.css('display', 'block');
            searchBox.focus(() => {
                searchResult.css('display', 'block');
            });
            // only perform search if 0.3 second has passed
            clearTimeout(searchTimer);
            searchTimer = setTimeout(() => {
                const results = fuse.search(input);
                let i = 0;

                searchResult.empty();

                if (results.length > 0) {
                    while (i < 3) {
                        const result = results[i];

                        searchResult.append($(`<span>${result.item.text}</span>`).click(() => {
                            searchBox.val(result.item.text);
                            $gaID.empty().append(`<option selected value=${result.item.value}></option>`);
                        }));

                        if (result.score === 0) break; // perfect match
                        i += 1;
                    }
                }
            }, 300);
        }
    });
    // hide searchResult when click
    $body.click(e => {
        if (!$(e.target).hasClass('7LSearchBox')) searchResult.css('display', 'none');
    });

    // change copy & giveRate field type
    $('#ga_copy, #ga_ratio').attr({
        type: 'number',
        min: 1
    }).css({
        width: '54px',
        'background-color': 'white'
    });

    // override default date time picker
    $('#ga_start, #ga_end').removeAttr('onclick').datetimepicker({
        timezone: 480,
        dateFormat: 'yy-mm-dd'
    });
    // override quick start & end event
    $('.quicksetstart, .quicksetend').off().click(e => {
        const $ele = $(e.delegateTarget);
        const type = $ele.attr('class').split('set').pop();
        const hour = $ele.attr('data-hour');
        const options = {
            hour12: false,
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        };
        let base = Date.now();

        if ($ele.hasClass('quicksetend')) {
            const startTime = new Date($('#ga_start').val()).getTime();

            if (startTime) base = startTime; // change base to start time if quicksetend
        } else options.timeZone = 'Asia/Shanghai'; // only apply timezone offset to start time or end time will get double timezone offset

        $(`#ga_${type}`).val(new Date(base + hour * 60 * 60 * 1000).toLocaleDateString('zh', options).replace(/\//g, '-'));
    });
};

window.addEventListener('load', handler);