TapTap游戏社区列表页贴子预览

TapTap游戏社区列表页贴子（除图片和视频贴）卡片新增预览按钮，可在列表页直接预览贴子内容。
目前为 2020-05-09 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name              TapTap游戏社区列表页贴子预览
// @namespace     TapTap游戏社区列表页贴子预览
// @version           1.0.0
// @description    TapTap游戏社区列表页贴子（除图片和视频贴）卡片新增预览按钮，可在列表页直接预览贴子内容。
// @author           QIAN
// @match            *://www.taptap.com/app*
// @grant             none
// @require          https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js
// ==/UserScript==

$(function() {
    //创建预览和取消预览按钮
    var pvBtn = "<li class='pvBtn'>预览</li>";
    var pvBtnClose = "<li class='pvBtnClose' style='display:none;'>取消预览</li>";
    //创建预览贴子样式
    var pvCss = '<style class="pvStyle">.pvBox .topic-content{background:#fff;width:100%;padding: 20px;}.pvBox .topic-content .author-wrap{margin-bottom:25px;position:relative;z-index:3}*,:after,:before{box-sizing:border-box}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.pvBox .topic-content .author-wrap .user-avatar-verify{position:relative;margin-right:10px;float:left}.pvBox .topic-content .author-wrap .user-avatar-verify .user-avatar{width:50px;height:50px;display:block}.pvBox .topic-content .author-wrap .user-topic-info{float:left;margin-top:5px}.pvBox .topic-content .author-wrap .user-name-identity{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-bottom:4px}.pvBox .topic-content .author-wrap .user-name{font-size:16px;text-decoration:none;display:block;margin-right:5px;font-weight:500}.pvBox .topic-content .user-level[data-user-level]{width:34px;height:16px;color:#fff;font-size:12px;background:url(https://img.tapimg.com/market/images/c03f34adebbf457bb8d21c1092bed690.png) center top no-repeat;line-height:16px;background-size:34px;text-align:center;vertical-align:middle;margin-right:4px!important;-webkit-transform:scale(.875);transform:scale(.875);display:none}.pvBox .topic-content .author-wrap .topic-info{color:#999;font-size:12px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.pvBox .topic-content .author-wrap .topic-info li:not(:last-child){padding-right:10px;margin-right:10px;position:relative}.pvBox .topic-content .manage-list,.pvBox .topic-content .group-label,.pvBox .topic-content .comment-box,.pvBox .topic-content .item-text-footer>ul .post-dropdown{display:none}.pvBox .topic-content h1{font-weight:500;margin-bottom:25px;line-height:44px;overflow:hidden}.pvBox .topic-content h1 p{margin-bottom:8px}.pvBox .topic-content h1 .group-label{color:#14B9C8;border-radius:4.12px;font-size:12px;line-height:18px;padding:0 3px;border:1px solid #14B9C8;float:left}.pvBox .topic-content .bbcode-body-v2{line-height:1.9}.pvBox .topic-content .topic-operations{display:flex;align-items:center;-webkit-box-pack:center;justify-content:center;flex-wrap:wrap;margin:40px 0 60px}.pvBox .topic-content .topic-operations li:first-child{margin-left:0}.pvBox .topic-content .topic-operations li.vote-many-btn{border-radius:24px;width:auto;padding:0 15px}.pvBox .topic-content .topic-operations li{background:#F5F5F5!important;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;-webkit-box-pack:center;justify-content:center;margin:0 15px}.pvBox .topic-content .topic-operations,.pvBox .topic-content .topic-operations li{display:-webkit-box;-webkit-box-align:center}.pvBox .topic-content .topic-operations li .vote-up{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.pvBox .topic-content .topic-operations .taptap-common-iconfont{color:#999}.pvBox .topic-content .taptap-common-iconfont{color:#666;border:0;background:0;cursor:pointer;font-size:12px}.pvBox .topic-content .topic-operations li.vote-many-btn .icon-up{margin-right:8px}.pvBox .topic-content h1 .group-label{color:#14B9C8;border-radius:4.12px;font-size:12px;line-height:18px;padding:0 3px;border:1px solid #14B9C8;float:left}.pvBox .topic-content .bar-dropdown .dropdown-menu .topic-operations .taptap-common-iconfont .taptap-button-friendship>span.icon-down,.pvBox .topic-content .bar-dropdown .dropdown-menu .topic-operations .taptap-common-iconfont .taptap-button-friendship>span.icon-up,.pvBox .topic-content .mobile .topic-operations .taptap-common-iconfont .taptap-button-friendship>span.icon-down.follow,.pvBox .topic-content .mobile .topic-operations .taptap-common-iconfont .taptap-button-friendship>span.icon-up.follow,.pvBox .topic-content .taptap-page-side .app-group-forum .topic-operations .taptap-common-iconfont .taptap-button-friendship>span.icon-down.follow,.pvBox .topic-content .taptap-page-side .app-group-forum .topic-operations .taptap-common-iconfont .taptap-button-friendship>span.icon-up.follow,.pvBox .topic-content .topic-operations .taptap-common-iconfont .bar-dropdown .dropdown-menu .taptap-button-friendship>span.icon-down,.pvBox .topic-content .topic-operations .taptap-common-iconfont .bar-dropdown .dropdown-menu .taptap-button-friendship>span.icon-up,.pvBox .topic-content .topic-operations .taptap-common-iconfont .icon-font.icon-down,.pvBox .topic-content .topic-operations .taptap-common-iconfont .icon-font.icon-up,.pvBox .topic-content .topic-operations .taptap-common-iconfont .mobile .taptap-button-friendship>span.icon-down.follow,.pvBox .topic-content .topic-operations .taptap-common-iconfont .mobile .taptap-button-friendship>span.icon-up.follow,.pvBox .topic-content .topic-operations .taptap-common-iconfont .taptap-page-side .app-group-forum .taptap-button-friendship>span.icon-down.follow,.pvBox .topic-content .topic-operations .taptap-common-iconfont .taptap-page-side .app-group-forum .taptap-button-friendship>span.icon-up.follow,.pvBox .topic-content .topic-operations .taptap-common-iconfont .topic-video:not(.web-video-fullscreen) .btn-topic-video .icon-down.icon-font-topic-video,.pvBox .topic-content .topic-operations .taptap-common-iconfont .topic-video:not(.web-video-fullscreen) .btn-topic-video .icon-up.icon-font-topic-video,.pvBox .topic-content .topic-video:not(.web-video-fullscreen) .btn-topic-video .topic-operations .taptap-common-iconfont .icon-down.icon-font-topic-video,.pvBox .topic-content .topic-video:not(.web-video-fullscreen) .btn-topic-video .topic-operations .taptap-common-iconfont .icon-up.icon-font-topic-video{font-size:16px}.pvBox .topic-content .topic-operations .taptap-common-iconfont{border:0;background:0;cursor:pointer;font-size:12px;color:#999}.pvBox .topic-content .taptap-common-iconfont .taptap-button-collect{background:transparent;border:0}.pvBox .topic-content .taptap-common-iconfont .taptap-button-collect i{background:0}.pvBox .topic-content .tab-bar-box{height:55px}.pvBox .topic-content .reply-sort-tab,.pvBox .topic-content .reply-sort-tab-fixed{padding-top:18px;z-index:1;position:relative}.pvBox .topic-content .reply-sort-tab-fixed>li:not(.pull-right),.pvBox .topic-content .reply-sort-tab>li:not(.pull-right){margin-right:30px}.pvBox .topic-content .reply-sort-tab-fixed>li,.pvBox .topic-content .reply-sort-tab>li{float:left;font-size:18px}.pvBox .topic-content .reply-sort-tab-fixed>li>a.active,.pvBox .topic-content .reply-sort-tab>li>a.active{position:relative;color:#333;font-weight:500}.pvBox .topic-content .reply-sort-tab-fixed>li>a,.pvBox .topic-content .reply-sort-tab>li>a{display:block;color:#999;padding-bottom:12px;line-height:25px;text-decoration:none}.pvBox .topic-content .reply-sort-tab .pull-right,.pvBox .topic-content .reply-sort-tab-fixed .pull-right{display:none}.pvBox .topic-content .reply-sort-tab-fixed>li>a.active span,.pvBox .topic-content .reply-sort-tab>li>a.active span{color:#666;margin-left:7px}.pvBox .topic-content .reply-sort-tab-fixed>li>a.active:after,.pvBox .topic-content .reply-sort-tab>li>a.active:after{position:absolute;content:"";left:50%;bottom:0;width:60px;height:3px;background:#14B9C8;border-radius:2px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pvBox .topic-content .posts-item-v2,.pvBox .topic-content .topic-comments-list-v2{padding:15px 0;border-top:1px solid #f1f1f1}.pvBox .topic-content .posts-item-v2:first-child,.pvBox .topic-content .topic-comments-list-v2:first-child{padding-top:20px}.pvBox .topic-content .posts-item-v2 .author-avatar-verified,.pvBox .topic-content .topic-comments-list-v2 .author-avatar-verified{float:left}.pvBox .topic-content .author-avatar-verified{position:relative}.pvBox .topic-content .posts-item-v2 .posts-item-avatar,.pvBox .topic-content .topic-comments-list-v2 .posts-item-avatar{width:48px;height:48px}pvBox .topic-content .user-avatar-female{border:1px solid #ffdcee}.pvBox .topic-content .user-avatar-gender-empty{border:1px solid #eee}.pvBox .topic-content .user-avatar{border-radius:50%;overflow:hidden;display:block}.pvBox .topic-content .posts-item-v2 .posts-item-text,.pvBox .topic-content .topic-comments-list-v2 .posts-item-text{width:calc(100% - 70px);float:right}.pvBox .topic-content .posts-item-v2 .item-text-header,.pvBox .topic-content .topic-comments-list-v2 .item-text-header{line-height:21px;font-size:12px;color:#999;margin-bottom:4px;position:relative}.pvBox .topic-content .posts-item-v2 .item-text-header>li:not(.post-dropdown):first-child,.pvBox .topic-content .topic-comments-list-v2 .item-text-header>li:not(.post-dropdown):first-child{margin-bottom:2px}.pvBox .topic-content .posts-item-v2 .item-text-header>li:not(.post-dropdown),.pvBox .topic-content .topic-comments-list-v2 .item-text-header>li:not(.post-dropdown){display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.pvBox .topic-content span.taptap-user{margin-bottom:0;white-space:nowrap;font-size:0!important;vertical-align:middle}.pvBox .topic-content .posts-item-v2 .item-text-header .taptap-user-name,.pvBox .topic-content .topic-comments-list-v2 .item-text-header .taptap-user-name{font-size:14px;color:#1F2D3D;font-weight:500;display:inline-block;text-decoration:none;vertical-align:middle}.pvBox .topic-content .topic-v2-container .user-identify{border:1px solid #14B9C8;color:#14B9C8;margin-right:5px}.pvBox .topic-content .user-identify{display:inline-block;font-size:12px;line-height:18px;vertical-align:middle;border:1px solid #999;color:#999;padding:0 4px;border-radius:3px;margin:0 1px;position:relative;cursor:default}.pvBox .topic-content .posts-item-v2 .item-text-header>li:not(.post-dropdown):not(:first-child),.pvBox .topic-content .topic-comments-list-v2 .item-text-header>li:not(.post-dropdown):not(:first-child){float:left}.pvBox .topic-content .posts-item-v2 .item-text-header>li:not(.post-dropdown),.pvBox .topic-content .topic-comments-list-v2 .item-text-header>li:not(.post-dropdown){display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.pvBox .topic-content .posts-item-v2 .item-text-header .topic-floor,.pvBox .topic-content .topic-comments-list-v2 .item-text-header .topic-floor{position:relative;margin-right:6px}.pvBox .topic-content .posts-item-v2 .item-text-body,.pvBox .topic-content .topic-comments-list-v2 .item-text-body{color:#666;margin-bottom:10px;word-wrap:break-word;line-height:1.85;font-size:16px}.pvBox .topic-content .item-text-footer{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;color:#999;float: left}.pvBox .topic-content .item-text-footer>ul{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.pvBox .topic-content .item-text-footer>ul>li{margin-right:5px;position:relative}.pvBox .topic-content .item-text-footer .post-dynamic-time{margin-right:15px}.pvBox .topic-content .item-text-footer>ul>li a{color:#999;display:block;text-decoration:none}.pvBox .topic-content .item-text-footer>ul>li>.taptap-button-opinion.btn-sm{padding:0 10px}.pvBox .topic-content .collapse.in{display:block}.pvBox .topic-content .bar-dropdown{color:#ccc;margin-left:6px;position:absolute;right:15px;top:15px}.pvBox .topic-content .dropdown,.dropup{position:relative}.pvBox .topic-content .topic-comments-list-v2 .taptap-comment-item{padding-top:25px}.pvBox .topic-content .collapse.in ul{border-top:0!important}.pvBox .topic-content .collapse.in>ul>li .item-text-body p{font-size:14px!important}.pvBox .topic-content .topic-comments-list-v2 .user-avatar{width:25px;height:25px}.pvBox .topic-content .topic-comments-list-v2 .comment-item-text{width:calc(100% - 37px);float:right}.bar-dropdown .dropdown-menu .topic-operations .taptap-common-iconfont.active .taptap-button-friendship>span,.bar-dropdown .dropdown-menu .topic-operations .taptap-common-iconfont:hover .taptap-button-friendship>span,.mobile .topic-operations .taptap-common-iconfont.active .taptap-button-friendship>span.follow,.mobile .topic-operations .taptap-common-iconfont:hover .taptap-button-friendship>span.follow,.taptap-page-side .app-group-forum .topic-operations .taptap-common-iconfont.active .taptap-button-friendship>span.follow,.taptap-page-side .app-group-forum .topic-operations .taptap-common-iconfont:hover .taptap-button-friendship>span.follow,.topic-operations .taptap-common-iconfont.active,.topic-operations .taptap-common-iconfont.active .bar-dropdown .dropdown-menu .taptap-button-friendship>span,.topic-operations .taptap-common-iconfont.active .icon-font,.topic-operations .taptap-common-iconfont.active .mobile .taptap-button-friendship>span.follow,.topic-operations .taptap-common-iconfont.active .taptap-page-side .app-group-forum .taptap-button-friendship>span.follow,.topic-operations .taptap-common-iconfont.active .topic-video:not(.web-video-fullscreen) .btn-topic-video .icon-font-topic-video,.topic-operations .taptap-common-iconfont:hover,.topic-operations .taptap-common-iconfont:hover .bar-dropdown .dropdown-menu .taptap-button-friendship>span,.topic-operations .taptap-common-iconfont:hover .icon-font,.topic-operations .taptap-common-iconfont:hover .mobile .taptap-button-friendship>span.follow,.topic-operations .taptap-common-iconfont:hover .taptap-page-side .app-group-forum .taptap-button-friendship>span.follow,.topic-operations .taptap-common-iconfont:hover .topic-video:not(.web-video-fullscreen) .btn-topic-video .icon-font-topic-video,.topic-video:not(.web-video-fullscreen) .btn-topic-video .topic-operations .taptap-common-iconfont.active .icon-font-topic-video,.topic-video:not(.web-video-fullscreen) .btn-topic-video .topic-operations .taptap-common-iconfont:hover .icon-font-topic-video,.pvBox .topic-content .pvBtn:hover,.pvBox .topic-content .pvBtn:hover{color:#14B9C8}.pvBox .topic-content .topic-comments-list-v2 .reply-to-user{margin:0 8px 0 5px;font-size:14px}.pvBox .topic-content .item-text-footer>ul .post-dropdown .bar-dropdown .dropdown-toggle>i,.pvBox .topic-content .topic-comments-list-v2 .comment-item-text .taptap-user-name{font-size:13px}.pvBox .topic-content .user-identify{border:1px solid #14B9C8;color:#14B9C8;margin-right:5px}.pvBox .topic-content .author-avatar-verified .icon-verified{position:absolute;right:-2px;bottom:0}.pvBox .topic-content .collapse.in .taptap-icon.icon-verified{width:10px;height:10px}.pvBox .topic-content .author-wrap .icon-verified{position:absolute;right:0;bottom:0}</style>';
    //在除图片和视频贴以外的贴子卡片上追加预览和取消预览按钮
    $(".topic-item[data-filter-id*='topic'] .item-text-footer").prepend(pvBtn);
    $(".topic-item[data-filter-id*='topic'] .item-text-footer").prepend(pvBtnClose);
    //遍历每个贴子
    $(".topic-item[data-filter-id*='topic']").each(function() {
        //获取贴子链接
        var postLink = $(this).find(".topic-share").attr("data-share-url");
        //创建预览贴子容器       
        var pvBox = `<div class="pvBox" style="overflow: hidden scroll;width:100%;height:800px;border: 1px solid #14B9C8;border-radius: 3px; margin: 12px 0 0;"></div>`;
        //获取预览按钮相对文档顶部的偏移量
        var pvBtnOffset = $(this).find(".pvBtn").offset().top;
        //为预览按钮添加点击事件
        $(this).find(".pvBtn").click(function() {
            //浏览器滚动条自动定位至预览按钮
            $("html,body").animate({ scrollTop: pvBtnOffset - 12 + "px" }, 300);
            //显示贴子内容
            $(this).parents(".topic-item[data-filter-id*='topic']").append(pvBox);
            $(this).parents(".topic-item[data-filter-id*='topic']").find(".pvBox").load(`${postLink} .topic-content`);
            $(this).parents(".topic-item[data-filter-id*='topic']").append(pvCss);
            //隐藏预览按钮，显示取消预览按钮
            $(this).css("display", "none");
            $(this).siblings(".pvBtnClose").css("display", "block");
            //移除其他贴子的预览内容及样式文件，并切换预览按钮为取消预览按钮
            $(this).parents(".topic-item[data-filter-id*='topic']").siblings().find(".pvBox").remove();
            $(this).parents(".topic-item[data-filter-id*='topic']").siblings().find(".pvStyle").remove();
            $(this).parents(".topic-item[data-filter-id*='topic']").siblings().find(".pvBtnClose").css("display", "none");
            $(this).parents(".topic-item[data-filter-id*='topic']").siblings().find(".pvBtn").css("display", "block");
        });
        //为取消预览按钮添加点击事件
        $(this).find(".pvBtnClose").click(function() {
            //移除贴子的预览内容及样式文件，并切换预览按钮为取消预览按钮
            $(this).parents(".topic-item[data-filter-id*='topic']").find(".pvBox").remove();
            $(this).parents(".topic-item[data-filter-id*='topic']").find(".pvStyle").remove();
            $(this).css("display", "none");
            $(this).siblings(".pvBtn").css("display", "block");
        });
    });
});
欢迎访问Greasy Fork镜像
