SmoothState and WordPress. What function to call on callback for players and Google Chart?

2 Views

I think this is a purely technical question, even though I speak of using wordpress in this case and specific plugin and shortcode.

I use in my WordPress SmoothState.js. Everything works fine, except for two things:

Read More

1 – “Visualizer” or “Inline Google Spreadsheet Viewer” plugin for wordpress that use Google Charts. I can not find a function to call on the “callback”.

2 – same thing when in use MediaElement WordPress for native audio player with playlist with native shortcode and shortcode too. Appear on the first page, but then I do not know what to call on the callback to redisplay the players.

How to solve?

Maybe I can post something more technical, but if I had known where to look for the function to be called I would not have posted this question here.

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. I see that you’re using the isFired control for jQuery as explained in the blog post SmoothState.js & WordPress (h/t: this Github issue).

    In the comments of that post, the author says:

    Yes that is what I would do go into the plugin find the registered scripts then de-register and register them back a bit of a pain but at the moment I dont think there is another way of doing this.

    An ideal solution would be to write something that finds all the registered scripts and loads them all in without duplicating them.

    What I did to make your #2 work is to enqueue MediaElement when I’m enqueuing SmoothState:

    wp_enqueue_style( 'wp-mediaelement' );
wp_enqueue_script( 'wp-mediaelement' );

    WP only enqueues it when there’s a media shortcode on the page. If we start from another page without it, the script is not enqueued when SS loads a page that contains the media element.

    A calendar plugin of mine had your same issue #1, beside enqueueing the scripts on my SS, I had to start up the main function (declared as global) on the callback, see below. Observations:

    • it will depend on each plugin;
    • I’m not sure if it’s good idea be calling this global function at each callback;
    • if you don’t want to hack the plugins JS files, maybe deregistering/dequeuing their JS files and enqueuing your own could work;
    • as you’re manipulating other plugins behaviors, you should create a plugin to handle your SmoothState, working from functions.php won’t cut the deal.

    FullCalendar plugin (simplified):

    var editor_data = new Function();

jQuery(document).ready(function($)
{
    editor_data = function(){
        $('#calendar').fullCalendar({ options });
    }
    editor_data();
});

    SmoothState plugin (simplified):

    jQuery(document).ready(function($) {
    var $body = $('html, body'),
    content = $('#page').smoothState({
        onEnd : {
            duration: 0, // Duration of the animations, if any.
            render: function (url, $container, $content) {
                $container.html($content);
                $(document).ready();
                $(window).trigger('load');
            }
        },
        callback: function(url, $container, $content) {
            editor_data();
        }
    }).data('smoothState');
});

(function($, undefined) {
    var isFired = false;
    var oldReady = jQuery.fn.ready;
    $(function() {
        isFired = true;
        $(document).ready();
    });
    jQuery.fn.ready = function(fn) {
        if(fn === undefined) {
            $(document).trigger('_is_ready');
            return;
        }
        if(isFired) {
            window.setTimeout(fn, 1);
        }
        $(document).bind('_is_ready', fn);
    };
})(jQuery);