Globals Control Popover: Fix - After creating a global from one contr…

…ol, the globals list is not up to date in others (elementor#12599)
dfnocode · Sep 30, 2020 · 18b6f3a · 18b6f3a
1 parent 985adb6
commit 18b6f3a
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 32 deletions.
diff --git a/assets/dev/js/editor/controls/color.js b/assets/dev/js/editor/controls/color.js
@@ -162,22 +162,16 @@ export default class extends ControlBaseDataView {
 	}
 
 	// Create the markup for the colors in the global select dropdown.
-	buildGlobalsList( globalColors ) {
-		const $globalColorsPreviewContainer = jQuery( '<div>', { class: 'e-global__preview-items-container' } );
-
+	buildGlobalsList( globalColors, $globalPreviewItemsContainer ) {
 		Object.values( globalColors ).forEach( ( color ) => {
 			if ( ! color.value ) {
 				return;
 			}
 
 			const $color = this.createGlobalItemMarkup( color );
 
-			$globalColorsPreviewContainer.append( $color );
+			$globalPreviewItemsContainer.append( $color );
 		} );
-
-		this.ui.$globalColorsPreviewContainer = $globalColorsPreviewContainer;
-
-		return $globalColorsPreviewContainer;
 	}
 
 	onPickerChange() {

diff --git a/assets/dev/js/editor/controls/popover-toggle.js b/assets/dev/js/editor/controls/popover-toggle.js
@@ -129,19 +129,15 @@ export default class ControlPopoverStarterView extends ControlChooseView {
 		return result.data;
 	}
 
-	buildGlobalsList( globalTypographies ) {
-		const $globalTypographyContainer = jQuery( '<div>', { class: 'e-global__preview-items-container' } );
-
+	buildGlobalsList( globalTypographies, $globalPreviewItemsContainer ) {
 		Object.values( globalTypographies ).forEach( ( typography ) => {
 			// Only build markup if the typography is valid.
 			if ( typography ) {
 				const $typographyPreview = this.createGlobalItemMarkup( typography );
 
-				$globalTypographyContainer.append( $typographyPreview );
+				$globalPreviewItemsContainer.append( $typographyPreview );
 			}
 		} );
-
-		return $globalTypographyContainer;
 	}
 
 	onAddGlobalButtonClick() {

diff --git a/assets/dev/scss/editor/panel/controls/_globals.scss b/assets/dev/scss/editor/panel/controls/_globals.scss
@@ -193,6 +193,7 @@
 					font-size: 13px;
 					content: '\e90e'; // eicon-check
 					text-shadow: 0px 0px 1px #000;
+					z-index: 1;
 				 }
 			}
 		}

diff --git a/core/kits/assets/js/globals/global-select-behavior.js b/core/kits/assets/js/globals/global-select-behavior.js
@@ -27,19 +27,20 @@ export default class GlobalControlSelect extends Marionette.Behavior {
 
 	// This method exists because the UI elements are printed after controls are already rendered.
 	registerUiElements() {
+		const popoverWidget = this.popover.getElements( 'widget' );
+
+		this.ui.manageGlobalsButton = popoverWidget.find( `.${ this.getClassNames().manageButton }` );
+	}
+
+	registerPreviewElements() {
 		const popoverWidget = this.popover.getElements( 'widget' ),
 			classes = this.getClassNames();
 
-		this.ui.globalPreviewsContainer = popoverWidget.find( `.${ classes.previewItemsContainer }` );
 		this.ui.globalPreviewItems = popoverWidget.find( `.${ classes.previewItem }` );
-		this.ui.manageGlobalsButton = popoverWidget.find( `.${ classes.manageButton }` );
 	}
 
 	// This method exists because the UI elements are printed after controls are already rendered.
 	registerEvents() {
-		const classes = this.getClassNames();
-
-		this.ui.globalPreviewsContainer.on( 'click', `.${ classes.previewItem }`, ( event ) => this.applySavedGlobalValue( event.currentTarget.dataset.globalId ) );
 		this.ui.globalPopoverToggle.on( 'click', ( event ) => this.toggleGlobalPopover( event ) );
 		this.ui.manageGlobalsButton.on( 'click', () => {
 			const { route } = this.view.getGlobalMeta(),
@@ -54,6 +55,10 @@ export default class GlobalControlSelect extends Marionette.Behavior {
 		} );
 	}
 
+	addPreviewItemsClickListener() {
+		this.ui.$globalPreviewItemsContainer.on( 'click', `.${ this.getClassNames().previewItem }`, ( event ) => this.applySavedGlobalValue( event.currentTarget.dataset.globalId ) );
+	}
+
 	fetchGlobalValue() {
 		return $e.data.get( this.view.getGlobalKey() )
 			.then( ( globalData ) => {
@@ -200,9 +205,25 @@ export default class GlobalControlSelect extends Marionette.Behavior {
 		if ( this.popover.isVisible() ) {
 			this.popover.hide();
 		} else {
-			this.popover.show();
+			if ( this.ui.$globalPreviewItemsContainer ) {
+				// This element is not defined when the controls popover is first loaded.
+				this.ui.$globalPreviewItemsContainer.remove();
+			}
 
-			this.setCurrentActivePreviewItem();
+			this.view.getGlobalsList()
+				.then(
+					( globalsList ) => {
+						// We just deleted the existing list of global preview items, so we need to rebuild it
+						// with the updated list of globals, register the elements and re-add the on click listeners.
+						this.addGlobalsListToPopover( globalsList );
+
+						this.registerPreviewElements();
+						this.addPreviewItemsClickListener();
+
+						this.popover.show();
+
+						this.setCurrentActivePreviewItem();
+					} );
 		}
 	}
 
@@ -278,22 +299,21 @@ export default class GlobalControlSelect extends Marionette.Behavior {
 			},
 		} );
 
-		// Render the list of globals and append them to the Globals popover.
-		this.view.getGlobalsList()
-			.then(
-			( globalsList ) => {
-				this.addGlobalsListToPopover( globalsList );
-
-				this.registerUiElementsAndEvents();
-			} );
+		// Add Popover elements to the this.ui object and register click events.
+		this.registerUiElementsAndEvents();
 
 		this.createGlobalInfoTooltip();
 	}
 
 	addGlobalsListToPopover( globalsList ) {
-		const $globalsList = this.view.buildGlobalsList( globalsList );
+		const $globalPreviewItemsContainer = jQuery( '<div>', { class: 'e-global__preview-items-container' } );
+
+		this.view.buildGlobalsList( globalsList, $globalPreviewItemsContainer );
+
+		this.popover.getElements( 'widget' ).find( `.${ this.getClassNames().globalPopoverTitle }` ).after( $globalPreviewItemsContainer );
 
-		this.popover.getElements( 'widget' ).find( `.${ this.getClassNames().globalPopoverTitle }` ).after( $globalsList );
+		// The populated list is nested under the previews container element.
+		this.ui.$globalPreviewItemsContainer = $globalPreviewItemsContainer;
 	}
 
 	registerUiElementsAndEvents() {
@@ -375,7 +395,7 @@ export default class GlobalControlSelect extends Marionette.Behavior {
 
 				const $globalPreview = this.view.createGlobalItemMarkup( result.data );
 
-				this.ui.globalPreviewsContainer.append( $globalPreview );
+				this.ui.$globalPreviewItemsContainer.append( $globalPreview );
 
 				this.ui.$globalsLoadingSpinner.hide();
 			} );