查看“Widget:TalkToc”的源代码

<noinclude> </noinclude><includeonly><!--{if !isset($wgTalkToc) || !$wgTalkToc}--><!--{assign var="wgTalkToc" value=true scope="global"}--><script>
window.RLQ = window.RLQ || [];
window.RLQ.push(function() {
    mw.loader.implement("widgetTalkToc", function($, jQuery) {
        $(function() {
            var $toc = $('#toc'),
                $tocBox, $level2, $li, $svdDcs, $title, $toggle, $tocText,
                appendToggleButton;

            /* 预处理 */
            //标记存档讨论串
            $('.saveNotice').each(function() {
                var prevHeadline = $(this).prev('h2');
                if (prevHeadline[0]) $toc.find('a[href="#' + prevHeadline.find('.mw-headline')[0].id + '"]').parent().addClass("savedDiscussion hiddenDiscussion");
            });
            //整理标题列表
            $toc.append("<ol style='margin-left: 1.7em;'></ol>").after('<div id="tocBox"></div>');
            $toc.children('ul').children().appendTo($toc.find('ol'));
            $toc.find(".toclevel-1 > a > .tocnumber").remove();
            $toc.appendTo("#tocBox");

            /* 定义变量 */
            $tocBox = $('#tocBox');
            $level2 = $toc.find('.toclevel-2').hide();
            $li = $toc.find('ol > li');
            $svdDcs = $toc.find('.savedDiscussion');
            $title = $toc.find('#toctitle').css("margin-right", "1em").append('<span id="toctoggle"></span>');
            $toggle = $title.append('<div id="toggle"></div>').find('#toggle');
            $tocText = $title.after('<div id="tocText"></div>').parents('#toc').find('#tocText');
            appendToggleButton = function($Obj, $set, shTx, hiTx, fun) {
                if (!$Obj[0]) return false;
                $set.append($('<a/>', {
                    text: function() {
                        if ($Obj.is(':visible')) return hiTx;
                        else return shTx;
                    },
                    'class': 'toggleButton',
                    href: 'javascript:void(0);',
                    bind: {
                        click: function() {
                            if ($Obj.is(':visible')) {
                                $Obj.fadeOut();
                                $(this).text(shTx);
                            } else {
                                $Obj.fadeIn();
                                $(this).text(hiTx);
                            }
                        }
                    }
                }));
                if (typeof fun == 'function') fun();
            };

            /* 业务处理*/
            //添加存档讨论串标题toggle按钮
            if ($svdDcs[0]) {
                $toggle.append($('<a/>', {
                    text: '显示已被存档标题',
                    'class': 'toggleButton',
                    href: 'javascript:void(0);',
                    bind: {
                        click: function() {
                            if ($svdDcs.hasClass('hiddenDiscussion')) {
                                $svdDcs.removeClass('hiddenDiscussion');
                                $(this).text('隐藏已被存档标题');
                            } else {
                                $svdDcs.addClass('hiddenDiscussion');
                                $(this).text('显示已被存档标题');
                            }
                        }
                    }
                }));
                $tocText.append("<div class='tocText'>（有下划线标题是已被存档标题）</div>");
            }
            //添加二三四五级标题toggle按钮和标题数量
            appendToggleButton($level2, $toggle, '显示段落', '隐藏段落', function() {
                $tocText.append("<div class='tocText'>（中括号内数字是该大段下小段数量）</div>");
                $toc.find('.toclevel-1').each(function() {
                    var subtitleLength = $(this).find('.toctext').length - 1;
                    if (subtitleLength) $(this).children('a').after('[' + subtitleLength + ']');
                });
            });
            //添加整体toggle按钮
            appendToggleButton($toc.find('ol'), $title.find('#toctoggle'), '显示', '隐藏');
            $('#toc').addClass('noOrigin');
            $('.saveNotice').each(function() {
                $(this).prev('h2').addClass('savedNotice');
            });
            $('#mw-content-text > h2:first').before('<div id="talkTocBox"><table></table></div>');
            var self = $('#talkTocBox table'),
                heads = $('#mw-content-text > h2'),
                a = $('<a/>').text('显示已存档讨论串标题');
            self.append('<caption/>').find('caption').append(mw.config.get('wgTitle') + '现有讨论串').append(' [').append(a).append(']<br>').append('（有下划线标题是已被存档讨论串标题）')
                .end().append('<tbody/>');
            heads.not('.savedNotice').each(function(i) {
                if (i % 4 === 0) self.find('tbody:last').append('<tr/>');
                var time = $(this).nextUntil('h2').text().match(/\d{4}年([1-9]|1[0-2])月([1-9]|[12]\d|3[01])日 \([一二三四五六日]\) ([01]\d|2[0-3]):[0-5]\d \([A-Z]{3}\)/g) || ['未知'];
                time = time[time.length - 1];
                self.find('tr:last').append('<td><a href="#' + $(this).children('.mw-headline').attr('id') + '">' + $(this).clone().children('.mw-headline').children('.mw-headline-number').remove().end().prepend(heads.index(this) + 1 + ' ').text() + '</a>' + '<br>最后回复：' + time + '' + '</td>');
            });
            self.append('<tbody class="hr"><tr><td colspan="4"> </td></tr></tbody>').append('<tbody/>').find('tbody').not(':first').hide();
            heads.filter('.savedNotice').each(function(i) {
                if (i % 4 === 0) self.find('tbody:last').append('<tr/>');
                self.find('tr:last').append('<td><a class="savedTitle" href="#' + $(this).children('.mw-headline').attr('id') + '">' + $(this).clone().children('.mw-headline').children('.mw-headline-number').remove().end().prepend(heads.index(this) + 1 + ' ').text() + '</a></td>');
            });
            a.on('click', function() {
                $(this).text(self.find('tbody').not(':first').fadeToggle().is(':visible') ? '隐藏已存档讨论串标题' : '显示已存档讨论串标题');
            });
            self.find('tbody').not('.hr').each(function() {
                var that = $(this).find('tr:last');
                switch (that.find("td").length) {
                    case 3:
                        that.append("<td>&#32;</td>");
                        break;
                    case 2:
                        that.append("<td>&#32;</td><td>&#32;</td>");
                        break;
                    case 1:
                        that.append("<td>&#32;</td><td>&#32;</td><td>&#32;</td>");
                }
            });
            $('#talkTocBox caption').append('<br>[').append($('<a/>').addClass('cbutton')).append(']');
            $('#tocText').append('<br>[').append($('<a/>').addClass('cbutton')).append(']');
            $('.cbutton').on('click', function() {
                if (!localStorage.wgTocStyle || localStorage.wgTocStyle !== 'list') {
                    $('#talkTocBox').fadeOut();
                    $('#tocBox').fadeIn();
                    localStorage.setItem('wgTocStyle', 'list');
                    $('.cbutton').text('点击切换至表格格式');
                } else {
                    $('#talkTocBox').fadeIn();
                    $('#tocBox').fadeOut();
                    localStorage.setItem('wgTocStyle', 'table');
                    $('.cbutton').text('点击切换至列表格式');
                }
            });
            if (!localStorage.wgTocStyle || localStorage.wgTocStyle !== 'list') {
                $('#talkTocBox').fadeIn();
                $('.cbutton').text('点击切换至列表格式');
            } else {
                $('#tocBox').fadeIn();
                localStorage.setItem('wgTocStyle', 'list');
                $('.cbutton').text('点击切换至表格格式');
            }
        });
    });
});
</script>
<style>
#tocBox {
    max-width: 37%;
    min-width: 300px;
    float: left;
}
#toc.noOrigin {
    display: table;
}
div.toc#toc {
    min-width: 300px;
    box-sizing: border-box;
    margin-right: 37px;
    padding-right: 1em;
    padding-left: 1em;
}
div.toc#toc div#toctitle h2 {
    margin-right: 1em;
}
div.toc.noOrigin#toc .toctoggle {
    display: none;
}
div#toc.toc #toctoggle,
div#toc.toc #toggle {
    font-size: 94%;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
div#toc.toc .toggleButton:before {
    content: "[";
    color: black;
}
div#toc.toc .toggleButton:after {
    content: "]";
    color: black;
}
#toc .toggleButton:first-child {
    margin-right: 0.5em;
}
div#toc.toc .toggleButton:last-child {
    margin-right: 0;
}
div#toc.toc .hiddenDiscussion {
    visibility: hidden;
    height: 0;
    margin: 0;
}
div.toc#toc li.savedDiscussion a {
    text-decoration: underline;
}
#toc div#tocText {
    text-align:center;
}
#toc div.tocText {
    display:inline-block;
}
/* 节操酱的beg */
#content ol,
#content ul {
    margin: 0 !important;
    padding: 0.3em 0 0 1.6em !important;
}
#toc .toclevel-1 > ul {
    padding-left: 0!important;
}
/* 由于节操酱的beg导致分类那边有秘制空白 */
#content #catlinks ol,
#content #catlinks ul {
    padding: 0 !important;
}
#toc,
#tocBox,
#talkTocBox {
    display: none;
}
#talkTocBox td {
    text-align: center;
    border: 1px solid #a7d7f9;
    width: 25%;
    padding: 0 1em;
}
#talkTocBox .hr td {
    width: 100%;
}
#talkTocBox table {
    border-collapse: collapse;
    margin-bottom: 1em;
    width: 100%;
}
#talkTocBox a {
    cursor: pointer;
}
#talkTocBox .savedTitle {
    text-decoration: underline;
}
.cbutton {
    cursor: pointer;
}
</style><!--{/if}--></includeonly>