316 lines
9.0 KiB
JavaScript
316 lines
9.0 KiB
JavaScript
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Modal view.
|
|
FusionPageBuilder.fusion_modal = FusionPageBuilder.ElementView.extend( {
|
|
|
|
/**
|
|
* Runs during initialize() call.
|
|
*
|
|
* @since 2.0.0
|
|
* @return null
|
|
*/
|
|
onInit: function() {
|
|
var $modal = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( this.$el );
|
|
|
|
$modal.on( 'shown.bs.modal', function() {
|
|
jQuery( 'body' ).addClass( 'fusion-builder-no-ui fusion-dialog-ui-active' );
|
|
$modal.closest( '.fusion-builder-column' ).css( 'z-index', 'auto' ); // Because of animated items getting z-index 2000.
|
|
$modal.closest( '#main' ).css( 'z-index', 'auto' );
|
|
$modal.closest( '.fusion-row' ).css( 'z-index', 'auto' );
|
|
$modal.closest( '.fusion-builder-container' ).css( 'z-index', 'auto' );
|
|
} );
|
|
|
|
$modal.on( 'hide.bs.modal', function() {
|
|
jQuery( 'body' ).removeClass( 'fusion-builder-no-ui fusion-dialog-ui-active' );
|
|
$modal.closest( '.fusion-builder-column' ).css( 'z-index', '' );
|
|
$modal.closest( '#main' ).css( 'z-index', '' );
|
|
$modal.closest( '.fusion-row' ).css( 'z-index', '' );
|
|
$modal.closest( '.fusion-builder-container' ).css( 'z-index', '' );
|
|
} );
|
|
|
|
},
|
|
|
|
/**
|
|
* Open actual modal.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
onSettingsOpen: function() {
|
|
var self = this,
|
|
$modal = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( this.$el.find( '.fusion-modal' ) );
|
|
|
|
this.disableDroppableElement();
|
|
jQuery( this.$el ).closest( '.fusion-builder-live-element' ).css( 'cursor', 'default' );
|
|
jQuery( this.$el ).closest( '.fusion-builder-column' ).css( 'z-index', 'auto' ); // Because of animated items getting z-index 2000.
|
|
jQuery( this.$el ).closest( '.fusion-row' ).css( 'z-index', 'auto' );
|
|
jQuery( this.$el ).closest( '.fusion-builder-container' ).css( 'z-index', 'auto' );
|
|
|
|
setTimeout( function() {
|
|
if ( jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '.fusion-footer-parallax' ).length ) {
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '#main' ).css( 'z-index', 'auto' );
|
|
|
|
if ( 'fixed' === jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '.fusion-footer-parallax' ).css( 'position' ) ) {
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '.fusion-footer-parallax' ).css( 'z-index', '-1' );
|
|
|
|
if ( jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '#sliders-container' ).find( '.tfs-slider[data-parallax="1"]' ).length ) {
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '#sliders-container' ).css( 'z-index', 'auto' );
|
|
}
|
|
}
|
|
|
|
}
|
|
}, 100 );
|
|
|
|
$modal.addClass( 'in' ).show();
|
|
|
|
$modal.find( 'button[data-dismiss="modal"], .fusion-button[data-dismiss="modal"]' ).one( 'click', function() {
|
|
window.FusionEvents.trigger( 'fusion-close-settings-' + self.model.get( 'cid' ) );
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Close the modal.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
onSettingsClose: function() {
|
|
var $modal = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( this.$el.find( '.fusion-modal' ) );
|
|
|
|
$modal.find( 'button[data-dismiss="modal"], .fusion-button[data-dismiss="modal"]' ).off( 'click' );
|
|
|
|
this.enableDroppableElement();
|
|
jQuery( this.$el ).closest( '.fusion-builder-live-element' ).css( 'cursor', '' );
|
|
jQuery( this.$el ).closest( '.fusion-builder-column' ).css( 'z-index', '' );
|
|
jQuery( this.$el ).closest( '.fusion-row' ).css( 'z-index', '' );
|
|
jQuery( this.$el ).closest( '.fusion-builder-container' ).css( 'z-index', '' );
|
|
|
|
if ( jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '.fusion-footer-parallax' ).length ) {
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '#main' ).css( 'z-index', '' );
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '.fusion-footer-parallax' ).css( 'z-index', '' );
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '#sliders-container' ).css( 'z-index', '' );
|
|
}
|
|
|
|
$modal.removeClass( 'in' ).hide();
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
var $modal = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( this.$el.find( '.fusion-modal' ) );
|
|
|
|
if ( jQuery( '.fusion-builder-module-settings[data-element-cid="' + this.model.get( 'cid' ) + '"]' ).length ) {
|
|
$modal.addClass( 'in' ).show();
|
|
$modal.find( '.full-video, .video-shortcode, .wooslider .slide-content' ).fitVids();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var attributes = {};
|
|
|
|
this.values = atts.values;
|
|
|
|
// Create attribute objects
|
|
attributes.attrModal = this.buildModalAttr( atts.values );
|
|
attributes.attrDialog = this.buildDialogAttr( atts.values );
|
|
attributes.attrContent = this.buildContentAttr();
|
|
attributes.attrButton = this.buildButtonAttr( atts.values );
|
|
attributes.attrHeading = this.buildHeadingAttr( atts.values );
|
|
attributes.attrFooterButton = this.buildHFooterButtonAttr( atts.values );
|
|
attributes.attrBody = this.buildBodyAttr( atts.values );
|
|
attributes.title = atts.values.title;
|
|
attributes.showFooter = atts.values.show_footer;
|
|
attributes.closeText = atts.extras.close_text;
|
|
attributes.elementContent = atts.values.element_content;
|
|
attributes.name = atts.values.name;
|
|
attributes.label = window.fusionAllElements[ this.model.get( 'element_type' ) ].name;
|
|
attributes.icon = window.fusionAllElements[ this.model.get( 'element_type' ) ].icon;
|
|
|
|
// Any extras that need passed on.
|
|
attributes.cid = this.model.get( 'cid' );
|
|
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildModalAttr: function( values ) {
|
|
var attrModal = {
|
|
class: 'fusion-modal modal fade modal-' + this.model.get( 'cid' ),
|
|
tabindex: '-1',
|
|
role: 'dialog',
|
|
style: 'z-index: 9999999; background: rgba(0,0,0,0.5);',
|
|
'aria-labelledby': 'modal-heading-' + this.model.get( 'cid' ),
|
|
'aria-hidden': 'true'
|
|
},
|
|
colorObject;
|
|
|
|
|
|
if ( '' !== values.name ) {
|
|
attrModal[ 'class' ] += ' ' + values.name;
|
|
}
|
|
|
|
colorObject = jQuery.AWB_Color( values.background );
|
|
|
|
if ( 0.4 >= colorObject.lightness() ) {
|
|
attrModal[ 'class' ] += ' has-light-close';
|
|
}
|
|
|
|
if ( '' !== values[ 'class' ] ) {
|
|
attrModal[ 'class' ] += ' ' + values[ 'class' ];
|
|
}
|
|
|
|
if ( '' !== values.id ) {
|
|
attrModal.id = values.id;
|
|
}
|
|
|
|
attrModal.style += this.getStyleVariables();
|
|
|
|
return attrModal;
|
|
},
|
|
|
|
/**
|
|
* Gets style variables.
|
|
*
|
|
* @since 3.9
|
|
* @return {String}
|
|
*/
|
|
getStyleVariables: function() {
|
|
var cssVarsOptions = [
|
|
'border_color',
|
|
'background'
|
|
];
|
|
|
|
return this.getCssVarsForOptions( cssVarsOptions );
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildDialogAttr: function( values ) {
|
|
var attrDialog = {
|
|
class: 'modal-dialog',
|
|
role: 'document'
|
|
};
|
|
attrDialog[ 'class' ] += ( 'small' === values.size ) ? ' modal-sm' : ' modal-lg';
|
|
|
|
return attrDialog;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @return {Object}
|
|
*/
|
|
buildContentAttr: function() {
|
|
return {
|
|
class: 'modal-content fusion-modal-content'
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @return {Object} - Body attributes.
|
|
*/
|
|
buildBodyAttr: function() {
|
|
var attrBody = {
|
|
class: 'modal-body'
|
|
};
|
|
|
|
attrBody = _.fusionInlineEditor( {
|
|
cid: this.model.get( 'cid' )
|
|
}, attrBody );
|
|
|
|
return attrBody;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @return {Object}
|
|
*/
|
|
buildButtonAttr: function() {
|
|
var attrButton = {
|
|
class: 'close',
|
|
type: 'button',
|
|
'data-dismiss': 'modal',
|
|
'aria-hidden': 'true'
|
|
};
|
|
|
|
return attrButton;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @return {Object}
|
|
*/
|
|
buildHeadingAttr: function() {
|
|
var attrHeading = {
|
|
class: 'modal-title',
|
|
id: 'modal-heading-' + this.model.get( 'cid' ),
|
|
'data-dismiss': 'modal',
|
|
'aria-hidden': 'true',
|
|
'aria-label': 'Close'
|
|
};
|
|
|
|
attrHeading = _.fusionInlineEditor( {
|
|
cid: this.model.get( 'cid' ),
|
|
param: 'title',
|
|
'disable-return': true,
|
|
'disable-extra-spaces': true,
|
|
toolbar: false
|
|
}, attrHeading );
|
|
|
|
return attrHeading;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @return {Object}
|
|
*/
|
|
buildHFooterButtonAttr: function() {
|
|
var attrFooterButton = {
|
|
class: 'fusion-button button-default button-medium button default medium',
|
|
type: 'button',
|
|
'data-dismiss': 'modal'
|
|
};
|
|
|
|
return attrFooterButton;
|
|
}
|
|
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|