Add the ability to collapse and expand oneboxes in SE chat

onebox-collapse.user.js

// ==UserScript==
// @name SE onebox collapsing overlay
// @description Add the ability to collapse and expand oneboxes in SE chat
// @version 1.1
// @author DaveRandom
// @namespace https://github.com/DaveRandom
// @match *://chat.stackexchange.com/rooms/*
// @match *://chat.stackoverflow.com/rooms/*
// @match *://chat.meta.stackoverflow.com/rooms/*
// ==/UserScript==

(function (f) {
    var el = document.createElement("script");
    el.appendChild(document.createTextNode('(' + f + '());'));
    document.body.appendChild(el);
}(function() {
    function getOneboxHref($onebox)
    {
        var index = 0;

        if ($onebox.hasClass('ob-tweet')) {
            index = 2;
        }

        return $onebox.find('a:eq(' + index + ')').attr('href');
    }

    function makeLinkText(href)
    {
        var index, normal = '', result, maxLength = 30;

        if (href.slice(0, 1) === '/') {
            normal = window.location.protocol + '//' + window.location.host;
            if (window.location.port) {
                normal += ':' + window.location.port;
            }
        }

        normal += href;
        result = normal.split(/:\/\/(?:www\.)?/).pop();

        if (result.length >= maxLength) {
            index = result.slice(0, maxLength).lastIndexOf('/');

            if (!~index) {
                index = result.indexOf('/');
            }

            result = result.slice(0, index + 1) + "…";
        }

        return result;
    }

    $('#chat').on('mouseover', '.messages .message', function() {
        var $message = $(this),
            $onebox = $message.find('.onebox'),
            $monologue, $messages, $signature, $meta, $collapser, $link,
            href, state;

        function correctSignature()
        {
            if ($messages.height() <= 48) {
                $signature.find('.avatar-32, .username, .flair').hide(400);
                $signature.find('.tiny-signature').show(400);
            } else if ($messages.height() <= 61) {
                $signature.find('.username, .flair, .tiny-signature').hide(400);
                $signature.find('.avatar-32').show(400);
            } else {
                $signature.find('.tiny-signature').hide(400);
                $signature.find('.avatar-32, .username, .flair').show(400);
            }
        }

        if (!$onebox.length) {
            return;
        }

        $monologue = $message.closest('.monologue');
        $meta = $message.find('.meta');
        $collapser = $meta.find('span.collapse');

        if (!$collapser.length) {
            $messages = $message.closest('.messages');
            $signature = $monologue.find('.signature');

            if ($monologue.hasClass('mine')) {
                $meta.children().css('display', 'none');
                $meta.css('background-color', $message.closest('.messages').css('background-color'));
            }

            $meta.prepend('<span class="collapse" title="collapse this onebox" style="font-weight: bold; cursor: pointer;">&mdash;</span>&nbsp;');
            $collapser = $meta.find('span.collapse');

            href = getOneboxHref($onebox);
            state = 1;

            $onebox.before('<a class="collapse" href="" style="display: none"></a>');
            $link = $message.find('a.collapse');
            $link.attr('href', href);
            $link.text(makeLinkText(href));

            $collapser.on('click', function() {
                if (state === 1) {
                    state = 0;
                    $link.show(400);
                    $onebox.hide(450, function() {
                        state = -1;
                        correctSignature();
                        $collapser.html('+');
                        $collapser.attr('title', 'expand this onebox');
                    });
                } else if (state === -1) {
                    state = 0;
                    $link.hide(400);
                    $onebox.show(450, function() {
                        state = 1;
                        correctSignature();
                        $collapser.html('&mdash;');
                        $collapser.attr('title', 'collapse this onebox');
                    });
                }
            });
        }

        if ($monologue.hasClass('mine')) {
            $meta.css('display', 'inline-block');
        }
    });

    $('#chat').on('mouseout', '.messages .message', function() {
        var $message = $(this);

        if ($message.closest('.monologue').hasClass('mine')) {
            $message.find('.meta').css('display', 'none');
        }
    });
}));