Tablepress – Admin table content improvements

Dear Admin,

Had to hack your plugin for a customer to use that allowed me to hide specific options on the jexcel popup menu when viewing Table Contend on the plugin admin.

This small script is handy for other users who would like to keep this for their customers but want to hide tools to prevent removal of changes to the table.

All you need to do is enqueue a custom admin script

Example of custom CSS/JS for WP admin:

// WordPress - Add custom css for WP admin
function custom_admin_styles() {
    // Check if the current user has the Editor role. Change this so that it doesn't effect Admin
    if (current_user_can('editor')) {
        wp_enqueue_style('custom-admin', plugin_dir_url(__FILE__) . 'assets/css/style-admin.css');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_styles');

jQuery to allow for class to be added to menu in Tablepress:

jQuery(document).ready(function($) {
    function addClassesToDivs() {
        // Select all divs within .jexcel_contextmenu that contain an <a> tag
        $('.jexcel_contextmenu div').each(function() {
            var $link = $(this).find('a').first(); // Find the first <a> tag within the div
            if ($link.length > 0) {
                var linkText = $link.text().trim(); // Get the text content and trim any extra whitespace
                var className = textToClassName(linkText); // Generate a valid class name from the link text
                $(this).addClass(className); // Add the generated class to the div
            }
        });
    }

    // Function to sanitize the text and convert it to a valid class name
    function textToClassName(text) {
        return text.toLowerCase().replace(/[^a-z0-9]+/g, '-');
    }

    // Initial run
    addClassesToDivs();

    // Watch for changes using MutationObserver for dynamic content updates
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                addClassesToDivs(); // Re-run the function when DOM changes occur
            }
        });
    });

    // Configure and start the observer to watch the body (or a specific container if needed)
    observer.observe(document.body, { childList: true, subtree: true });
});

Example of DOM changes

From: <div><a>Cut</a><span>Ctrl+X</span></div>

To: <div class="cut"><a>Cut</a><span>Ctrl+X</span></div>

To target this selector using CSS, you can do the following:

.jexcel_contextmenu .cut {
    display: none;
}

This might be something you add to your plugin as a feature update, or implement this somehow to the edit.js.

Enjoy. P.S. Please do share if you find a cleaner solution to the above.

• This topic was modified 8 months ago by poppydev.
• This topic was modified 8 months ago by poppydev.
• This topic was modified 8 months ago by poppydev.