MediaWiki:ReplyList/code.js

/* ReplyList * * Adds a horizontal list of the replies to each forum post, which when hovered they display a tooltip with the message. * Also adds tooltip for hovering over the "Reply to #n" * * @author Dorumin */

(function {   $.fn.isInScreen = function { // Boo-hoo, modifying prototypes! You should be ashamed of yourself!        var el = this.get(0);        if (!el) return false;        var rects = el.getBoundingClientRect,        top = rects.top - ($('#globalNavigation').hasClass('headroom--pinned') ? 55 : 0),       bottom = rects.bottom,        height = rects.height;        return (top + height >= 0) && (bottom - height <= window.innerHeight);    };    function displayTooltip($elem, $link) { // function to display the tooltip        $link = $($link);        var top = $link.offset.top + $link.height - $('.message-1').offset.top;        $('.thread-tooltip').remove;        $elem            .removeAttr('id')            .addClass('thread-tooltip')            .css({ position: 'absolute', right: 0, top: top, width: '70%', margin: '5px', paddingLeft: '5px', border: $('.Wall ul.comments > li.message ul.replies > li').css('border-top') || '1px solid #ccc', backgroundColor: $('#WikiaPageBackground').css('background-color'), zIndex: 9999999999999999999999999999999999 })           .mouseleave(function { $(this).remove; })           .appendTo('#Wall .comments > .message > .replies');        var rects = $elem.get(0).getBoundingClientRect;        if (rects.bottom > window.innerHeight) {            $elem.css('top', top - rects.height - $link.height - 10);        }        rects = $elem.get(0).getBoundingClientRect;        if (rects.top < 55) {            $elem.css('top', top);        }    }    var removeTooltip = $.debounce(300, function(id) { if ($('.reply-posts a[data-postfix="' + id + '"]:hover').length) return; $('.message-' + id + '.thread-tooltip:not(:hover)').remove; });   $('.message[data-is-reply="1"]').has('.quote-of').each(function { var $elem = $(this), id = $elem.find('.quote-of').children.attr('data-postfix'), reply_id = $elem.attr('id'), canon_id = $elem.attr('data-id'), $quote_of = $('.message[id="' + id + '"]'); if (!$quote_of.find('.reply-posts').length) { $('.edited-by').after($(' ', { class: 'reply-posts' }));       }        $quote_of.find('.reply-posts').append($('', { href: '#' + reply_id, 'data-postfix': reply_id, text: '>>' + canon_id, mouseenter: function { if ($elem.isInScreen) { $('.thread-tooltip').remove; $elem.find('.speech-bubble-message').addClass('mouse-highlight'); } else { displayTooltip($elem.clone, this); }           },            mouseleave: function { $elem.find('.speech-bubble-message').removeClass('mouse-highlight'); removeTooltip(reply_id); }       }));    });    // Bind showTooltip to the "Reply to" links    $('.quote-of').mouseenter(function { var id = $(this).children.attr('data-postfix'), $elem = $('.message-' + id); if ($elem.isInScreen) { $('.thread-tooltip').remove; $elem.find('.speech-bubble-message').addClass('mouse-highlight'); } else { displayTooltip($elem.clone, this); }   }).mouseleave(function { var id = $(this).children.attr('data-postfix'), $elem = $('.message-' + id); $elem.find('.speech-bubble-message').removeClass('mouse-highlight'); removeTooltip(id); });   // Add CSS to make it extra sexy    mw.util.addCSS('.reply-posts {                      \ text-align: right;                             \ }                                                  \    .reply-posts a {                                    \ margin-right: 5px;                             \ }                                                  \    #Wall .speech-bubble-message.mouse-highlight {      \ box-shadow: 0 0 5px rgba(81, 203, 238, 1);     \ padding-top: 5px;                              \ }                                                  \    .thread-tooltip .wikia-menu-button {                \ display: none;                                 \ }'); });