Hiding specific users from

Dev
1

I thought I’d share some simple JavaScript to hide specific users from the Users list. I imagine this could be way more graceful if done via a plugin, but I am not brave enough to do that yet! Also, this needs to be done for each theme and this is hard-coded to work with the Light theme only! Principles apply to any theme.

Let’s say you have users called james-admin and another-admin and you do not want them to be openly visible to all users. Simply add the following custom script to the </body> customisation (Settings -> Customize -> Themes -> Light -> </body>):

<script type="text/javascript">
    
    // hidden users
    let hidden_users = [ "james-admin", "another-admin" ];
    
    // when a page is loaded via AJAX
    $( document ).ajaxComplete( function( event, xhr, settings ) {
        
        // check if on the user list
        if ( settings.url.startsWith("/directory_items?") ) {
            
            // find all containers with hidden users
            hidden_users.forEach(function ( hidden_user ) {
                $( "a:contains('" + hidden_user + "')" ).each( function() {
                    
                    // double-check
                    if ( this.text === hidden_user ) {
                        
                        // mask / hide the user (specific to this theme!)
                        $( this ).closest( "tr" ).remove();
                        
                    }
                    
                });
            });
            
        }
        
    });
    
</script>

Comments welcome!

4 Likes
2

Just to confirm is this the About page that lists Admins and Moderators?

This is quite awesome. Need to learn more coding.

3

@Heliosurge, good point - this was about the list of users (/u), but I have now updated to include site info (/about).

I have updated the code so that you can specify pages to mask and also if there is a parent container that also has to be removed.

<script type="text/javascript">
    
    // pages to mask (page|parent)
    let mask_pages = ["/directory_items?|tr", "/about.json"];
    let mask_users = ["james-admin", "another-admin"];
    
    // when a page is loaded via AJAX
    $(document).ajaxComplete(function(event, xhr, settings) {
        
        // check if on the user list
        mask_pages.forEach(function(mask_page_full_spec) {
            
            // split spec
            let mask_page_spec = mask_page_full_spec.split("|");
            
            // find page
            if (settings.url.startsWith(mask_page_spec[0])) {
                mask_users.forEach(function(mask_user) {
                    
                    // get container
                    let mask_user_elem = $("[data-username='"+mask_user+"']");
                    
                    // parent container?
                    if (mask_page_spec.length == 2) {
                        mask_user_elem.closest(mask_page_spec[1]).remove();
                    } else {
                        mask_user_elem.remove();
                    }
                    
                });
            }
            
        });
        
    });
    
</script>
1 Like
4

That’s Awesome work.

5

I realised this did not work for the mobile version. Change the following:

// search for <tr> or <div>, in that order
let mask_pages = ["/directory_items?|tr,div", "/about.json"];

// search from parent, as closest can include the object itself
mask_user_elem.parent().closest(mask_page_spec[1]).remove();

Hope this is of some use to people. As I said, I am sure a plug in would be a far better way of being able to mask users that are ‘admins’ and do not wish to be visible to a client forum.

1 Like
6

I realise that this JavaScript could also be a component that can be shared between compatible themes. I’ll stop boring you all now about this insignificant feature - but it helped me out! :grinning:

1 Like