495 lines
18 KiB
JavaScript
495 lines
18 KiB
JavaScript
/* global FusionPageBuilderViewManager */
|
|
/* jshint -W098 */
|
|
/* eslint no-empty-function: 0 */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Gallery View.
|
|
FusionPageBuilder.fusion_gallery_image = FusionPageBuilder.ChildElementView.extend( {
|
|
|
|
/**
|
|
* Runs after initial render.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
onRender: function() {
|
|
var self = this,
|
|
parentCid = this.model.get( 'parent' ),
|
|
parentView = FusionPageBuilderViewManager.getView( parentCid );
|
|
parentModel = FusionPageBuilderElements.find( function( model ) {
|
|
return model.get( 'cid' ) == parentCid;
|
|
} ),
|
|
parentValues = jQuery.extend( true, {}, fusionAllElements.fusion_gallery.defaults, _.fusionCleanParameters( parentModel.get( 'params' ) ) ),
|
|
lightboxID = '' !== parentValues.lightbox_id ? parentValues.lightbox_id : 'awb_gallery_' + parentCid;
|
|
|
|
if ( 'undefined' !== typeof this.model.attributes.selectors ) {
|
|
this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
|
|
this.setElementAttributes( this.$el, this.model.attributes.selectors );
|
|
}
|
|
|
|
// Re-render the parent view if the child was cloned
|
|
if ( 'undefined' !== typeof self.model.attributes.cloned && true === self.model.attributes.cloned ) {
|
|
delete self.model.attributes.cloned;
|
|
parentView.reRender();
|
|
parentView.fusionIsotope.reloadItems();
|
|
}
|
|
|
|
// Update isotope layout
|
|
setTimeout( function() {
|
|
if ( 'undefined' !== typeof parentView.fusionIsotope ) {
|
|
parentView.fusionIsotope.append( self.$el );
|
|
parentView.checkVerticalImages();
|
|
}
|
|
}, 50 );
|
|
|
|
if ( 'undefined' === typeof this.lightboxID ) {
|
|
this.lightboxID = 'iLightbox[' + lightboxID + ']';
|
|
}
|
|
|
|
this.initLightbox();
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
beforePatch: function() {
|
|
},
|
|
|
|
/**
|
|
* (Re-)Inits the lightbox.
|
|
*
|
|
* @since 2.0.3
|
|
* @return {void}
|
|
*/
|
|
initLightbox: function( remove ) {
|
|
var parentCid = this.model.get( 'parent' ),
|
|
parentModel = FusionPageBuilderElements.find( function( model ) {
|
|
return model.get( 'cid' ) == parentCid;
|
|
} ),
|
|
parentValues = jQuery.extend( true, {}, fusionAllElements.fusion_gallery.defaults, _.fusionCleanParameters( parentModel.get( 'params' ) ) ),
|
|
lightboxID = '' !== parentValues.lightbox_id ? parentValues.lightbox_id : 'awb_gallery_' + parentCid,
|
|
galleryLightboxName = 'iLightbox[' + lightboxID + ']',
|
|
galleryLightbox,
|
|
elements,
|
|
link;
|
|
|
|
if ( 'object' !== typeof jQuery( '#fb-preview' )[ 0 ].contentWindow.$ilInstances ) {
|
|
return;
|
|
}
|
|
|
|
// Remove the last active lightbox. If it is one of a gallery, reinit the gallery, but without the image element.
|
|
if ( this.lightboxID && galleryLightboxName !== this.lightboxID && 'object' === typeof jQuery( '#fb-preview' )[ 0 ].contentWindow.avadaLightBox && this.lightboxID in jQuery( '#fb-preview' )[ 0 ].contentWindow.$ilInstances ) {
|
|
galleryLightbox = jQuery( '#fb-preview' )[ 0 ].contentWindow.$ilInstances[ this.lightboxID ];
|
|
elements = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '.fusion-gallery' ).not( this.$el.closest( '.fusion-gallery' ) ).find( '[data-rel="' + this.lightboxID + '"]' );
|
|
elements = elements.add( jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( '.fusion-imageframe' ).find( '[data-rel="' + this.lightboxID + '"]' ) );
|
|
link = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( elements );
|
|
|
|
if ( 'undefined' !== typeof galleryLightbox ) {
|
|
galleryLightbox.destroy();
|
|
delete jQuery( '#fb-preview' )[ 0 ].contentWindow.$ilInstances[ this.lightboxID ];
|
|
|
|
if ( link.length ) {
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.$ilInstances[ this.lightboxID ] = link.iLightBox( jQuery( '#fb-preview' )[ 0 ].contentWindow.avadaLightBox.prepare_options( this.lightboxID ) );
|
|
}
|
|
}
|
|
}
|
|
|
|
galleryLightbox = jQuery( '#fb-preview' )[ 0 ].contentWindow.$ilInstances[ galleryLightboxName ];
|
|
|
|
if ( 'undefined' !== typeof remove && remove ) {
|
|
elements = this.$el.closest( '.fusion-gallery' ).find( '.fusion-builder-live-child-element:not([data-cid="' + this.model.get( 'cid' ) + '"]' ).find( '[data-rel="' + galleryLightboxName + '"]' );
|
|
} else {
|
|
elements = this.$el.closest( '.fusion-gallery' ).find( '[data-rel="' + galleryLightboxName + '"]' );
|
|
}
|
|
link = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( elements );
|
|
|
|
if ( 'object' === typeof jQuery( '#fb-preview' )[ 0 ].contentWindow.avadaLightBox ) {
|
|
if ( 'undefined' !== typeof galleryLightbox ) {
|
|
galleryLightbox.destroy();
|
|
delete jQuery( '#fb-preview' )[ 0 ].contentWindow.$ilInstances[ galleryLightboxName ];
|
|
}
|
|
|
|
if ( link.length ) {
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.$ilInstances[ galleryLightboxName ] = link.iLightBox( jQuery( '#fb-preview' )[ 0 ].contentWindow.avadaLightBox.prepare_options( galleryLightboxName ) );
|
|
}
|
|
}
|
|
|
|
this.lightboxID = galleryLightboxName;
|
|
},
|
|
|
|
/**
|
|
* Runs before view is removed.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
beforeRemove: function() {
|
|
var self = this,
|
|
parentCid = this.model.get( 'parent' ),
|
|
parentView = FusionPageBuilderViewManager.getView( parentCid );
|
|
|
|
if ( 'undefined' !== typeof parentView.fusionIsotope ) {
|
|
parentView.fusionIsotope.remove( self.$el );
|
|
}
|
|
|
|
if ( 'function' === typeof parentView.checkVerticalImages ) {
|
|
parentView.checkVerticalImages();
|
|
}
|
|
|
|
setTimeout( function() {
|
|
|
|
if ( 'undefined' !== typeof parentView.setPagination ) {
|
|
parentView.setPagination();
|
|
}
|
|
|
|
if ( 'undefined' !== typeof parentView.fusionIsotope ) {
|
|
parentView.fusionIsotope.reloadItems();
|
|
}
|
|
}, 100 );
|
|
|
|
self.initLightbox( true );
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
var parentCid = this.model.get( 'parent' ),
|
|
parentView = FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );
|
|
|
|
if ( 'undefined' !== typeof this.model.attributes.selectors ) {
|
|
this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
|
|
this.setElementAttributes( this.$el, this.model.attributes.selectors );
|
|
}
|
|
|
|
this.initLightbox();
|
|
|
|
// Force re-render for child option changes.
|
|
setTimeout( function() {
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( 'body' ).trigger( 'fusion-element-render-fusion_gallery', parentCid );
|
|
parentView.fusionIsotope.updateLayout();
|
|
}, 100 );
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object} - Returns the attributes.
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var attributes = {},
|
|
parentView = FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) ),
|
|
imageData = 'undefined' !== typeof parentView.imageMap ? parentView.imageMap.images[ this.model.attributes.params.image_id ] : undefined,
|
|
parentValues = atts.parentValues,
|
|
orientation = '';
|
|
|
|
// Validate values.
|
|
this.validateValues( atts.values );
|
|
this.validateValues( atts.parentValues );
|
|
|
|
attributes.values = atts.values;
|
|
attributes.parentValues = atts.parentValues;
|
|
|
|
// Added
|
|
attributes.imageData = imageData;
|
|
attributes.galleryLayout = parentValues.layout;
|
|
attributes.galleryLightbox = parentValues.lightbox;
|
|
attributes.galleryColumns = parentValues.columns;
|
|
attributes.imageWrapperAttr = this.buildImageWrapperAttr( parentValues );
|
|
attributes.counter = this.model.get( 'counter' );
|
|
attributes.captionHtml = this.generateCaption( parentValues, atts.values );
|
|
|
|
// Create attribute objects.
|
|
attributes.imagesAttr = this.buildImagesAttr( atts.values );
|
|
|
|
attributes.usingDynamicParent = this.isParentHasDynamicContent( parentValues );
|
|
|
|
if ( 'undefined' !== typeof imageData && 'undefined' !== typeof imageData.element_orientation_class && false !== imageData.element_orientation_class ) {
|
|
orientation = imageData.element_orientation_class;
|
|
} else {
|
|
this.$el.removeClass( 'fusion-element-landscape' );
|
|
}
|
|
|
|
this.$el.addClass( 'fusion-grid-column fusion-gallery-column ' + orientation );
|
|
|
|
if ( -1 !== jQuery.inArray( parentValues.caption_style, [ 'above', 'below' ] ) ) {
|
|
this.$el.addClass( 'awb-imageframe-style awb-imageframe-style-' + parentValues.caption_style + ' awb-imageframe-style-' + this.model.get( 'parent' ) );
|
|
} else {
|
|
this.$el.removeClass( 'awb-imageframe-style awb-imageframe-style-above awb-imageframe-style-below' );
|
|
}
|
|
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* Modifies the values.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {void}
|
|
*/
|
|
validateValues: function( values ) {
|
|
values.column_spacing = ( parseFloat( values.column_spacing ) / 2 ) + 'px';
|
|
values.bordersize = _.fusionValidateAttrValue( values.bordersize, 'px' );
|
|
values.border_radius = _.fusionValidateAttrValue( values.border_radius, 'px' );
|
|
|
|
if ( 'round' === values.border_radius ) {
|
|
values.border_radius = '50%';
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object} - Returns the attributes.
|
|
*/
|
|
buildAttr: function( values ) {
|
|
var imageIds = values.image_ids.split( ',' ),
|
|
totalNumOfColumns = imageIds.length,
|
|
attr = _.fusionVisibilityAtts( values.hide_on_mobile, {
|
|
class: 'fusion-gallery fusion-gallery-container fusion-grid-' + values.columns + ' fusion-columns-total-' + totalNumOfColumns + ' fusion-gallery-layout-' + values.layout
|
|
} ),
|
|
margin;
|
|
|
|
if ( values.column_spacing ) {
|
|
margin = ( -1 ) * parseFloat( values.column_spacing );
|
|
attr.style = 'margin:' + margin + 'px;';
|
|
}
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object} - Returns the attributes for the image wrapper.
|
|
*/
|
|
buildImageWrapperAttr: function( values ) {
|
|
var imageWrapperAttr = {
|
|
class: 'fusion-gallery-image',
|
|
style: ''
|
|
};
|
|
|
|
if ( '' !== values.bordersize && 0 !== values.bordersize ) {
|
|
imageWrapperAttr.style += 'border:' + values.bordersize + ' solid ' + values.bordercolor + ';';
|
|
|
|
if ( '0' != values.border_radius && '0px' !== values.border_radius && 'px' !== values.border_radius ) {
|
|
imageWrapperAttr.style += '-webkit-border-radius:' + values.border_radius + ';border-radius:' + values.border_radius + ';';
|
|
|
|
if ( '50%' === values.border_radius || 100 < parseInt( values.border_radius, 10 ) ) {
|
|
imageWrapperAttr.style += '-webkit-mask-image:-webkit-radial-gradient(circle, white, black);';
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( 'liftup' === values.hover_type && -1 !== jQuery.inArray( values.caption_style, [ 'off', 'above', 'below' ] ) ) {
|
|
imageWrapperAttr[ 'class' ] += ' fusion-gallery-image-liftup';
|
|
}
|
|
|
|
// Caption style.
|
|
if ( -1 === jQuery.inArray( values.caption_style, [ 'off', 'above', 'below' ] ) ) {
|
|
imageWrapperAttr[ 'class' ] += ' awb-imageframe-style awb-imageframe-style-' + values.caption_style;
|
|
}
|
|
|
|
return imageWrapperAttr;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @param {Object} queryData - The query data.
|
|
* @return {Object} - Returns the image attributes.
|
|
*/
|
|
buildImagesAttr: function( values ) {
|
|
var imagesAttr = {},
|
|
imageId = this.model.attributes.params.image_id,
|
|
parentCid = this.model.get( 'parent' ),
|
|
parentView = FusionPageBuilderViewManager.getView( parentCid ),
|
|
parentModel = FusionPageBuilderElements.find( function( model ) {
|
|
return model.get( 'cid' ) == parentCid;
|
|
} ),
|
|
parentValues = jQuery.extend( true, {}, fusionAllElements.fusion_gallery.defaults, _.fusionCleanParameters( parentModel.get( 'params' ) ) ),
|
|
lightboxID = '' !== parentValues.lightbox_id ? parentValues.lightbox_id : 'awb_gallery_' + parentCid,
|
|
image = 'undefined' !== typeof parentView.imageMap ? parentView.imageMap.images[ imageId ] : undefined,
|
|
columnSpacing,
|
|
isPortrait,
|
|
isLandscape,
|
|
borderColor;
|
|
|
|
if ( 'undefined' === typeof image ) {
|
|
image = {};
|
|
}
|
|
|
|
columnSpacing = 0;
|
|
isPortrait = false;
|
|
isLandscape = false;
|
|
borderColor = jQuery.AWB_Color( values.bordercolor );
|
|
|
|
imagesAttr = {};
|
|
|
|
if ( 'masonry' === values.layout ) {
|
|
imagesAttr.masonryWrapper = {
|
|
style: '',
|
|
class: 'fusion-masonry-element-container'
|
|
};
|
|
|
|
if ( image.url ) {
|
|
imagesAttr.masonryWrapper.style += 'background-image:url(' + image.url + ');';
|
|
}
|
|
|
|
if ( 'undefined' !== typeof image.image_data && true !== image.image_data.specific_element_orientation_class ) {
|
|
image.element_orientation_class = _.fusionGetElementOrientationClass( { imageWidth: image.image_data.width, imageHeight: image.image_data.height }, values.gallery_masonry_grid_ratio, values.gallery_masonry_width_double );
|
|
}
|
|
image.element_base_padding = _.fusionGetElementBasePadding( image.element_orientation_class );
|
|
|
|
if ( image.element_base_padding ) {
|
|
columnSpacing = 0;
|
|
|
|
if ( 'undefined' !== typeof image.element_orientation_class && false !== image.element_orientation_class ) {
|
|
isLandscape = -1 !== image.element_orientation_class.indexOf( 'fusion-element-landscape' );
|
|
isPortrait = -1 !== image.element_orientation_class.indexOf( 'fusion-element-portrait' );
|
|
}
|
|
|
|
if ( isLandscape || isPortrait ) {
|
|
columnSpacing = 2 * parseFloat( values.column_spacing );
|
|
}
|
|
|
|
// Calculate the correct size of the image wrapper container, based on orientation and column spacing.
|
|
if ( values.bordersize && 'transparent' !== values.bordercolor && 0 !== borderColor.alpha() ) {
|
|
if ( isLandscape || isPortrait ) {
|
|
columnSpacing += 2 * parseFloat( values.bordersize );
|
|
}
|
|
}
|
|
|
|
if ( isLandscape && isPortrait ) {
|
|
imagesAttr.masonryWrapper.style += 'padding-top:calc((100% - ' + columnSpacing + 'px) * ' + image.element_base_padding + ' + ' + columnSpacing + 'px);';
|
|
} else if ( isLandscape ) {
|
|
imagesAttr.masonryWrapper.style += 'padding-top:calc((100% - ' + columnSpacing + 'px) * ' + image.element_base_padding + ');';
|
|
} else if ( isPortrait ) {
|
|
imagesAttr.masonryWrapper.style += 'padding-top:calc(100% * ' + image.element_base_padding + ' + ' + columnSpacing + 'px);';
|
|
} else {
|
|
imagesAttr.masonryWrapper.style += 'padding-top:calc(100% * ' + image.element_base_padding + ');';
|
|
}
|
|
}
|
|
|
|
// Masonry image position.
|
|
if ( '' !== values.masonry_image_position ) {
|
|
imagesAttr.masonryWrapper.style += 'background-position:' + values.masonry_image_position + ';';
|
|
}
|
|
}
|
|
|
|
imagesAttr.images = {
|
|
style: '',
|
|
class: ''
|
|
};
|
|
|
|
if ( 'liftup' !== values.hover_type ) {
|
|
imagesAttr.images[ 'class' ] += ' hover-type-' + values.hover_type;
|
|
}
|
|
|
|
if ( '' !== values.column_spacing ) {
|
|
imagesAttr.images.style = 'padding:' + values.column_spacing + ';';
|
|
}
|
|
|
|
if ( values.lightbox && 'no' !== values.lightbox ) {
|
|
imagesAttr.link = {
|
|
href: image.pic_link,
|
|
class: 'fusion-lightbox'
|
|
};
|
|
|
|
imagesAttr.link[ 'data-rel' ] = 'iLightbox[' + lightboxID + ']';
|
|
|
|
// TODO: fix
|
|
// if ( 'undefined' !== typeof image.image_data ) {
|
|
|
|
// if ( -1 !== values.lightbox_content.indexOf( 'title' ) ) {
|
|
// imagesAttr.link['data-title'] = image.image_data.title;
|
|
// imagesAttr.link.title = image.image_data.title;
|
|
// }
|
|
// if ( -1 !== values.lightbox_content.indexOf( 'caption' ) ) {
|
|
// imagesAttr.link['data-caption'] = image.image_data.caption;
|
|
// }
|
|
// }
|
|
}
|
|
|
|
return imagesAttr;
|
|
},
|
|
|
|
/**
|
|
* Generate caption markup.
|
|
*
|
|
* @since 3.5
|
|
* @param {string} values - The values object.
|
|
* @return {string}
|
|
*/
|
|
generateCaption: function( values, childValues ) {
|
|
var content = '<div class="awb-imageframe-caption-container"><div class="awb-imageframe-caption">',
|
|
imageId,
|
|
parentView,
|
|
image,
|
|
title = '',
|
|
caption = '',
|
|
title_tag = '';
|
|
|
|
if ( 'off' === values.caption_style ) {
|
|
return '';
|
|
}
|
|
|
|
imageId = this.model.attributes.params.image_id,
|
|
parentView = FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) ),
|
|
image = 'undefined' !== typeof parentView.imageMap ? parentView.imageMap.images[ imageId ] : undefined;
|
|
|
|
if ( 'undefined' === typeof image ) {
|
|
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 ) );
|