sam.sykes shared a JavaScript code to hide specific users from the Users list. The code is theme-specific and needs to be added to the </body> customization. Initially, it only worked for the Light theme and had to be updated to include site info (/about).
The updated code allows users to specify pages to mask and parent containers to remove. The code has been further modified to work with the mobile version of the forum.
sam.sykes notes that this JavaScript could be developed into a plugin or a component that can be shared between compatible themes. The code is useful for hiding admin users from client forums.
Example Code:
<script type="text/javascript">
// pages to mask (page|parent)
let mask_pages = ["/directory_items?|tr,div", "/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.parent().closest(mask_page_spec[1]).remove();
} else {
mask_user_elem.remove();
}
});
}
});
});
</script>
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>
@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>
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.
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!
