// ==UserScript==
// @name         b站首页增加[关注]列表
// @version      5.0
// @description  在bilibili网页端上方菜单添加[关注]的列表，可自定义更改关注列表，快速进入你关注的up主空间。
// @author       冬瓜语
// @match        *://www.bilibili.com/*
// @match        *://space.bilibili.com/*
// @namespace https://greasyfork.org/users/307669
// @downloadURL none
// ==/UserScript==

(function() {
    var cookies = document.cookie;
    var id=cookies.match(/DedeUserID=(\d+)/)[1];
    go();
    function go(){
        var Obj=document.querySelector("[report-id=playpage_dynamic]");
        if(Obj){
            $("<li report-id='big_tab_click' class='nav-item'> <div id='close'> <a report-id='Focus' href='//space.bilibili.com/"+id+"/fans/follow' id='ty' target='_blank' class='t' >关注</a></div></li>").insertAfter(Obj);

            $("<div style='display:none;box-shadow:rgba(0,0,0,0.16) 0px 2px 4px;position: absolute; background: #E5E9EF; border-radius: 10px; padding: 20px; top: 400px; left: 50%; width: 600px;height: 210px; transform: translate(-50%, -50%); cursor: default;'>aaaaaaa</div>").insertAfter(Obj);

            var Obj_menu=document.querySelector("[report-id=Focus]");
            $("<div id='hh' style='display:none;opacity:0;position: absolute;z-index: 1;width: 110px; height: 42px; background-color: #FFF; border-radius: 0 0 4px 4px; box-shadow:rgba(0,0,0,0.16) 0px 2px 4px; top:46px;left:-35px;'><ul id='u' report-id='UP' class='sub-nav' style='padding: 0px;margin: 0px;'></ul></div>").insertAfter(Obj_menu);
            var Obj_UP=document.querySelector("[report-id=UP]");


            $("<a id='setting' class='im-list' href=# style='display: block; color: #222222;'>设置</a>").insertAfter(Obj_UP);

            /**
             *自动添加元素
             */
            if(localStorage.length>0){
                var number = 1;
                var x="a";
                for(var i=0;i<localStorage.length;i++){
                    var sitename = localStorage.key(i);
                    var mark = sitename.search("兾");
                    if(mark == 0){
                        var Nname=sitename.substring(1)
                        var siteurl = localStorage.getItem(sitename);
                        $("<a id='aa' class='im-list' href='#' target='_blank' style='display: block; color: #222222;'>name</a>").insertAfter(Obj_UP);
                        document.getElementById("aa").innerHTML=Nname;
                        document.getElementById("aa").href=siteurl;
                        x="a"+number.toString();
                        $('#aa').attr('id', x);
                        number++;
                    }
                }
            }

            /**
             *设置按钮
             */
            $(document).ready(function(){
                $("#setting").click(function(){
                    document.getElementById("panel").style.display="";

                    $("#hh").animate({
                        opacity: 0,
                        top:"46px",
                    },300);
                    setTimeout(hid,300);    //动画结束后隐藏
                    function hid(){
                        document.getElementById("hh").style.display="none";
                    }
                });
            });
            $(document).ready(function(){
                $("#closeX").click(function(){
                    document.getElementById("panel").style.display="none";
                });
            });

            /**
             *计算列表高度
             */
            var word = document.getElementsByClassName("im-list");
            var number2=0;
            for(var j in word){number2++;}
            var h=(number2-3)*42;
            document.getElementById("hh").style.height = h+"px";

            /**
             *鼠标悬停产生阴影
             */
            for(var k in word)
            {
                word[k].onmouseover = function(){
                    this.style.background="#E5E9EF";
                    this.style.color="#00AED6";
                    this.style.borderRadius="0 0 4px 4px";       //会使每一个超链接被选中时都变成圆角
                }
                word[k].onmouseout = function(){
                    this.style.background="#FFF";
                    this.style.color="#222222";
                    this.style.borderRadius="0 0 4px 4px";       //会使每一个超链接被选中时都变成圆角
                }
            }

            /**
             *可视化窗口
             */
            $("<div id='panel' style='display:none;box-shadow:rgba(0.5,0.5,0.5,0.5) 4px 4px 4px 4px;position: absolute; background: #E5E9EF; border-radius: 10px; padding: 20px; top: 400px; left: 50%; width: 500px;height: 410px; transform: translate(-50%, -50%); cursor: default;'>  <text style='font-size:20px'>设置</text> <text id='closeX' style='font-size:20px;float:right'>X</text>  <br><br>   <form>请输入UP主的名称 &nbsp; <input id='Name' type='text'placeholder='如：敖厂长' required='required' maxlength='9' style='color:gray; width: 200px'></form> <p><br></p>  <form  report-id='Theurl'>请输入UP主的网址 &nbsp; <input id='Url' placeholder='如：https://space.bilibili.com/122879' required='required' style='color:gray; width: 200px'><br><br> &nbsp; &nbsp; &nbsp; <button id='submit'style=''> 添加 </button> &nbsp; &nbsp; &nbsp; <button id='delete'> 删除 </button> &nbsp; &nbsp; &nbsp; <button id='clear'> 清空所有 </button> &nbsp; &nbsp; &nbsp; 提示：删除操作只需填写已有的UP主名称即可    </form>   <br>    <div id='list'></div>       </div>").insertAfter(Obj);


            /**
             *显示现有元素
             */
            $(document).ready(function(){
                var list = document.getElementById("list");
                if(localStorage.length>0){
                    var result = "<table border='1'>";
                    result += "<tr><td>UP主</td><td>网址</td></tr>";
                    for(var i=0;i<localStorage.length;i++){
                        var sitename = localStorage.key(i);
                        var mark = sitename.search("兾");
                        if(mark == 0){
                            var Nname=sitename.substring(1)
                            var siteurl = localStorage.getItem(sitename);
                            result += "<tr><td>"+Nname+"</td><td>"+siteurl+"</td></tr>";
                        }

                    }
                    result += "</table>";
                    list.innerHTML = result;
                }else{
                    list.innerHTML = "数据为空……";
                }
            });


            var Turl=document.querySelector("[report-id=Theurl]");
            //           $("  ").insertAfter(Turl);



            /**
             *增加记录
             */
            $(document).ready(function(){
                $("#submit").click(function(){
                    var name=document.getElementById("Name").value;
                    var Nname="兾"+name;
                    var address=document.getElementById("Url").value;
                    if (name==null || name==""){
                        alert("Up主名称不可为空！");
                    }
                    else if (address==null || address==""){
                        alert("Up主网址不可为空！");
                    }else{
                        localStorage.setItem(Nname, address);
                        alert("添加成功！刷新后生效！");
                    }
                });
            });

            /**
             *删除记录
             */
            $(document).ready(function(){
                $("#delete").click(function(){
                    var name=document.getElementById("Name").value;
                    var mk = 0;
                    if (name==null || name==""){
                        alert("Up主名称不可为空！");
                    }else{
                        for(var i=0;i<localStorage.length;i++){
                            var sitename = localStorage.key(i);
                            var mark = sitename.search("兾");
                            if(mark == 0 && name==sitename.substring(1)){
                                localStorage.removeItem(sitename);
                                mk = 1;
                            }
                        }
                        if(mk==1){alert("删除成功！刷新后生效！");mk=0;}
                        else{alert("删除失败！（可能没有找到您输入的Up主名称）");}
                    }

                });
            });
            /**
             *清空记录
             */
            $(document).ready(function(){
                $("#clear").click(function(){
                    localStorage.clear();
                    alert("清除成功！刷新后生效！");
                });
            });


            /**
             *鼠标悬停展开列表
             */
            $(document).ready(function(){
                $("#ty").mouseenter(function(){
                    setTimeout(show,300);
                    function show(){
                        document.getElementById("hh").style.display="";
                        $("#hh").animate({
                            opacity: 1,
                            top:"42px",
                        },300);
                    }


                });
            });
            /**
             *鼠标移出隐藏列表
             */
            $(document).ready(function(){
                $("#close").mouseleave( function(){
                    $("#hh").animate({
                        opacity: 0,
                        top:"46px",
                    },300);
                    setTimeout(hid,300);    //动画结束后隐藏
                    function hid(){
                        document.getElementById("hh").style.display="none";
                    }
                });

            });


        }else{setTimeout(go,500);}
    }

})();


/*
特别说明：此脚本为作者初学时编写，如有任何问题欢迎联系作者（e-mail：2514782900@qq.com）


更新日志：

version 5.0      2019/6/14
    1、增添了可视化设置界面，用户再也不用去改代码辣，更新也不再覆盖用户的自定义内容辣！
    2、现在用户可以在设置里对自己的关注列表进行增删查的操作。
    3、这是一次历史性的更新。



version 4.0      2019/6/9
    1、优化了代码结构。
    2、自动计算列表高度，方便用户自由增加或减少关注列表。
    3、修改了使用说明。



version 3.1      2019/6/8
    1、删除了【追番】入口。
    2、更改了脚本功能的描述。



version 3.0      2019/6/7
    1、实现了子菜单淡入淡出的同时滑动出场退场的效果。
    2、优化了子菜单的延迟显示效果。
    3、优化了代码算法逻辑。

    待解决的问题：
    1、鼠标悬停时每一个超链接都会变成圆角。
    2、当鼠标频繁选中和离开时会导致菜单频繁打开关闭。



version 2.0      2019/6/7
    1、更改了事件的触发方式，将“点击”触发替换成“悬停”触发。
    2、优化了鼠标选中时改变背景色和字体颜色。
    3、优化了菜单栏的圆角。
    4、优化了菜单栏的阴影。
    5、优化了字体。
    6、优化了菜单栏的居中。
    7、优化了代码逻辑。

    待解决的问题：
    1、存在鼠标悬停在最后一个超链接时改变背景色的同时会改变圆角的bug，修复后解决了此bug但又出现了使每一个超链接被选中时都变成圆角的新bug。
    2、子菜单弹出没有实现延迟显示功能。
    3、子菜单没有实现淡入淡出的效果。
    4、鼠标频繁选中会导致菜单频繁打开。



version 1.0      2019/6/3
    1、增添了【追番】入口。
    2、增添了【关注】入口。
    3、添加了子菜单栏。

    待解决的问题：
    1、【关注】入口的事件触发方式目前为“点击”，悬停触发事件的方式目前存在不可抗拒的Bug，后续版本更新中会陆续解决。
    2、子菜单中鼠标悬停还不能更改背景色。
    3、子菜单弹出没有实现延迟显示功能。
    4、子菜单没有实现圆角和阴影的样式。
    5、子菜单位置整体偏右。
    6、添加关注元素时需改动的代码过多。
    7、算法逻辑混乱，尚未修改。


*/