362 lines
10 KiB
JavaScript
362 lines
10 KiB
JavaScript
/* global FusionPageBuilderViewManager */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Image Carousel Child View.
|
|
FusionPageBuilder.fusion_image = FusionPageBuilder.ChildElementView.extend( {
|
|
|
|
/**
|
|
* Runs during render() call.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
onRender: function() {
|
|
var parentView,
|
|
queryData = this.model.get( 'query_data' );
|
|
|
|
if ( 'undefined' !== typeof this.model.attributes.selectors ) {
|
|
this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
|
|
this.setElementAttributes( this.$el, this.model.attributes.selectors );
|
|
}
|
|
|
|
// Update the parent image map with latest query data images.
|
|
if ( 'undefined' !== typeof queryData ) {
|
|
parentView = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );
|
|
parentView.updateImageMap( queryData );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
beforePatch: function() {
|
|
var parentView = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) ),
|
|
queryData = this.model.get( 'query_data' );
|
|
|
|
if ( true === parentView.model.attributes.showPlaceholder && 'undefined' !== typeof this.model.attributes.params.image && '' !== this.model.attributes.params.image ) {
|
|
this.$el.closest( '.fusion-image-carousel' ).removeClass( 'fusion-show-placeholder' );
|
|
parentView.model.attributes.showPlaceholder = false;
|
|
}
|
|
|
|
// Update the parent image map with latest query data images.
|
|
if ( 'undefined' !== typeof queryData ) {
|
|
parentView.updateImageMap( queryData );
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Runs before element is removed.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
beforeRemove: function() {
|
|
var parentView = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );
|
|
|
|
if ( false === parentView.model.attributes.showPlaceholder && 1 === parentView.model.children.length ) {
|
|
this.$el.closest( '.fusion-image-carousel' ).addClass( 'fusion-show-placeholder' );
|
|
parentView.model.attributes.showPlaceholder = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
var parentCid = this.model.get( 'parent' ),
|
|
parentView,
|
|
queryData = this.model.get( 'query_data' );
|
|
|
|
if ( 'undefined' !== typeof this.model.attributes.selectors ) {
|
|
this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
|
|
this.setElementAttributes( this.$el, this.model.attributes.selectors );
|
|
}
|
|
|
|
// Force re-render for child option changes.
|
|
setTimeout( function() {
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( 'body' ).trigger( 'fusion-element-render-fusion_images', parentCid );
|
|
}, 10 );
|
|
|
|
// Update the parent image map with latest query data images.
|
|
if ( 'undefined' !== typeof queryData ) {
|
|
parentView = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );
|
|
parentView.updateImageMap( queryData );
|
|
}
|
|
|
|
// 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 attributes = {};
|
|
|
|
// Validate values.
|
|
this.validateValues( atts.values );
|
|
this.buildAttr( atts.values );
|
|
this.extras = atts.extras;
|
|
|
|
// Set selectors.
|
|
this.wrapperSelector();
|
|
|
|
// Create attribute objects
|
|
attributes.attrCarouselLink = this.buildCarouselLinkAttr( atts );
|
|
attributes.attrImageWrapper = this.buildImageWrapperAttr( atts );
|
|
attributes.attrItemWrapper = this.buildItemWrapperAttr( atts );
|
|
attributes.imageElement = this.buildImageElement( atts );
|
|
attributes.parentValues = atts.parentValues;
|
|
attributes.captionHtml = this.generateCaption( atts.parentValues, atts.values, atts.query_data );
|
|
|
|
// Any extras that need passed on.
|
|
attributes.cid = this.model.get( 'cid' );
|
|
attributes.parent = this.model.get( 'parent' );
|
|
attributes.output = atts.values.element_content;
|
|
attributes.mouseScroll = atts.values.mouse_scroll;
|
|
attributes.link = atts.values.link;
|
|
attributes.lightbox = atts.parentValues.lightbox;
|
|
|
|
attributes.usingDynamicParent = this.isParentHasDynamicContent( atts.parentValues );
|
|
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* Modifies the values.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {void}
|
|
*/
|
|
validateValues: function( values ) {
|
|
|
|
// Make sure the title text is not wrapped with an unattributed p tag.
|
|
if ( 'undefined' !== typeof values.element_content ) {
|
|
values.element_content = values.element_content.trim();
|
|
values.element_content = values.element_content.replace( /(<p[^>]+?>|<p>|<\/p>)/img, '' );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @return {Object}
|
|
*/
|
|
buildAttr: function() {
|
|
var attr = {
|
|
class: 'swiper-slide'
|
|
};
|
|
|
|
this.model.set( 'selectors', attr );
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildItemWrapperAttr: function( atts ) {
|
|
var attr = {
|
|
class: 'fusion-carousel-item-wrapper'
|
|
},
|
|
parentValues = atts.parentValues;
|
|
|
|
if ( -1 !== jQuery.inArray( parentValues.caption_style, [ 'off', 'above', 'below' ] ) ) {
|
|
attr[ 'class' ] += ' awb-imageframe-style awb-imageframe-style-' + parentValues.caption_style;
|
|
}
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Set image element.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildImageElement: function( atts ) {
|
|
var html = '',
|
|
imageSize = 'full',
|
|
values = atts.values,
|
|
parentValues = atts.parentValues,
|
|
queryData = atts.query_data,
|
|
parentView = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );
|
|
|
|
if ( 'fixed' === parentValues.picture_size ) {
|
|
imageSize = 'portfolio-two';
|
|
if ( '6' === parentValues.columns || '5' === parentValues.columns || '4' === parentValues.columns ) {
|
|
imageSize = 'blog-medium';
|
|
}
|
|
}
|
|
|
|
if ( 'undefined' !== typeof queryData && 'undefined' !== typeof queryData[ values.image ] ) {
|
|
html = queryData[ values.image ][ imageSize ];
|
|
} else if ( 'undefined' !== typeof parentView.imageMap[ values.image ] ) {
|
|
html = parentView.imageMap[ values.image ][ imageSize ];
|
|
} else {
|
|
html = '<img src="' + values.image + '" alt="' + values.alt + '"/>';
|
|
}
|
|
|
|
if ( -1 === jQuery.inArray( parentValues.caption_style, [ 'off', 'above', 'below' ] ) ) {
|
|
html += this.generateCaption( parentValues, values, queryData );
|
|
}
|
|
|
|
return html;
|
|
},
|
|
|
|
/**
|
|
* Set selectors.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
wrapperSelector: function() {
|
|
var wrapperSelector = {
|
|
class: 'swiper-slide'
|
|
};
|
|
|
|
this.model.set( 'selectors', wrapperSelector );
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildCarouselLinkAttr: function( atts ) {
|
|
var attr = {},
|
|
values = atts.values,
|
|
parentValues = atts.parentValues,
|
|
queryData = atts.query_data;
|
|
|
|
if ( 'yes' === parentValues.lightbox ) {
|
|
|
|
if ( ! values.link || null === values.link ) {
|
|
values.link = values.image;
|
|
}
|
|
|
|
attr[ 'data-rel' ] = 'iLightbox[image_carousel_' + this.model.get( 'parent' ) + ']';
|
|
|
|
if ( 'undefined' !== typeof queryData && 'undefined' !== typeof queryData.image_data ) {
|
|
attr[ 'data-caption' ] = queryData.image_data.caption;
|
|
attr[ 'data-title' ] = queryData.image_data.title;
|
|
attr[ 'aria-label' ] = queryData.image_data.title;
|
|
}
|
|
}
|
|
|
|
attr.href = values.link;
|
|
|
|
attr.target = values.linktarget;
|
|
if ( '_blank' === values.linktarget ) {
|
|
attr.rel = 'noopener noreferrer';
|
|
}
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildImageWrapperAttr: function( atts ) {
|
|
var attr = {
|
|
class: 'fusion-image-wrapper'
|
|
},
|
|
parentValues = atts.parentValues;
|
|
|
|
if ( parentValues.hover_type && -1 !== jQuery.inArray( parentValues.caption_style, [ 'off', 'above', 'below' ] ) ) {
|
|
attr[ 'class' ] += ' hover-type-' + parentValues.hover_type;
|
|
}
|
|
|
|
// Caption style.
|
|
if ( -1 === jQuery.inArray( parentValues.caption_style, [ 'off', 'above', 'below' ] ) ) {
|
|
attr[ 'class' ] += ' awb-imageframe-style awb-imageframe-style-' + parentValues.caption_style;
|
|
}
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Generate caption markup.
|
|
*
|
|
* @since 3.5
|
|
* @param {string} values - The values object.
|
|
* @return {string}
|
|
*/
|
|
generateCaption: function( values, childValues, queryData ) { // eslint-disable-line no-unused-vars
|
|
var content = '<div class="awb-imageframe-caption-container"><div class="awb-imageframe-caption">',
|
|
parentView,
|
|
image,
|
|
title = '',
|
|
caption = '',
|
|
title_tag = '';
|
|
|
|
if ( 'off' === values.caption_style ) {
|
|
return '';
|
|
}
|
|
|
|
parentView = FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) ),
|
|
image = parentView.imageMap[ childValues.image ];
|
|
|
|
if ( 'undefined' === typeof image || 'undefined' === typeof image.image_data ) {
|
|
return '';
|
|
}
|
|
|
|
// from image data.
|
|
if ( image.image_data.title ) {
|
|
title = image.image_data.title;
|
|
}
|
|
if ( image.image_data.caption ) {
|
|
caption = image.image_data.caption;
|
|
}
|
|
|
|
// from element data.
|
|
if ( '' !== childValues.image_title ) {
|
|
title = childValues.image_title;
|
|
}
|
|
if ( '' !== childValues.image_caption ) {
|
|
caption = childValues.image_caption;
|
|
}
|
|
|
|
if ( '' !== title ) {
|
|
title_tag = 'div' === values.caption_title_tag ? 'div' : 'h' + values.caption_title_tag;
|
|
content += '<' + title_tag + ' class="awb-imageframe-caption-title">' + title + '</' + title_tag + '>';
|
|
}
|
|
|
|
if ( '' !== caption ) {
|
|
content += '<p class="awb-imageframe-caption-text">' + caption + '</p>';
|
|
}
|
|
content += '</div></div>';
|
|
|
|
return content;
|
|
}
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|