Move logic for toggling customizer sections to parent

Eliminates use of cross-frame communication and instead uses customizer postMessage framework Contributes toward #8
xwp · Dec 28, 2013 · 21e31b7 · 21e31b7
1 parent d36ef56
commit 21e31b7
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 34 deletions.
diff --git 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
@@ -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}