Vibrant Row Hover Effect for Specific Columns

Add vibrant row hover effect for specific columns dynamically with black bold font
Wrap lines
// ==UserScript==
// @name         Vibrant Row Hover Effect for Specific Columns
// @namespace    http://tampermonkey.net/
// @version     2.0
// @description  Add vibrant row hover effect for specific columns dynamically with black bold font
// @match        https://his.kaauh.org/lab/*
// @grant        GM_addStyle
// ==/UserScript==
 
(function () {
    'use strict';
 
    // Add CSS for hover effect
    GM_addStyle(`
        .ag-row {
            transition: background-color 0.3s ease;
        }
        .vibrant-hover {
            background-color: #87dced !important; /* Light green color */
            color: black !important; /* Black text color */
            font-weight: bold !important; /* Bold font */
        }
    `);
 
    // List of `col-id` attributes to target (including new ones)
    const targetColumnIds = [
        "orderNo", "testId", "testDescription", "clusterMrn",
        "hospitalMrn", "patientName", "dob", "nationalIqamaId",
        "department", "clinic", "doctor", "analyzer",
        "orderDateAndTime", "lastUpdatedDate", "status", "sampleStatus",
        "referenceLab", "accessionNo", "barcode", "sequenceNo",
        "primaryPatientId", "referenceLabDesc", "testStatus",
        "orderLastModifiedOnEpoch", "orderCreatedOnEpoch", "equipmentName", "doctorName", "localMrn",
        "dateOfBirth", "idNumber"  // Added new columns
    ];
 
    // Function to add hover effects to the entire row when any target cell is hovered
    function applyHoverEffect() {
        document.querySelectorAll('.ag-cell').forEach(cell => {
            const colId = cell.getAttribute('col-id');
            if (colId && targetColumnIds.includes(colId)) {
                const row = cell.closest('.ag-row'); // Find the parent row
                if (row) {
                    // Add hover effect to the entire row on mouseenter
                    cell.addEventListener('mouseenter', () => {
                        row.classList.add('vibrant-hover'); // Add hover effect to the row
                    });
                    // Remove hover effect on mouseleave
                    cell.addEventListener('mouseleave', () => {
                        row.classList.remove('vibrant-hover'); // Remove hover effect from the row
                    });
                }
            }
        });
    }
 
    // Reapply hover effects when rows are dynamically updated
    const observer = new MutationObserver(() => {
        applyHoverEffect(); // Ensure hover effect is applied to all new rows
    });
 
    observer.observe(document.body, { childList: true, subtree: true });
 
    // Initial application of hover effect
    window.addEventListener('load', applyHoverEffect);
})();
 
 
 
    // Function to set the dropdown value
(function() {
    'use strict';
 
    // Function to set the dropdown value
    function setDropdownValue() {
        const dropdown = document.getElementById("dropdownPaginationPageSize");
        if (dropdown && dropdown.value !== "100") {
            dropdown.value = "100"; // Set the value to "100"
 
            // Trigger the 'change' event
            const event = new Event('change', { bubbles: true });
            dropdown.dispatchEvent(event);
 
            console.log("Dropdown value set to 100");
        }
    }
 
    // Function to observe changes in the DOM
    function observeDOM() {
        const observer = new MutationObserver(() => {
            setDropdownValue(); // Check and set the dropdown value when changes are detected
        });
 
        // Observe the entire document for changes
        observer.observe(document.body, {
            childList: true,
            subtree: true,
        });
 
        console.log("MutationObserver is active");
    }
 
    // Run the function when the page is fully loaded
    window.addEventListener('load', () => {
        setDropdownValue(); // Initial check
        observeDOM(); // Start observing for dynamic changes
    });
})();
欢迎访问Greasy Fork镜像
