Ability to minimize oneboxes in chat [duplicate]

Question

Often times chatrooms can get overrun by oneboxes. Room owners and mods can move irrelevant oneboxes to a bin but sometimes these messages are relevant and shouldn't be binned.

It would be really great if there was a way to minimize them client-side with the ability to maximize them if needed.

This will be incredibly helpful for things like book referrals from amazon that, quite frankly, can be huge.

Take the following screenshot for example:

Minimizing the first youtube onebox could look something like this:

Related: Make chat oneboxing smaller and less obnoxious - click to enlarge instead

_{inb4 duplicate: I am not suggesting we make them smaller by default, I am requesting a feature to completely minimize them onclick and not change default settings}

Answer 1

User scripts to the rescue!

Works exactly as specified above:

---

Collapse:

---

Expand:

---

So far I've only tested this in Chrome but I expect it to work in any (sane) environment. I've thrown this together pretty quickly, so there may be a few gremlins. If you see anything that doesn't work in the wild, let me know - preferably with a reproducible example ;-)

---

Updated

• Now fixes avatar sizes after show/hide operation
• Use jQuery animations a bit more effectively (apparently I forgot how it works)
• Link text for oneboxed historical chat messages now includes domain

Answer 2

I wanted to give this a try too,

http://i.imagebanana.com/img/us8cehup/2013102914_48_09Sandbox_chat.stackov.png

Three collaped oneboxes and one expanded.
_{I added the toggle to the right side, as I don't see an hover menu for my own messages}

If actually anyones ever going to use this. The text for the label is computed by the getLabel function. It gets called with the onebox element to generate the label for, feel free to parse information from it.

---

No jQuery, pure JavaScript only._{Tested only in Chrome 32 and IE 11}

(function () {
var chat = document.getElementById ("chat");
var oneboxes = chat.getElementsByClassName ("onebox"); 
var _userContainer = window.userContainer;
var _updateUserContainer = window.updateUserContainer;


function minimizeOneboxes (boxes) {
  var hasToggle, toggle, label, labelEle, container, classList;


  for (var i=0,j; j=oneboxes [i] ; i++) {
     classList = [].join.call ( j.classList, " ");

     hasToggle = !!~ classList.indexOf ("onebox-toggle");
     if (!hasToggle) {
        show = document.createElement ("a" )
        hide = document.createElement ("span");

        show.innerHTML = getLabel (j) + " onebox.";
        hide.innerHTML = " ▼ ";

        container = [].pop.call (j.parentElement.parentElement.children);

        j.parentElement.insertBefore (show, j);
        container.insertBefore (hide, container.children [0]);

        j.style.display = "none";
        j.className += " onebox-toggle";        

        hide.addEventListener ("click",toggleBox);

     }
  }
}

function getLabel (ele) {
        var classList = [].join.call ( ele.classList, " ");
        label = classList .split ("-").slice (1);
        for (var k = 0,l=label.length; k<l; k++) {
            var cur = label [k];
            label [k] = cur.slice (0,1).toUpperCase () + cur.slice (1)
        }
        return label.join ("");
}

function toggleBox (e) {
   var source = e.srcElement || e.target;
   var target = source.parentElement.parentElement.children [1]
   var hidden = target.children [1].style.display === "none";

   source.innerHTML = hidden ?   " ▲ " : " ▼ ";

   target.children [0].style.display = hidden ? "none" : "";
   target.children [1].style.display = hidden ? "" : "none";
}

minimizeOneboxes (oneboxes);

if (!window.NoOneboxes) {

    window.userContainer = function () {

        oneboxes = chat.getElementsByClassName ("onebox");
        oneboxes.length && minimizeOneboxes (oneboxes);

        return _userContainer.apply (this, arguments);
    };
    window.updateUserContainer = function () {
        oneboxes = chat.getElementsByClassName ("onebox");
        oneboxes.length && minimizeOneboxes (oneboxes);

        return _updateUserContainer.apply (this, arguments);
    };
    window.NoOneboxes = true;
}
})()