How to check if customize previewer is refreshing?

I am trying to send data from customize control to customize previewer. The scripts work fine until the customize previewer is refresh. The problem is only the previewer is refresh, the customize control won’t send the data again, so there is no data for previewer to get and perform actions.
Is there a way for customize control to send data again every time the previewer has been refresh?
Here are my scripts:
customize-preview.js

(function ($) {
wp.customize.bind('preview-ready', function () {
    console.log('Previewer is ready');
    wp.customize.preview.bind('widget-show-name', function (data) {
        showWidgetName(data);
        showWidgetOutline(data);
    });

    function showWidgetName(widgetId) {
        //Find the widget span
        let $widget = $('body').find('[data-customize-partial-id="widget[' + widgetId + ']"]');
        //Get its name
        let name = $widget.data('customize-widget-name');
        //Show the name
        if (name && !$widget.find('.widget__text').length) {
            $widget.prepend('<span class="widget__text"><strong>Editing</strong>: ' + name + '</span>');
        }
    }

    function showWidgetOutline(widgetId) {
        //Find the widget area
        let $widget = $('body').find('#' + widgetId);

        //Highlight it when mouse enters and remove when mouse leaves
        $($widget).on({
            mouseenter: function () {
                $widget.addClass('widget-customizer-highlighted-widget');

            },
            mouseleave: function () {
                $widget.removeClass('widget-customizer-highlighted-widget');
            }
        })
    }
});})(jQuery);

customize-controls.js

(function ($) {
wp.customize.bind('ready', function () {
    console.log('Control is ready.');

    wp.customize.control.bind('change', function (widget) {
        let widgetIdArray = widget.selector.split('_');
        widgetIdArray.splice(0, 1);
        let widgetId = widgetIdArray.join('_');

        wp.customize.previewer.send('widget-show-name', widgetId);
    });

});})(jQuery);

0

Leave a Comment