Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add the ability to collapse and expand oneboxes in SE chat
// ==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');
}
});
}));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.