mu-rtd-multisite-filter.php

<?php
/*
 * Plugin Name: RTD Multisite Filter
 * Plugin URI: https://redtaildesign.com
 * Description: Allows you to search/filter a large number of sites in a multisite network.
 * Version: 1.1
 * Author: Will Presley
 * Author URI: https://redtaildesign.com
 * License: GPLv2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * TextDomain: rtdbase
 * DomainPath:
 * Network: true
 */

// Previously, these non-admin scripts were being enqueued even for non-logged-in users.
function enqueue_stuff()
{
    if(is_user_logged_in())
    {
	add_action( 'admin_bar_menu',        'rtd_msfilter_admin_bar_menu' );
	add_action( 'admin_enqueue_scripts', 'rtd_msfilter_enqueue_styles' );
	add_action( 'admin_enqueue_scripts', 'rtd_msfilter_enqueue_scripts' );
	add_action( 'wp_enqueue_scripts',    'rtd_msfilter_enqueue_styles' );
	add_action( 'wp_enqueue_scripts',    'rtd_msfilter_enqueue_scripts' );
    }
}
add_action('init', 'enqueue_stuff');

/**
 * Add search field menu item
 *
 * @param WP_Admin_Bar $wp_admin_bar
 * @return void
 */
function rtd_msfilter_admin_bar_menu( $wp_admin_bar ) {

    if ( ! is_user_logged_in() ) {
		return;
	}

	$total_users_sites = count( $wp_admin_bar->user->blogs );
	$show_if_gt        = apply_filters( 'mms_show_search_minimum_sites', 10 );

	if ( $total_users_sites < $show_if_gt ) {
		return;
	}

	$wp_admin_bar->add_menu( array(
		'parent' => 'my-sites-list',
		'id'     => 'my-sites-search',
		'title'  => sprintf(
			'<label for="my-sites-search-text">%s</label><input type="text" id="my-sites-search-text" placeholder="%s" />',
			esc_html__( 'Filter My Sites', 'mss' ),
			esc_attr__( 'Search Sites', 'mss' )
		),
		'meta'   => array(
			'class' => 'hide-if-no-js'
		)
	) );
}

/**
 * Enqueue styles
 * Inline styles with admin-bar dependency
 *
 * @return void
 */
function rtd_msfilter_enqueue_styles() {
	ob_start();
	?>
#wp-admin-bar-my-sites-search.hide-if-no-js {
	display: none;
}
#wp-admin-bar-my-sites-search label[for="my-sites-search-text"] {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
#wp-admin-bar-my-sites-list {
    direction: rtl;
    padding-top: 38px;
    overflow-y: auto;
    overflow-x: visible;
    max-height: 75%;
    max-height: 75vh;
}
#wp-admin-bar-my-sites-list li {
    direction: ltr;
}
#wp-admin-bar-my-sites-search {
	height: 38px;
    position: absolute;
    top: 0;
    width: 100%;
}
#wp-admin-bar-my-sites-search .ab-item {
    height: 34px;
}
#wpadminbar .quicklinks #wp-admin-bar-my-sites.menupop > .ab-sub-wrapper > ul#wp-admin-bar-my-sites-list > li > .ab-item {
    min-width: 300px;
}
#wpadminbar .menupop li.hover {
    position: relative;
}
#wpadminbar #wp-admin-bar-my-sites.menupop li.hover > .ab-sub-wrapper {
    margin-top: 0;
    margin-left: 336px;
    position: fixed;
}
#wpadminbar .menupop li > .ab-sub-wrapper.fixed {
    position: fixed;
}
#wp-admin-bar-my-sites-search input {
	padding: 0 2px;
	width: 95%;
	width: calc( 100% - 4px );
}
#wp-admin-bar-my-sites-list .blavatar {
    vertical-align: text-bottom !important;
}
#wp-admin-bar-my-sites-list .blavatar:before {
    margin-bottom: 0 !important;
}
#wpadminbar #wp-admin-bar-my-sites.menupop li#wp-admin-bar-network-admin.hover > .ab-sub-wrapper {
    margin-top: -32px;
    margin-left: 353px;
}
	<?php
	$style = ob_get_clean();
	wp_enqueue_style( 'admin-bar' );
	wp_add_inline_style( 'admin-bar', $style );
}

/**
 * Enqueue JavaScript
 * Inline script with jQuery dependency
 *
 * @return void
 */
function rtd_msfilter_enqueue_scripts() {
	$script = <<<SCRIPT
    document.addEventListener('DOMContentLoaded', function() {
        const wpAdminBarMySitesSearch = document.querySelector('#wp-admin-bar-my-sites-search.hide-if-no-js');
        if (wpAdminBarMySitesSearch) wpAdminBarMySitesSearch.style.display = 'block';

        const wpAdminBarMySitesInput = document.querySelector('#wp-admin-bar-my-sites-search input');
        if (wpAdminBarMySitesInput) {
            wpAdminBarMySitesInput.addEventListener('keyup', function() {
                const searchValRegex = new RegExp(this.value, 'i');
                const wpAdminBarMySitesList = document.querySelectorAll('#wp-admin-bar-my-sites-list > li.menupop');
                wpAdminBarMySitesList.forEach(function(li) {
                    const match = searchValRegex.test(li.querySelector('a').textContent);
                    li.style.display = match ? 'block' : 'none';
                });
            });
        }

        const wpAdminBarMySitesListItems = document.querySelectorAll('#wp-admin-bar-my-sites-list > li.menupop');
        wpAdminBarMySitesListItems.forEach(function(li) {
            li.addEventListener('mouseenter', function() {
                const windowTop = window.scrollY;
                const fromTop = li.getBoundingClientRect().top + windowTop;
                const childTop = fromTop - windowTop;
                const abSubWrapper = li.querySelector('.ab-sub-wrapper');
                abSubWrapper.style.top = childTop + 'px';
            });

            // li.addEventListener('mouseleave', function() {
            //     li.querySelector('.ab-sub-wrapper').style.top = '';
            // });
        });
    });
SCRIPT;

    wp_enqueue_script( 'admin-bar' );
    wp_add_inline_script( 'admin-bar', $script );
}