Add "Offtopic" discussion list on main page.

Добавляет дополнительный блок с темами с раздела "Оффтоп".
当前为 2024-10-10 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Add "Offtopic" discussion list on main page.
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Добавляет дополнительный блок с темами с раздела "Оффтоп".
// @author       Yowori
// @match        https://lolz.live/
// @match        https://zelenka.guru/
// @match        https://lolz.guru/
// @icon         https://i.imgur.com/xnJeB3f.png
// @grant        none
// @run-at       document-end
// @license MIT
// ==/UserScript==
 
(function() {
    'use strict';
 
    function addGlobalStyle(css) {
        const head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }
 
    addGlobalStyle(`
        .customDiscussionContainer {
            display: flex;
            gap: 20px;
            box-sizing: border-box;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: nowrap;
        }
 
        body.index .discussionList {
            max-width: 520px;
            flex: 0 0 400px;
        }
 
        .customDiscussionList {
            max-height: 1040px;
            max-width: 400px;
            flex: 0 0 400px;
            height: auto;
            overflow: hidden;
        }
 
        .customDiscussionList .loading,
        .customDiscussionList .error {
            text-align: center;
            padding: 20px;
            font-size: 16px;
            color: #555;
        }
 
        .customDiscussionList .ForumViewMoreButton {
            display: none;
        }
 
        .customDiscussionList .discussionListItems {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
 
        @media (max-width: 900px) {
            .customDiscussionContainer {
                flex-direction: column;
                align-items: center;
            }
 
            body.index .discussionList,
            .customDiscussionList {
                flex: 0 0 90%;
                max-width: 90%;
            }
        }
    `);
 
    function createNewDiscussionList() {
        let container = document.querySelector('.customDiscussionContainer');
        if (!container) {
            container = document.createElement('div');
            container.className = 'customDiscussionContainer';
 
            const existingDiscussionList = document.querySelector('body.index .discussionList');
            if (existingDiscussionList) {
                existingDiscussionList.parentNode.insertBefore(container, existingDiscussionList);
                container.appendChild(existingDiscussionList);
            } else {
                const bodyIndex = document.querySelector('body.index');
                if (bodyIndex) {
                    bodyIndex.appendChild(container);
                }
            }
        }
 
 
        const newDiscussionList = document.createElement('div');
        newDiscussionList.className = 'discussionList customDiscussionList';
        newDiscussionList.innerHTML = `
            <div class="aboveThreadList">
                <form action="https://zelenka.guru/forums/8/" method="post" class="DiscussionListOptions">
                    <input type="hidden" name="node_id" value="8">
 
                    <div class="_universalSearchForm universalSearchForm">
                        <input name="title" value="" class="SearchInputQuery _universalSearchInput universalSearchInput textCtrl" placeholder="Поиск тем" autocomplete="off">
                        <i class="inputRelativeIcon fas fa-times" style="display: none;"></i>
                    </div>
 
                    <input type="hidden" name="_xfToken" value="2312422,1728548767,49aac0543425624fb3896cd9087e7579a503d4c1">
                </form>
            </div>
 
            <div class="discussionListItems" id="discussionListItems_8">
                <div class="loading">Загрузка...</div>
            </div>
        `;
 
        container.appendChild(newDiscussionList);
        loadDiscussionList(8, newDiscussionList.querySelector('#discussionListItems_8'), true);
        addFilterHandlers(newDiscussionList);
 
        const updateButton = document.querySelector('.UpdateFeedButton');
        if (updateButton) {
            updateButton.addEventListener('click', () => {
                const mainDiscussionList = document.querySelector('body.index .discussionList .discussionListItems');
                loadDiscussionList(1, mainDiscussionList, false); // Замените 1 на нужный nodeId для основного списка
                loadDiscussionList(8, newDiscussionList.querySelector('#discussionListItems_8'), true);
            });
        }
    }
 
    function loadDiscussionList(nodeId, container, limit = false) {
 
        const xhr = new XMLHttpRequest();
        xhr.open('GET', `https://zelenka.guru/forums/${nodeId}/`, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(xhr.responseText, 'text/html');
                    const discussionItems = doc.querySelector('.discussionListItems');
 
                    if (discussionItems) {
                        let itemsHTML = discussionItems.innerHTML;
 
                        if (limit) {
                            const tempDiv = document.createElement('div');
                            tempDiv.innerHTML = itemsHTML;
 
                            const topics = tempDiv.querySelectorAll('.discussionListItem');
 
                            let limitedHTML = '';
                            for (let i = 0; i < Math.min(10, topics.length); i++) {
                                limitedHTML += topics[i].outerHTML;
                            }
 
                            itemsHTML = limitedHTML;
                        }
 
                        container.innerHTML = itemsHTML;
 
                    } else {
                        return;
                    }
                } else {
                    return;
                }
            }
        };
        xhr.send();
    }
 
    function addFilterHandlers(discussionList) {
        const form = discussionList.querySelector('.DiscussionListOptions');
        if (!form) return;
 
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(form);
            const params = new URLSearchParams();
 
            for (const pair of formData.entries()) {
                params.append(pair[0], pair[1]);
            }
 
            const nodeId = formData.get('node_id') || 8;
 
            loadFilteredDiscussionList(nodeId, params, discussionList.querySelector('.discussionListItems'), true);
        });
    }
 
 
    function loadFilteredDiscussionList(nodeId, params, container, limit = false) {
 
        const xhr = new XMLHttpRequest();
        xhr.open('POST', `https://zelenka.guru/forums/${nodeId}/`, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(xhr.responseText, 'text/html');
                    const discussionItems = doc.querySelector('.discussionListItems');
 
                    if (discussionItems) {
                        let itemsHTML = discussionItems.innerHTML;
 
                        if (limit) {
                            const tempDiv = document.createElement('div');
                            tempDiv.innerHTML = itemsHTML;
 
                            const topics = tempDiv.querySelectorAll('.discussionListItem');
 
                            let limitedHTML = '';
                            for (let i = 0; i < Math.min(10, topics.length); i++) {
                                limitedHTML += topics[i].outerHTML;
                            }
 
                            itemsHTML = limitedHTML;
                        }
 
                        container.innerHTML = itemsHTML;
                    } else {
                        return;
                    }
                } else {
                    return;
                }
            }
        };
        xhr.send(params.toString());
    }
 
    function init() {
        createNewDiscussionList();
    }
 
    window.addEventListener('load', function() {
        init();
    });
 
})();