bnw-chan.js

// ==UserScript==
// @name        bnw-chan
// @namespace   mugiseyebrows.ru
// @description наводишь на ссылку и тебе прямо тама (как на бордах)
// @include     http://meow.bnw.im/p/*
// @include     https://meow.bnw.im/p/*
// @version     1
// @grant       none
// ==/UserScript==

var relation = [];
function traverse(parentId,comment) {
    $(comment).children('div').each(function(i,item){
        if ($(item).hasClass('comment')) {
            var childId = $(item).attr('id');
            relation[childId] = parentId;
            parentId = childId;
        } else {
            traverse(parentId,item);
        }
    });
}

function postReplies(item) {
    var link = $(item).find('a.comment-id');
    var id = '';
    if (link.length>0) {
        id = link.attr('href').replace('#','');
    }
    var links = [];
    for (var child in relation) {
        if (relation[child] == id) {
            links.push('<a class="comment-reply-to label label-reset" href="#' + child + '">&gt;&gt;' + child + '</a>');
        }
    }
    if (links.length > 0) {
        var target = 'div.comment-header';
        if (id == '') {
            target = 'div.post-header';
        }
        $(item).find(target).append('<div class="bnw-chan-links">'+links.join(' ')+'</div>');
    }
}

function putReplyLinks() {
    if ($('#single-post').length == 0 || $('#comments').length == 0) { // если не подгрузилось ещё
        setTimeout(putReplyLinks,100);
        return;
    }
    //запускаем голубка
    $('#comments').children('div').each(function(i,item) {
        traverse('',item);
    });
    $('div.comment').each(function(i,item) {
        postReplies(item);
    });
    $('#single-post').each(function(i,item) {
        postReplies(item);
    });
}

var chainIndex = 0;
function bindLinkOnHover() {
    $('body').on('hover','a.comment-reply-to',function(e){
        if (e.type == 'mouseenter') {
            var commentId = $(this).attr('href');
            // да
            var xPadding = 40 + 10;
            var yPadding = 20 + 10;
            var xPos = e.clientX + window.scrollX - xPadding;
            var yPos = e.clientY + window.scrollY - yPadding;
            var windowWidth = $(window).width();
            var commentWidth = $(commentId).width();

            // чтоб за границу окна не уходило
            xPos = Math.min(xPos + commentWidth + xPadding, windowWidth) - commentWidth - xPadding;

            var comment = $(commentId).html();
            var hoverId = 'bnw-chan-comment-' + chainIndex;
            chainIndex = chainIndex + 1;
            $('body').append('<div id="' + hoverId + '" class="comment-wrapper comment well well-small bnw-chan-comment" style="position: absolute;">' + comment + '</div>');
            $('#' + hoverId).css('left',xPos).css('top',yPos).css('width',commentWidth);
        }
    });
}

var chain = [];
var focused = null;
function bindCommentOnHover() {
    $('body').on('hover','div.bnw-chan-comment',function(e){
    var id = $(this).attr('id');
    if (e.type == 'mouseenter') {
        focused = id;
        var index = chain.indexOf(id);
        if (index>-1) {
            for (var i=chain.length-1;i>index;i--) {
                $('#' + chain[i]).remove();
            }
            chain = chain.slice(0,index+1);
        } else {
            chain.push(id);
        }
    } else if (e.type == 'mouseleave'){
        focused = null;
        setTimeout(function(){
            if (focused == null) {
                for (var i=chain.length-1;i>=0;i--) {
                    $('#' + chain[i]).remove();
                }
                chain = [];
            }
        },20);
    }
    });
}

$(document).ready(function(){
    putReplyLinks();
    bindLinkOnHover();
    bindCommentOnHover();
});