bangumi列表显示增强

在有条目列表的页面,显示条目的排名,站内评分和评分人数,好友评分和评分人数,并提供排序功能,鼠标移到排名处可查看历史记录

// ==UserScript==
// @name         bangumi列表显示增强
// @namespace    https://github.com/bangumi/scripts/liaune
// @version      0.6.6
// @description  在有条目列表的页面,显示条目的排名,站内评分和评分人数,好友评分和评分人数,并提供排序功能,鼠标移到排名处可查看历史记录
// @author       Yonjar,Liaune
// @include      /^https?://(bangumi\.tv|bgm\.tv|chii\.in)/(.+?/list|.+?/tag|.+?/browser|subject_search|index)(/|\?).+$/
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    GM_addStyle(`
.yonjar_bgm_userjs_rank_excellent{
background-color: #0033CC!important;
}
.yonjar_bgm_userjs_rank_recommended{
background-color: #3ed715!important;
}

.yonjar_bgm_userjs_rank_justsoso{
background-color: #FF6600!important;
}
.yonjar_bgm_userjs_rank_refuse{
background-color: #f2050587!important;
}

.yonjar_bgm_userjs_rank_undefined{
background-color: #0000001a!important;
}

.friend_vote{
font-size: 10px;
color:#4260cb;
}
.yonjar_bgm_userjs_vote_0{
background-color: rgba(11, 12, 12, 0)!important;
color:black;
}

.yonjar_bgm_userjs_vote_500{
background-color: rgba(128, 255, 255, 0)!important;
color:#eca609;
}
.yonjar_bgm_userjs_vote_1000{
background-color: rgba(128, 144, 255, 0)!important;
color:#18a099;
}
.yonjar_bgm_userjs_vote_2000{
background-color: rgba(209, 80, 205, 0)!important;
color:blue;
}
.yonjar_bgm_userjs_vote_4000{
background-color: rgba(253, 62, 80, 0)!important;
color:red;
}

.yonjar_bgm_userjs_rank_btn{
display: inline-block;
color: #666;
text-shadow: 0px 1px 2px #FFF;
text-decoration: none;
line-height: 20px;
margin: 0 5px 5px 0;
padding: 0 12px;
border: 1px solid #DDD;
background: -webkit-gradient(linear,left top,left bottom,from(#FCFCFC),to(#F1F1F1));
background: -moz-linear-gradient(top,#FCFCFC,#F1F1F1);
background: -o-linear-gradient(top,#FCFCFC,#F1F1F1);
-webkit-box-shadow: 0 1px 2px #EEE,inset 0 1px 1px #FFF;
-moz-box-shadow: 0 1px 2px #EEE,inset 0 1px 1px #FFF;
box-shadow: 0 1px 2px #EEE,inset 0 1px 1px #FFF;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px
}
.yonjar_bgm_userjs_rank_btn:hover {
color: #FFF;
text-shadow: none;
background: #4F93CF;
background: -moz-linear-gradient(top,#6BA6D8,#4F93CF);
background: -o-linear-gradient(top,#6BA6D8,#4F93CF);
background: -webkit-gradient(linear,left top,left bottom,from(#5FA3DB),to(#72B6E3));
-webkit-box-shadow: 0 0 3px #EEE,inset 0 -1px 5px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 3px #EEE,inset 0 -1px 5px rgba(0,0,0,0.1);
box-shadow: 0 0 3px #EEE,inset 0 -1px 5px rgba(0,0,0,0.1)
}
`);

    let itemsList = document.querySelectorAll('#browserItemList li.item');
    let sortstyle = -1, sortstyle1 = 1,sortstyle2 = 1,sortstyle3 = -1,count=0,update=0;

    //按排名排序
    const showBtn = document.createElement('a');
    showBtn.addEventListener('click', SortByRank);
    showBtn.className = 'chiiBtn';
    showBtn.href='javascript:;';
    showBtn.textContent = '排名排序';

    //按评分人数排序
    const showBtn1 = document.createElement('a');
    showBtn1.addEventListener('click', SortByVote);
    showBtn1.className = 'chiiBtn';
    showBtn1.href='javascript:;';
    showBtn1.textContent = '人数排序';

    //按好友评价排序
    const showBtn2 = document.createElement('a');
    showBtn2.addEventListener('click', SortByFriend);
    showBtn2.className = 'chiiBtn';
    showBtn2.href='javascript:;';
    showBtn2.textContent = '好友评价';

    //按时间排序
    const showBtn3 = document.createElement('a');
    showBtn3.addEventListener('click', SortByTime);
    showBtn3.className = 'chiiBtn';
    showBtn3.href='javascript:;';
    showBtn3.textContent = '时间排序';
    if(document.querySelector('#indexCatBox ul.cat'))
        document.querySelector('#indexCatBox ul.cat').append(showBtn3);

    //更新缓存数据
    const showBtn4 = document.createElement('a');
    showBtn4.addEventListener('click', Update);
    showBtn4.className = 'chiiBtn';
    showBtn4.href='javascript:;';
    showBtn4.textContent = '更新';

    //更新缓存数据
    const showBtn0 = document.createElement('a');
    showBtn0.addEventListener('click', ShowProcess);
    showBtn0.className = 'chiiBtn';
    showBtn0.href='javascript:;';
    showBtn0.textContent = 'Show';

    const You=document.querySelectorAll('#headerNeue2 .idBadgerNeue a.avatar')[0].href.split('/user/')[1];
    const User =window.location.href.match(/\/list\/(\S+)\//)? window.location.href.match(/\/list\/(\S+)\//)[1]: null;

    if(window.location.href.match(/\/index\//)) Process();
    else {document.querySelector('#browserTools').append(showBtn0);}

    function ShowProcess(){
        itemsList = document.querySelectorAll('#browserItemList li.item');
        showBtn0.style.display='none';
        Process();
    }
    //Main Program
    function Process(){
        itemsList.forEach( (elem, index) => {
            let href = elem.querySelector('a.subjectCover').href;
            let ID = href.split('/subject/')[1];

            //为每个条目添加单独刷新
            let showBtn5 = document.createElement('a');
            showBtn5.className = 'l';
            showBtn5.href='javascript:;';
            showBtn5.textContent = '↺';
            showBtn5.addEventListener('click', FetchStatus.bind(this,href,index),false);
            elem.querySelector('.inner h3').appendChild(showBtn5);

            //获取用户评分
            let User_rate=User ? elem.querySelectorAll('.inner .collectInfo span')[0].className: null;
            let User_Point=User_rate ? (User_rate.match(/sstars(\d+)/)?User_rate.match(/sstars(\d+)/)[1]:null):null;
            if(User==You && User_Point)  localStorage.setItem(You+'Point'+ID,User_Point);
            if(localStorage.getItem(ID+'Point')){
                let info = {"rankNum": localStorage.getItem(ID+'Rank'),"Point": localStorage.getItem(ID+'Point'),"votes": localStorage.getItem(ID+'Votes'),"Point_f": localStorage.getItem(ID+'Point_f'),"Votes_f": localStorage.getItem(ID+'Votes_f')};
                DisplayStatus(ID,index,info);
            }
            else
                FetchStatus(href,index);

        });
    }

    function Update(){
        update=1;
        count=0;
        itemsList.forEach( (elem, index) => {
            let href = elem.querySelector('a.subjectCover').href;
            let ID = href.split('/subject/')[1];
            //同一天只更新一次
            let date = new Date();
            let time = date.getFullYear()+"-" + (date.getMonth()+1) + "-" + date.getDate();
            let lastime = localStorage.getItem(ID+'Lastime');
            if(time != lastime)  FetchStatus(href,index);
            else {
                count+=1;
                showBtn4.textContent='更新中... (' + count + '/' + itemsList.length +')';
                if(count==itemsList.length){ location.reload(); showBtn4.textContent='更新完毕!';}}
        });
    }

    function FetchStatus(href,index){
        fetch(href,{credentials: "include"})
            .then(data => {
            return new Promise(function (resovle, reject) {
                let targetStr = data.text();
                resovle(targetStr);
            });
        })
            .then(targetStr => {
            let ID = href.split('/subject/')[1];
            //获取排名
            let canMatch = targetStr.match(/<small class="alarm">#(\S+?)<\/small>/);
            let rankNum =  canMatch ? parseInt(canMatch[1], 10) : null;
            if(canMatch)  localStorage.setItem(ID+'Rank',rankNum);

            //获取站内评分和评分人数
            let Match1 = targetStr.match(/<span class="number" property="v:average">(\S+?)<\/span>/);
            let Point = Match1? parseFloat(Match1[1]) : null;
            if(Match1)  localStorage.setItem(ID+'Point',Point);
            let Match2 = targetStr.match(/<span property="v:votes">(\S+?)<\/span>/);
            let votes = Match2? parseInt(Match2[1]) : null;
            if(Match2)  localStorage.setItem(ID+'Votes',votes);

            //获取好友评分和评分人数
            let Match3 = targetStr.match(/<span class="num">(\S+?)<\/span>/);
            let Point_f = Match3? parseFloat(Match3[1]).toFixed(1) : null;
            if(Match3)  localStorage.setItem(ID+'Point_f',Point_f);
            let Match4 = targetStr.match(/class="l">(\S+?) 人评分<\/a>/);
            let Votes_f = Match4? parseFloat(Match4[1]) : null;
            if(Match4) localStorage.setItem(ID+'Votes_f',Votes_f);

            //加入历史记录
            let date = new Date();
            let time = date.getFullYear()+"-" + (date.getMonth()+1) + "-" + date.getDate();
            let lastime = localStorage.getItem(ID+'Lastime');
            let Record = time + ' Rank #' + rankNum + ' 评分:'+ Point + ' '+ votes + ' 人评分'+ '\r\n';
            let History = localStorage.getItem(ID+'Records');
            if(History) Record = History + Record;
            if(Match1 && time!=lastime){
                localStorage.setItem(ID+'Lastime',time);
                localStorage.setItem(ID+'Records',Record);}

            let info = {"rankNum": rankNum,"Point": Point,"votes": votes,"Point_f": Point_f,"Votes_f": Votes_f};
            if(!update)  DisplayStatus(ID,index,info);
            else{
                count+=1;
                showBtn4.textContent='更新中... (' + count + '/' + itemsList.length +')';
                if(count==itemsList.length){ location.reload(); showBtn4.textContent='更新完毕!';}
            }
        });
    }

    function DisplayStatus(ID,index,info){
        let rankNum=info.rankNum,Point=info.Point,votes=info.votes,Point_f=info.Point_f,Votes_f=info.Votes_f;
        //显示排名
        let rankSp = document.createElement('span');
        rankSp.className = 'rank';
        if (rankNum >= 3000) {
            rankSp.classList.add('yonjar_bgm_userjs_rank_refuse');
        }
        else if (rankNum >= 2000) {
            rankSp.classList.add('yonjar_bgm_userjs_rank_justsoso');
        }
        else if (rankNum >= 1000) {
        }
        else if (rankNum >= 100) {
            rankSp.classList.add('yonjar_bgm_userjs_rank_recommended');
        }
        else if ( rankNum >0) {
            rankSp.classList.add('yonjar_bgm_userjs_rank_excellent');
        }
        else {
            rankSp.classList.add('yonjar_bgm_userjs_rank_undefined');
        }

        rankSp.innerHTML = `<small>Rank </small>${rankNum}`;
        let note = localStorage.getItem(ID+'Records');
        rankSp.setAttribute('title', note);

        if(window.location.href.match(/\/(list|index)\//))
            document.querySelectorAll('#browserItemList .item .inner')[index].insertBefore(rankSp, document.querySelectorAll('#browserItemList .item .inner .info.tip')[index]);

        //显示站内评分和评分人数
        let rateInfo = document.createElement('p');
        rateInfo.setAttribute("class","rateInfo");
        let PointSm = document.createElement('small');
        PointSm.innerHTML = Point;
        PointSm.setAttribute("class","fade");
        let sstars = document.createElement('span');
        let Point1 = Point ? parseInt(Point) : null;
        if(Point1)
            sstars.setAttribute("class","sstars"+ Point1+ " starsinfo");
        let tip_j = document.createElement('span');
        tip_j.setAttribute("class","tip_j");
        tip_j.innerHTML = "("+ votes +"人评分)";
        if(votes>=4000)
            tip_j.classList.add('yonjar_bgm_userjs_vote_4000');
        else if(votes>=2000)
            tip_j.classList.add('yonjar_bgm_userjs_vote_2000');
        else if(votes>=1000)
            tip_j.classList.add('yonjar_bgm_userjs_vote_1000');
        else if(votes>=500)
            tip_j.classList.add('yonjar_bgm_userjs_vote_500');
        if(votes<500)
            tip_j.classList.add('yonjar_bgm_userjs_vote_0');

        if(window.location.href.match(/\/(list|index)\//)){
            document.querySelectorAll('#browserItemList .item .inner')[index].insertBefore(rateInfo, document.querySelectorAll('#browserItemList .item .inner .info.tip')[index]);
            rateInfo.appendChild(sstars);
            rateInfo.appendChild(PointSm);
            rateInfo.appendChild(tip_j);}
        else rateInfo = document.querySelectorAll('#browserItemList .item .inner .rateInfo')[index];

        //显示好友评分和评分人数
        let Pointfr = document.createElement('small');
        Point_f = Point_f ? Point_f : '-';
        Votes_f = Votes_f ? Votes_f :'-';
        let Point_My = localStorage.getItem(You+'Point'+ID);
        let Point_M = Point_My ? "我的评分:"+Point_My :'';
        Pointfr.innerHTML = "好友评分:"+Point_f+"  "+Votes_f+"人评分"+"  "+Point_M;
        Pointfr.setAttribute("class","friend_vote");
        rateInfo.appendChild(Pointfr);


        //显示排序按钮
        count+=1;
        if(count==itemsList.length && document.querySelector('#indexCatBox ul.cat')){
            document.querySelector('#indexCatBox ul.cat').append(showBtn);
            document.querySelector('#indexCatBox ul.cat').append(showBtn1);
            document.querySelector('#indexCatBox ul.cat').append(showBtn2);
            document.querySelector('#indexCatBox ul.cat').append(showBtn4);
            $('.chiiBtn').css({padding:'0 5px'});
            $('ul.cat li').css({padding:'0 5px 0 0'});
        }
        else if(count==itemsList.length && document.querySelector('#browserTools')){
            document.querySelector('#browserTools').append(showBtn);
            document.querySelector('#browserTools').append(showBtn1);
            document.querySelector('#browserTools').append(showBtn2);
            document.querySelector('#browserTools').append(showBtn4);
        }
    }
    function SortByRank() {
        sortstyle = (sortstyle==1)? -1 :1;
        showBtn.textContent = (showBtn.textContent=='排名排序↑') ? '排名排序↓':'排名排序↑';
        let container = document.querySelector('ul#browserItemList');
        function ParseRank(rankstring){
            let rank = rankstring.match(/Rank (\d{1,4})/)? rankstring.match(/Rank (\d{1,4})/)[1]: 9999;
            return rank;
        }
        if (container) container.style.cssText = 'display: flex; flex-flow: row wrap;';
        [].slice.call(document.querySelectorAll('#browserItemList .item .inner .rank'), 0)
            .map(x => [x.textContent, x])
            .sort((x,y) => (ParseRank(x[0]) - ParseRank(y[0]))*sortstyle)
            .forEach((x,n) => {x[1].parentNode.parentNode.style.order = n; x[1].parentNode.parentNode.style.width = '100%';});
    }

    function SortByVote() {
        sortstyle1 = (sortstyle1==-1)? 1 :-1;
        showBtn1.textContent = (showBtn1.textContent=='人数排序↓') ? '人数排序↑':'人数排序↓';
        let container = document.querySelector('ul#browserItemList');
        function ParseVote(votestring){
            let vote = votestring.match(/(\d{1,5})人评分/)? votestring.match(/(\d{1,5})人评分/)[1]: 0;
            return vote;
        }
        if (container) container.style.cssText = 'display: flex; flex-flow: row wrap;';
        [].slice.call(document.querySelectorAll('#browserItemList .item .inner .rateInfo .tip_j'), 0)
            .map(x => [x.textContent, x])
            .sort((x,y) => (ParseVote(x[0]) - ParseVote(y[0]))*sortstyle1)
            .forEach((x,n) => {x[1].parentNode.parentNode.parentNode.style.order = n; x[1].parentNode.parentNode.parentNode.style.width = '100%';});
    }

    function SortByFriend() {
        sortstyle2 = (sortstyle2==-1)? 1 :-1;
        showBtn2.textContent = (showBtn2.textContent=='好友评价↓') ? '好友评价↑':'好友评价↓';
        let container = document.querySelector('ul#browserItemList');
        function ParseFriendRank(rankstring){
            let rank = rankstring.match(/(\d+\.\d+?)/)? rankstring.match(/(\d+\.\d+?)/)[1]: 0;
            let votes = rankstring.match(/(\d+?)人/)? rankstring.match(/(\d+?)人/)[1]: 0;
            rank = parseFloat(rank);
            votes = parseInt(votes);
            let fixed = rank ? (votes / (votes+10))* rank + (10 / (votes+10)) * 6: 0;
            return parseInt(fixed*10);
        }
        if (container) container.style.cssText = 'display: flex; flex-flow: row wrap;';
        [].slice.call(document.querySelectorAll('#browserItemList .item .inner .rateInfo .friend_vote'), 0)
            .map(x => [x.textContent, x])
            .sort((x,y) => (ParseFriendRank(x[0]) - ParseFriendRank(y[0]))*sortstyle2)
            .forEach((x,n) => {x[1].parentNode.parentNode.parentNode.style.order = n; x[1].parentNode.parentNode.parentNode.style.width = '100%';});
    }

    function SortByTime() {
        sortstyle3 = (sortstyle3==-1)? 1 :-1;
        showBtn3.textContent = (showBtn3.textContent=='时间排序↓') ? '时间排序↑':'时间排序↓';
        let container = document.querySelector('ul#browserItemList');
        function ParseDate(Datestring){
            let yy=Datestring.match(/(\d{4})/)? Datestring.match(/(\d{4})/)[1].toString():'1000';
            let year = Datestring.match(/(\d{4})(年|-)(\d{1,2})(月|-)(\d{1,2})/)? Datestring.match(/(\d{4})(年|-)(\d{1,2})(月|-)(\d{1,2})/)[1].toString(): yy;
            let month = Datestring.match(/(\d{4})(年|-)(\d{1,2})(月|-)(\d{1,2})/)? Datestring.match(/(\d{4})(年|-)(\d{1,2})(月|-)(\d{1,2})/)[3].toString(): '01';
            let day = Datestring.match(/(\d{4})(年|-)(\d{1,2})(月|-)(\d{1,2})/)?Datestring.match(/(\d{4})(年|-)(\d{1,2})(月|-)(\d{1,2})/)[5].toString(): '01';
            let date= new Date(year+'/'+month+'/'+day);
            let now = new Date();
            return now.getTime()-date.getTime();
        }
        if (container) container.style.cssText = 'display: flex; flex-flow: row wrap;';
        [].slice.call(document.querySelectorAll('#browserItemList .item .inner .info'), 0)
            .map(x => [x.textContent, x])
            .sort((x,y) => (ParseDate(x[0]) - ParseDate(y[0]))*sortstyle3)
            .forEach((x,n) => {x[1].parentNode.parentNode.style.order = n; x[1].parentNode.parentNode.style.width = '100%';});
    }


})();