Greasy Fork is available in English.

Twitch chat - align pseudos

Align the text in the twitch chat

Versione datata 04/05/2019. Vedi la nuova versione l'ultima versione.

// ==UserScript==
// @name     Twitch chat - align pseudos
// @version  0.1.a.b.c
// @grant    none
// @description Align the text in the twitch chat
// @namespace    http://tampermonkey.net/
// @include http://*.twitch.tv/*
// @include https://*.twitch.tv/*
// @exclude http://api.twitch.tv/*
// @exclude https://api.twitch.tv/*
// ==/UserScript==

var sizeChat = 0;
var longestPseudo = 0;

const spacePx = 8;

// True: align pseudo on left
// False: align pseudo on right
const alignLeft = true;

var init = function () {

    addGlobalStyle(".chat-line__message, message-block{ display:flex }");
    addGlobalStyle(".chat-line__username, .chat-line__dots, .message-block>*{ flex-shrink:0 }");
    addGlobalStyle(".chat-line__username {max-width:100px; white-space:nowrap; overflow:hidden}");

    document.getElementById('root').addEventListener('DOMSubtreeModified', function (e) {
        if (e.target == document.querySelectorAll('[role="log"]')[0]) {
            console.log('Dom modified');
            let target = e.target;
            let msg = target.lastChild;

            if (![...msg.classList].includes('chat-line__message'))
                return;

            //remove the icons (mod, sub, bits, ...)
            if (msg.children[0].classList.length == 0)
                msg.children[0].remove();

            msg.children[1].classList.add("chat-line__dots")

            let elText = [...msg.children].splice(2);

            let span = document.createElement("span");
            span.classList.add("message-block")
            elText.forEach(el => {
                let clone = el.cloneNode(true)
                clone = span.appendChild(clone);

                el.style.display = 'none';
            });
            msg.appendChild(span);

            elText.forEach((el, i) => {
                el.addEventListener('DOMSubtreeModified', function (original) {
                    console.log('Dom modified (in msg)');
                    span.children[i].outerHTML = el.outerHTML;
                    span.children[i].style.display = '';
                });
            });

            let pseudo = msg.children[0].clientWidth;
            let pixelToAdd = 0;
            if (pseudo > longestPseudo) {
                longestPseudo = pseudo;

                msg.children[1].style.width = spacePx + 'px';
                realignMsg(msg);
            } else {
                let pixelToAdd = longestPseudo - pseudo;

              	if (alignLeft){
                	msg.children[1].style.width = (pixelToAdd + spacePx) + 'px';
                } else {
                  msg.children[0].style.width = (pixelToAdd + msg.children[0].clientWidth) + 'px';
                  msg.children[0].style.textAlign = 'right';
                  msg.children[1].style.width = (msg.children[1].clientWidth + 3) + 'px';
                }
            }

        } else if (e.target == document.getElementsByClassName("chat-input")[0]) {
            sizeChat = document.getElementsByClassName("chat-input")[0].children[0].clientWidth;
        }
    });
}

var addGlobalStyle = function (css) {

    var head, style;
    head = document.getElementsByTagName('head')[0];

    if (!head)
        return;

    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

var realignMsg = function(startEl) {

    let length = startEl.children[0].clientWidth;

    let el = [...document.getElementsByClassName('chat-line__message')];

    let startIndex = el.indexOf(startEl);

    el.pop();

    el.forEach(e => {
        console.log(e);
        console.log(e.children[1].style.width)
        console.log((length - e.children[0].clientWidth) + 'px')
        e.children[1].style.width = (length - e.children[0].clientWidth + spacePx) + 'px';
    })
}

init();