LongMsgBuster

Collapse or shrink tall messages

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği yüklemek için Tampermonkey gibi bir uzantı yüklemeniz gerekir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

Bu stili yüklemek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için Stylus gibi bir uzantı kurmanız gerekir.

Bu stili yükleyebilmek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı kurmanız gerekir.

Bu stili yükleyebilmek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

(Zateb bir user-style yöneticim var, yükleyeyim!)

// ==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);
}