view-modal.js

var FusionPageBuilder = FusionPageBuilder || {};

( function( $ ) {

	$( document ).ready( function() {

		// Modal view
		FusionPageBuilder.ModalView = window.wp.Backbone.View.extend( {

			className: 'fusion_builder_modal_settings_container',

			template: FusionPageBuilder.template( $( '#fusion-builder-modal-template' ).html() ),

			events: {
				'click .fusion-builder-modal-save': 'saveSettings',
				'click .fusion-builder-modal-close': 'closeModal'
			},

			initialize: function( attributes ) {

				// New columns added. Remove modal view.
				this.listenTo( FusionPageBuilderEvents, 'fusion-columns-added', this.removeView );

				// Remove modal view
				this.listenTo( FusionPageBuilderEvents, 'fusion-remove-modal-view', this.removeView );

				// Close modal view
				this.listenTo( FusionPageBuilderEvents, 'fusion-close-modal', this.closeModal );

				this.options = attributes;

				this.elementType = '';

			},

			render: function() {
				var view,
				    viewSettings = {
						model: this.model,
						collection: this.collection,
						view: this.options.view
				    },
				    customSettingsViewName;

				// TODO: update the row view if it has been dragged into another column
				if ( 'undefined' !== typeof this.model && 'undefined' !== typeof this.model.get( 'view' ) && ( 'row_inner' === this.model.get( 'module_type' ) || 'fusion_builder_row' === this.model.get( 'module_type' ) ) && this.model.get( 'parent' ) !== this.model.get( 'view' ).$el.data( 'cid' ) ) {
					this.model.set( 'view', FusionPageBuilderLayout.getView( this.model.get( 'parent' ) ), { silent: true } );
				}

				if ( 'undefined' !== typeof this.model ) {
					this.$el.html( this.template( this.model.toJSON() ) );

				} else {
					this.$el.html( this.template() );
				}

				this.container = this.$( '.fusion-builder-modal-container' );

				// Show columns library view
				if ( 'column_settings' === this.attributes['data-open_view'] ) {
					view = new FusionPageBuilder.ColumnSettingsView( viewSettings );

				// Show elements library view
				} else if ( 'all_elements' === this.attributes['data-open_view'] ) {
					viewSettings.attributes = {
						'data-parent_cid': this.model.get( 'cid' )
					};
					view = new FusionPageBuilder.ModulesView( viewSettings );

				// Show all shortcodes for generator
				} else if ( 'all_elements_generator' === this.attributes['data-open_view'] ) {
					viewSettings.attributes = {};
					view = new FusionPageBuilder.GeneratorModulesView( viewSettings );

				// Show advanced element settings
				} else if ( 'multi_element_settings' === this.attributes['data-open_view'] ) {
					viewSettings.attributes = {};
					view = new FusionPageBuilder.MultiElementSettingsView( viewSettings );

				// Show element settings
				} else if ( 'module_settings' === this.attributes['data-open_view'] ) {
					viewSettings.attributes = {
						'data-module_type': this.model.get( 'module_type' )
					};

					if ( 'undefined' !== typeof this.model && 'undefined' !== typeof this.model.get( 'mode' ) && 'advanced_parent' === this.model.get( 'mode' ) ) {
						this.elementType = 'multi';
					}

					viewSettings.view = this;

					customSettingsViewName = fusionAllElements[this.model.get( 'module_type' )].custom_settings_view_name;

					if ( 'undefined' !== typeof customSettingsViewName && '' !== customSettingsViewName ) {
						view = new FusionPageBuilder[ customSettingsViewName ]( viewSettings );

					} else {
						view = new FusionPageBuilder.ModuleSettingsView( viewSettings );
					}
				}

				this.container.append( view.render().el );

				this.removeOverlay();

				$( 'body' ).addClass( 'fusion_builder_no_scroll' ).append( '<div class="fusion_builder_modal_overlay"></div>' );

				// Process option dependencies
				this.checkOptionDependency();

				// Range option preview
				this.rangeOptionPreview();

				// Element search field
				this.elementSearchFilter();

				// Add additional container class for multi elements
				if ( 'multi' === this.elementType ) {
					this.$el.addClass( 'fusion_builder_modal_multi_element_settings_container' );
				}

				return this;
			},

			closeModal: function( event ) {

				var parentID,
				    parentView,
				    params,
				    defaultParams,
				    value,
				    attributes;

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

				this.$el.find( '#qt_module_content_fusion_shortcodes_text_mode' ).hide();
				this.$el.find( '#tinymce-fusion-generator' ).hide();

				// Close colorpickers before saving
				this.$el.find( '.wp-color-picker' ).each( function() {
					$( this ).wpColorPicker( 'close' );
				} );

				// If new section creation was cancelled
				if ( true == FusionPageBuilderApp.newSectionAdded ) {
					FusionPageBuilderApp.newSectionAdded = false;
				}

				// Save history state
				if ( 'undefined' !== typeof this.model && true !== FusionPageBuilderApp.advancedChildSettings && 'undefined' !== this.model.get( 'added' ) && 'manually' === this.model.get( 'added' ) ) {
					fusionHistoryManager.turnOnTracking();
				} else {
					FusionPageBuilderApp.advancedChildSettings = false;
				}

				if ( true === FusionPageBuilderApp.shortcodeGenerator && true !== FusionPageBuilderApp.shortcodeGeneratorAdvancedChild ) {

					// DEBUG:
					// console.log( 'Generator set to FALSE' );

					FusionPageBuilderApp.shortcodeGenerator         = '';
					FusionPageBuilderApp.shortcodeGeneratorAdvanced = '';

					this.remove();

					this.removeOverlay();

					return;
				}

				// DEBUG:
				// console.log( this.model );

				if ( 'advanced' === this.model.get( 'mode' ) ) {

					if ( 'undefined' !== typeof this.model && 'module' === this.model.get( 'type' ) && this.$( '#module_content' ).length ) {
						FusionPageBuilderApp.fusionBuilderMCEremoveEditor( 'module_content' );
					}

					this.remove();

				} else {

					// If element was added manually ( by clicking + add element )
					if ( 'undefined' !== this.model.get( 'added' ) && 'manually' === this.model.get( 'added' ) ) {

						if ( 'fusion_builder_row' === this.model.get( 'module_type' ) ) {
							parentID   = this.model.get( 'parent' ),
							parentView = FusionPageBuilderLayout.getView( parentID );

							if ( 'undefined' !== typeof parentView ) {
								parentView.removeSection();
							}

						} else {

							// On Element creation set default options if Cancel button is clicked
							defaultParams = fusionAllElements[ this.model.get( 'module_type' ) ].params;
							params        = {};

							// Process default parameters from shortcode
							_.each( defaultParams, function( param ) {
								if ( _.isObject( param.value ) ) {
									value = param.default;
								} else {
									value = param.value;
								}
								params[param.param_name] = value;
							} );

							attributes = {
								params: params
							};

							this.model.set( attributes );

							if ( event ) {
								FusionPageBuilderEvents.trigger( 'fusion-element-added' );
							}
						}
					}

					// Unset 'added' attribute from newly created elements
					this.model.unset( 'added' );

					this.removeOverlay();

					if ( 'undefined' !== typeof this.model && 'module' === this.model.get( 'type' ) && this.$( '#module_content' ).length ) {
						FusionPageBuilderApp.fusionBuilderMCEremoveEditor( 'module_content' );
					}

					this.remove();

					FusionPageBuilderEvents.trigger( 'fusion-modal-view-removed' );

					this.generatePreview();
				}

				if ( true === FusionPageBuilderApp.shortcodeGenerator && true === FusionPageBuilderApp.shortcodeGeneratorAdvancedChild ) {

					FusionPageBuilderApp.shortcodeGeneratorAdvancedChild = '';
				}

				FusionPageBuilderApp.activeModal = '';
			},

			removeView: function() {

				this.removeOverlay();

				if ( 'undefined' === typeof this.model || ( 'fusion_builder_row' === this.model.get( 'type' ) || 'fusion_builder_column' === this.model.get( 'type' ) || 'fusion_builder_row_inner' === this.model.get( 'type' ) || 'fusion_builder_column_inner' === this.model.get( 'type' ) ) ) {
					this.remove();
				}
			},

			saveSettings: function( event ) {

				var attributes,
				    shortcode,
				    columnCounter,
				    table,
				    generatedShortcode,
				    view;

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

				this.$el.find( '#qt_module_content_fusion_shortcodes_text_mode' ).hide();
				this.$el.find( '#tinymce-fusion-generator' ).hide();

				// Close colorpickers before saving
				this.$el.find( '.wp-color-picker' ).each( function() {
					$( this ).wpColorPicker( 'close' );
				} );

				// Save history state
				if ( true !== FusionPageBuilderApp.advancedChildSettings ) {
					fusionHistoryManager.turnOnTracking();
				} else {
					FusionPageBuilderApp.advancedChildSettings = false;
				}

				attributes = { params: ({}) };

				this.$( 'input, select, textarea, #fusion_builder_content_main, #fusion_builder_content_main_child' ).not( ':input[type=button], .fusion-icon-search, .category-search-field, .fusion-builder-table input, .fusion-builder-table textarea, .single-builder-dimension .fusion-builder-dimension input, .fusion-hide-from-atts' ).each( function() {
					var $thisEl = $( this ),
					    settingValue,
					    name;

					// Multi element
					if ( $thisEl.is( '#fusion_builder_content_main' ) || $thisEl.is( '#fusion_builder_content_main_child' ) ) {
						name = 'module_content';
					} else {
						name = $thisEl.attr( 'id' );
					}

					if ( $thisEl.is( '#fusion_builder_content_main' ) ) {
						settingValue = $thisEl.html();
					} else if ( ! $thisEl.is( ':checkbox' ) ) {
						settingValue = $thisEl.is( 'textarea#module_content' ) ? fusionBuilderGetContent( 'module_content' ) : $thisEl.val();
					}

					// Escape input fields
					if ( $thisEl.is( 'input' ) && '' !== settingValue ) {
						if ( ! $thisEl.hasClass( 'fusion-builder-upload-field' ) ) {
							settingValue = _.escape( settingValue );
						} else {
							settingValue = settingValue;
						}
					}

					attributes.params[ name ] = settingValue;

				} );

				// TODO: check if still reqiured
				// Escapes &, <, >, ", `, and ' characters
				if ( 'undefined' !== typeof fusionAllElements[ this.model.get( 'module_type' ) ].escape_html && true === fusionAllElements[ this.model.get( 'module_type' ) ].escape_html ) {
					attributes.params.module_content = _.escape( attributes.params.module_content );
				}

				// Pricing table. Build pricing table shortcode.
				if ( 'fusion_pricing_table' === this.model.get( 'module_type' ) ) {

					shortcode     = '';
					columnCounter = 0;
					table         = this.$( '.fusion-builder-table' );

					// Table head
					table.find( 'thead th' ).each( function() {
						var
						$thisTh    = $( this ),
						thCID      = $thisTh.data( 'th-id' ),
						thTitle    = $thisTh.find( 'input' ).val(),
						thStandout = $thisTh.find( '.fusion-builer-table-featured select' ).val();
						columnCounter++;

						shortcode += '[fusion_pricing_column title="' + thTitle + '" standout="' + thStandout + '"]';

						// Table price
						table.find( 'tbody .price .td-' + thCID ).each( function() {
							var $thisPrice = $( this ),
							    price      = $thisPrice.find( '.price-input' ).val(),
							    currency   = $thisPrice.find( '.currency-input' ).val(),
							    time = $thisPrice.find( '.time-input' ).val();

							shortcode += '[fusion_pricing_price currency="' + currency + '" price="' + price + '" time="' + time + '" ][/fusion_pricing_price]';
						} );

						// Table rows
						table.find( '.fusion-table-row .td-' + thCID ).each( function() {
							var $thisRow = $( this ),
							    content  = $thisRow.find( 'input' ).val();

							if ( '' !== content ) {
								shortcode += '[fusion_pricing_row]' + content + '[/fusion_pricing_row]';
							}
						} );

						// Table footer
						table.find( 'tfoot .td-' + thCID ).each( function() {
							var $thisFooter   = $( this ),
							    footerContent = $thisFooter.find( 'textarea' ).val();

							if ( '' !== footerContent ) {
								shortcode += '[fusion_pricing_footer]' + footerContent + '[/fusion_pricing_footer]';
							}
						} );

						shortcode += '[/fusion_pricing_column]';

					} );

					attributes.params.module_content = shortcode;
					attributes.params.columns = columnCounter;

				}

				// Generator active
				if ( true === FusionPageBuilderApp.shortcodeGenerator ) {

					// Multi element parent
					if ( 'advanced_parent' === this.model.get( 'mode' ) ) {

						attributes.params.module_content = this.$el.find( '#fusion_builder_content_main' ).html();

						this.model.set( attributes, { silent: true } );

						generatedShortcode = FusionPageBuilderApp.generateElementShortcode( this.model, false, true );
						fusionBuilderInsertIntoEditor( generatedShortcode );

						FusionPageBuilderApp.shortcodeGeneratorAdvanced = '';
						FusionPageBuilderApp.shortcodeGeneratorAdvancedChild = '';
						FusionPageBuilderApp.shortcodeGenerator = '';

						this.remove();
						this.removeOverlay();

					// Multi element child
					} else if ( 'advanced' === this.model.get( 'mode' ) ) {

						attributes.params.module_content = this.$el.find( '#fusion_builder_content_main_child' ).val();

						this.model.set( attributes );

						if ( 'undefined' !== typeof this.model && 'module' === this.model.get( 'type' ) && this.$( '#fusion_builder_content_main_child' ).length ) {
							FusionPageBuilderApp.fusionBuilderMCEremoveEditor( 'fusion_builder_content_main_child' );
						}

						view = new FusionPageBuilder.AdvancedModuleSettingsView( {
								model: this,
								el: this.$el.find( '.fusion-builder-option-advanced-module-settings' ),
								attributes: {
									cid: this.model.get( 'cid' )
								}
							} );

						view.updateAdvancedSortableItems( attributes, this.model );

						FusionPageBuilderEvents.trigger( 'fusion-advanced-element-edited' );

						FusionPageBuilderApp.shortcodeGeneratorAdvancedChild = '';

						this.remove();

					// Regular element
					} else {

						if ( 'fusion_pricing_table' !== this.model.get( 'module_type' ) ) {
							attributes.params.module_content = this.$el.find( '#module_content' ).val();
						}

						if ( 'fusion_builder_content_column' === this.model.get( 'module_type' ) ) {
							attributes.params.type = this.model.get( 'layout' );
						}

						this.model.set( attributes, { silent: true } );

						generatedShortcode = FusionPageBuilderApp.generateElementShortcode( this.model, false, true );
						fusionBuilderInsertIntoEditor( generatedShortcode );

						FusionPageBuilderApp.shortcodeGenerator = '';

						// FusionPageBuilderApp.fusionBuilderMCEremoveEditor( 'module_content' );

						this.remove();
						this.removeOverlay();
					}

				// Not from Shortcode Generator
				} else {

					if ( 'advanced' === this.model.get( 'mode' ) ) {

						// DEBUG:
						// console.log( 'saved advanced' );

						// Set element/model attributes
						this.model.set( attributes, { silent: true } );
						/* WIP
						fusionBuilderMCEremoveEditor( 'module_content' );
						*/

						if ( 'undefined' !== typeof this.model && 'module' === this.model.get( 'type' ) && this.$( '#module_content' ).length ) {
							FusionPageBuilderApp.fusionBuilderMCEremoveEditor( 'module_content' );
						}

						view = new FusionPageBuilder.AdvancedModuleSettingsView( {
								model: this,
								el: this.$el.find( '.fusion-builder-option-advanced-module-settings' ),
								attributes: {
									cid: this.model.get( 'cid' )
								}
							} );

						view.updateAdvancedSortableItems( attributes, this.model );

						FusionPageBuilderEvents.trigger( 'fusion-advanced-element-edited' );

						this.remove();

					} else {

						// Save history state
						if ( 'undefined' === typeof this.model.get( 'added' ) ) {
							fusionHistoryState = fusionBuilderText.edited + ' ' + fusionAllElements[this.model.get( 'module_type' )].name + ' ' + fusionBuilderText.element;
						}

						// Remove 'added' attribute from newly created modules
						this.model.unset( 'added' );

						this.model.set( attributes );

						// DEBUG:
						// console.log( this.model.toJSON() );

						FusionPageBuilderApp.fusionBuilderMCEremoveEditor( 'module_content' );

						this.remove();

						FusionPageBuilderEvents.trigger( 'fusion-modal-view-removed' );

						this.generatePreview();

						this.removeOverlay();

					}

					if ( event ) {
						FusionPageBuilderEvents.trigger( 'fusion-element-added' );
					}

				}

				FusionPageBuilderApp.activeModal = '';

			},

			removeOverlay: function() {
				if ( $( '.fusion_builder_modal_overlay' ).length ) {
					$( '.fusion_builder_modal_overlay' ).remove();
					$( 'body' ).removeClass( 'fusion_builder_no_scroll' );
				}
			},

			generatePreview: function() {
				var moduleType = this.model.get( 'module_type' ),
				    viewSettings,
				    view,
				    previewView;

				if ( 'undefined' !== typeof fusionAllElements[ moduleType ].preview ) {

					viewSettings = {
						model: this.model,
						collection: FusionPageBuilderElements
					};

					view = FusionPageBuilderLayout.getView( this.model.get( 'cid' ) ).$el.find( '.fusion-builder-module-preview' );
					previewView = new FusionPageBuilder.BlockModulePreviewView( viewSettings );
					view.html( '' ).append( previewView.render().el );
				}
			},

			elementSearchFilter: function() {
				var thisEl = this.$el,
				    name,
				    value;

				thisEl.find( '.fusion-elements-filter' ).on( 'change paste keyup', function() {

					if ( $( this ).val() ) {
						value = $( this ).val().toLowerCase();

						thisEl.find( '.fusion-builder-all-modules li' ).each( function() {

							name = $( this ).find( '.fusion_module_title' ).text().toLowerCase();

							if ( name.search( value ) !== -1 ) {
								$( this ).show();
							} else {
								$( this ).hide();
							}

						} );

					} else {

						thisEl.find( '.fusion-builder-all-modules li' ).show();
					}

				} );
			},

			rangeOptionPreview: function() {
				 this.$el.find( '.fusion-range-option' ).each( function() {
					$( this ).next().html( $( this ).val() );
					$( this ).on( 'change mousemove', function() {
						$( this ).next().html( $( this ).val() );
					} );
				} );
			},

			checkOptionDependency: function() {
				var thisEl = this.$el;

				thisEl.find( '.fusion-builder-option' ).each( function() {
					var option            = $( this ),
					    id                = option.data( 'option-id' ),
					    input             = option.find( '#' + id ),
					    dependencyElement = option.data( 'dependency-element' ),
					    dependencyValue   = option.data( 'dependency-value' ),
					    dependencyElementValue;

					// If there is dependency
					if ( '' !== dependencyElement ) {
						dependencyElementValue = thisEl.find( '#' + dependencyElement ).val();

						// If the dependency is a specific value
						if ( '' !== dependencyValue ) {

							if ( dependencyElementValue == dependencyValue ) {
								option.show();
							} else {
								option.hide();
							}

						} else {

							if ( ! dependencyElementValue ) {
								option.hide();
							} else {
								option.show();
							}
						}
					}

					// Check dependency on change
					$( input ).on( 'change paste keyup', function() {

						var optionID = $( this ).attr( 'id' ),
						    inputValue = $( this ).val();

						$( '.dependency-' + optionID ).each( function() {

							dependencyValue = $( this ).data( 'dependency-value' );

							// If dependency is a particular value
							if ( '' !== dependencyValue ) {

								if ( inputValue == dependencyValue ) {
									$( this ).show();
								} else {
									$( this ).hide();
								}

							} else {

								if ( ! inputValue ) {
									$( this ).hide();
								} else {
									$( this ).show();
								}
							}

						} );

					} );

				} );
			}

		} );

	} );

} )( jQuery );