Улучшить читаемость сообщений в чате разделением сообщений чертой, в случае, если между сообщениями заданный интервал времени

Pokruk

2021年09月06日 15:44
編輯於

Намного удобнее будет читать длинные чаты, если можно будет за что-то зацепиться, найти начало диалога и тд

Желательно, чтобы была отдельная настройка, чтобы этот интервал можно было задать

mods = {
    bind: "bind",
    interval: "interval",
    onfetch:"onfetch"
}

let mode = mods.onfetch

function getDateOfMessage(messageHtmlElement) {
    for (const message_property of messageHtmlElement.children) {
        if (message_property.className.startsWith("contents")) {
            for (const contents_property of message_property.children) {
                if (contents_property.className.startsWith("header")) {
                    for (const header_property of contents_property.children) {
                        if (header_property.className.startsWith("timestamp")) {
                            let date_str = header_property.firstChild.getAttribute("datetime")
                            let date = new Date(date_str)
                            return date
                        }
                    }
                }
            }
        }
    }
}

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}


msgScroller = document.getElementsByClassName("scrollerInner-2YIMLh")[0]

function separate() {
    //сообщения начинаются с 4-ого ребёнка
    let lastDate = null
    for (let i = 4; i < msgScroller.childElementCount - 1; i++) {
        if (msgScroller.children[i] != null && msgScroller.children[i + 1] != null) {
            let date1 = getDateOfMessage(msgScroller.children[i])
            if (date1 != undefined) {
                if (lastDate == null) {
                    lastDate = date1
                }

                /*
                let timeSpan = document.createElement("span")
                timeSpan.innerHTML = String(date1 - lastDate / 1000)
                insertAfter(timeSpan, msgScroller.children[i-1])
                 */
                let dif_in_seconds = (date1 - lastDate) / 1000

                if (dif_in_seconds / 60 > 20) {
                    if (msgScroller.children[i-1].className != "time-separator") {
                        let timeSpan = document.createElement("span")
                        timeSpan.innerHTML = String((dif_in_seconds / 60).toFixed(2))
                        timeSpan.setAttribute("style", "color: red")
                        timeSpan.className = "time-separator"
                        insertAfter(timeSpan, msgScroller.children[i - 1])
                    }
                }
                console.log(date1)
                console.log(lastDate)
                console.log(date1 - lastDate)
                console.log((date1 - lastDate) / 1000 / 60)
                console.log("---")

                lastDate = date1

            }
        }
    }
}

if (mode == "bind") {
    document.addEventListener('keydown', function(event) {
        if (event.code == "Numpad5") {

            separate()
            console.log("Num")
        }
    });
} else if (mode == "interval") {
    setInterval(separate, 1000)
} else if (mode == "onfetch") {
    console.stdlog = console.log.bind(console);
    console.logs = [];
    console.log = function(){
        console.stdlog.apply(console, arguments);
        if (arguments.length > 2 && arguments[2].includes("Fetched")) {
            setTimeout(separate, 500)
            separate()
            //console.stdlog.apply(console, ["dadaDadadadada"])
        }
    }
} else {
    console.log("Вы не указали режим работы программы")
}

請登入寫評論。