LongMsgBuster

Collapse or shrink tall messages

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

// ==UserScript==
// @name        LongMsgBuster
// @namespace   https://gitter.im/
// @description Collapse or shrink tall messages
// @include     https://gitter.im/*/*/~*#*
// @version     3
// @grant       none
// ==/UserScript==

var MAX_HEIGHT = 350; // Pixels
var WARNING = '<p>This message was hidden because it exceeded the desired height.</p>';

document.addEventListener('keydown', function(e) {
  // Key Binding | Defaults:
  // CTRL~CMD + ALT + F -> Shrink blocks
  // CTRL~CMD + ALT + G -> Collapse blocks
  var collapse = e.keyCode === 71; // G
  var shrink = e.keyCode === 70; // F
  var middle = e.altKey;
  var first = e.metaKey || e.ctrlKey;

  if (first && middle && shrink) {
    applyToDomElements(
      document.querySelectorAll('.chat-item'),
      shrinkChatBlock
    );
  } else if (first && middle && collapse) {
    applyToDomElements(
      document.querySelectorAll('.chat-item'),
      hideChatBlock
    );
  }
});

function applyToDomElements(elements, action) {
  for (var i = 0, l = elements.length; i < l; i++) {
    if (elements[i].offsetHeight > MAX_HEIGHT) {
      action(elements[i]);
    }
  }
}

function shrinkChatBlock(block) {
  var btn = document.createElement('button');
  var text = document.createTextNode('Expand');

  btn.appendChild(text);
  btn.addEventListener('click', function(e) {
    var block = e.target.parentNode;

    block.style.textAlign = 'left';
    block.innerHTML = this.oldHTML;
    block.style.boxShadow = 'none';
  }.bind({ oldHTML: block.innerHTML }));

  block.innerHTML = WARNING;
  block.style.boxShadow = '0px 1px 5px 1px rgba(0,0,0,0.25)';
  block.style.textAlign = 'center';
  btn.appendChild(text);
  block.appendChild(btn, block.firstChild);
}

function hideChatBlock(block) {
  // Straight up delete the node from the tree
  block.parentNode.removeChild(block);
}