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