diff --git a/widget-customizer-preview.js b/widget-customizer-preview.js index 82bc78d..3654fa8 100644 --- a/widget-customizer-preview.js +++ b/widget-customizer-preview.js @@ -18,9 +18,12 @@ var WidgetCustomizerPreview = (function ($) { init: function () { this.buildWidgetSelectors(); - this.toggleSections(); this.highlightControls(); this.livePreview(); + + self.preview.bind( 'active', function() { + self.preview.send( 'rendered-sidebars', self.rendered_sidebars ); + }); }, /** @@ -44,34 +47,6 @@ var WidgetCustomizerPreview = (function ($) { }); }, - /** - * @todo This will fail if a sidebar does not have at least one widget. Can be fixed with http://core.trac.wordpress.org/ticket/25368 - * @todo Use a method off of parent.WidgetCustomizer - * @todo Use postMessage instead of accessing parent window? - */ - toggleSections: function () { - var active_sidebar_section_selector = $.map( self.rendered_sidebars, function ( sidebar_id ) { - return '#accordion-section-sidebar-widgets-' + sidebar_id; - } ).join( ', ' ); - var active_sidebar_sections = parent.jQuery( active_sidebar_section_selector ); - var inactive_sidebar_sections = parent.jQuery( '.control-section[id^="accordion-section-sidebar-widgets-"]' ).not( active_sidebar_section_selector ); - - // Hide sections for sidebars no longer active - inactive_sidebar_sections.stop().each( function () { - // Make sure that hidden sections get closed first - if ( $( this ).hasClass( 'open' ) ) { - // it would be nice if accordionSwitch() in accordion.js was public - $( this ).find( '.accordion-section-title' ).trigger( 'click' ); - } - $( this ).slideUp(); - } ); - - // Show sections for sidebars now active - active_sidebar_sections.stop().slideDown( function () { - $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow - } ); - }, - /** * */ diff --git a/widget-customizer.js b/widget-customizer.js index 1bf1619..3680c73 100644 --- a/widget-customizer.js +++ b/widget-customizer.js @@ -49,6 +49,49 @@ var WidgetCustomizer = (function ($) { }); self.available_widgets = new WidgetLibrary(self.available_widgets); + /** + * On DOM ready, initialize some meta functionality independent of specific + * customizer controls. + */ + self.init = function () { + this.setupSectionVisibility(); + this.availableWidgetsPanel.setup(); + }; + $( function () { + self.init(); + } ); + + /** + * Listen for updates to which sidebars are rendered in the preview and toggle + * the customizer sections accordingly. + */ + self.setupSectionVisibility = function () { + + self.previewer.bind( 'rendered-sidebars', function ( rendered_sidebars ) { + + var active_sidebar_section_selector = $.map( rendered_sidebars, function ( sidebar_id ) { + return '#accordion-section-sidebar-widgets-' + sidebar_id; + } ).join( ', ' ); + var active_sidebar_sections = $( active_sidebar_section_selector ); + var inactive_sidebar_sections = $( '.control-section[id^="accordion-section-sidebar-widgets-"]' ).not( active_sidebar_section_selector ); + + // Hide sections for sidebars no longer active + inactive_sidebar_sections.stop().each( function () { + // Make sure that hidden sections get closed first + if ( $( this ).hasClass( 'open' ) ) { + // it would be nice if accordionSwitch() in accordion.js was public + $( this ).find( '.accordion-section-title' ).trigger( 'click' ); + } + $( this ).slideUp(); + } ); + + // Show sections for sidebars now active + active_sidebar_sections.stop().slideDown( function () { + $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow + } ); + } ); + }; + /** * Sidebar Widgets control * Note that 'sidebar_widgets' must match the Sidebar_Widgets_WP_Customize_Control::$type @@ -887,11 +930,6 @@ var WidgetCustomizer = (function ($) { } }; - $( function () { - self.availableWidgetsPanel.setup(); - } ); - - /** * @param {String} widget_id * @returns {Object}