diff --git a/assets/dev/js/editor/container/container.js b/assets/dev/js/editor/container/container.js index 82a2fb0b9f53..8276bb9b809c 100644 --- a/assets/dev/js/editor/container/container.js +++ b/assets/dev/js/editor/container/container.js @@ -510,7 +510,7 @@ export default class Container extends ArgsObject { return; } - this.renderer.view.renderOnChange( this.settings ); + this.renderer.view.renderOnChange( this.settings, this.view?.$el ); } renderUI() { diff --git a/assets/dev/js/editor/elements/views/base.js b/assets/dev/js/editor/elements/views/base.js index bf5ddd3f2115..460ab0cd7c71 100644 --- a/assets/dev/js/editor/elements/views/base.js +++ b/assets/dev/js/editor/elements/views/base.js @@ -657,35 +657,22 @@ BaseElementView = BaseContainer.extend( { this.renderHTML(); }, - isAtomicDynamic( dataBinding, changedControl ) { - return !! ( dataBinding.el.hasAttribute( 'data-binding-dynamic' ) && - elementorCommon.config.experimentalFeatures.e_nested_atomic_repeaters ) && + isAtomicDynamic( changedSettings, dataBinding, changedControl ) { + return '__dynamic__' in changedSettings && + dataBinding.el.hasAttribute( 'data-binding-dynamic' ) && + elementorCommon.config.experimentalFeatures.e_nested_atomic_repeaters && dataBinding.el.getAttribute( 'data-binding-setting' ) === changedControl; }, - async getDynamicValue( settings, bindingSetting ) { + async getDynamicValue( settings, changedControlKey, bindingSetting ) { const dynamicSettings = { active: true }, - changedDataForRemovedItem = settings.attributes?.[ bindingSetting ], - changedDataForAddedItem = settings.attributes?.__dynamic__?.[ bindingSetting ], - valueToParse = changedDataForAddedItem || changedDataForRemovedItem; - - if ( valueToParse ) { - try { - return elementor.dynamicTags.parseTagsText( valueToParse, dynamicSettings, elementor.dynamicTags.getTagDataContent ); - } catch { - await new Promise( ( resolve ) => { - elementor.dynamicTags.refreshCacheFromServer( () => { - resolve(); - } ); - } ); + valueToParse = this.getChangedData( settings, changedControlKey, bindingSetting ); - return ! _.isEmpty( elementor.dynamicTags.cache ) - ? elementor.dynamicTags.parseTagsText( valueToParse, dynamicSettings, elementor.dynamicTags.getTagDataContent ) - : false; - } + if ( ! valueToParse ) { + return settings.attributes[ changedControlKey ]; } - return settings.attributes[ bindingSetting ]; + return await this.getDataFromCacheOrBackend( valueToParse, dynamicSettings ); }, findUniqueKey( obj1, obj2 ) { @@ -777,18 +764,14 @@ BaseElementView = BaseContainer.extend( { changedControl = this.getChangedDynamicControlKey( settings ); let change = settings.changed[ bindingSetting ]; - if ( this.isAtomicDynamic( dataBinding, changedControl ) ) { - const dynamicValue = await this.getDynamicValue( settings, bindingSetting ); + if ( this.isAtomicDynamic( settings.changed, dataBinding, changedControl ) ) { + const dynamicValue = await this.getDynamicValue( settings, changedControl, bindingSetting ); if ( dynamicValue ) { change = dynamicValue; } } - if ( dataBinding.el.textContent === change ) { - return true; - } - if ( change !== undefined ) { dataBinding.el.innerHTML = change; return true; @@ -830,18 +813,6 @@ BaseElementView = BaseContainer.extend( { return changed; }, - getChangedDynamicControlKey( settings ) { - const changedControlKey = this.findUniqueKey( settings?.changed?.__dynamic__, settings?._previousAttributes?.__dynamic__ )[ 0 ]; - - if ( changedControlKey ) { - return changedControlKey; - } - - return Object.keys( settings.changed )[ 0 ] !== '__dynamic__' - ? Object.keys( settings.changed )[ 0 ] - : Object.keys( settings.changed.__dynamic__ )[ 0 ]; - }, - /** * Function renderOnChange(). * @@ -1133,6 +1104,49 @@ BaseElementView = BaseContainer.extend( { } ); }, + async getDataFromCacheOrBackend( valueToParse, dynamicSettings ) { + try { + return elementor.dynamicTags.parseTagsText( valueToParse, dynamicSettings, elementor.dynamicTags.getTagDataContent ); + } catch { + await new Promise( ( resolve ) => { + elementor.dynamicTags.refreshCacheFromServer( () => { + resolve(); + } ); + } ); + + return ! _.isEmpty( elementor.dynamicTags.cache ) + ? elementor.dynamicTags.parseTagsText( valueToParse, dynamicSettings, elementor.dynamicTags.getTagDataContent ) + : false; + } + }, + + getChangedDynamicControlKey( settings ) { + const changedControlKey = this.findUniqueKey( settings?.changed?.__dynamic__, settings?._previousAttributes?.__dynamic__ )[ 0 ]; + + if ( changedControlKey ) { + return changedControlKey; + } + + return Object.keys( settings.changed )[ 0 ] !== '__dynamic__' + ? Object.keys( settings.changed )[ 0 ] + : Object.keys( settings.changed.__dynamic__ )[ 0 ]; + }, + + getChangedDataForRemovedItem( settings, changedControlKey, bindingSetting ) { + return settings.attributes?.[ changedControlKey ]?.[ bindingSetting ] || settings.attributes?.[ changedControlKey ]; + }, + + getChangedDataForAddedItem( settings, changedControlKey, bindingSetting ) { + return settings.attributes?.__dynamic__?.[ changedControlKey ]?.[ bindingSetting ] || settings.attributes?.__dynamic__?.[ changedControlKey ]; + }, + + getChangedData( settings, changedControlKey, bindingSetting ) { + const changedDataForRemovedItem = this.getChangedDataForRemovedItem( settings, changedControlKey, bindingSetting ), + changedDataForAddedItem = this.getChangedDataForAddedItem( settings, changedControlKey, bindingSetting ); + + return changedDataForAddedItem || changedDataForRemovedItem; + }, + /** * Function getTitleWithAdvancedValues(). * @@ -1185,7 +1199,7 @@ BaseElementView = BaseContainer.extend( { this.isRendering = true; - jQuery( dataBinding.el ).text( this.getTitleWithAdvancedValues( settings, dataBinding.el.textContent ) ); + dataBinding.el.textContent = this.getTitleWithAdvancedValues( settings, dataBinding.el.textContent ); return true; },