377 lines
9.7 KiB
JavaScript
377 lines
9.7 KiB
JavaScript
/* global FusionEvents */
|
|
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Image Before After Element View.
|
|
FusionPageBuilder.fusion_image_before_after = FusionPageBuilder.ElementView.extend( {
|
|
|
|
/**
|
|
* Runs when element is first init.
|
|
*
|
|
* @since 2.0.0
|
|
* @return {void}
|
|
*/
|
|
onInit: function() {
|
|
this.listenTo( FusionEvents, 'fusion-preview-toggle', this.previewToggle );
|
|
this.listenTo( FusionEvents, 'fusion-iframe-loaded', this.initElement );
|
|
},
|
|
|
|
/**
|
|
* Init Element.
|
|
*
|
|
* @since 2.0.0
|
|
* @return {void}
|
|
*/
|
|
initElement: function() {
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( 'body' ).trigger( 'fusion-element-render-fusion_image_before_after', this.model.attributes.cid );
|
|
},
|
|
|
|
/**
|
|
* Preview mode toggled.
|
|
*
|
|
* @since 2.0.0
|
|
* @return {void}
|
|
*/
|
|
previewToggle: function() {
|
|
if ( jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( 'body' ).hasClass( 'fusion-builder-preview-mode' ) ) {
|
|
this.disableDroppableElement();
|
|
} else {
|
|
this.enableDroppableElement();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Runs before view DOM is patched.
|
|
*
|
|
* @since 2.0.0
|
|
* @return {void}
|
|
*/
|
|
beforePatch: function() {
|
|
this.$el.css( 'min-height', this.$el.outerHeight() + 'px' );
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
var self = this;
|
|
|
|
this._refreshJs();
|
|
|
|
setTimeout( function() {
|
|
self.$el.css( 'min-height', '0px' );
|
|
}, 300 );
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var attributes = {};
|
|
|
|
if ( '' !== atts.values.before_image || '' !== atts.values.after_image ) {
|
|
|
|
// Validate values.
|
|
this.validateValues( atts.values );
|
|
|
|
// Create attribute objects
|
|
attributes.attr = this.buildAttr( atts.values );
|
|
attributes.attrWrapper = this.buildWrapperAttr( atts.values );
|
|
attributes.attrLink = this.buildLinkAttr( atts.values );
|
|
attributes.attrBeforeImage = this.buildBeforeImageAttr( atts.values );
|
|
attributes.attrAfterImage = this.buildAfterImageAttr( atts.values );
|
|
attributes.attrOverlay = this.buildOverlayAttr( atts.values );
|
|
attributes.attrHandle = this.buildHandleAttr( atts.values );
|
|
|
|
// Any extras that need passed on.
|
|
attributes.values = atts.values;
|
|
}
|
|
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* Modifies the values.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {void}
|
|
*/
|
|
validateValues: function( values ) {
|
|
|
|
values.offset = parseInt( values.offset, 10 ) / 100;
|
|
values.font_size = _.fusionValidateAttrValue( values.font_size, 'px' );
|
|
values.borderradius = _.fusionValidateAttrValue( values.borderradius, 'px' );
|
|
values.bordersize = _.fusionValidateAttrValue( values.bordersize, 'px' );
|
|
values.max_width = _.fusionValidateAttrValue( values.max_width, 'px' );
|
|
values.margin_bottom = _.fusionValidateAttrValue( values.margin_bottom, 'px' );
|
|
values.margin_left = _.fusionValidateAttrValue( values.margin_left, 'px' );
|
|
values.margin_right = _.fusionValidateAttrValue( values.margin_right, 'px' );
|
|
values.margin_top = _.fusionValidateAttrValue( values.margin_top, 'px' );
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildAttr: function( values ) {
|
|
var attr = {
|
|
class: 'fusion-image-before-after-element',
|
|
style: ''
|
|
},
|
|
cid = this.model.get( 'cid' );
|
|
|
|
if ( 'switch' === values.type ) {
|
|
attr[ 'class' ] += ' fusion-image-switch';
|
|
} else if ( 'before_after' === values.type ) {
|
|
attr[ 'class' ] += ' fusion-image-before-after fusion-image-before-after-container';
|
|
|
|
if ( values.offset || 0 == values.offset ) {
|
|
attr[ 'data-offset' ] = values.offset.toString();
|
|
}
|
|
|
|
if ( values.orientation ) {
|
|
attr[ 'data-orientation' ] = values.orientation;
|
|
}
|
|
|
|
if ( values.handle_movement ) {
|
|
if ( 'drag_click' === values.handle_movement ) {
|
|
attr[ 'data-move-with-handle-only' ] = 'true';
|
|
attr[ 'data-click-to-move' ] = 'true';
|
|
} else if ( 'drag' === values.handle_movement ) {
|
|
attr[ 'data-move-with-handle-only' ] = 'true';
|
|
} else if ( 'hover' === values.handle_movement ) {
|
|
attr[ 'data-move-slider-on-hover' ] = 'true';
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( '' !== values.max_width ) {
|
|
attr.style += 'max-width:' + values.max_width + ';';
|
|
}
|
|
|
|
attr[ 'class' ] += ' fusion-image-before-after-cid' + cid;
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildWrapperAttr: function( values ) {
|
|
var attr = _.fusionVisibilityAtts( values.hide_on_mobile, {
|
|
class: 'fusion-image-before-after-wrapper',
|
|
style: this.getStyleVars( values )
|
|
} ),
|
|
cid = this.model.get( 'cid' );
|
|
|
|
if ( values.orientation && 'before_after' === values.type ) {
|
|
attr[ 'class' ] += ' fusion-image-before-after-' + values.orientation;
|
|
}
|
|
|
|
if ( '' !== values.type ) {
|
|
attr[ 'class' ] += ' type-' + values.type.replace( '_', '-' );
|
|
}
|
|
|
|
if ( '' !== values.label_hover_type ) {
|
|
const hoverTypeExtra = 'out-image-up-down' === values.label_placement ? 'out-' : '';
|
|
attr[ 'class' ] += ' hover-type-' + hoverTypeExtra + values.label_hover_type;
|
|
}
|
|
|
|
if ( '' !== values.alignment ) {
|
|
attr[ 'class' ] += ' has-alignment';
|
|
attr[ 'class' ] += ' align-' + values.alignment;
|
|
}
|
|
|
|
if ( '' !== values[ 'class' ] ) {
|
|
attr[ 'class' ] += ' ' + values[ 'class' ];
|
|
}
|
|
|
|
if ( '' !== values.id ) {
|
|
attr.id = values.id;
|
|
}
|
|
|
|
attr = _.fusionAnimations( values, attr );
|
|
|
|
attr[ 'class' ] += ' fusion-image-before-after-wrapper-cid' + cid;
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds link attributes.
|
|
*
|
|
* @since 2.2
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildLinkAttr: function( values ) {
|
|
var attr = {
|
|
class: 'fusion-image-switch-link',
|
|
href: values.link,
|
|
target: values.target,
|
|
rel: ''
|
|
};
|
|
|
|
if ( '_blank' === values.target ) {
|
|
attr.rel = 'noopener noreferrer';
|
|
}
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildBeforeImageAttr: function( values ) {
|
|
var attr = {
|
|
class: 'before_after' === values.type ? 'fusion-image-before-after-before' : 'fusion-image-switch-before',
|
|
src: values.before_image,
|
|
alt: ''
|
|
};
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildAfterImageAttr: function( values ) {
|
|
var attr = {
|
|
class: 'before_after' === values.type ? 'fusion-image-before-after-after' : 'fusion-image-switch-after',
|
|
src: values.after_image,
|
|
alt: ''
|
|
};
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildOverlayAttr: function( values ) {
|
|
var attr = {
|
|
class: 'fusion-image-before-after-overlay'
|
|
};
|
|
|
|
if ( values.label_placement && '' !== values.label_placement ) {
|
|
attr[ 'class' ] += ' before-after-overlay-' + values.label_placement;
|
|
}
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildHandleAttr: function( values ) {
|
|
var attr = {
|
|
class: 'fusion-image-before-after-handle'
|
|
};
|
|
|
|
if ( values.handle_type && 'default' !== values.handle_type ) {
|
|
attr[ 'class' ] += ' fusion-image-before-after-handle-' + values.handle_type;
|
|
}
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Get style variables.
|
|
*
|
|
* @param {Object} values
|
|
* @returns string
|
|
*/
|
|
getStyleVars: function( values ) {
|
|
var cssVars = [
|
|
'handle_color',
|
|
'font_size',
|
|
'accent_color',
|
|
'bordersize',
|
|
'borderradius',
|
|
'bordercolor',
|
|
'margin_top',
|
|
'margin_right',
|
|
'margin_bottom',
|
|
'margin_left'
|
|
],
|
|
customCSSVars = {},
|
|
color,
|
|
colorObj;
|
|
|
|
this.values = values;
|
|
|
|
if ( 'circle' !== values.handle_type && 'arrows' !== values.handle_type ) {
|
|
cssVars.push( 'handle_bg' );
|
|
}
|
|
|
|
if ( values.handle_color ) {
|
|
if ( values.handle_type && 'circle' === values.handle_type ) {
|
|
color = values.handle_color;
|
|
colorObj = jQuery.AWB_Color( color );
|
|
|
|
customCSSVars[ 'handle-accent-color' ] = _.fusionAutoCalculateAccentColor( color );
|
|
customCSSVars[ 'handle-transparent-color' ] = colorObj.alpha( 0.6 ).toVarOrRgbaString();
|
|
}
|
|
}
|
|
|
|
if ( values.accent_color ) {
|
|
color = values.accent_color;
|
|
colorObj = jQuery.AWB_Color( color );
|
|
|
|
customCSSVars[ 'accent-color-bg' ] = 'transparent';
|
|
if ( 'out-image-up-down' !== values.label_placement ) {
|
|
customCSSVars[ 'accent-color-bg' ] = colorObj.alpha( colorObj.alpha() * 0.15 ).toVarOrRgbaString();
|
|
}
|
|
}
|
|
|
|
if ( values.max_width ) {
|
|
customCSSVars[ 'element-width' ] = '100%';
|
|
customCSSVars[ 'element-max-width' ] = values.max_width;
|
|
}
|
|
|
|
if ( values.transition_time ) {
|
|
customCSSVars.transition_time = values.transition_time + 's';
|
|
}
|
|
|
|
return this.getCssVarsForOptions( cssVars ) + this.getCustomCssVars( customCSSVars );
|
|
}
|
|
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|