MOONy

✎ EDIT FILE

EDITING: view-child-element.js

/* global FusionEvents, FusionPageBuilderApp, FusionPageBuilderViewManager, fusionGlobalManager, fusionBuilderText, fusionAllElements, FusionPageBuilderElements */
var FusionPageBuilder = FusionPageBuilder || {};

( function() {

jQuery( document ).ready( function() {

// Builder Element View
		FusionPageBuilder.ChildElementView = FusionPageBuilder.BaseView.extend( {

template: FusionPageBuilder.template( jQuery( '#fusion-builder-child-element-template' ).html() ),

className: 'fusion-builder-live-child-element fusion-builder-data-cid',
			tagName: function() {
				return this.model.get( 'tag_name' );
			},

events: {
				'click .fusion-builder-remove-child': 'removeElement',
				'click .fusion-builder-clone-child': 'cloneElement',
				'click .fusion-builder-settings-child': 'settings',
				'click a': 'disableLink'
			},

/**
			 * Init.
			 *
			 * @since 2.0.0
			 * @return {void}
			 */
			initialize: function() {

var parent = this.model.get( 'parent' ),
					parentModel = FusionPageBuilderElements.find( function( model ) {
						return model.get( 'cid' ) == parent; // jshint ignore:line
					} );

this.model.inlineCollection = new FusionPageBuilder.Collection();

this._triggerCallback = _.debounce( _.bind( this.triggerCallback, this ), 200 );

// If triggering a view update.
				this.listenTo( FusionEvents, 'fusion-child-view-update', this.reRender );
				this.listenTo( FusionEvents, 'fusion-view-update-' + this.model.get( 'cid' ), this.reRender );
				this.listenTo( FusionEvents, 'fusion-view-update-' + this.model.get( 'element_type' ), this.reRender );

// If there is a template.
				if ( jQuery( '#tmpl-' + this.model.attributes.element_type + '-shortcode' ).length ) {
					this.model.set( 'noTemplate', false );
					this.elementTemplate = FusionPageBuilder.template( jQuery( '#tmpl-' + this.model.attributes.element_type + '-shortcode' ).html() );
				} else {
					this.model.set( 'noTemplate', true );
					this.elementTemplate = FusionPageBuilder.template( jQuery( '#tmpl-fusion_shortcode-shortcode' ).html() );
				}

this.elementIsCloning = false;

this.model.set( 'editLabel', this.getEditLabel() );

// JQuery trigger.
				this._refreshJs = _.debounce( _.bind( this.refreshJs, this ), 300 );

this.$el.attr( 'data-cid', this.model.get( 'cid' ) );
				this.$el.attr( 'data-parent-cid', this.model.get( 'parent' ) );
				this.$el.attr( 'data-element-type', this.model.get( 'element_type' ) );

if ( 'undefined' !== typeof this.model.attributes.params && 'undefined' !== typeof this.model.attributes.params.fusion_global ) {
					this.$el.attr( 'fusion-global-layout', this.model.attributes.params.fusion_global );
					this.$el.removeClass( 'fusion-global-child-element' ).addClass( 'fusion-global-child-element' );
				}

this.model.set( 'show_ui', 'undefined' === typeof fusionAllElements[ this.model.get( 'element_type' ) ].show_ui ? true : fusionAllElements[ this.model.get( 'element_type' ) ].show_ui );

if ( ! parentModel.get( 'sortable' ) ) {
					this.$el.attr( 'data-fusion-no-dragging', true );
				}
				this.model.set( 'sortable', parentModel.get( 'sortable' ) );

this.baseInit();

this.onInit();

// If inlne editing with overrides.
				this.activeInlineEditing = false;
				this.autoSelectEditor    = false;
				this.model.set( 'inlineEditors', [] );
			},

/**
			 * Renders the view.
			 *
			 * @since 2.0.0
			 * @return {Object} this
			 */
			render: function() {
				var self = this;

this.$el.html( this.template( this.model.attributes ) );

this.renderContent();

if ( 'undefined' !== typeof this.model.attributes.selectors ) {
					this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
					this.setElementAttributes( this.$el, this.model.attributes.selectors );
				}

if ( 'undefined' !== typeof this.model.attributes.extraAppend ) {
					this.updateExtraContents();
				}

this.$el.find( '.fusion-builder-module-controls-container' ).on( 'mouseenter mouseleave', _.bind( this.changeParentContainerControlsZindex, this ) );

this.onRender();

this._refreshJs();

setTimeout( function() {
					if ( ! self.activeInlineEditing ) {
						FusionPageBuilderApp.inlineEditorHelpers.liveEditorEvent( self );
						self.activeInlineEditing = false;
					}

if ( FusionPageBuilderApp.inlineEditorHelpers.inlineEditorAllowed( self.model.get( 'element_type' ) ) ) {
						self.renderInlineSettings();
					}
				}, 100 );

return this;
			},

afterPatch: function() {
				this._refreshJs();
			},

/**
			 * Changes the z-index on the controls wrapper of the parent container.
			 *
			 * @since 2.0.0
			 * @return {void}
			 */
			changeParentContainerControlsZindex: function( event ) {
				if ( 'mouseenter' === event.type ) {
					this.$el.closest( '.fusion-builder-container' ).find( '.fusion-builder-module-controls-container-wrapper' ).css( 'z-index', '0' );
				} else {
					this.$el.closest( '.fusion-builder-container' ).find( '.fusion-builder-module-controls-container-wrapper' ).removeAttr( 'style' );
				}
			},

/**
			 * Updates extra elements by replacing their contents.
			 *
			 * @since 2.0.0
			 * @return {void}
			 */
			updateExtraContents: function() {
				var self        = this,
					extraAppend = this.model.get( 'extraAppend' ),
					contents    = extraAppend.contents,
					existing    = extraAppend.existing;

if ( 'object' === typeof extraAppend.existing ) {
					_.each( existing, function( old, index ) {
						self.updateSingleExtraContent( old, contents[ index ] );
					} );
				} else {
					this.updateSingleExtraContent( existing, contents );
				}

if ( 'undefined' !== typeof this.model.attributes.extraAppend.trigger ) {
					this.$el.find( 'a[id="' + this.model.attributes.extraAppend.trigger.replace( '#', '' ) + '"]' ).closest( 'li' ).trigger( 'click' );
				}
			},

updateSingleExtraContent: function( existing, contents ) {
				if ( this.$el.closest( '.fusion-builder-live-element' ).find( existing ).length ) {
					this.$el.closest( '.fusion-builder-live-element' ).find( existing ).replaceWith( FusionPageBuilderApp.renderContent( contents, this.model.get( 'cid' ), this.model.get( 'parent' ) ) );
				}
			},

/**
			 * Removes extra elements by removing their contents.
			 *
			 * @since 2.0.0
			 * @return {void}
			 */
			removeExtraContents: function() {
				var $parentEl = this.$el.closest( '.fusion-builder-live-element' ),
					$existing,
					targetId,
					$sibling;

// Find and remove extra content.
				if ( 'undefined' !== typeof this.model.attributes.extraAppend && 'undefined' !== typeof this.model.attributes.extraAppend.existing ) {
					$existing = Array.isArray( this.model.attributes.extraAppend.existing ) ? $parentEl.find( this.model.attributes.extraAppend.existing.join( ', ' ) ) : $parentEl.find( this.model.attributes.extraAppend.existing );
					const $existingTabContent = Array.isArray( this.model.attributes.extraAppend.existing ) ? $parentEl.find( this.model.attributes.extraAppend.existing[ 1 ] ) : $parentEl.find( this.model.attributes.extraAppend.existing );

// If tabs element and this tab is active, make another tab active.
					if ( $existing.hasClass( 'active' ) && 'fusion_tab' === this.model.get( 'element_type' ) ) {
						$sibling = $existingTabContent.siblings( '.tab-pane' ).first();

if ( $sibling.length ) {
							$sibling.addClass( 'active in' );
							targetId = $sibling.attr( 'id' );
							$parentEl.find( '[href="#' + targetId + '"]' ).closest( '.fusion-builder-live-child-element' ).addClass( 'active' );
						}
					}
					$existing.remove();

}

/**
			 * Sets the attributes of an element.
			 *
			 * @since 2.0.0
			 * @param {Object} element - The element we're updating.
			 * @param {Object} attributes - The attributes we're setting/updating.
			 * @return {void}
			 */
			setElementAttributes: function( element, attributes ) {
				var dataVar;
				if ( 'object' === typeof attributes && element.length ) {
					_.each( attributes, function( values, attribute ) {
						if ( 'class' === attribute ) {
							element.attr( 'class', values );
						} else if ( 'id' === attribute ) {
							element.attr( 'id', values );
						} else if ( 'style' === attribute ) {
							element.attr( 'style', values );
						} else if ( -1 !== attribute.indexOf( 'data' ) ) {
							dataVar = attribute.replace( 'data-', '' );
							if ( element.data( dataVar ) ) {
								element = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( element );
								element.data( dataVar, values );
							}
							attribute = attribute.replace( /_/g, '-' );
							element.attr( attribute, values );
						}
					} );
				}
			},

/**
			 * Renders the content.
			 *
			 * @since 2.0.0
			 * @return {void}
			 */
			getTemplateAtts: function() {
				var templateAttributes = jQuery.extend( true, {}, this.model.attributes ),
					params = jQuery.extend( true, {}, this.model.get( 'params' ) ),
					values = {},
					extras = {},
					element = fusionAllElements[ this.model.get( 'element_type' ) ],
					parent  = this.model.get( 'parent' ),
					parentValues = {},
					parentModel,
					parentElementContent = '';

// Use appropriate template.
				if ( 'undefined' !== typeof this.elementTemplate ) {

// Get parent values.
					parentModel = FusionPageBuilderElements.find( function( model ) {
						return model.get( 'cid' ) == parent; // jshint ignore:line
					} );

if ( parentModel && 'undefined' !== typeof fusionAllElements[ parentModel.get( 'element_type' ) ] ) {
						parentValues = jQuery.extend( true, {}, fusionAllElements[ parentModel.get( 'element_type' ) ].defaults, _.fusionCleanParameters( parentModel.get( 'params' ) ) );
					}

// Get element values.
					if ( element && 'undefined' !== typeof element.defaults ) {

// No need to inherit parent's element_content.
						if ( 'undefined' !== typeof parentValues.element_content ) {
							parentElementContent = parentValues.element_content;
							delete parentValues.element_content;
						}

values = jQuery.extend( true, {}, element.defaults, parentValues, _.fusionCleanParameters( params ) );

parentValues.element_content = parentElementContent;

// Get element extras.
						if ( 'undefined' !== typeof element.extras ) {
							extras = jQuery.extend( true, {}, element.extras );
						}
					}

templateAttributes.parentValues = parentValues;
					templateAttributes.values       = values;
					templateAttributes.extras       = extras;
					templateAttributes.thisModel    = this.model;
					templateAttributes.parentModel  = parentModel;

templateAttributes = this.getDynamicAtts( templateAttributes );
					templateAttributes = this.filterTemplateAtts( templateAttributes );

return templateAttributes;
				}
			},

/**
			 * Renders the content.
			 *
			 * @since 2.0.0
			 * @return {void}
			 */
			renderContent: function() {

// Use appropriate template.
				if ( 'undefined' !== typeof this.elementTemplate ) {

this.$el.find( '.fusion-builder-child-element-content' ).html( this.getTemplate() );
					return;
				}

// Ajax here
				this.$el.find( '.fusion-builder-child-element-content' ).html( 'no template found' );
			},

/**
			 * Removes an element.
			 *
			 * @since 2.0.0
			 * @param {Object} event - The event triggering the element removal.
			 * @return {void}
			 */
			removeElement: function( event, isAutomated ) {
				var parentCid   = this.model.get( 'parent' ),
					parentView = FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) ),
					parentModel = FusionPageBuilderElements.find( function( model ) {
						return model.get( 'cid' ) == parentCid; // jshint ignore: line
					} ),
					MultiGlobalArgs;

if ( event ) {
					event.preventDefault();

parentView.$el.find( '.fusion-builder-module-controls-container a' ).trigger( 'mouseleave' );
				}

// Hook to allow custom actions.
				this.beforeRemove();

// Remove extra content not within view.
				this.removeExtraContents();

// Remove element view
				FusionPageBuilderViewManager.removeView( this.model.get( 'cid' ) );

// Remove live editors.
				FusionPageBuilderApp.inlineEditorHelpers.removeLiveEditors( this );

// Destroy element model
				this.model.destroy();

FusionEvents.trigger( 'fusion-element-removed', this.model.get( 'cid' ) );

this.remove();

// If element is removed manually
				if ( event ) {
					this.forceUpdateParent();
					FusionEvents.trigger( 'fusion-history-save-step', fusionBuilderText.deleted + ' ' + fusionAllElements[ this.model.get( 'element_type' ) ].name + ' ' + fusionBuilderText.element );
				}

if ( parentModel.children.length && 'undefined' === typeof isAutomated ) {

// Handle multiple global elements.
					MultiGlobalArgs = {
						currentModel: parentModel.children.models[ 0 ],
						handleType: 'save',
						attributes: parentModel.children.models[ 0 ].attributes
					};
					fusionGlobalManager.handleMultiGlobal( MultiGlobalArgs );
				}

if ( event ) {
					parentView.childViewRemoved();
				}
			},

/**
			 * Force-updates the parent element.
			 *
			 * @since 2.0.0
			 * @return {void}
			 */
			forceUpdateParent: function() {

// Used to make sure parent of child is updated on live edit.
				var parentView = FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );
				if ( 'undefined' !== typeof parentView ) {
					parentView.updateElementContent();
					parentView.refreshJs();
				}

this.ajaxUpdateParent( parentView );
			},

ajaxUpdateParent: function( parentView ) {
				parentView = 'undefined' === typeof parentView ? FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) ) : parentView;

// If no template, use ajax to re-render.
				if ( parentView.model.get( 'noTemplate' ) ) {
					parentView.noTemplateAjaxUpdate();
				}
			},

/**
			 * Clones an element.
			 *
			 * @since 2.0.0
			 * @param {Object} event - The event triggering the element cloning.
			 * @return {void}
			 */
			cloneElement: function( event ) {
				var elementAttributes,
					parentModel,
					currentModel,
					MultiGlobalArgs,
					parentView = FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) ),
					self       = this;

// Get element parent
				parentModel = this.collection.find( function( model ) {
					return model.get( 'cid' ) == self.model.get( 'parent' ); // jshint ignore: line
				} );

if ( event ) {
					event.preventDefault();
				}

if ( true === this.elementIsCloning ) {
					return;
				}

this.elementIsCloning = true;

elementAttributes = jQuery.extend( true, {}, this.model.attributes );
				elementAttributes.created = 'manually';
				elementAttributes.cid = FusionPageBuilderViewManager.generateCid();
				elementAttributes.targetElement = this.$el;
				elementAttributes.at_index = FusionPageBuilderApp.getCollectionIndex( this.$el );

// Add a clone flag for fusion gallery child.
				if ( 'fusion_gallery_image' === this.model.get( 'element_type' ) ) {
					elementAttributes.cloned = true;
				}

if ( 'undefined' !== elementAttributes.from ) {
					delete elementAttributes.from;
				}

FusionPageBuilderApp.addToChildCollection( elementAttributes );

currentModel = parentModel.children.find( function( model ) {
					return model.get( 'cid' ) == elementAttributes.cid; // jshint ignore:line
				} );

// Save history state
				FusionEvents.trigger( 'fusion-history-save-step', fusionBuilderText.cloned + ' ' + fusionAllElements[ this.model.get( 'element_type' ) ].name + ' ' + fusionBuilderText.element );

// Handle multiple global elements.
				MultiGlobalArgs = {
					currentModel: currentModel,
					handleType: 'save',
					attributes: currentModel.attributes
				};
				fusionGlobalManager.handleMultiGlobal( MultiGlobalArgs );

this.elementIsCloning = false;

this.forceUpdateParent();

if ( event ) {
					FusionEvents.trigger( 'fusion-content-changed' );
				}

parentView.childViewCloned();
			},

/**
			 * Get the content.
			 *
			 * @since 2.0.0
			 * @return {string}
			 */
			getContent: function() {
				return FusionPageBuilderApp.generateElementShortcode( this.$el, false );
			},

isFirstChild: function() {
				var self = this,
					index,
					parentModel;

parentModel = FusionPageBuilderApp.collection.find( function( model ) {
					return model.get( 'cid' ) === self.model.get( 'parent' );
				} );

index = parentModel.children.indexOf( this.model );

return 0 === index;
			}
		} );
	} );
}( jQuery ) );

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📁 components/	DIR	—	2026-04-22 12:43
📁 elements/	DIR	—	2026-04-22 12:43
📁 form/	DIR	—	2026-04-22 12:43
📁 widgets/	DIR	—	2026-04-22 12:43
📄 view-base-column.js	JS	89.5 KB	2026-04-22 12:43	EDIT
📄 view-base-row.js	JS	16.7 KB	2026-04-22 12:43	EDIT
📄 view-base.js	JS	57.7 KB	2026-04-22 12:43	EDIT
📄 view-blank-form.js	JS	4.9 KB	2026-04-22 12:43	EDIT
📄 view-blank-page.js	JS	5.5 KB	2026-04-22 12:43	EDIT
📄 view-builder-preferences.js	JS	4 KB	2026-04-22 12:43	EDIT
📄 view-child-element.js	JS	16.3 KB	2026-04-22 12:43	EDIT
📄 view-column-nested.js	JS	18.5 KB	2026-04-22 12:43	EDIT
📄 view-column.js	JS	26.7 KB	2026-04-22 12:43	EDIT
📄 view-container.js	JS	75.1 KB	2026-04-22 12:43	EDIT
📄 view-context-menu-inline.js	JS	4.3 KB	2026-04-22 12:43	EDIT
📄 view-context-menu.js	JS	14.6 KB	2026-04-22 12:43	EDIT
📄 view-demo-import-modal.js	JS	357 B	2026-04-22 12:43	EDIT
📄 view-dynamic-data.js	JS	4.8 KB	2026-04-22 12:43	EDIT
📄 view-dynamic-selection.js	JS	3.8 KB	2026-04-22 12:43	EDIT
📄 view-element-settings-parent.js	JS	11.4 KB	2026-04-22 12:43	EDIT
📄 view-element-settings.js	JS	59 KB	2026-04-22 12:43	EDIT
📄 view-element.js	JS	16.5 KB	2026-04-22 12:43	EDIT
📄 view-form-nav.js	JS	9.8 KB	2026-04-22 12:43	EDIT
📄 view-form-step.js	JS	9.7 KB	2026-04-22 12:43	EDIT
📄 view-generator-elements.js	JS	6.4 KB	2026-04-22 12:43	EDIT
📄 view-history.js	JS	17.9 KB	2026-04-22 12:43	EDIT
📄 view-keyboard-shortcuts.js	JS	1.6 KB	2026-04-22 12:43	EDIT
📄 view-library-base.js	JS	14.4 KB	2026-04-22 12:43	EDIT
📄 view-library-column.js	JS	12.6 KB	2026-04-22 12:43	EDIT
📄 view-library-container.js	JS	15.9 KB	2026-04-22 12:43	EDIT
📄 view-library-elements.js	JS	14.5 KB	2026-04-22 12:43	EDIT
📄 view-library-nested-column.js	JS	2.9 KB	2026-04-22 12:43	EDIT
📄 view-library.js	JS	41.1 KB	2026-04-22 12:43	EDIT
📄 view-navigator.js	JS	33.4 KB	2026-04-22 12:43	EDIT
📄 view-next-page.js	JS	9.2 KB	2026-04-22 12:43	EDIT
📄 view-parent-element.js	JS	25.1 KB	2026-04-22 12:43	EDIT
📄 view-post-lock.js	JS	1.7 KB	2026-04-22 12:43	EDIT
📄 view-row-nested.js	JS	28.2 KB	2026-04-22 12:43	EDIT
📄 view-row.js	JS	11.9 KB	2026-04-22 12:43	EDIT
📄 view-studio-import-modal.js	JS	1.8 KB	2026-04-22 12:43	EDIT
📄 view-toolbar.js	JS	6.6 KB	2026-04-22 12:43	EDIT
📄 view-woo-checkout-form.js	JS	3.8 KB	2026-04-22 12:43	EDIT