☰

Mildom layout deformer

It change Mildom's layout.(ミルダムのレイアウトを変えます)

目前為 2020-03-13 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Mildom layout deformer
// @namespace    Mildom layout deformer
// @version      0.2
// @description  It change Mildom's layout.(ミルダムのレイアウトを変えます)
// @author       meguru
// @match        https://www.mildom.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let myEnv = {
        enableAutoReload: true,
        observer: undefined
    }

    setTimeout(function() {
        console.log('-------- start tamper ------------')

        const playerArea = document.getElementsByClassName('room__body sidebar-collpase')[0]
        playerArea.style.flexDirection = 'column'

        const player = document.getElementsByClassName('room__player-container')[0]
        playerArea.appendChild(player)

        const myRows = document.createElement('div')
        myRows.style.flexDirection = 'row'
        myRows.style.display = 'flex'
        myRows.style.overflow = 'scroll'
        playerArea.appendChild(myRows)

        const chat = document.getElementsByClassName('room__chat')[0]
        myRows.appendChild(chat)

        const myColumns = document.createElement('div')
        myColumns.style.flexDirection = 'column'
        myColumns.style.display = 'flex'
        myRows.appendChild(myColumns)

        const anchor = document.getElementsByClassName('room-anchor-panel')[0]
        myColumns.appendChild(anchor)

        const gift = document.getElementsByClassName('gift-panel')[0]
        myColumns.appendChild(gift)

        const relative = document.getElementsByClassName('room-relative')[0]
        myColumns.appendChild(relative)


        // chat auto reload

        function addObserver() {
            const config = {
                attributes: true,
                childList: true,
                subtree: true
            }
            const messageListContainer = document.getElementsByClassName('message-list-container')[0]
            myEnv.observer = new MutationObserver((mutations) => {
                let newMessageTip = document.getElementsByClassName('new-message-tip')[0]
                if (newMessageTip != null) {
                    newMessageTip.click();
                }
            })
            myEnv.observer.observe(messageListContainer, config)
        }

        function stopObserver() {
            myEnv.observer.disconnect()

        }

        const toolBar = document.getElementsByClassName('chat-panel__footer__tool-bar')[0]
        const autoReloadButton = document.createElement('div')
        autoReloadButton.textContent = "🌊"
        autoReloadButton.id = "myAutoReloadButton"
        autoReloadButton.onclick = () => {
            let el = document.getElementById('myAutoReloadButton')
            if (myEnv.enableAutoReload === true) {
                myEnv.enableAutoReload = false
                el.textContent = "❄"
                stopObserver()
            } else {
                myEnv.enableAutoReload = true
                el.textContent = "🌊"
                addObserver()
            }
        }
        toolBar.appendChild(autoReloadButton)
        addObserver()

        console.log('--------- end tamper -------------')
    }, 3000)

})();