Age.tv history sorter userscript.

agetv_historysort.user.js

// ==UserScript==
// @name         Age.tv history sorter
// @namespace    https://gist.github.com/sinsinpub
// @version      1.2
// @description  Sort history records of age.tv playbacks in specified order.
// @author       sin_sin
// @match        https://www.agedm.org/*
// @match        https://www.agemys.org/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const $ = window.$; // depending on jQuery style $
    const downloadAppLink = $('body > header > div > div > ul > li > a.nav-download-link');
    downloadAppLink.text('排序观看记录').attr('title', '按播出时间逆向排序，按住 Alt 键正向排序。');
    downloadAppLink.off('click').on('click', (e) => {
        e.preventDefault();
        const isAscend = !!e.altKey;
        const his = JSON.parse(localStorage['age-history']);
        console.debug('Presorted history', his);
        his.sort((a, b) => (isAscend ? a.id - b.id : b.id - a.id));
        localStorage['age-history'] = JSON.stringify(his);
        alert(`${isAscend ? '正序' : '逆序'}排序完成，将要刷新页面。`);
        window.location.reload();
    });
    const historyDiv = $('#history_link_dom');
    const historyList = $('li.history_link_item', historyDiv);
    const historyDivider = $('.dropdown-divider', historyDiv);
    const shiftHistoryStorage = (idx, to) => {
        const his = JSON.parse(localStorage['age-history']);
        console.debug('Preshifted history', his, idx);
        const item = his.splice(idx, 1);
        if (to === "top") his.push(...item);
        else if (to === "bottom") his.splice(0, 0, ...item);
        localStorage['age-history'] = JSON.stringify(his);
    };
    const updateHistoryIndex = () => {
        const newList = $('li.history_link_item', historyDiv);
        newList.each((idx, li) => {
            const arrIdx = newList.length - idx - 1;
            $('.sortbtn', li).attr('data-idx', arrIdx);
        });
    };
    historyList.each((idx, li) => {
        li.style.width = "320px";
        const arrIdx = historyList.length - idx - 1;
        // Moving 1 item to list top
        const moveUpDiv = $(`<div class="history_link_item_eposide sortbtn" data-idx="${arrIdx}">🔼</div>`);
        moveUpDiv.css({
            'padding-left': 'unset',
            'padding-right': '5px',
            'cursor': 'default',
            'z-index': 99,
        });
        moveUpDiv.on('click', (e) => {
            e.stopPropagation();
            shiftHistoryStorage($(e.target).data('idx'), 'top');
            const parLi = $(e.target).parent().parent();
            historyDiv.prepend(parLi);
            updateHistoryIndex();
        });
        $(li).children().prepend(moveUpDiv);
        // Moving 1 item to list bottom
        const moveDownDiv = $(`<div class="history_link_item_eposide sortbtn" data-idx="${arrIdx}">🔽</div>`);
        moveDownDiv.css({
            'padding-left': 'unset',
            'padding-right': '5px',
            'cursor': 'default',
            'z-index': 99,
        });
        moveDownDiv.on('click', (e) => {
            e.stopPropagation();
            shiftHistoryStorage($(e.target).data('idx'), 'bottom');
            const parLi = $(e.target).parent().parent();
            if (historyDivider.length) parLi.insertBefore(historyDivider.parent());
            else historyDiv.append(parLi);
            updateHistoryIndex();
        });
        $(li).children().prepend(moveDownDiv);
        // Removing 1 item button
        const removeDiv = $(`<div class="history_link_item_eposide sortbtn" data-idx="${arrIdx}">❌</div>`);
        removeDiv.css({
            'cursor': 'default',
            'z-index': 99,
        });
        removeDiv.on('click', (e) => {
            e.stopPropagation();
            shiftHistoryStorage($(e.target).data('idx'), 'void');
            $(e.target).parent().parent().remove();
            updateHistoryIndex();
        });
        $(li).children().append(removeDiv);
    });
    // Misc: add a link to detail page for play page title
    const cardTitle = $('section div.card-body > h5');
    const detailUri = location.href.match(/https?:\/\/.+\/play(\/\d+)\//i);
    if (cardTitle.length && detailUri && detailUri.length) {
        const titleText = cardTitle.text();
        cardTitle.html(`<a href="/detail${detailUri[1]}">${titleText}</a>`);
    }
    console.debug('Histoy sorter hooked', historyList.length, JSON.parse(localStorage['age-history'] || 'null'));

})();