用户:123855714/Danmu.js

/**
 * Danmu
 * Author:马小萌
 * Bilibili:https://space.bilibili.com/123855714
 */
"use strict";

var danmu = {
    about: {
        ver: "v1.1.0",
        info: function(){
            console.log("%c Bwiki弹幕 %c%s\nhttps://wiki.biligame.com/tools/Danmu", "color: #fff; padding: 5px 0; background: #F785AB;", "padding: 5px 6px 5px 5px; background: #FFE0E0;", danmu.about.ver);
        }
    },
    data:{
        cssraw1: `
<style>
.danmu {
  position: fixed;
  top: 0px;
  user-select: none;
  z-index:999;
}
.danmu .post {
  display:none;
  position: absolute;
  font-size: 18px;
  text-wrap: nowrap;
  align-items: center;
}
.danmu .post img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #aaa;
}
.danmu .post span {
  margin-left:2px;
  text-shadow: #0000007f 1px 0 0, #0000007f 0 1px 0, #ffffff7f -1px 0 0, #ffffff7f 0 -1px 0;
}
</style>
`,
        count: {
            loopcount:0,
            loopnum:0,
            total:0,
        },
        on:false,
        pageid: "1",
        setting: {
            once: 20,
            speed: 2,
            maxtop: 0.7
        },
        url: "/api.php"
    },
    getflowthread: async function(csrftoken){
        return await new Promise((resolve) => {
            $.ajax({
                url:danmu.data.url,
                type:"post",
                data:{
                    "action":"flowthread",
                    "type":"list",
                    "pageid":danmu.data.pageid,
                    "limit":99999,
                    "token":csrftoken,
                    "utf8":"1",
                    "format":"json"
                },
                success:function(result){
                    resolve(result);
                },
                error:function(e){
                    console.error("getflowthread:",e);
                }
            });
        });
    },
    init: function(){
        if($(".danmu").length)return;
        try{
            var swinput = $("<input>");
            swinput.attr({
                id:"danmu",
                type:"checkbox"
            });
            swinput.css({
                "margin-left":"20px",
                "width":"16px"
            });
            var swspan = $("<span>");
            swspan.text("弹幕");
            swspan.css({"font-size":"16px"});
            $(".comments-title").append(swinput,swspan);
            var dDiv = $("<div>").addClass("danmu");
            $("head").append(danmu.data.cssraw1);
            $("body").append(dDiv);
        }catch{}
        danmu.data.url = mw.config.get("wgScript").replace("index","api");
        danmu.data.pageid = mw.config.get("wgArticleId");
        $("#danmu").on("click",function(){
            if($(this)[0].checked){
                danmu.data.on = true;
                if(danmu.data.pageid > 0){
                    danmu.token(danmu.data.url).then(function(csrftoken){
                        danmu.getflowthread(csrftoken).then(function(result){
                            if(result.flowthread){
                                danmu.data.count.total = result.flowthread.posts.length;
                                danmu.data.count.loopnum = 0;
                                result.flowthread.posts.forEach((item)=>{
                                    var pDiv = $("<div>").addClass("post");
                                    var pImg = $("<img>").attr("src",item.avatar);
                                    var pText = $("<span>").html(item.text);
                                    pDiv.append(pImg,pText)
                                    $(".danmu").append(pDiv);
                                });
                                for(var i=0;i<(danmu.data.count.total<danmu.data.setting.once?danmu.data.count.total:danmu.data.setting.once);i++){
                                    danmu.load(i);
                                }
                                if(danmu.data.count.total>danmu.data.setting.once){
                                    danmu.data.count.loopnum = danmu.data.setting.once;
                                }
                            }
                        });
                    });
                    danmu.about.info();
                }
            }else{
                danmu.data.on = false;
                $(".danmu").empty();
            }
        });
    },
    load: function(i){
        var obj = $(".danmu .post")[i];
        var screenHeight = document.documentElement.clientHeight;
        var maxTop = screenHeight * danmu.data.setting.maxtop;
        obj.style.display = "flex";
        obj.style.top = maxTop * Math.random() + "px";
        var screenWidth = document.documentElement.clientWidth;
        obj.style.left = screenWidth + "px";
        obj.style.color = `#${Math.floor(Math.random()*128).toString(16).padStart(2, '0')}${Math.floor(Math.random()*128).toString(16).padStart(2, '0')}${Math.floor(Math.random()*128).toString(16).padStart(2, '0')}`;
        danmu.move(Math.random() * danmu.data.setting.speed + 1, i, screenWidth);
    },
    move: function(speed, i, maxLeft) {
        if(!danmu.data.on)return;
        var obj = $(".danmu .post")[i];
        maxLeft -= speed;
        if (maxLeft > -obj.offsetWidth) {
            obj.style.left = maxLeft + "px";
            requestAnimationFrame(function () {
                danmu.move(speed, i, maxLeft);
            });
        } else {
            obj.style.display = "none";
            if(danmu.data.count.total>danmu.data.setting.once){
                if(danmu.data.count.loopnum >= danmu.data.count.total-1){
                    danmu.data.count.loopnum = 0;
                }else{
                    danmu.data.count.loopnum += 1;
                }
                danmu.load(danmu.data.count.loopnum);
            }else{
                danmu.load(i);
            }
        }
    },
    token: async function(url){
        return await new Promise((resolve) => {
            $.ajax({
                url:url,
                type:"post",
                data:{
                    "action":"query",
                    "format":"json",
                    "meta":"tokens"
                },
                dataType:"json",
                success:function(result){
                    resolve(result.query.tokens.csrftoken);
                },
                error:function(e, status){
                    console.error(status,"getToken:",e);
                }
            });
        });
    },
}

setTimeout(function() {
    danmu.init();
}, 3000);