Automatically update the inspector results

[imantsk]

Hi! 👋 I thought this was worth sharing..
Just for better usability and faster workflow, for a while, I felt the need to have the results updating automatically on the page as well as a quick way to access the do_action(...); function to copy in my code.
So I made up my quick solution, used jQuery and Ajax to achieve my UI needs, and Code Snippets plugin to implement the code.

This little snippet adds:

• The do_action(...); text line in the header bar, wrapped in <pre> tags for quicker selection
• A checkbox that allows to enable/disable auto-updating of the page contents
• A "Refresh" button that provides manual refreshing without reloading the browser

When Auto update is enabled and a result accordion is opened, the Auto updating stops.

The snippet is also available in my repo: https://github.com/imantsk/variable-inspector-autoload

P.S.: This solution is far from perfect and these functionalities could be implemented better and in a cleaner fashion, however, I really needed my workflow fix so I whipped up some jQuery and here we go! 😅

add_action('in_admin_footer', function() {
if (get_current_screen()->base == 'tools_page_variable-inspector'){ 
echo '<script>
var autoReload = null;
var count = 0;
function AjaxAutoLoad(selector){(function($){
    $.ajax({
        type: "GET",
        url: window.location.href
    }).done(function(res){
	    $(selector).html( $(res).find(selector) );
	    
	    $(".accordion__control").click(function() {
		    $("#auto_load").prop( "checked", false );
		    clearInterval(autoReload);
		    openClose(this);
	    });
	    
	    $(selector).removeAttr("style");
    });
    console.log(count++);
})(jQuery);}
function AjaxManual(selector){(function($){
    $(selector).css({"opacity":"0.2","pointer-events":"none","cursor":"wait"});
    AjaxAutoLoad(selector);
})(jQuery);}
function openClose(selector){(function($){
    $(selector).toggleClass("accordion__control--active");
    $(selector).parents(".accordion").find(".accordion__panel").slideToggle();
})(jQuery);}
(function($){
$(".csf-header-left h1").append("<br><label for=\'auto_load\'><input type=\'checkbox\' id=\'auto_load\' name=\'auto_load\' value=\'auto_load\'>Auto update</label><a class=\'button\' onclick=\"AjaxManual(\'#inspection-results\')\" >Refesh</a>")
$(".csf-header-left h1 label").css("font-size","0.7em")
$(".csf-header-left").append("<pre>do_action( \'inspect\', [ \'variable_name\', $variable_name ] );</pre>").css("margin-left","1em");
$(".csf-header-left h1").css("margin-right","1em");
$(".csf-header-left label").css("margin-right","1em");
$("#auto_load").change(function() {
    if(this.checked) {
        autoReload = setInterval( function(){ AjaxAutoLoad("#inspection-results"); }, 1000);
    } else {
	    clearInterval(autoReload);
    }
});
})(jQuery);</script>';}
});

[qriouslad]

@imantsk this is awesome! I hope you don't mind me integrating your code into v1.4.0 which I've just pushed to the .org repo. Have a look and let me know what you think.

One thing I noticed, sometimes clicking on the inspection result accordion does not work smoothly... i.e. panel is rolled up again so I have to click again to show the content. I'm guessing it has to do with the openClose function but was not able to troubleshoot today, so, I'm releasing as is with modification to the polling interval to 2500 ms, which seems to reduce the likelihood of experiencing this glitch.

Again, thank you! I've added props to your suggestion here on the changelog at https://wordpress.org/plugins/variable-inspector/#developers

[imantsk]

@qriouslad I'm happy you liked my solution and have already integrated it in the update :))

I noticed that too, and I believe you guessed right, my openClose function might act not as smooth as the one that Simple Accordion uses.

I had to make it up because of how JS/jQuery works: all event bindings of child elements are lost after the parent element's inner html is changed. Also, the reason why I choose to re-bind this function to click events of each .accordion__control after every ajax call :)

Thank you again for publishing my little improvement and form mentioning me in the change log too.
That for sure made my day!!

[qriouslad]

@imantsk Glad you're happy with the code inclusion too!

Let's leave openClose() as is then. I am happy enough with how it currently works.

Have a great day where you are!... and don't hesitate to suggest other changes/improvements in the future.