434 lines
13 KiB
JavaScript
434 lines
13 KiB
JavaScript
/* global fusionAllElements, FusionPageBuilderElements */
|
|
/* eslint no-unused-vars: 0 */
|
|
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Counter flip box view
|
|
FusionPageBuilder.fusion_flip_box = FusionPageBuilder.ChildElementView.extend( {
|
|
|
|
/**
|
|
* Runs during render() call.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
onRender: function() {
|
|
|
|
if ( 'undefined' !== typeof this.model.attributes.selectors ) {
|
|
this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
|
|
this.setElementAttributes( this.$el, this.model.attributes.selectors );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
|
|
if ( 'undefined' !== typeof this.model.attributes.selectors ) {
|
|
this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
|
|
this.setElementAttributes( this.$el, this.model.attributes.selectors );
|
|
}
|
|
|
|
// Using non debounced version for smoothness.
|
|
this.refreshJs();
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var computedAtts;
|
|
|
|
atts.usingDynamicParent = this.isParentHasDynamicContent( atts.parentValues );
|
|
|
|
if ( atts.usingDynamicParent ) {
|
|
atts.values.usingDynamicParent = true;
|
|
}
|
|
|
|
computedAtts = this.computeAtts( atts.values );
|
|
|
|
atts.cid = this.model.get( 'cid' );
|
|
atts.parent = this.model.get( 'parent' );
|
|
|
|
atts.flipBoxShortcodeBackBox = computedAtts.flipBoxShortcodeBackBox;
|
|
atts.flipBoxAttributes = computedAtts.flipBoxAttributes;
|
|
atts.flipBoxShortcodeFrontBox = computedAtts.flipBoxShortcodeFrontBox;
|
|
atts.icon_output = computedAtts.icon_output;
|
|
atts.title_front_output = computedAtts.title_front_output;
|
|
atts.title_back_output = computedAtts.title_back_output;
|
|
atts.icon_output = computedAtts.icon_output;
|
|
|
|
|
|
return atts;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
computeAtts: function( values ) {
|
|
var parent = this.model.get( 'parent' ),
|
|
parentModel = FusionPageBuilderElements.find( function( model ) {
|
|
return model.get( 'cid' ) == parent;
|
|
} ),
|
|
parentValues = 'undefined' !== typeof parentModel ? jQuery.extend( true, {}, fusionAllElements.fusion_flip_boxes.defaults, _.fusionCleanParameters( parentModel.get( 'params' ) ) ) : {},
|
|
params = this.model.get( 'params' ),
|
|
style = '',
|
|
flipBoxAttributes = '',
|
|
flipBoxShortcode,
|
|
flipBoxShortcodeIcon = {
|
|
'aria-hidden': 'true'
|
|
},
|
|
iconOutput = '',
|
|
animations = '',
|
|
titleTag = '',
|
|
flipBoxShortcodeGrafix = '',
|
|
flipBoxShortcodeHeadingFront = '',
|
|
titleFrontOutput = '',
|
|
flipBoxShortcodeHeadingBack = '',
|
|
flipBoxShortcodeBackBox = '',
|
|
titleBackOutput = '',
|
|
frontInner = '',
|
|
columns = '',
|
|
flipBoxShortcodeFrontBox,
|
|
atts,
|
|
alpha;
|
|
|
|
values.border_size = _.fusionValidateAttrValue( values.border_size, 'px' );
|
|
values.border_radius = _.fusionValidateAttrValue( values.border_radius, 'px' );
|
|
|
|
// Case when image is set on parent element and icon on child element.
|
|
if ( ( 'undefined' === typeof params.image || '' === params.image ) && ( 'undefined' !== typeof params.icon && '' !== params.icon ) ) {
|
|
values.image = '';
|
|
}
|
|
|
|
// Backwards compatibility for when we had image width and height params.
|
|
if ( 'undefined' !== typeof params.image_width && params.image_width ) {
|
|
values.image_width = params.image_width;
|
|
} else {
|
|
values.image_width = values.image_max_width;
|
|
}
|
|
|
|
values.image_width = _.fusionValidateAttrValue( values.image_width, '' );
|
|
|
|
if ( 'undefined' !== typeof values.image && ( '' !== values.image || '' !== values.image_id ) ) {
|
|
|
|
if ( -1 === parseInt( values.image_width ) ) {
|
|
values.image_width = '35';
|
|
}
|
|
|
|
values.image_height = values.image_width;
|
|
|
|
} else {
|
|
values.image_width = '' === values.image_width ? '35' : values.image_width;
|
|
values.image_height = '35';
|
|
}
|
|
|
|
if ( 'round' === values.border_radius ) {
|
|
values.border_radius = '50%';
|
|
}
|
|
|
|
style = '';
|
|
iconOutput = '';
|
|
titleFrontOutput = '';
|
|
titleBackOutput = '';
|
|
flipBoxAttributes = {
|
|
class: 'fusion-flip-box',
|
|
tabindex: 0
|
|
};
|
|
|
|
flipBoxAttributes[ 'class' ] += ' flip-' + values.flip_direction;
|
|
|
|
if ( values.animation_type ) {
|
|
flipBoxAttributes = _.fusionAnimations( values, flipBoxAttributes );
|
|
}
|
|
|
|
if ( values.image && '' !== values.image ) {
|
|
|
|
iconOutput = '<img src="' + values.image + '" width="' + values.image_width + '" height="' + values.image_height + '" alt="' + values.alt + '" />';
|
|
|
|
} else if ( values.icon ) {
|
|
|
|
if ( values.image ) {
|
|
flipBoxShortcodeIcon[ 'class' ] = 'image';
|
|
} else if ( values.icon ) {
|
|
flipBoxShortcodeIcon[ 'class' ] = _.fusionFontAwesome( values.icon );
|
|
}
|
|
|
|
if ( values.icon_flip ) {
|
|
flipBoxShortcodeIcon[ 'class' ] += ' fa-flip-' + values.icon_flip;
|
|
}
|
|
|
|
if ( values.icon_rotate ) {
|
|
flipBoxShortcodeIcon[ 'class' ] += ' fa-rotate-' + values.icon_rotate;
|
|
}
|
|
|
|
if ( 'yes' === values.icon_spin ) {
|
|
flipBoxShortcodeIcon[ 'class' ] += ' fa-spin';
|
|
}
|
|
|
|
iconOutput = '<i ' + _.fusionGetAttributes( flipBoxShortcodeIcon ) + '></i>';
|
|
|
|
}
|
|
|
|
if ( '' !== iconOutput ) {
|
|
|
|
flipBoxShortcodeGrafix = {
|
|
class: 'flip-box-grafix'
|
|
};
|
|
|
|
if ( ! values.image ) {
|
|
|
|
if ( 'yes' === values.circle ) {
|
|
flipBoxShortcodeGrafix[ 'class' ] += ' flip-box-circle';
|
|
} else {
|
|
flipBoxShortcodeGrafix[ 'class' ] += ' flip-box-no-circle';
|
|
}
|
|
} else {
|
|
flipBoxShortcodeGrafix[ 'class' ] += ' flip-box-image';
|
|
}
|
|
|
|
iconOutput = '<div ' + _.fusionGetAttributes( flipBoxShortcodeGrafix ) + '>' + iconOutput + '</div>';
|
|
}
|
|
|
|
let title_front = values.title_front;
|
|
let title_back = values.title_back;
|
|
|
|
if ( values.usingDynamicParent ) {
|
|
title_front = 'Front Title';
|
|
title_back = 'Back Title';
|
|
}
|
|
|
|
if ( '' !== title_front ) {
|
|
flipBoxShortcodeHeadingFront = {
|
|
class: 'flip-box-heading',
|
|
style: this.getFrontHeadingStyleVars( values )
|
|
};
|
|
|
|
jQuery.each( _.fusionGetFontStyle( 'front_title_font', values, 'object' ), function( rule, value ) {
|
|
flipBoxShortcodeHeadingFront.style += rule + ':' + value + ';';
|
|
} );
|
|
|
|
if ( ! values.text_front ) {
|
|
flipBoxShortcodeHeadingFront[ 'class' ] += ' without-text';
|
|
}
|
|
|
|
titleTag = this.getTitleTag( values, 'front' );
|
|
titleFrontOutput = '<' + titleTag + ' ' + _.fusionGetAttributes( flipBoxShortcodeHeadingFront ) + '>' + title_front + '</' + titleTag + '>';
|
|
}
|
|
|
|
if ( '' !== title_back ) {
|
|
flipBoxShortcodeHeadingBack = {
|
|
class: 'flip-box-heading-back',
|
|
style: this.getBackHeadingStyleVars( values )
|
|
};
|
|
|
|
titleTag = this.getTitleTag( values, 'back' );
|
|
titleBackOutput = '<' + titleTag + ' ' + _.fusionGetAttributes( flipBoxShortcodeHeadingBack ) + '>' + title_back + '</' + titleTag + '>';
|
|
}
|
|
|
|
frontInner = '<div class="flip-box-front-inner">' + iconOutput + titleFrontOutput + values.text_front + '</div>';
|
|
|
|
// flipBoxShortcodeFrontBox Attributes.
|
|
flipBoxShortcodeFrontBox = {
|
|
class: 'flip-box-front',
|
|
style: this.getChildStyleVars( values, 'front' )
|
|
};
|
|
|
|
// flipBoxShortcodeBackBox Attributes.
|
|
flipBoxShortcodeBackBox = {
|
|
class: 'flip-box-back',
|
|
style: this.getChildStyleVars( values, 'back' )
|
|
};
|
|
|
|
// flipBoxShortcode Attributes.
|
|
columns = 1;
|
|
if ( parentValues.columns ) {
|
|
columns = 12 / parseInt( parentValues.columns, 10 );
|
|
}
|
|
|
|
flipBoxShortcode = {
|
|
class: 'fusion-flip-box-wrapper fusion-column col-lg-' + columns + ' col-md-' + columns + ' col-sm-' + columns
|
|
};
|
|
|
|
if ( 5 === parseInt( parentValues.columns, 10 ) ) {
|
|
flipBoxShortcode[ 'class' ] = 'fusion-flip-box-wrapper col-lg-2 col-md-2 col-sm-2';
|
|
}
|
|
|
|
if ( '' !== values[ 'class' ] ) {
|
|
flipBoxShortcode[ 'class' ] += ' ' + values[ 'class' ];
|
|
}
|
|
|
|
if ( '' !== values.id ) {
|
|
flipBoxShortcode.id = values.id;
|
|
}
|
|
|
|
this.model.set( 'selectors', flipBoxShortcode );
|
|
|
|
atts = {};
|
|
|
|
atts.flipBoxShortcodeBackBox = flipBoxShortcodeBackBox;
|
|
atts.flipBoxAttributes = flipBoxAttributes;
|
|
atts.flipBoxShortcodeFrontBox = flipBoxShortcodeFrontBox;
|
|
atts.icon_output = iconOutput;
|
|
atts.title_front_output = titleFrontOutput;
|
|
atts.title_back_output = titleBackOutput;
|
|
atts.icon_output = iconOutput;
|
|
|
|
return atts;
|
|
},
|
|
|
|
/**
|
|
* Get the style vars for a child element.
|
|
*
|
|
* @since 3.9
|
|
* @param {Object} values
|
|
* @param {string} childType
|
|
* @returns
|
|
*/
|
|
getChildStyleVars: function( values, childType ) {
|
|
var cssVars = [ 'icon_color', 'border_color', 'border_size', 'border_radius' ],
|
|
cssCustomVars = {},
|
|
alpha;
|
|
this.values = values;
|
|
|
|
if ( ! values.image && values.circle ) {
|
|
cssVars.push( 'circle_color' );
|
|
cssVars.push( 'circle_border_color' );
|
|
}
|
|
|
|
if ( 'front' === childType ) {
|
|
cssVars.push( 'background_color_front' );
|
|
cssVars.push( 'title_front_color' );
|
|
cssVars.push( 'text_front_color' );
|
|
|
|
if ( values.background_image_front ) {
|
|
cssCustomVars.background_image_front = 'url(\'' + values.background_image_front + '\')';
|
|
if ( values.background_color_front ) {
|
|
alpha = jQuery.AWB_Color( values.background_color_front ).alpha();
|
|
if ( 1 > alpha && 0 !== alpha ) {
|
|
cssCustomVars[ 'background-front-blend-mode' ] = 'overlay';
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
cssVars.push( 'background_color_back' );
|
|
cssVars.push( 'title_back_color' );
|
|
cssVars.push( 'text_back_color' );
|
|
|
|
if ( values.background_image_back ) {
|
|
cssCustomVars.background_image_back = 'url(\'' + values.background_image_back + '\')';
|
|
|
|
if ( values.background_color_back ) {
|
|
alpha = jQuery.AWB_Color( values.background_color_back ).alpha();
|
|
if ( 1 > alpha && 0 !== alpha ) {
|
|
cssCustomVars[ 'background-back-blend-mode' ] = 'overlay';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return this.getCssVarsForOptions( cssVars ) + this.getCustomCssVars( cssCustomVars );
|
|
},
|
|
|
|
/**
|
|
* Get the style vars for front heading.
|
|
*
|
|
* @since 3.9
|
|
* @param {Object} values
|
|
* @return string
|
|
*/
|
|
getFrontHeadingStyleVars: function( values ) {
|
|
var titleTypography = _.fusionGetFontStyle( 'front_title_font', values, 'object' ),
|
|
fontVarArgs,
|
|
fontVars;
|
|
|
|
fontVarArgs = {
|
|
'font-family': ( titleTypography[ 'font-family' ] ? titleTypography[ 'font-family' ] : '' ),
|
|
'font-weight': ( titleTypography[ 'font-weight' ] ? titleTypography[ 'font-weight' ] : '' ),
|
|
'font-style': ( titleTypography[ 'font-style' ] ? titleTypography[ 'font-style' ] : '' ),
|
|
'font-size': values.front_title_font_size,
|
|
'letter-spacing': values.front_title_letter_spacing,
|
|
'line-height': values.front_title_line_height,
|
|
'text-transform': values.front_title_text_transform
|
|
};
|
|
|
|
fontVars = this.getHeadingFontVars( this.getTitleTag( values, 'front' ), fontVarArgs );
|
|
|
|
return fontVars;
|
|
},
|
|
|
|
/**
|
|
* Get the style vars for back heading.
|
|
*
|
|
* @since 3.9
|
|
* @param {Object} values
|
|
* @return string
|
|
*/
|
|
getBackHeadingStyleVars: function( values ) {
|
|
var titleTypography = _.fusionGetFontStyle( 'back_title_font', values, 'object' ),
|
|
fontVarArgs,
|
|
fontVars;
|
|
|
|
fontVarArgs = {
|
|
'font-family': ( titleTypography[ 'font-family' ] ? titleTypography[ 'font-family' ] : '' ),
|
|
'font-weight': ( titleTypography[ 'font-weight' ] ? titleTypography[ 'font-weight' ] : '' ),
|
|
'font-style': ( titleTypography[ 'font-style' ] ? titleTypography[ 'font-style' ] : '' ),
|
|
'font-size': values.back_title_font_size,
|
|
'letter-spacing': values.back_title_letter_spacing,
|
|
'line-height': values.back_title_line_height,
|
|
'text-transform': values.back_title_text_transform
|
|
};
|
|
|
|
fontVars = this.getHeadingFontVars( this.getTitleTag( values, 'back' ), fontVarArgs );
|
|
|
|
return fontVars;
|
|
},
|
|
|
|
/**
|
|
* Get the title HTML tag.
|
|
*
|
|
* @param {Array} values
|
|
* @param {string} title 'front' or 'back' for title type.
|
|
* @returns
|
|
*/
|
|
getTitleTag: function( values, title ) {
|
|
var title_value;
|
|
if ( 'front' === title ) {
|
|
title_value = values.front_title_size;
|
|
if ( ! title_value ) {
|
|
return 'h2';
|
|
}
|
|
} else {
|
|
title_value = values.back_title_size;
|
|
if ( ! title_value ) {
|
|
return 'h3';
|
|
}
|
|
}
|
|
|
|
if ( !isNaN( title_value ) && !isNaN( parseFloat( title_value ) ) ) {
|
|
return 'h' + title_value;
|
|
}
|
|
|
|
return title_value;
|
|
}
|
|
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|