152 lines
4.2 KiB
JavaScript
152 lines
4.2 KiB
JavaScript
/* global FusionEvents, FusionPageBuilderApp */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
FusionPageBuilder.options = FusionPageBuilder.options || {};
|
|
|
|
FusionPageBuilder.options.fusionImageFocusPoint = {
|
|
optionFocusImage: function( el ) {
|
|
var points = el.find( '.fusion-image-focus-point' );
|
|
var model = this.model;
|
|
|
|
points.each( function() {
|
|
var point = jQuery( this ).find( '.point' );
|
|
var field = jQuery( this ).find( 'input.fusion-builder-focus-point-field' );
|
|
var preview = jQuery( this ).find( '.preview' );
|
|
var previewImg = preview.find( '.image' );
|
|
var placeHolder = preview.find( '.no-image-holder' );
|
|
var paramName = previewImg.data( 'image' );
|
|
var image = el.find( `[data-option-id="${paramName}"]` ).find( '.fusion-builder-upload-preview img' );
|
|
var imageValue = model.attributes.params[ paramName ];
|
|
var dynamicData = model.attributes.params.dynamic_params;
|
|
var lazy = jQuery( this ).data( 'lazy' );
|
|
|
|
if ( dynamicData ) {
|
|
dynamicData = FusionPageBuilderApp.base64Decode( dynamicData );
|
|
}
|
|
if ( dynamicData && '' !== dynamicData[ paramName ] ) {
|
|
imageValue = false;
|
|
}
|
|
if ( imageValue ) {
|
|
placeHolder.hide();
|
|
previewImg.show();
|
|
previewImg.append( image.clone() );
|
|
} else {
|
|
previewImg.hide();
|
|
placeHolder.show();
|
|
}
|
|
FusionEvents.on( 'awb-image-upload-url-' + paramName, function( url ) {
|
|
if ( url ) {
|
|
image = '<img src="' + url + '" alt="">';
|
|
previewImg.find( 'img' ).remove();
|
|
previewImg.append( image );
|
|
previewImg.show();
|
|
placeHolder.hide();
|
|
} else {
|
|
previewImg.find( 'img' ).remove();
|
|
previewImg.hide();
|
|
placeHolder.show();
|
|
}
|
|
} );
|
|
|
|
point.draggable( {
|
|
containment: 'parent',
|
|
scroll: false,
|
|
snap: '.position-point',
|
|
snapMode: 'inner',
|
|
snapTolerance: 10,
|
|
drag: function () {
|
|
var pointEl = jQuery( this );
|
|
var top = parseInt( 100 * parseFloat( pointEl.css( 'top' ) ) / parseFloat( pointEl.parent().height() ) );
|
|
var left = parseInt( 100 * parseFloat( pointEl.css( 'left' ) ) / parseFloat( pointEl.parent().width() ) );
|
|
|
|
if ( !lazy ) {
|
|
field.val( `${left}% ${top}%` ).trigger( 'change' );
|
|
}
|
|
|
|
},
|
|
stop: function () {
|
|
var pointEl = jQuery( this );
|
|
var top = parseInt( 100 * parseFloat( pointEl.css( 'top' ) ) / parseFloat( pointEl.parent().height() ) );
|
|
var left = parseInt( 100 * parseFloat( pointEl.css( 'left' ) ) / parseFloat( pointEl.parent().width() ) );
|
|
|
|
field.val( `${left}% ${top}%` ).trigger( 'change' );
|
|
}
|
|
} );
|
|
|
|
const $defaultReset = point.closest( '.fusion-builder-option' ).find( '.fusion-builder-default-reset' );
|
|
|
|
// Default reset icon, set value to empty.
|
|
$defaultReset.on( 'click', function( event ) {
|
|
var dataDefault,
|
|
top = '50%',
|
|
left = '50%';
|
|
|
|
event.preventDefault();
|
|
dataDefault = jQuery( this ).find( '.fusion-range-default' ).attr( 'data-default' ) || '';
|
|
|
|
if ( dataDefault && 'string' === typeof dataDefault ) {
|
|
top = dataDefault.split( ' ' )[ 1 ];
|
|
left = dataDefault.split( ' ' )[ 0 ];
|
|
}
|
|
point.css( {
|
|
top,
|
|
left
|
|
} );
|
|
field.val( dataDefault ).trigger( 'change' );
|
|
|
|
} );
|
|
|
|
jQuery( '.position-point' ).on( 'click', function( event ) {
|
|
var top = '50%',
|
|
left = '50%';
|
|
event.preventDefault();
|
|
|
|
const $el = jQuery( this );
|
|
if ( $el.hasClass( 'top-left' ) ) {
|
|
top = 0;
|
|
left = 0;
|
|
}
|
|
if ( $el.hasClass( 'top-center' ) ) {
|
|
top = 0;
|
|
left = '50%';
|
|
}
|
|
if ( $el.hasClass( 'top-right' ) ) {
|
|
top = 0;
|
|
left = '100%';
|
|
}
|
|
if ( $el.hasClass( 'center-left' ) ) {
|
|
top = '50%';
|
|
left = 0;
|
|
}
|
|
if ( $el.hasClass( 'center-center' ) ) {
|
|
top = '50%';
|
|
left = '50%';
|
|
}
|
|
if ( $el.hasClass( 'center-right' ) ) {
|
|
top = '50%';
|
|
left = '100%';
|
|
}
|
|
if ( $el.hasClass( 'bottom-left' ) ) {
|
|
top = '100%';
|
|
left = 0;
|
|
}
|
|
if ( $el.hasClass( 'bottom-center' ) ) {
|
|
top = '100%';
|
|
left = '50%';
|
|
}
|
|
if ( $el.hasClass( 'bottom-right' ) ) {
|
|
top = '100%';
|
|
left = '100%';
|
|
}
|
|
point.css( {
|
|
top,
|
|
left
|
|
} );
|
|
field.val( `${left} ${top}` ).trigger( 'change' );
|
|
|
|
} );
|
|
} );
|
|
|
|
|
|
}
|
|
};
|