381 lines
10 KiB
JavaScript
381 lines
10 KiB
JavaScript
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Circles info parent View
|
|
FusionPageBuilder.fusion_circles_info = FusionPageBuilder.ParentElementView.extend( {
|
|
|
|
/**
|
|
* Child elements count.
|
|
*/
|
|
icons: [],
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 3.9
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
this.appendChildren( '.awb-circles-info-content-wrapper' );
|
|
|
|
this._refreshJs();
|
|
},
|
|
|
|
/**
|
|
* Runs when child view is added.
|
|
*
|
|
* @since 3.9
|
|
* @return {void}
|
|
*/
|
|
childViewAdded: function() {
|
|
var self = this;
|
|
|
|
setTimeout( function() {
|
|
self.updateList();
|
|
}, 100 );
|
|
},
|
|
|
|
/**
|
|
* Runs when child view is removed.
|
|
*
|
|
* @since 3.9
|
|
* @return {void}
|
|
*/
|
|
childViewRemoved: function() {
|
|
var self = this;
|
|
|
|
setTimeout( function() {
|
|
self.updateList();
|
|
}, 100 );
|
|
},
|
|
|
|
/**
|
|
* Runs when child view is cloned.
|
|
*
|
|
* @since 3.9
|
|
* @return {void}
|
|
*/
|
|
childViewCloned: function() {
|
|
var self = this;
|
|
|
|
setTimeout( function() {
|
|
self.updateList();
|
|
}, 100 );
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 3.9
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var attributes = {};
|
|
|
|
this.values = atts.values;
|
|
|
|
// Create attribute objects
|
|
attributes.circlesInfoAtts = this.buildAttr( atts );
|
|
|
|
// Create HTML.
|
|
attributes.iconsHTML = this.buildIconsHTML();
|
|
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* Runs on render.
|
|
*
|
|
* @since 3.9
|
|
* @return {void}
|
|
*/
|
|
onRender: function() {
|
|
this.afterPatch();
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 3.9
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildAttr: function( atts ) {
|
|
const values = atts.values;
|
|
var attr = _.fusionVisibilityAtts( values.hide_on_mobile, {
|
|
class: 'awb-circles-info awb-circles-info-' + this.model.get( 'cid' ),
|
|
style: ''
|
|
} );
|
|
|
|
|
|
if ( 'outer-circle' === values.icons_placement ) {
|
|
attr[ 'class' ] += ' icons-on-outer-circle';
|
|
}
|
|
|
|
if ( 'yes' === values.auto_rotation ) {
|
|
attr[ 'data-auto-rotation' ] = values.auto_rotation;
|
|
|
|
if ( values.auto_rotation_time ) {
|
|
attr[ 'data-auto-rotation-time' ] = values.auto_rotation_time * 1000;
|
|
}
|
|
|
|
if ( '' !== values.pause_on_hover ) {
|
|
attr[ 'data-pause-on-hover' ] = values.pause_on_hover;
|
|
}
|
|
}
|
|
|
|
if ( '' !== values.activation_type ) {
|
|
attr[ 'data-activation-type' ] = values.activation_type;
|
|
}
|
|
|
|
if ( ! this.isDefault( 'background_color' ) ) {
|
|
attr[ 'class' ] += ' has-bg-color';
|
|
}
|
|
|
|
if ( ! this.isDefault( 'gradient_start_color' ) && ! this.isDefault( 'gradient_end_color' ) ) {
|
|
attr[ 'class' ] += ' has-bg-gradient';
|
|
attr[ 'class' ] += ' gradient-type-' + values.gradient_type;
|
|
}
|
|
|
|
if ( ! this.isDefault( 'background_image' ) ) {
|
|
attr[ 'class' ] += ' has-bg-image';
|
|
attr[ 'class' ] += ' bg-image-blend-mode-' + values.background_blend_mode;
|
|
}
|
|
|
|
if ( 'yes' === values.box_shadow ) {
|
|
attr[ 'class' ] += ' has-box-shadow';
|
|
}
|
|
|
|
if ( '' !== values[ 'class' ] ) {
|
|
attr[ 'class' ] += ' ' + values[ 'class' ];
|
|
}
|
|
|
|
if ( values.id ) {
|
|
attr.id = values.id;
|
|
}
|
|
|
|
attr.style += this.getStyleVariables( values );
|
|
|
|
attr = _.fusionAnimations( values, attr );
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds icons HTML.
|
|
*
|
|
* @since 3.9
|
|
* @param {Object} values - The values object.
|
|
* @return {String}
|
|
*/
|
|
buildIconsHTML: function() {
|
|
let iconsHTML = '';
|
|
const self = this;
|
|
|
|
if ( this.model.children.length && this.areIconsChanges() ) {
|
|
this.icons = [];
|
|
_.each( this.model.children.models, function( child ) {
|
|
const params = child.get( 'params' ),
|
|
icon = 'undefined' !== typeof params.icon && '' !== params.icon ? params.icon : self.values.icon;
|
|
if ( '' !== icon ) {
|
|
iconsHTML += '<div class="awb-circles-info-tab-link" data-id="' + child.get( 'counter' ) + '">';
|
|
iconsHTML += '<span><i class="' + _.fusionFontAwesome( icon ) + '"></i></span>';
|
|
iconsHTML += '</div>';
|
|
self.icons.push( icon );
|
|
}
|
|
} );
|
|
} else {
|
|
iconsHTML = jQuery( this.$el.html() ).find( '.awb-circles-info-icons-wrapper' ).html();
|
|
}
|
|
|
|
if ( ! this.model.children.length ) {
|
|
this.icons = [];
|
|
iconsHTML = '';
|
|
}
|
|
|
|
return iconsHTML;
|
|
},
|
|
|
|
/**
|
|
* Checks if icons are updated or not.
|
|
*
|
|
* @since 3.9
|
|
* @return {Bool}
|
|
*/
|
|
areIconsChanges: function() {
|
|
let iconsChanged = false;
|
|
|
|
const self = this;
|
|
|
|
if ( this.icons.length !== this.model.children.length ) {
|
|
return true;
|
|
}
|
|
|
|
_.each( this.model.children.models, function( child ) {
|
|
var params = child.get( 'params' );
|
|
if ( 'undefined' !== typeof params.icon && '' !== params.icon && ! self.icons.includes( params.icon ) ) {
|
|
iconsChanged = true;
|
|
}
|
|
} );
|
|
|
|
if ( ! self.icons.includes( this.values.icon ) ) {
|
|
iconsChanged = true;
|
|
}
|
|
|
|
return iconsChanged;
|
|
},
|
|
|
|
/**
|
|
* Updates data attributes.
|
|
*
|
|
* @since 3.9
|
|
* @return {void}
|
|
*/
|
|
updateList: function() {
|
|
var counter = 1,
|
|
self = this;
|
|
|
|
this.$el.find( '.awb-circles-info-tab-link' ).each( function() {
|
|
jQuery( this ).attr( 'data-id', counter );
|
|
counter++;
|
|
} );
|
|
|
|
counter = 1;
|
|
this.$el.find( '.awb-circles-info-content-area' ).each( function() {
|
|
jQuery( this ).attr( 'data-id', counter );
|
|
counter++;
|
|
} );
|
|
|
|
setTimeout( function() {
|
|
var i = 1;
|
|
_.each( self.model.children.models, function( child ) {
|
|
child.set( 'counter', i );
|
|
i++;
|
|
} );
|
|
}, 100 );
|
|
|
|
|
|
},
|
|
|
|
/**
|
|
* Extendable function for when child elements get generated.
|
|
*
|
|
* @since 3.9
|
|
* @param {Object} modules An object of modules that are not a view yet.
|
|
* @return {void}
|
|
*/
|
|
onGenerateChildElements: function( modules ) {
|
|
var i = 1;
|
|
|
|
// Set child counter. Used for auto rotation.
|
|
_.each( modules, function( child ) {
|
|
child.counter = i;
|
|
i++;
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Gets style variables.
|
|
*
|
|
* @since 3.9
|
|
* @param {Object} values - The values.
|
|
* @return {String}
|
|
*/
|
|
getStyleVariables: function( values ) {
|
|
var customVars = [],
|
|
cssVarsOptions;
|
|
|
|
// Title typography.
|
|
jQuery.each( _.fusionGetFontStyle( 'title_font', values, 'object' ), function( rule, value ) {
|
|
customVars[ 'title-' + rule ] = value;
|
|
} );
|
|
|
|
// Content typography.
|
|
jQuery.each( _.fusionGetFontStyle( 'content_font', values, 'object' ), function( rule, value ) {
|
|
customVars[ 'content-' + rule ] = value;
|
|
} );
|
|
|
|
if ( ! this.isDefault( 'radial_direction' ) ) {
|
|
this.values.radial_direction = 'circle at ' + values.radial_direction;
|
|
}
|
|
|
|
if ( ! this.isDefault( 'background_image' ) ) {
|
|
this.values.background_image = 'url(' + values.background_image + ')';
|
|
}
|
|
|
|
if ( ! this.isDefault( 'gradient_start_position' ) ) {
|
|
this.values.gradient_start_position = values.gradient_start_position + '%';
|
|
}
|
|
|
|
if ( ! this.isDefault( 'gradient_end_position' ) ) {
|
|
this.values.gradient_end_position = values.gradient_end_position + '%';
|
|
}
|
|
|
|
if ( ! this.isDefault( 'linear_angle' ) ) {
|
|
this.values.linear_angle = values.linear_angle + 'deg';
|
|
}
|
|
|
|
cssVarsOptions = [
|
|
'icon_circle_color',
|
|
'content_circle_color',
|
|
'content_circle_border_style',
|
|
'icon_border_style',
|
|
'icon_active_border_style',
|
|
'icon_circle_border_style',
|
|
'icon_color',
|
|
'icon_bg_color',
|
|
'icon_border_color',
|
|
'icon_active_color',
|
|
'icon_bg_active_color',
|
|
'icon_border_active_color',
|
|
'box_shadow_color',
|
|
'gradient_start_position',
|
|
'gradient_end_position',
|
|
'linear_angle',
|
|
'background_position',
|
|
'background_repeat',
|
|
'background_blend_mode',
|
|
'content_text_transform',
|
|
'title_text_transform',
|
|
'title_line_height',
|
|
'title_color',
|
|
'title_hover_color',
|
|
'content_color',
|
|
'background_color',
|
|
'gradient_start_color',
|
|
'gradient_end_color',
|
|
'radial_direction',
|
|
'background_image'
|
|
];
|
|
|
|
cssVarsOptions.max_width = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.icon_circle_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.content_circle_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.content_padding = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.icon_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.icon_border_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.box_shadow_horizontal = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.box_shadow_vertical = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.box_shadow_blur = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.box_shadow_spread = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.title_font_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.title_letter_spacing = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.content_font_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.content_line_height = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.content_letter_spacing = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.icon_active_border_size = { 'callback': _.fusionGetValueWithUnit };
|
|
|
|
return this.getCssVarsForOptions( cssVarsOptions ) + this.getCustomCssVars( customVars );
|
|
}
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|