UTILS_DOM Library

dom manipulation library
Per 13-11-2025. Zie de nieuwste versie.
Dit script moet niet direct worden geïnstalleerd - het is een bibliotheek voor andere scripts om op te nemen met de meta-richtlijn // @require https://update.greasyfork.org/scripts/528456/1694747/UTILS_DOM%20Library.js
Stel een vraag, plaats een beoordeling of rapporteer dit script.
Regels afbreken
// ==UserScript==
// @name         UTILS_DOM Library
// @namespace    dannysaurus.epik
// @version      1.1
// @description  dom manipulation library
//
// @license      MIT
// @grant        unsafeWindow
// ==/UserScript==

/* jslint esversion: 11 */
/* global unsafeWindow */
(() => {
    'use strict';
    const selectorsConfig = (() => {
        const ids = {
            bcasts: 'bcasts',
            ctabs: 'ctabs',
            ctext: 'ctext',
            chatInputWrapper: 'chat-input-wrapper',
            broadcastSlots: 'broadcastSlots',
            messagesLC: 'messagesLC',
            usersLC: 'usersLC',
            username: 'username',
            sidebarSection: 'sidebar-section',
            userSection: 'user-section',
            chatSection: 'chat-section',
        };

        const classNames = {
            bcstPlayer: 'bcst-player',
            userItem: 'user-item',
            theIcons: 'the-icons',
            faUser: 'fa-user',
            userName: 'user-name',
        };
        const attributes = {
        };

        const querySelectors = {
            bcastsContainer: `#${ids.bcasts}`,
            ctabsContainer: `#${ids.ctabs}`,
            ctextContainer: `#${ids.ctext}`,
            chatInputWrapper: `#${ids.chatInputWrapper}`,
            broadcastSlots: `#${ids.broadcastSlots}`,
            messagesLC: `#${ids.messagesLC}`,
            usersLC: `#${ids.usersLC}`,
            usernameContainer: `#${ids.username}`,
            sidebarSection: `#${classNames.sidebarSection}`,
            userSection: `#${classNames.userSection}`,
            chatSection: `#${classNames.chatSection}`,

            bcstPlayer: `.${classNames.bcstPlayer}`,
            userItem: `.${classNames.userItem}`,
            userIcon: `.${classNames.theIcons} .${classNames.faUser}`,
            userName: `.${classNames.userName}`,
        };

        return {
            ids,
            classNames,
            attributes,
            querySelectors,
        };
    })();

    /**
     * Tries to select an element by repeatedly attempting to find it.
     * 
     * @param {Object} options - The options for selecting the element.
     * @param {String} [options.selectors] - The function to select the element.
     * @param {number} [options.maxAttempts=6] - The number of attempts to make.
     * @param {number} [options.intervalMs=10000] - The interval between attempts in milliseconds.
     * @returns {Promise<Element|NodeList>} The selected element(s).
     * 
     * @throws {Error} If the element(s) could not be found.
     */
    const trySelectElement = async ({ selectors, maxAttempts = 6, intervalMs = 10000, throwError = true, } = {}) => {
        const sleep = () => new Promise(resolve => setTimeout(resolve, intervalMs));

        for (let attemptCount = 0; attemptCount < maxAttempts; attemptCount++) {
            const elements = document.querySelector(selectors);
            if (elements instanceof Element || (elements instanceof NodeList && elements.length)) {
                return elements;
            }
            await sleep();
        }
        throw new Error(`Element(s) not found with selectors: ${selectors}`);
    };

    const getUsername = () => {
        return document.querySelector(selectorsConfig.querySelectors.usernameContainer)?.textContent || '';
    };

    /**
    * Checks if the specified keys are pressed.
    * 
    * @param {KeyboardEvent} event - The keyboard event.
    * @param {Object} keysToCheck - The keys to check.
    * @returns {boolean} True if all specified keys are pressed, false otherwise.
    */
    const areKeysPressed = (event, keysToCheck) => {
        const keys = Object.keys(keysToCheck || []);
        if (keys.length === 0) {
            return false;
        }
        return Object.keys(keysToCheck).every(key => event[key] === keysToCheck[key]);
    };

    unsafeWindow.dannysaurus_epik ||= {};
    unsafeWindow.dannysaurus_epik.libraries ||= {};
    unsafeWindow.dannysaurus_epik.libraries.UTILS_DOM = {
        selectors: selectorsConfig,
        trySelectElement,
        getUsername,
        areKeysPressed,
    };
})();