762 lines
27 KiB
JavaScript
762 lines
27 KiB
JavaScript
/* eslint no-mixed-spaces-and-tabs: 0 */
|
|
/* global fusionAllElements, FusionApp, FusionPageBuilderApp */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Fusion Post Cards View.
|
|
FusionPageBuilder.fusion_post_cards = FusionPageBuilder.ElementView.extend( {
|
|
|
|
/**
|
|
* Inner data for nested columns.
|
|
*/
|
|
nestedData: { 'default': { rows: { cols: {} } } },
|
|
|
|
onInit: function() {
|
|
if ( this.model.attributes.markup && '' === this.model.attributes.markup.output ) {
|
|
this.model.attributes.markup.output = this.getComponentPlaceholder();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Runs before view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
beforePatch: function() {
|
|
let uniqueIds = [ ...new Set(
|
|
this.$el.find( '.post-card[data-post-card-id]' ).map( function() {
|
|
return jQuery( this ).data( 'post-card-id' );
|
|
} ).get()
|
|
) ];
|
|
const self = this;
|
|
|
|
uniqueIds = ! uniqueIds.length ? [ 'default' ] : uniqueIds;
|
|
|
|
uniqueIds.forEach( function( id ) {
|
|
self.nestedData[ id ] = { rows: {} };
|
|
|
|
const firstMatch = 'default' === id ? self.$el : self.$el.find( '.post-card[data-post-card-id=' + id +']' ).first();
|
|
|
|
const innerRows = firstMatch.find( '.fusion-builder-row-inner' );
|
|
if ( innerRows.length ) {
|
|
innerRows.each( function( rowIndex ) {
|
|
self.nestedData[ id ].rows[ rowIndex ] = {};
|
|
|
|
self.nestedData[ id ].rows[ rowIndex ].class = jQuery( this ).attr( 'class' );
|
|
self.nestedData[ id ].rows[ rowIndex ].style = jQuery( this ).attr( 'style' );
|
|
self.nestedData[ id ].rows[ rowIndex ].columns = {};
|
|
|
|
const innerCloumns = jQuery( this ).find( '.fusion_builder_column_inner' );
|
|
if ( innerCloumns.length ) {
|
|
innerCloumns.each( function( colIndex ) {
|
|
self.nestedData[ id ].rows[ rowIndex ].columns[ colIndex ] = {};
|
|
|
|
self.nestedData[ id ].rows[ rowIndex ].columns[ colIndex ].class = jQuery( this ).attr( 'class' );
|
|
self.nestedData[ id ].rows[ rowIndex ].columns[ colIndex ].style = jQuery( this ).attr( 'style' );
|
|
} );
|
|
}
|
|
} );
|
|
}
|
|
} );
|
|
|
|
// Destroy the Swiper instance before creating the new one after patch.
|
|
if ( this.$el.find( '.awb-carousel' ).length && this.$el.find( '.awb-carousel' )[0].swiper ) {
|
|
this.$el.find( '.awb-carousel' )[0].swiper.destroy();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
let uniqueIds = [ ...new Set(
|
|
this.$el.find( '.post-card[data-post-card-id]' ).map( function() {
|
|
return jQuery( this ).data( 'post-card-id' );
|
|
} ).get()
|
|
) ];
|
|
const self = this;
|
|
|
|
uniqueIds = ! uniqueIds.length ? [ 'default' ] : uniqueIds;
|
|
|
|
uniqueIds.forEach( function( id ) {
|
|
let matches = 'default' === id ? self.$el.find( '.post-card' ) : self.$el.find( '.post-card[data-post-card-id=' + id +']' );
|
|
|
|
matches.each( function() {
|
|
const innerRows = jQuery( this ).find( '.fusion-builder-row-inner' );
|
|
if ( innerRows.length ) {
|
|
innerRows.each( function( rowIndex ) {
|
|
jQuery( this ).attr( 'class', self.nestedData[ id ].rows[ rowIndex ].class );
|
|
jQuery( this ).attr( 'style', self.nestedData[ id ].rows[ rowIndex ].style );
|
|
|
|
const innerCloumns = jQuery( this ).find( '.fusion_builder_column_inner' );
|
|
if ( innerCloumns.length ) {
|
|
innerCloumns.each( function( colIndex ) {
|
|
jQuery( this ).attr( 'class', self.nestedData[ id ].rows[ rowIndex ].columns[ colIndex ].class );
|
|
jQuery( this ).attr( 'style', self.nestedData[ id ].rows[ rowIndex ].columns[ colIndex ].style );
|
|
} );
|
|
}
|
|
} );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
// This will trigger a JS event on the preview frame.
|
|
this._refreshJs();
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 3.3
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var attributes = {};
|
|
|
|
// Validate values.
|
|
this.validateValues( atts.values );
|
|
this.values = atts.values;
|
|
this.extras = atts.extras;
|
|
|
|
// Any extras that need passed on.
|
|
attributes.cid = this.model.get( 'cid' );
|
|
attributes.attr = this.buildAttr( atts.values );
|
|
attributes.productsLoop = this.buildOutput( atts );
|
|
attributes.filters = this.buildFilters( atts );
|
|
attributes.productsAttrs = this.buildProductsAttrs( atts.values );
|
|
attributes.query_data = atts.query_data;
|
|
attributes.values = atts.values;
|
|
attributes.loadMoreText = _.has( atts.extras, 'load_more_text_' + atts.values.post_type ) ? atts.extras[ 'load_more_text_' + atts.values.post_type ] : atts.extras.load_more_text;
|
|
|
|
// carousel & slider.
|
|
if ( _.contains( [ 'slider', 'carousel', 'coverflow' ], atts.values.layout ) ) {
|
|
attributes.prevAttr = this.buildNavIconAttr( atts.values.prev_icon );
|
|
attributes.nextAttr = this.buildNavIconAttr( atts.values.next_icon );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof atts.query_data && 'undefined' !== typeof atts.query_data.max_num_pages ) {
|
|
if ( 'undefined' !== typeof atts.query_data.paged ) {
|
|
attributes.pagination = this.buildPagination( atts );
|
|
}
|
|
}
|
|
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* Modifies the values.
|
|
*
|
|
* @since 3.3
|
|
* @param {Object} values - The values object.
|
|
* @return {void}
|
|
*/
|
|
validateValues: function( values ) {
|
|
if ( 'undefined' !== typeof values.margin_top && '' !== values.margin_top ) {
|
|
values.margin_top = _.fusionGetValueWithUnit( values.margin_top );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.margin_right && '' !== values.margin_right ) {
|
|
values.margin_right = _.fusionGetValueWithUnit( values.margin_right );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.margin_bottom && '' !== values.margin_bottom ) {
|
|
values.margin_bottom = _.fusionGetValueWithUnit( values.margin_bottom );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.margin_left && '' !== values.margin_left ) {
|
|
values.margin_left = _.fusionGetValueWithUnit( values.margin_left );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.filters_font_size && '' !== values.filters_font_size ) {
|
|
values.filters_font_size = _.fusionGetValueWithUnit( values.filters_font_size );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.filters_letter_spacing && '' !== values.filters_letter_spacing ) {
|
|
values.filters_letter_spacing = _.fusionGetValueWithUnit( values.filters_letter_spacing );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.active_filter_border_size && '' !== values.active_filter_border_size ) {
|
|
values.active_filter_border_size = _.fusionGetValueWithUnit( values.active_filter_border_size );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.filters_border_bottom && '' !== values.filters_border_bottom ) {
|
|
values.filters_border_bottom = _.fusionGetValueWithUnit( values.filters_border_bottom );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.filters_border_top && '' !== values.filters_border_top ) {
|
|
values.filters_border_top = _.fusionGetValueWithUnit( values.filters_border_top );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.filters_border_left && '' !== values.filters_border_left ) {
|
|
values.filters_border_left = _.fusionGetValueWithUnit( values.filters_border_left );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.filters_height && '' !== values.filters_height ) {
|
|
values.filters_height = _.fusionGetValueWithUnit( values.filters_height );
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.filters_border_right && '' !== values.filters_border_right ) {
|
|
values.filters_border_right = _.fusionGetValueWithUnit( values.filters_border_right );
|
|
}
|
|
|
|
if ( 1 === parseInt( values.columns ) && ( 'grid' === values.layout || 'masonry' === values.layout ) ) {
|
|
values.column_spacing = '0';
|
|
}
|
|
|
|
if ( 0 === parseInt( values.columns ) ) {
|
|
values.columns = 4;
|
|
}
|
|
|
|
// No delay offering for carousels and sliders.
|
|
if ( 'grid' !== values.layout ) {
|
|
values.animation_delay = 0;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 3.3
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildAttr: function( values ) {
|
|
var attr = _.fusionVisibilityAtts( values.hide_on_mobile, {
|
|
class: 'fusion-post-cards fusion-post-cards-' + this.model.get( 'cid' ),
|
|
style: this.getInlineStyle( values )
|
|
} ),
|
|
animationValues;
|
|
|
|
|
|
if ( '' !== values.animation_type ) {
|
|
|
|
// Grid and has delay, set parent args here, otherwise it will be on children.
|
|
if ( 'grid' === values.layout && 0 !== parseInt( values.animation_delay ) ) {
|
|
// Post cards has another animation delay implemented, not on whole element, but between each post cards.
|
|
animationValues = JSON.parse( JSON.stringify( values ) );
|
|
animationValues.animation_delay = '';
|
|
|
|
attr = _.fusionAnimations( animationValues, attr, false );
|
|
|
|
attr[ 'data-animation-delay' ] = values.animation_delay;
|
|
attr[ 'class' ] += ' fusion-delayed-animation';
|
|
} else {
|
|
// Post cards has another animation delay implemented, not on whole element, but between each post cards.
|
|
animationValues = JSON.parse( JSON.stringify( values ) );
|
|
animationValues.animation_delay = '';
|
|
|
|
// Not grid always no delay, add to parent.
|
|
attr = _.fusionAnimations( animationValues, attr );
|
|
}
|
|
}
|
|
|
|
if ( -1 !== jQuery.inArray( values.layout, [ 'slider', 'carousel', 'marquee', 'coverflow' ] ) ) {
|
|
attr[ 'class' ] += ' awb-carousel awb-swiper awb-swiper-' + values.layout + ' awb-swiper-dots-position-' + values.dots_position;
|
|
|
|
attr[ 'data-autoplay' ] = values.autoplay;
|
|
attr[ 'data-autoplayspeed' ] = values.autoplay_speed;
|
|
attr[ 'data-autoplaypause' ] = values.autoplay_hover_pause;
|
|
attr[ 'data-loop' ] = values.loop;
|
|
attr[ 'data-columns' ] = values.columns;
|
|
attr[ 'data-columnsmedium' ] = values.columns_medium;
|
|
attr[ 'data-columnssmall' ] = values.columns_small;
|
|
attr[ 'data-itemmargin' ] = values.column_spacing;
|
|
attr[ 'data-itemwidth' ] = 180;
|
|
attr[ 'data-touchscroll' ] = values.mouse_scroll;
|
|
attr[ 'data-imagesize' ] = 'auto';
|
|
attr[ 'data-scrollitems' ] = values.scroll_items;
|
|
attr[ 'data-mousepointer' ] = values.mouse_pointer;
|
|
attr[ 'data-layout' ] = values.layout;
|
|
attr[ 'data-centeredslides' ] = values.centered_slides;
|
|
attr[ 'data-shadow' ] = values.display_shadow;
|
|
attr[ 'data-speed' ] = values.transition_speed;
|
|
attr[ 'data-rotationangle' ] = values.rotation_angle;
|
|
attr[ 'data-depth' ] = values.coverflow_depth;
|
|
|
|
if ( 'marquee' === values.layout) {
|
|
attr[ 'data-marquee-direction' ] = values.marquee_direction;
|
|
}
|
|
|
|
if ( 'yes' === values.mouse_scroll && 'custom' === values.mouse_pointer ) {
|
|
attr[ 'data-scrollitems' ] = 1;
|
|
}
|
|
|
|
if ( 'slider' === values.layout ) {
|
|
attr[ 'data-slide-effect' ] = values.slider_animation;
|
|
}
|
|
|
|
if ( -1 !== jQuery.inArray( values.layout, [ 'carousel', 'coverflow', 'marquee' ] ) && 'yes' === values.mask_edges ) {
|
|
attr[ 'class' ] += ' awb-swiper-masked';
|
|
}
|
|
|
|
if ( 'custom' === values.mouse_pointer ) {
|
|
attr[ 'data-cursor-color-mode' ] = values.cursor_color_mode;
|
|
|
|
if ( 'custom' === values.cursor_color_mode ) {
|
|
attr[ 'data-cursor-color' ] = values.cursor_color;
|
|
}
|
|
}
|
|
|
|
} else if ( ( 'grid' === values.layout || 'masonry' === values.layout || 'stacking' === values.layout ) && 'terms' !== values.source ) {
|
|
attr[ 'class' ] += ' fusion-grid-archive';
|
|
attr[ 'class' ] += 'masonry' === values.layout ? ' fusion-post-cards-masonry' : '';
|
|
}
|
|
|
|
if ( 'grid' === values.layout ) {
|
|
attr[ 'class' ] += ' fusion-grid-columns-' + this.values.columns;
|
|
}
|
|
|
|
if ( 'grid' === values.layout && 1 == this.values.columns && 'no' === this.values.scrolling ) {
|
|
attr[ 'class' ] += ' fusion-grid-flex-grow';
|
|
}
|
|
|
|
if ( '' !== values[ 'class' ] ) {
|
|
attr[ 'class' ] += ' ' + values[ 'class' ];
|
|
}
|
|
|
|
if ( '' !== values.id ) {
|
|
attr.id = values.id;
|
|
}
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds nav icon attributes.
|
|
*
|
|
* @since 3.9
|
|
* @param {String} value - The value.
|
|
* @return {Object}
|
|
*/
|
|
buildNavIconAttr: function( value ) {
|
|
var icon = {
|
|
class: _.fusionFontAwesome( value ),
|
|
'aria-hidden': 'true'
|
|
};
|
|
|
|
return icon;
|
|
},
|
|
|
|
/**
|
|
* Builds items UL attributes.
|
|
*
|
|
* @since 3.3
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildProductsAttrs: function( values ) {
|
|
var attr = {
|
|
class: ''
|
|
};
|
|
|
|
if ( 'grid' === values.layout || 'masonry' === values.layout ) {
|
|
attr[ 'class' ] += 'fusion-grid fusion-grid-' + values.columns + ' fusion-flex-align-items-' + values.flex_align_items + ' fusion-' + values.layout + '-posts-cards';
|
|
} else if ( 'stacking' === values.layout ) {
|
|
attr[ 'class' ] += 'fusion-grid fusion-' + values.layout + '-posts-cards';
|
|
} else if ( -1 !== jQuery.inArray( values.layout, [ 'slider', 'carousel', 'marquee', 'coverflow' ] ) ) {
|
|
attr[ 'class' ] += 'swiper-wrapper';
|
|
|
|
if ( 'slider' !== values.layout ) {
|
|
attr[ 'class' ] += ' fusion-flex-align-items-' + values.flex_align_items;
|
|
}
|
|
}
|
|
|
|
if ( this.isLoadMore() ) {
|
|
attr[ 'class' ] += ' fusion-grid-container-infinite';
|
|
}
|
|
|
|
if ( 'load_more_button' === values.scrolling ) {
|
|
attr[ 'class' ] += ' fusion-grid-container-load-more';
|
|
}
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds columns classes.
|
|
*
|
|
* @since 3.3
|
|
* @param {Object} atts - The attributes.
|
|
* @return {string}
|
|
*/
|
|
buildColumnClasses: function( atts ) {
|
|
var classes = '';
|
|
|
|
if ( 'grid' === atts.values.layout || 'masonry' === atts.values.layout || 'stacking' === atts.values.layout ) {
|
|
classes += 'fusion-grid-column fusion-post-cards-grid-column';
|
|
} else if ( _.contains( [ 'slider', 'carousel', 'marquee', 'coverflow' ], atts.values.layout ) ) {
|
|
classes += 'swiper-slide';
|
|
}
|
|
|
|
if ( 'product' === atts.values.post_type && 'posts' === atts.values.source ) {
|
|
classes += ' product';
|
|
}
|
|
return classes;
|
|
},
|
|
|
|
/**
|
|
* Builds columns wrapper.
|
|
*
|
|
* @since 3.3
|
|
* @param {Object} atts - The attributes.
|
|
* @return {string}
|
|
*/
|
|
buildColumnWrapper: function( atts ) {
|
|
var classes = '';
|
|
|
|
if ( 'carousel' === atts.values.layout || 'marquee' === atts.values.layout || 'coverflow' === atts.values.layout ) {
|
|
classes += 'fusion-carousel-item-wrapper';
|
|
}
|
|
return classes;
|
|
},
|
|
|
|
/**
|
|
* Builds the pagination.
|
|
*
|
|
* @since 3.3
|
|
* @param {Object} atts - The attributes.
|
|
* @return {string}
|
|
*/
|
|
buildPagination: function( atts ) {
|
|
var globalPagination = atts.extras.pagination_global,
|
|
globalStartEndRange = atts.extras.pagination_start_end_range_global,
|
|
range = atts.extras.pagination_range_global,
|
|
paged = '',
|
|
pages = '',
|
|
paginationCode = '',
|
|
queryData = atts.query_data,
|
|
values = atts.values;
|
|
|
|
if ( -1 == values.number_posts ) {
|
|
values.scrolling = 'no';
|
|
}
|
|
|
|
if ( 'no' !== values.scrolling ) {
|
|
paged = queryData.paged;
|
|
pages = queryData.max_num_pages;
|
|
|
|
paginationCode = _.fusionPagination( pages, paged, range, values.scrolling, globalPagination, globalStartEndRange );
|
|
}
|
|
return paginationCode;
|
|
},
|
|
|
|
/**
|
|
* Check is load more.
|
|
*
|
|
* @since 3.3
|
|
* @return {boolean}
|
|
*/
|
|
isLoadMore: function() {
|
|
return -1 !== jQuery.inArray( this.values.scrolling, [ 'infinite', 'load_more_button' ] );
|
|
},
|
|
|
|
/**
|
|
* Get reverse number.
|
|
*
|
|
* @since 3.3
|
|
* @param {String} value - the number value.
|
|
* @return {String}
|
|
*/
|
|
getReverseNum: function( value ) {
|
|
return -1 !== value.indexOf( '-' ) ? value.replace( '-', '' ) : '-' + value;
|
|
},
|
|
|
|
/**
|
|
* Get grid width value.
|
|
*
|
|
* @since 3.3
|
|
* @param {String} columns - the columns count.
|
|
* @return {String}
|
|
*/
|
|
getGridWidthVal: function( columns ) {
|
|
var cols = [ '100%', '50%', '33.3333%', '25%', '20%', '16.6666%' ];
|
|
return cols[ columns - 1 ];
|
|
},
|
|
|
|
/**
|
|
* Builds output.
|
|
*
|
|
* @since 3.3
|
|
* @param {Object} values - The values object.
|
|
* @return {String}
|
|
*/
|
|
buildOutput: function( atts ) {
|
|
var output = '',
|
|
tag = '',
|
|
childTag = '',
|
|
loopOutput = '',
|
|
liOutput = '',
|
|
_self = this,
|
|
lists;
|
|
|
|
if ( 'undefined' !== typeof atts.markup && 'undefined' !== typeof atts.markup.output && 'undefined' === typeof atts.query_data ) {
|
|
output = jQuery( jQuery.parseHTML( atts.markup.output ) ).html();
|
|
output = ( 'undefined' === typeof output ) ? atts.markup.output : output;
|
|
} else if ( 'undefined' !== typeof atts.query_data && 'undefined' !== typeof atts.query_data.loop_product ) {
|
|
if ( _.contains( [ 'slider', 'carousel', 'marquee', 'coverflow' ], this.values.layout ) ) {
|
|
tag = 'div';
|
|
childTag = 'div';
|
|
} else {
|
|
tag = 'ul';
|
|
childTag = 'li';
|
|
}
|
|
|
|
loopOutput = jQuery( atts.query_data.loop_product ).filter( function() {
|
|
return 3 !== this.nodeType; // 3 = Text Node.
|
|
} );
|
|
|
|
loopOutput.each( function() {
|
|
const $newElement = jQuery( '<' + childTag + '>' ).html( jQuery( this ).html() );
|
|
|
|
// Copy attributes from the original div.
|
|
jQuery.each( this.attributes, function( _, attr ) {
|
|
$newElement.attr( attr.name, attr.value );
|
|
} );
|
|
|
|
liOutput += $newElement[0].outerHTML;
|
|
} );
|
|
|
|
loopOutput = liOutput;
|
|
lists = jQuery( '<' + tag + '>' + loopOutput + '</' + tag + '>' );
|
|
|
|
lists.children( childTag ).each( function() {
|
|
jQuery( this ).removeClass( 'fusion-grid-column fusion-post-cards-grid-column swiper-slide product' )
|
|
.addClass( _self.buildColumnClasses( atts ) )
|
|
.find( '.fusion-column-wrapper' ).removeClass( 'fusion-carousel-item-wrapper' )
|
|
.addClass( _self.buildColumnWrapper( atts ) );
|
|
|
|
if ( 'yes' === atts.values.apply_alternate_post_cards ) {
|
|
let self = this,
|
|
style = jQuery( this ).attr( 'style' ),
|
|
cssString = '',
|
|
postCardValues = _.unescape( FusionPageBuilderApp.base64Decode( atts.values.alternate_post_cards ) ),
|
|
columnSpan = {
|
|
'columns_large': 1,
|
|
'columns_medium': 0,
|
|
'columns_small': 0,
|
|
};
|
|
|
|
const columnSizes = {
|
|
'columns_large': parseInt( atts.values.columns ),
|
|
'columns_medium': parseInt( atts.values.columns_medium ),
|
|
'columns_small': parseInt( atts.values.columns_small )
|
|
};
|
|
|
|
if ( '' !== postCardValues ) {
|
|
postCardValues = JSON.parse( postCardValues );
|
|
|
|
jQuery.each( postCardValues, function( index, postCard ) {
|
|
if ( 'undefined' !== typeof postCard.alternate_post_card && postCard.alternate_post_card === jQuery( self ).attr( 'data-post-card-id' ) ) {
|
|
columnSpan = {
|
|
'columns_large': '' !== postCard.column_span ? parseInt( postCard.column_span ) : 0,
|
|
'columns_medium': '' !== postCard.column_span_medium ? parseInt( postCard.column_span_medium ) : 0,
|
|
'columns_small': '' !== postCard.column_span_small ? parseInt( postCard.column_span_small ) : 0,
|
|
}
|
|
}
|
|
} );
|
|
|
|
jQuery.each( columnSizes, function( name, columns ) {
|
|
let cssValue = '';
|
|
|
|
if ( 0 === columnSpan[ name ] || 1 === columnSpan[ name ] ) {
|
|
cssValue += '';
|
|
} else if ( columnSpan[ name ] >= columns ) {
|
|
cssValue += '100%';
|
|
} else {
|
|
cssValue += 'calc(100% / ' + columns + ' * ' + columnSpan[ name ] + ')';
|
|
}
|
|
|
|
if ( cssValue ) {
|
|
if ( 'columns_large' === name ) {
|
|
cssValue = 'width:' + cssValue + ';';
|
|
} else {
|
|
cssValue = '--awb-' + name.replace( /_/g, '-' ) + ':' + cssValue + ';';
|
|
}
|
|
}
|
|
|
|
cssString += cssValue;
|
|
} );
|
|
|
|
style = style.replace( /width:[^;]*;/, '' ).replace( /--awb-columns-medium:[^;]*;/, '' ).replace( /--awb-columns-small:[^;]*;/, '' );
|
|
|
|
jQuery( this ).attr( 'style', style + cssString );
|
|
}
|
|
|
|
}
|
|
|
|
// Separators are always added into data, just remove if not valid.
|
|
if ( 'grid' !== _self.values.layout || 1 !== parseInt( _self.values.columns ) ) {
|
|
jQuery( this ).find( '.fusion-absolute-separator' ).remove();
|
|
} else {
|
|
jQuery( this ).find( '.fusion-absolute-separator' ).css( { display: 'block' } );
|
|
}
|
|
|
|
// No need this class for carousels & slider.
|
|
if ( 'slider' === _self.values.layout || 'carousel' === _self.values.layout || 'marquee' === _self.values.layout || 'coverflow' === _self.values.layout ) {
|
|
jQuery( this ).removeClass( 'fusion-layout-column' );
|
|
}
|
|
} );
|
|
output = lists.html();
|
|
}
|
|
return output;
|
|
},
|
|
|
|
buildFilters: function( atts ) {
|
|
var output = '';
|
|
if ( 'undefined' !== typeof atts.markup && 'undefined' !== typeof atts.markup.output && 'undefined' === typeof atts.query_data ) {
|
|
output = jQuery( jQuery.parseHTML( atts.markup.output ) );
|
|
output = ( 'undefined' === typeof output ) ? '' : '<div role="menubar">' + output.find( 'div[role="menubar"]' ).html() + '</div>';
|
|
} else if ( 'undefined' !== typeof atts.query_data && 'undefined' !== typeof atts.query_data.filters ) {
|
|
output = atts.query_data.filters;
|
|
}
|
|
|
|
return output;
|
|
},
|
|
|
|
/**
|
|
* Get inline style.
|
|
*
|
|
* @since 3.9
|
|
* @param {object} values
|
|
* @param {object} extras
|
|
* @return string
|
|
*/
|
|
getInlineStyle: function( values ) {
|
|
var cssVarsOptions,
|
|
customVars = [];
|
|
this.values = values;
|
|
|
|
cssVarsOptions = [
|
|
'arrow_bgcolor',
|
|
'arrow_color',
|
|
'arrow_hover_bgcolor',
|
|
'arrow_hover_color',
|
|
'arrow_border_color',
|
|
'arrow_border_hover_color',
|
|
'dots_color',
|
|
'dots_active_color',
|
|
'arrow_border_style',
|
|
'dots_align',
|
|
'columns',
|
|
'filters_line_height',
|
|
'filters_text_transform',
|
|
'filters_alignment',
|
|
'column_spacing',
|
|
'row_spacing',
|
|
'filters_color',
|
|
'filters_hover_color',
|
|
'filters_active_color',
|
|
'active_filter_border_color',
|
|
'filters_border_color',
|
|
'load_more_btn_color',
|
|
'load_more_btn_bg_color',
|
|
'load_more_btn_hover_color',
|
|
'load_more_btn_hover_bg_color'
|
|
];
|
|
|
|
cssVarsOptions.arrow_position_vertical = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_position_horizontal = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_box_width = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_box_height = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_border_sizes_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_border_sizes_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_border_sizes_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_border_sizes_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_border_radius_top_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_border_radius_top_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_border_radius_bottom_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.arrow_border_radius_bottom_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.dots_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.dots_active_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.dots_margin_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.dots_margin_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.dots_spacing = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.column_spacing = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.row_spacing = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.filters_font_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.filters_letter_spacing = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.active_filter_border_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.filters_border_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.filters_border_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.filters_border_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.filters_border_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.filters_height = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.stacking_offset = { 'callback': _.fusionGetValueWithUnit };
|
|
|
|
if ( ! this.isDefault( 'arrow_position_vertical' ) ) {
|
|
customVars.arrow_position_vertical_transform = 'none';
|
|
}
|
|
if ( ! this.isDefault( 'filters_border_left' ) ) {
|
|
customVars.filters_border_left_style = 'solid';
|
|
}
|
|
if ( ! this.isDefault( 'filters_border_right' ) ) {
|
|
customVars.filters_border_right_style = 'solid';
|
|
}
|
|
|
|
// Responsive Columns.
|
|
if ( 'grid' === values.layout || 'masonry' === values.layout ) {
|
|
_.each( [ 'medium', 'small' ], function( size ) {
|
|
var key = 'columns_' + size;
|
|
if ( ! this.isDefault( key ) ) {
|
|
customVars[ key ] = this.getGridWidthVal( values[ key ] );
|
|
}
|
|
}, this );
|
|
}
|
|
|
|
// Responsive Filters Alignment.
|
|
if ( 'no' !== values.filters && ( 'grid' === values.layout || 'masonry' === values.layout ) && 'posts' === values.source ) {
|
|
_.each( [ 'medium', 'small' ], function( size ) {
|
|
var key = 'filters_alignment_' + size;
|
|
customVars[ key ] = this.values[ key ];
|
|
}, this );
|
|
}
|
|
|
|
return this.getCssVarsForOptions( cssVarsOptions ) + this.getFontStylingVars( 'filters_font', values ) + this.getCustomCssVars( customVars );
|
|
},
|
|
|
|
/**
|
|
* Runs just after render on cancel.
|
|
*
|
|
* @since 3.5
|
|
* @return null
|
|
*/
|
|
beforeGenerateShortcode: function() {
|
|
var elementType = this.model.get( 'element_type' ),
|
|
options = fusionAllElements[ elementType ].params,
|
|
values = jQuery.extend( true, {}, fusionAllElements[ elementType ].defaults, _.fusionCleanParameters( this.model.get( 'params' ) ) );
|
|
|
|
if ( 'object' !== typeof options ) {
|
|
return;
|
|
}
|
|
|
|
// If images needs replaced lets check element to see if we have media being used to add to object.
|
|
if ( 'undefined' !== typeof FusionApp.data.replaceAssets && FusionApp.data.replaceAssets && ( 'undefined' !== typeof FusionApp.data.fusion_element_type || 'fusion_template' === FusionApp.getPost( 'post_type' ) ) ) {
|
|
|
|
this.mapStudioImages( options, values );
|
|
|
|
if ( '' !== values.post_card ) {
|
|
// If its not within object already, add it.
|
|
if ( 'undefined' === typeof FusionPageBuilderApp.mediaMap.post_cards[ values.post_card ] ) {
|
|
FusionPageBuilderApp.mediaMap.post_cards[ values.post_card ] = true;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|