查看“Widget:Tweak”的源代码

<noinclude>{{#Widget:Tweak}}</noinclude>
<includeonly>
    <link rel="stylesheet"
        href="https://wiki.biligame.com/tools/index.php?title=MediaWiki:BilibiliComment.css&action=raw&ctype=text/css">
    <script>

        (() => {
            //常量/变量
            const {
                wgPageName: pageName,
                wgTitle: pageTitle,
                wgRelevantPageName: relevantPageName,
                wgGameName: gameName,
                wgUserName: userName,
                wgArticleId: articleId
            } = RLCONF || {};
            const ua = window.navigator.userAgent || '';
            const Device = {
                isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua),
                isPC: !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua),
                isIOS: /iPad|iPhone|iPod/.test(ua),
                isSafari: /^((?!chrome|android).)*safari/i.test(ua)
            };
            let loginStatus = null;
            let getLoginStatus = () => (loginStatus !== null ? loginStatus : !!userName);

            runOnDOMReady(function () {
                //头像|通知|登录
                if (!Device.isMobile) { }
                else try {
                    //显示用户头像|设置通知面板
                let $userHeader = $('.bili-game-header-nav-user');
                let $navHeadA = $('.nav-head .mw-echo-notification-badge-nojs');
                $navHeadA.find('svg').remove();
                $navHeadA.append($userHeader);
                $userHeader.add($navHeadA).on('click', () => {
                    if ($('.bili-game-header-user-noLogin').length === 0) {
                        $('.mw-mask').css('display', 'block');
                        $('body').css('overflow', 'hidden'); // 禁用滚动
                    }
                });
                $('.mw-mask').on('click', () => $('body').css('overflow', 'auto'));
                //设置监听通知面板，添加按钮：用户退出|关闭
                const addCommentButtons = new MutationObserver((mutations, observer) => {
                    const commentHeader = document.querySelector('.mw-echo-ui-notificationsInboxWidget-main-toolbar-readState');
                    if (commentHeader && !commentHeader.querySelector('.comment-buttons')) {
                        const buttonContainer = $('<span>').addClass('comment-buttons')
                            .append($('<span>').addClass('commentQuit glyphicon glyphicon-off'))
                            .append($('<span>').addClass('commentClose glyphicon glyphicon-remove'));
                        $(commentHeader).append(buttonContainer);
                        $('.commentQuit').on('click', () => $('.bili-game-header-user-logOut div')[0].click());
                        $('.commentClose').on('click', () => $('.mw-mask').click());
                        observer.disconnect();
                    }
                });
                addCommentButtons.observe(document.body, {//开始监听
                    childList: true,
                    subtree: true
                });
                } catch (e) {
                    console.log('头像|通知|登录 Error:', e);
                }
                /*  PC端用户通知 */
              if (!Device.isPC) { }
               else try {
                    if (Device.isPC) {
                        $('.bili-game-header-nav-user').addClass('mw-echo-notification-badge-nojs');
                        $('.bili-game-header-nav-user').on('click', function (e) {
                            $('.bili-game-header-user-popper').css('display', 'block');
                            $('.mw-mask')[0].style.setProperty('display', 'block', 'important');
                        });
                        $('.mw-mask').on('click', () => $('.bili-game-header-user-popper').css('display', 'none'));
                        $('.bili-game-header-user-login').find('a').attr('href', '#');
                    }
                } catch (e) { }

                /* 以下内容搬运自黑悟空wiki：//wiki.biligame.com/wukong/Widget:MovePageTools */
                /* 将面包屑导航移动到导航栏下方，贡献者列表移动到正文内容下方，对于主空间将Wiki功能栏移动到页面正文下方 */
                /* 将 贡献者 一栏置于正文后方 */
                /* 针对主、项目、模板、帮助空间的页面，将 Wiki功能菜单 firstHeadingTools 置于正文后方 */
                /* 尝试移动 面包屑导航 到 导航栏下方 */
                var shenkong_bodyContent = document.getElementById('bodyContent');
                // 移动底部分类列表位置
                try {
                    var catlinksElement = document.getElementById('catlinks');
                    if (RLCONF.wgNamespaceNumber === 0 || RLCONF.wgNamespaceNumber === 4 || RLCONF.wgNamespaceNumber === 10 || RLCONF.wgNamespaceNumber === 12) {
                        if (catlinksElement && shenkong_bodyContent) {
                            //console.log("Widget MovePageTools：尝试将 底部分类列表 置于页面尾部");
                            shenkong_bodyContent.parentNode.insertBefore(catlinksElement, shenkong_bodyContent.nextSibling);
                        }
                    }
                } catch (err) {
                    console.error("Widget MovePageTools：Error,尝试将 底部分类列表 置于页面尾部失败");
                    console.error(err);
                }
                // 移动wiki功能菜单位置
                try {
                    var firstHeadingToolsElement = document.getElementById('firstHeadingTools');
                    if (RLCONF.wgNamespaceNumber === 0 || RLCONF.wgNamespaceNumber === 4 || RLCONF.wgNamespaceNumber === 10 || RLCONF.wgNamespaceNumber === 12) {
                        if (firstHeadingToolsElement && shenkong_bodyContent) {
                            //console.log("Widget MovePageTools：尝试将 Wiki功能菜单  firstHeadingTools 置于页面尾部");
                            shenkong_bodyContent.parentNode.insertBefore(firstHeadingToolsElement, shenkong_bodyContent.nextSibling);
                        }
                    }
                } catch (err) {
                    console.error("Widget MovePageTools：Error,尝试将 Wiki功能菜单 firstHeadingTools 置于页面尾部失败");
                    console.error(err);
                }
                // 移动贡献者位置
                try {
                    var biliContributorsElement = document.getElementById('biliContributors');
                    if (biliContributorsElement && shenkong_bodyContent) {
                        //console.log("Widget MovePageTools：尝试将 贡献者 置于页面尾部");
                        shenkong_bodyContent.parentNode.insertBefore(biliContributorsElement, shenkong_bodyContent.nextSibling);
                    }

                } catch (err) {
                    console.error("Widget MovePageTools：Error,尝试将 贡献者 置于页面尾部失败");
                    console.error(err);
                }
                // 移动面包屑位置
                try {
                    var breadcrumbsElement = document.getElementById("breadcrumbs");
                    var siteNoticeElement = document.getElementById("siteNotice");

                    if (breadcrumbsElement && siteNoticeElement.nextSibling) {
                        //console.log("Widget MovePageTools：尝试移动 面包屑导航 到 导航栏下方");
                        shenkong_bodyContent.parentNode.insertBefore(breadcrumbsElement, siteNoticeElement.nextSibling);
                    }
                } catch (error) {
                    console.error("Widget MovePageTools：Error,尝试移动 面包屑导航 到 导航栏下方失败");
                    console.error(error);
                }

            });

        })();


        /**
         * DOM加载完成后执行回调的工具函数，引自stardrewValley
         * @param {Function} callback - DOM加载完成后要执行的回调函数
          */
        function runOnDOMReady(callback) {
            if (document.readyState === "complete" || document.readyState === "interactive") {
                setTimeout(callback, 1);
            } else {
                document.addEventListener("DOMContentLoaded", callback);
            }
        }
    </script>

    <style>
        /*评论区和表情包相关*/
      
      /* app端评论框样式 */
      #flowthread .h5-wiki-comment{
        bottom:0px;
      }
      #flowthread .h5-wiki-comment .bui-reply-box {
        padding: 5px 20px;
      }

        .emo-img-tabber {
            width: 24px
        }

        .flowthread_btn-emo {
            display: inline-block
        }

        .comment-replybox {
            position: relative
        }

        .flowthread_panel-emo {
            display: none;
            height: 240px;
            width: 380px;
            position: absolute;
            top: -moz-calc(100% - 10px);
            top: calc(100% - 10px);
            left: 24px;
            border-radius: 4px;
            background: rgb(255 255 255 / 90%);
            border: 0;
            -webkit-box-shadow: 1px 1px 4px rgba(3, 60, 7, .3);
            box-shadow: 1px 1px 4px rgba(3, 60, 7, .3);
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            z-index: 999;
            display: -ms-grid;
            display: grid;
            -ms-grid-rows: 30px 1fr 36px;
            grid-template-rows: 30px 1fr 36px
        }

        .flowthread_panel-header {
            border-radius: 4px 4px 0 0;
            padding: 6px;
            font-size: 12px
        }

        .flowthread_panel-container {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            overflow: auto;
            padding: 8px
        }

        .flowthread_container-item {
            margin: 2px;
            border-radius: 2px
        }

        .flowthread_container-item:hover {
            -webkit-filter: brightness(.9);
            filter: brightness(.9)
        }

        .flowthread_panel-tabber {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            background: #dcdcdc
        }

        .flowthread_tabber-item {
            width: 50px;
            height: 100%;
            background: #dcdcdc;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

        .flowthread_tabber-item.active {
            background: #fff
        }

        .flowthread_tabber-item:first-child {
            border-radius: 0 0 0 4px
        }

        .flowthread_tabber-item:hover {
            -webkit-filter: brightness(1.05);
            filter: brightness(1.05)
        }

        .flowthread_panel-tabber {
            border-radius: 0 0 4px 4px
        }

        @media screen and (max-width:500px) {
            .flowthread_panel-emo {
                height: 34vh;
                width: -moz-calc(100%);
                width: calc(100%);
                position: absolute;
                left: 10px;
                top: unset;
                bottom: -moz-calc(100% + 10px);
                bottom: calc(100% + 10px)
            }
        }

        .feather-smile {
            stroke: #fff;
            -webkit-transition: background-color .25s ease-in-out;
            -o-transition: background-color .25s ease-in-out;
            -moz-transition: background-color .25s ease-in-out;
            transition: background-color .25s ease-in-out;
            -webkit-box-shadow: unset !important;
            box-shadow: unset !important;
            background: rgba(var(--brand_blue_rgb), .5)
        }

        .feather-smile:hover {
            background: #585a6d;
        }

        .flowthread_container-item,
        .flowthread_tabber-item:not(.active) {
            cursor: pointer
        }

        .flowthread_btn-emo {
            cursor: pointer;
            margin: 0 !important
        }

        .flowthread_tabber-item.active:hover {
            -webkit-filter: unset;
            filter: unset
        }
    </style>
</includeonly>