669 lines
23 KiB
JavaScript
669 lines
23 KiB
JavaScript
/* global FusionPageBuilderApp, fusionAllElements */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Section separator view.
|
|
FusionPageBuilder.fusion_section_separator = FusionPageBuilder.ElementView.extend( {
|
|
|
|
/**
|
|
* BG Image Separator divider types.
|
|
*
|
|
* @since 3.2
|
|
* @return {Object}
|
|
*/
|
|
bgImageSeparators: [ 'grunge', 'music', 'waves_brush', 'paper', 'squares', 'circles', 'paint', 'grass', 'splash', 'custom' ],
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
onRender: function() {
|
|
this.afterPatch();
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() { // eslint-disable-line no-empty-function
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var attributes = {};
|
|
|
|
// Validate values.
|
|
this.validateValues( atts.values );
|
|
|
|
this.extras = atts.extras;
|
|
|
|
// Create attribute objects
|
|
attributes.attr = this.buildAtts( atts.values );
|
|
attributes.attrSvgWrapper = this.buildSvgWrapperAtts( atts.values );
|
|
attributes.attrSpacer = this.buildSpacerAtts( atts.values );
|
|
attributes.attrSpacerHeight = this.buildSpacerHeightAtts( atts.values );
|
|
attributes.attrCandyArrow = this.buildCandyArrowAtts( atts.values );
|
|
attributes.attrCandy = this.buildCandyAtts( atts.values );
|
|
attributes.attrSVG = this.buildSVGAtts( atts.values );
|
|
attributes.attrSVGBGImage = this.buildSVGBGImageAtts( atts.values );
|
|
attributes.attrButton = this.buildButtonAtts( atts.values );
|
|
attributes.attrRoundedSplit = this.buildRoundedSplitAtts( atts.values );
|
|
attributes.values = atts.values;
|
|
attributes.custom_svg = atts.values.custom_svg ? this.getCustomSvg( atts.values ).svg : '';
|
|
attributes.spacerHeight = this.spacerHeight( atts.values );
|
|
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* Modifies the values.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {void}
|
|
*/
|
|
validateValues: function( values ) {
|
|
if ( ! isNaN( values.bordersize ) ) {
|
|
values.bordersize = _.fusionGetValueWithUnit( values.bordersize );
|
|
}
|
|
|
|
values.borderSizeWithoutUnits = parseInt( values.bordersize.match( /\d+/ ), 10 );
|
|
|
|
if ( 'horizon' === values.divider_type ) {
|
|
values.yMin = 'top' === values.divider_candy ? '-0.5' : '0';
|
|
} else if ( 'hills_opacity' === values.divider_type ) {
|
|
values.yMin = 'top' === values.divider_candy ? '-0.5' : '0';
|
|
} else if ( 'waves' === values.divider_type ) {
|
|
values.yMin = 'top' === values.divider_candy ? '54' : '1';
|
|
} else if ( 'waves_opacity' === values.divider_type ) {
|
|
values.yMin = 'top' === values.divider_candy ? '0' : '1';
|
|
}
|
|
|
|
values.add_boxed_markup = false;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildAtts: function( values ) {
|
|
var attr = _.fusionVisibilityAtts( values.hide_on_mobile, {
|
|
class: 'fusion-section-separator section-separator ' + values.divider_type + ' fusion-section-separator-' + this.model.get( 'cid' ),
|
|
style: this.getStyleVars( values )
|
|
} );
|
|
|
|
if ( 'rounded-split' === values.divider_type ) {
|
|
attr[ 'class' ] += ' rounded-split-separator';
|
|
}
|
|
|
|
if ( '' !== values[ 'class' ] ) {
|
|
attr[ 'class' ] += ' ' + values[ 'class' ];
|
|
}
|
|
|
|
if ( '' !== values.id ) {
|
|
attr.id = values.id;
|
|
}
|
|
|
|
// If we are in studio, and color is global var.
|
|
if ( 'undefined' !== typeof window.awbOriginalPalette && values.backgroundcolor.includes( '--' ) ) {
|
|
attr[ 'data-var' ] = values.backgroundcolor;
|
|
attr[ 'data-color' ] = window.awbPalette.getRealColor( values.backgroundcolor ).replaceAll( ' ', '' );
|
|
}
|
|
|
|
return attr;
|
|
},
|
|
|
|
getStyleVars: function( values ) {
|
|
var cssVars = [],
|
|
customCssVars = {},
|
|
self = this,
|
|
hundredPxSeparators = [ 'slant', 'bigtriangle', 'curved', 'big-half-circle', 'clouds' ];
|
|
this.values = values;
|
|
|
|
// Border.
|
|
if ( 'triangle' === values.divider_type ) {
|
|
if ( '' !== values.bordercolor ) {
|
|
if ( 'bottom' === values.divider_candy || 'top' === values.divider_candy ) {
|
|
customCssVars[ 'border_' + values.divider_candy ] = values.bordersize + ' solid ' + values.bordercolor + ';';
|
|
} else if ( -1 !== values.divider_candy.indexOf( 'top' ) && -1 !== values.divider_candy.indexOf( 'bottom' ) ) {
|
|
customCssVars.border = values.bordersize + ' solid ' + values.bordercolor + ';';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Spacer height/padding-top.
|
|
if ( -1 !== jQuery.inArray( values.divider_type, hundredPxSeparators ) ) {
|
|
customCssVars[ 'spacer-height' ] = '99px';
|
|
} else if ( 'triangle' === values.divider_type ) {
|
|
if ( values.bordercolor ) {
|
|
if ( 'bottom' === values.divider_candy || 'top' === values.divider_candy ) {
|
|
customCssVars[ 'spacer-height' ] = values.bordersize;
|
|
} else if ( -1 !== values.divider_candy.indexOf( 'top' ) && -1 !== values.divider_candy.indexOf( 'bottom' ) ) {
|
|
customCssVars[ 'spacer-height' ] = 'calc( ' + values.bordersize + ' * 2 )';
|
|
}
|
|
}
|
|
} else if ( 'rounded-split' === values.divider_type ) {
|
|
customCssVars[ 'spacer-height' ] = '71px';
|
|
} else if ( 'hills_opacity' === values.divider_type ) {
|
|
customCssVars[ 'spacer-padding-top' ] = ( 182 / 1024 * 100 ) + '%';
|
|
} else if ( 'hills' === values.divider_type ) {
|
|
customCssVars[ 'spacer-padding-top' ] = ( 107 / 1024 * 100 ) + '%';
|
|
} else if ( 'horizon' === values.divider_type ) {
|
|
customCssVars[ 'spacer-padding-top' ] = ( 178 / 1024 * 100 ) + '%';
|
|
} else if ( 'waves_opacity' === values.divider_type ) {
|
|
customCssVars[ 'spacer-padding-top' ] = ( 216 / 1024 * 100 ) + '%';
|
|
} else if ( 'waves' === values.divider_type ) {
|
|
customCssVars[ 'spacer-padding-top' ] = ( 162 / 1024 * 100 ) + '%';
|
|
} else if ( -1 !== jQuery.inArray( values.divider_type, this.bgImageSeparators ) ) {
|
|
const defaultSepHeight = 'custom' === values.divider_type && values.custom_svg ? this.getCustomSvg( values ).height : this._getDefaultSepHeight()[ values.divider_type ];
|
|
const height = '' === values.divider_height && 1 < values.divider_repeat ? ( parseInt( defaultSepHeight ) / values.divider_repeat ) + 'px' : defaultSepHeight; // Aspect ratio height.
|
|
customCssVars[ 'spacer-height' ] = height;
|
|
}
|
|
|
|
// Hide spacer if 100% width template && 1/1 column.
|
|
const parentColumnView = FusionPageBuilderApp.getParentColumn( this );
|
|
const parentColumnValues = 'undefined' !== typeof parentColumnView.values ? parentColumnView.values : {};
|
|
const extras = jQuery.extend( true, {}, fusionAllElements.fusion_section_separator.extras );
|
|
if ( FusionPageBuilderApp.$el.find( '#main' ).hasClass( 'width-100' ) && 'undefined' !== typeof parentColumnValues.type && '1_1' === parentColumnValues.type && 'wide' !== extras.layout ) {
|
|
customCssVars[ 'spacer-display' ] = 'none';
|
|
}
|
|
|
|
const parentContainernView = FusionPageBuilderApp.getParentContainer( this );
|
|
const parentContainerValues = 'undefined' !== typeof parentContainernView.values ? parentContainernView.values : {};
|
|
if ( _.isObject( parentColumnValues ) ) {
|
|
if ( FusionPageBuilderApp.$el.find( '#main' ).hasClass( 'width-100' ) && '1_1' === parentColumnValues.type ) {
|
|
if ( 'boxed' === extras.layout && _.isObject( parentContainerValues ) ) {
|
|
values.add_boxed_markup = true;
|
|
customCssVars[ 'section-separator-pos' ] = 'relative';
|
|
|
|
_.each( [ 'large', 'medium', 'small' ], function( size ) {
|
|
const varSize = ( 'large' === size ? '' : '_' + size );
|
|
|
|
if ( 'undefined' !== typeof parentContainerValues[ 'padding_left' + varSize ] && 'undefined' !== typeof parentContainerValues[ 'padding_right' + varSize ] && ! _.isEmpty( parentContainerValues[ 'padding_left' + varSize ] ) && ! _.isEmpty( parentContainerValues[ 'padding_right' + varSize ] ) && -1 !== parentContainerValues[ 'padding_left' + varSize ].indexOf( '%' ) && -1 !== parentContainerValues[ 'padding_right' + varSize ].indexOf( '%' ) ) {
|
|
const margin = parseFloat( parentContainerValues[ 'padding_left' + varSize ] ) + parseFloat( parentContainerValues[ 'padding_right' + varSize ] );
|
|
const scale = ( 100 - margin ) / 100;
|
|
|
|
customCssVars[ 'svg-margin-left' + varSize ] = '-' + ( parseFloat( parentContainerValues[ 'padding_left' + varSize ] ) / scale ) + '%';
|
|
customCssVars[ 'svg-margin-right' + varSize ] = '-' + ( parseFloat( parentContainerValues[ 'padding_right' + varSize ] ) / scale ) + '%';
|
|
} else {
|
|
if ( 'undefined' !== typeof parentContainerValues[ 'padding_left' + varSize ] && ! _.isEmpty( parentContainerValues[ 'padding_left' + varSize ] ) ) {
|
|
customCssVars[ 'svg-margin-left' + varSize ] = '-' + parentContainerValues[ 'padding_left' + varSize ];
|
|
}
|
|
|
|
if ( 'undefined' !== typeof parentContainerValues[ 'padding_right' + varSize ] && ! _.isEmpty( parentContainerValues[ 'padding_right' + varSize ] ) ) {
|
|
customCssVars[ 'svg-margin-right' + varSize ] = '-' + parentContainerValues[ 'padding_right' + varSize ];
|
|
}
|
|
|
|
}
|
|
} );
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( _.isObject( parentColumnValues ) ) {
|
|
if ( ! ( FusionPageBuilderApp.$el.find( '#main' ).hasClass( 'width-100' ) && 'boxed' === extras.layout ) ) {
|
|
if ( '1_1' !== parentColumnValues.type ) {
|
|
const columnOuterWidth = jQuery( parentColumnView.$el ).width();
|
|
const columnWidth = jQuery( parentColumnView.$el ).children( '.fusion-column-wrapper' ).width();
|
|
_.each( [ 'large', 'medium', 'small' ], function( size ) {
|
|
const varSize = ( 'large' === size ? '' : '_' + size );
|
|
|
|
if ( ! _.isEmpty( parentColumnValues[ 'padding_left' + varSize ] ) ) {
|
|
let paddingValueLeft = parentColumnValues[ 'padding_left' + varSize ];
|
|
let paddingValueRight = parentColumnValues[ 'padding_right' + varSize ];
|
|
|
|
if ( -1 !== paddingValueLeft.indexOf( '%' ) ) {
|
|
paddingValueLeft = ( parseFloat( paddingValueLeft.replace( '%', '' ) ) / ( columnWidth / columnOuterWidth ) ) + '%';
|
|
}
|
|
|
|
if ( -1 !== paddingValueRight.indexOf( '%' ) ) {
|
|
paddingValueRight = ( parseFloat( paddingValueRight.replace( '%', '' ) ) / ( columnWidth / columnOuterWidth ) ) + '%';
|
|
}
|
|
|
|
customCssVars[ 'svg-margin-right' + varSize ] = '-' + paddingValueLeft;
|
|
customCssVars[ 'svg-margin-left' + varSize ] = '-' + paddingValueRight;
|
|
}
|
|
} );
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
const dividerHeightArr = [];
|
|
if ( _.isObject( parentColumnValues ) ) {
|
|
|
|
// Check for custom height.
|
|
_.each( [ 'large', 'medium', 'small' ], function( responsiveSize ) {
|
|
var varSize = ( 'large' === responsiveSize ? '' : '_' + responsiveSize );
|
|
var key = 'divider_height' + varSize;
|
|
|
|
// Skip for specific type.
|
|
if ( 'triangle' === values.divider_type || 'rounded-split' === values.divider_type ) {
|
|
return;
|
|
}
|
|
|
|
// Check for flex.
|
|
if ( ! self.flexDisplay() && 'large' !== responsiveSize ) {
|
|
return;
|
|
}
|
|
|
|
let dividerHeight = values[ key ];
|
|
|
|
if ( '' === dividerHeight && -1 !== jQuery.inArray( values.divider_type, hundredPxSeparators ) && 'large' === responsiveSize ) {
|
|
dividerHeight = '99px';
|
|
}
|
|
|
|
// Check for empty value.
|
|
if ( '' === dividerHeight ) {
|
|
return;
|
|
}
|
|
|
|
dividerHeightArr[ key ] = dividerHeight;
|
|
customCssVars[ key ] = dividerHeight;
|
|
customCssVars[ 'spacer-height' + varSize ] = dividerHeight;
|
|
customCssVars[ 'spacer-padding-top' ] = 'inherit';
|
|
} );
|
|
}
|
|
|
|
if ( _.isObject( parentColumnValues ) ) {
|
|
// Background Repeat.
|
|
_.each( [ 'large', 'medium', 'small' ], function( responsiveSize ) {
|
|
var varSize = ( 'large' === responsiveSize ? '' : '_' + responsiveSize ),
|
|
key = 'divider_repeat' + varSize,
|
|
keyDividerH = 'divider_height' + varSize,
|
|
height;
|
|
|
|
// Only allow for SVG Background type.
|
|
if ( -1 === jQuery.inArray( values.divider_type, self.bgImageSeparators ) ) {
|
|
return;
|
|
}
|
|
|
|
// Check for flex.
|
|
if ( ! self.flexDisplay() && 'large' !== responsiveSize ) {
|
|
return;
|
|
}
|
|
|
|
// Check for empty value.
|
|
if ( '' === values[ key ] ) {
|
|
return;
|
|
}
|
|
|
|
self.dynamic_css = {};
|
|
|
|
|
|
height = '' !== values[ keyDividerH ] ? values[ keyDividerH ] : self.getDividerHeightResponsive( keyDividerH, dividerHeightArr );
|
|
height = '' === values[ keyDividerH ] && 1 < values[ key ] ? ( parseInt( height ) / values[ key ] ) + 'px' : height; // Aspect ratio height.
|
|
|
|
if ( _.contains( height, '%' ) ) {
|
|
customCssVars[ 'bg-size' + varSize ] = parseFloat( 100 / values[ key ] ) + '% 100%';
|
|
} else {
|
|
height = 0 < parseInt( height ) ? height : '100%';
|
|
customCssVars[ 'bg-size' + varSize ] = parseFloat( 100 / values[ key ] ) + '% ' + height;
|
|
}
|
|
} );
|
|
}
|
|
|
|
// Margin.
|
|
cssVars.margin_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVars.margin_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVars.margin_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVars.margin_left = { 'callback': _.fusionGetValueWithUnit };
|
|
|
|
if ( 'bigtriangle' === values.divider_type || 'slant' === values.divider_type || 'big-half-circle' === values.divider_type || 'clouds' === values.divider_type || 'curved' === values.divider_type ) {
|
|
customCssVars[ 'sep-padding' ] = '0';
|
|
customCssVars[ 'svg-padding' ] = '0';
|
|
} else if ( 'horizon' === values.divider_type || 'waves' === values.divider_type || 'waves_opacity' === values.divider_type || 'hills' === values.divider_type || 'hills_opacity' === values.divider_type ) {
|
|
customCssVars[ 'sep-font-size' ] = '0';
|
|
customCssVars[ 'sep-line-height' ] = '0';
|
|
}
|
|
|
|
if ( 'slant' === values.divider_type && 'bottom' === values.divider_candy ) {
|
|
customCssVars[ 'svg-tag-margin-bottom' ] = '-3px';
|
|
customCssVars[ 'sep-svg-display' ] = 'block';
|
|
}
|
|
|
|
if ( 'triangle' === values.divider_type ) {
|
|
if ( ! values.icon_color ) {
|
|
values.icon_color = values.bordercolor;
|
|
}
|
|
|
|
customCssVars.icon_color = values.icon_color;
|
|
|
|
if ( 1 < values.borderSizeWithoutUnits ) {
|
|
if ( 'bottom' === values.divider_candy ) {
|
|
customCssVars[ 'icon-top' ] = 'auto';
|
|
customCssVars[ 'icon-bottom' ] = '-' + ( values.borderSizeWithoutUnits + 10 ) + 'px';
|
|
} else if ( 'top' === values.divider_candy ) {
|
|
customCssVars[ 'icon-top' ] = '-' + ( values.borderSizeWithoutUnits + 10 ) + 'px';
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
return this.getCssVarsForOptions( cssVars ) + this.getCustomCssVars( customCssVars );
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 3.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildSvgWrapperAtts: function( values ) {
|
|
var attr = {
|
|
class: 'fusion-section-separator-svg'
|
|
},
|
|
parentColumnView = FusionPageBuilderApp.getParentColumn( this ),
|
|
parentColumnValues = 'undefined' !== typeof parentColumnView.values ? parentColumnView.values : {},
|
|
extras = jQuery.extend( true, {}, fusionAllElements.fusion_section_separator.extras ),
|
|
parentContainernView = FusionPageBuilderApp.getParentContainer( this ),
|
|
parentContainerValues = 'undefined' !== typeof parentContainernView.values ? parentContainernView.values : {};
|
|
|
|
values.additional_styles = '';
|
|
|
|
if ( _.isObject( parentColumnValues ) ) {
|
|
if ( FusionPageBuilderApp.$el.find( '#main' ).hasClass( 'width-100' ) && '1_1' === parentColumnValues.type && ( 'boxed' !== extras.layout || ! _.isObject( parentContainerValues ) ) ) {
|
|
attr[ 'class' ] += ' fusion-section-separator-fullwidth';
|
|
}
|
|
}
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 3.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildSpacerAtts: function( values ) { // eslint-disable-line no-unused-vars
|
|
var attrSpacer = {
|
|
class: 'fusion-section-separator-spacer'
|
|
},
|
|
parentColumnView = FusionPageBuilderApp.getParentColumn( this ),
|
|
parentColumnValues = 'undefined' !== typeof parentColumnView.values ? parentColumnView.values : {},
|
|
extras = jQuery.extend( true, {}, fusionAllElements.fusion_section_separator.extras );
|
|
|
|
// 100% width template && 1/1 column.
|
|
if ( FusionPageBuilderApp.$el.find( '#main' ).hasClass( 'width-100' ) && 'undefined' !== typeof parentColumnValues.type && '1_1' === parentColumnValues.type && 'wide' === extras.layout ) {
|
|
attrSpacer[ 'class' ] += ' fusion-section-separator-fullwidth';
|
|
}
|
|
|
|
return attrSpacer;
|
|
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 3.0
|
|
* @return {Object}
|
|
*/
|
|
buildSpacerHeightAtts: function() {
|
|
var attrSpacerHeight = {
|
|
class: 'fusion-section-separator-spacer-height'
|
|
};
|
|
return attrSpacerHeight;
|
|
},
|
|
|
|
/**
|
|
* Spacer height.
|
|
*
|
|
* @since 3.6
|
|
* @param {Object} values - The values.
|
|
* @return {String} Spacer height.
|
|
*/
|
|
spacerHeight( values ) {
|
|
const defaultSepHeight = 'custom' === values.divider_type && values.custom_svg ? this.getCustomSvg( values ).height : this._getDefaultSepHeight()[ values.divider_type ];
|
|
const height = '' === values.divider_height && 1 < values.divider_repeat ? ( parseInt( defaultSepHeight ) / values.divider_repeat ) + 'px' : defaultSepHeight; // Aspect ratio height.
|
|
|
|
return height;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildCandyAtts: function( values ) {
|
|
var attrCandy = {
|
|
class: 'divider-candy'
|
|
};
|
|
|
|
if ( 'bottom' === values.divider_candy ) {
|
|
attrCandy[ 'class' ] += ' bottom';
|
|
attrCandy.style = 'bottom:-' + ( values.borderSizeWithoutUnits + 20 ) + 'px;border-bottom:1px solid ' + values.bordercolor + ';border-left:1px solid ' + values.bordercolor + ';';
|
|
} else if ( 'top' === values.divider_candy ) {
|
|
attrCandy[ 'class' ] += ' top';
|
|
attrCandy.style = 'top:-' + ( values.borderSizeWithoutUnits + 20 ) + 'px;border-bottom:1px solid ' + values.bordercolor + ';border-left:1px solid ' + values.bordercolor + ';';
|
|
|
|
// Modern setup, that won't work in IE8.
|
|
} else if ( -1 !== values.divider_candy.indexOf( 'top' ) && -1 !== values.divider_candy.indexOf( 'bottom' ) ) {
|
|
attrCandy[ 'class' ] += ' both';
|
|
attrCandy.style = 'background-color:' + values.backgroundcolor + ';border:1px solid ' + values.bordercolor + ';';
|
|
}
|
|
|
|
if ( -1 !== values.divider_candy.indexOf( 'top' ) && -1 !== values.divider_candy.indexOf( 'bottom' ) ) {
|
|
attrCandy[ 'class' ] += ' triangle';
|
|
}
|
|
return attrCandy;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildCandyArrowAtts: function( values ) {
|
|
var attrCandyArrow = {
|
|
class: 'divider-candy-arrow'
|
|
};
|
|
|
|
// For borders of size 1, we need to hide the border line on the arrow, thus we set it to 0.
|
|
var arrowPosition = values.borderSizeWithoutUnits;
|
|
if ( 1 === arrowPosition ) {
|
|
arrowPosition = 0;
|
|
}
|
|
|
|
if ( 'bottom' === values.divider_candy ) {
|
|
attrCandyArrow[ 'class' ] += ' bottom';
|
|
attrCandyArrow.style = 'top:' + arrowPosition + 'px;border-top-color: ' + values.backgroundcolor + ';';
|
|
} else if ( 'top' === values.divider_candy ) {
|
|
attrCandyArrow[ 'class' ] += ' top';
|
|
attrCandyArrow.style = 'bottom:' + arrowPosition + 'px;border-bottom-color: ' + values.backgroundcolor + ';';
|
|
}
|
|
|
|
return attrCandyArrow;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildSVGAtts: function( values ) {
|
|
var attrSVG = {
|
|
display: 'block'
|
|
};
|
|
|
|
attrSVG.fill = jQuery.AWB_Color( values.backgroundcolor ).toRgbaString();
|
|
|
|
return attrSVG;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildButtonAtts: function( values ) {
|
|
var attrButton = {};
|
|
|
|
if ( '' !== values.icon ) {
|
|
attrButton = {
|
|
class: 'section-separator-icon icon ' + _.fusionFontAwesome( values.icon )
|
|
};
|
|
}
|
|
|
|
return attrButton;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildRoundedSplitAtts: function( values ) {
|
|
var attrRoundedSplit = {};
|
|
|
|
if ( 'rounded-split' === values.divider_type ) {
|
|
attrRoundedSplit = {
|
|
class: 'rounded-split ' + values.divider_candy,
|
|
style: 'background-color:' + values.backgroundcolor + ';'
|
|
};
|
|
}
|
|
|
|
return attrRoundedSplit;
|
|
},
|
|
|
|
/**
|
|
* Builds SVG BG Image attributes.
|
|
*
|
|
* @since 3.2
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildSVGBGImageAtts: function( values ) {
|
|
var attrSVG = {
|
|
class: 'fusion-' + values.divider_type + '-candy-sep fusion-section-separator-svg-bg',
|
|
style: ''
|
|
},
|
|
height = this._getDefaultSepHeight()[ values.divider_type ] ? this._getDefaultSepHeight()[ values.divider_type ] : '100px',
|
|
transform = [];
|
|
|
|
if ( '' === values.divider_height ) {
|
|
if ( 1 < values.divider_repeat ) {
|
|
height = ( parseInt( height ) / values.divider_repeat ) + 'px';
|
|
}
|
|
attrSVG.style += 'height:' + height + ';';
|
|
}
|
|
|
|
if ( 'right' === values.divider_position ) {
|
|
transform.push( 'rotateY(180deg)' );
|
|
} else {
|
|
transform.push( 'rotateY(0)' );
|
|
}
|
|
|
|
if ( 'bottom' === values.divider_candy ) {
|
|
transform.push( 'rotateX(180deg)' );
|
|
} else {
|
|
transform.push( 'rotateX(0)' );
|
|
}
|
|
|
|
if ( transform.length ) {
|
|
attrSVG.style += 'transform: ' + transform.join( ' ' ) + ' ;';
|
|
}
|
|
|
|
|
|
return attrSVG;
|
|
},
|
|
|
|
/**
|
|
* Get default height of separators.
|
|
*
|
|
* @since 3.2
|
|
* @return {Object}
|
|
*/
|
|
_getDefaultSepHeight: function() {
|
|
return {
|
|
grunge: '43px',
|
|
music: '297px',
|
|
waves_brush: '124px',
|
|
paper: '102px',
|
|
circles: '164px',
|
|
squares: '140px',
|
|
paint: '80px',
|
|
grass: '195px',
|
|
splash: '65px'
|
|
};
|
|
},
|
|
|
|
getDividerHeightResponsive: function( key, hash ) {
|
|
var keys = hash.keys(),
|
|
found_index = _.contains( keys, key );
|
|
if ( false === found_index || 0 === found_index ) {
|
|
return '';
|
|
}
|
|
return keys[ found_index - 1 ];
|
|
},
|
|
|
|
/**
|
|
* Get custom svg
|
|
*
|
|
* @since 7.6
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
getCustomSvg: function( values ) {
|
|
var svg = '';
|
|
const url = values.custom_svg;
|
|
if ( !url ) {
|
|
return {};
|
|
}
|
|
|
|
jQuery.ajax( {
|
|
url: url,
|
|
type: 'get',
|
|
dataType: 'html',
|
|
async: false,
|
|
success: function( data ) {
|
|
svg = data;
|
|
}
|
|
} );
|
|
|
|
svg = svg.replace( /fill="(.*?)"/ig, `fill="${jQuery.AWB_Color( values.backgroundcolor ).toRgbaString()}"` );
|
|
|
|
//get the default height
|
|
const rx = /viewBox="(.*?)"/g;
|
|
const matches = rx.exec( svg );
|
|
|
|
const height = matches ? matches[ 1 ].split( ' ' )[ 3 ] + 'px' : '65px';
|
|
|
|
|
|
return { svg, height };
|
|
|
|
}
|
|
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|