26

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: Example before minimized


Minimizing the first youtube onebox could look something like this: Example after minimized

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

|improve this question
17

User scripts to the rescue!

Works exactly as specified above:

Collapse:

collapse

Expand:

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
|improve this answer
  • 2
    +1 this looks fantastic – Carrie Kendall Oct 28 '13 at 18:39
  • @CarrieKendall Updated with a few general improvements – David X. Random Oct 29 '13 at 10:15
  • Great! Though, in the case of a link to a Stack Exchange question, would it be possible to retain the title of the question in place of a truncated site url? – Stéphane Gimenez Oct 29 '13 at 11:47
  • @StéphaneGimenez Sure. The URL shortening logic just mirrors what SE does with links that are not oneboxed (clips it to 30 chars), but that is a little over-zealous in my view. The easiest way to adjust it to suit your needs with but to change this line in such a way that maxLength is a more sensible (larger) value. If you want to handle SE questions as a special case, that function would also be the place to add some custom code. – David X. Random Oct 29 '13 at 12:05
1

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;
}
})()
|improve this answer

Not the answer you're looking for? Browse other questions tagged .