308 lines
8.4 KiB
JavaScript
308 lines
8.4 KiB
JavaScript
/* global fusionAllElements, FusionPageBuilderElements, FusionPageBuilderApp */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Toggle child View
|
|
FusionPageBuilder.fusion_image_hotspot_point = FusionPageBuilder.ChildElementView.extend( {
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 3.5
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
|
|
var attributes = {},
|
|
parent = this.model.get( 'parent' ),
|
|
parentModel = FusionPageBuilderElements.find( function( model ) {
|
|
return model.get( 'cid' ) == parent;
|
|
} );
|
|
|
|
this.parentValues = jQuery.extend( true, {}, fusionAllElements.fusion_image_hotspots.defaults, _.fusionCleanParameters( parentModel.get( 'params' ) ) );
|
|
this.values = atts.values;
|
|
|
|
attributes.cid = this.model.get( 'cid' );
|
|
attributes.hotspotItemText = atts.values.title;
|
|
attributes.icon = atts.values.icon;
|
|
attributes.iconAttr = this.childElemIconAttr( atts.values );
|
|
|
|
this.childElemAttr( atts.values );
|
|
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* Create the child element attributes.
|
|
*
|
|
* @since 3.5
|
|
* @param {Object} values - The options.
|
|
* @return {Object}
|
|
*/
|
|
childElemAttr: function( values ) {
|
|
// Using the style attribute, because jQuery methods auto-corrects invalid values.
|
|
var style = this.getChildInlineStyle( values ),
|
|
placement = '',
|
|
animationClass = '',
|
|
textArea,
|
|
title,
|
|
popoverContent = values.long_text;
|
|
|
|
this.$el.addClass( 'awb-image-hotspots-hotspot' );
|
|
|
|
this.$el.addClass( 'awb-image-hotspots-hotspot-' + this.model.get( 'cid' ) );
|
|
|
|
animationClass = this.animationToClassName( this.parentValues.items_animation );
|
|
if ( animationClass ) {
|
|
this.$el.addClass( animationClass );
|
|
}
|
|
|
|
this.$el.attr( 'style', style );
|
|
|
|
try {
|
|
if ( popoverContent && '' !== popoverContent && FusionPageBuilderApp.base64Encode( FusionPageBuilderApp.base64Decode( popoverContent ) ) === popoverContent ) {
|
|
popoverContent = FusionPageBuilderApp.base64Decode( popoverContent );
|
|
}
|
|
} catch ( error ) {
|
|
console.log( error ); // jshint ignore:line
|
|
}
|
|
|
|
// Remove the attributes, because this element is not totally replaced.
|
|
this.$el.removeAttr( 'role' );
|
|
this.$el.removeAttr( 'tabindex' );
|
|
this.$el.removeAttr( 'href' );
|
|
this.$el.removeAttr( 'title' );
|
|
this.$el.removeAttr( 'target' );
|
|
this.$el.removeAttr( 'data-awb-toggle-image-hotspot-popover' );
|
|
this.$el.removeAttr( 'data-trigger' );
|
|
this.$el.removeAttr( 'data-title' );
|
|
this.$el.removeAttr( 'data-content' );
|
|
this.$el.removeAttr( 'data-placement' );
|
|
|
|
if ( 'link' === values.button_action ) {
|
|
this.$el.attr( 'href', values.link );
|
|
|
|
if ( values.link_title ) {
|
|
this.$el.attr( 'title', values.link_title );
|
|
}
|
|
|
|
if ( 'new_tab' === values.link_open_method ) {
|
|
this.$el.attr( 'target', '_blank' );
|
|
}
|
|
} else {
|
|
// The title needs to be decoded for special characters.
|
|
textArea = document.createElement( 'textarea' );
|
|
textArea.innerHTML = String( values.long_title ).trim();
|
|
title = textArea.value;
|
|
if ( ! _.isString( title ) ) {
|
|
title = '';
|
|
}
|
|
|
|
this.$el.attr( 'role', 'button' );
|
|
this.$el.attr( 'href', '#' );
|
|
this.$el.attr( 'tabindex', '0' );
|
|
this.$el.attr( 'data-awb-toggle-image-hotspot-popover', 'true' );
|
|
this.$el.attr( 'data-trigger', this.parentValues.popover_trigger );
|
|
this.$el.attr( 'data-title', title );
|
|
this.$el.attr( 'data-content', String( popoverContent ).trim() );
|
|
|
|
placement = 'auto';
|
|
if ( 'auto' !== values.popover_placement ) {
|
|
placement += ' ' + values.popover_placement;
|
|
}
|
|
this.$el.attr( 'data-placement', placement );
|
|
}
|
|
|
|
},
|
|
|
|
getChildInlineStyle: function( values ) {
|
|
var cssVarsOptions,
|
|
customVars = {};
|
|
this.values = values;
|
|
|
|
cssVarsOptions = [
|
|
'font_size',
|
|
'hotspot_text_color',
|
|
'hotspot_background_color',
|
|
'hotspot_hover_text_color',
|
|
'hotspot_hover_background_color',
|
|
'icon_distance',
|
|
'padding_top',
|
|
'padding_right',
|
|
'padding_bottom',
|
|
'padding_left',
|
|
'border_radius_top_left',
|
|
'border_radius_top_right',
|
|
'border_radius_bottom_right',
|
|
'border_radius_bottom_left'
|
|
];
|
|
|
|
if ( ! _.isEmpty( values.pos_x ) ) {
|
|
customVars.pos_x = values.pos_x + '%';
|
|
}
|
|
|
|
if ( ! _.isEmpty( values.pos_y ) ) {
|
|
customVars.pos_y = values.pos_y + '%';
|
|
}
|
|
|
|
return this.getCssVarsForOptions( cssVarsOptions ) + this.getCustomCssVars( customVars );
|
|
},
|
|
|
|
/**
|
|
* Create the child icon element attributes.
|
|
*
|
|
* @since 3.5
|
|
* @param {Object} values - The options.
|
|
* @return {Object}
|
|
*/
|
|
childElemIconAttr: function( values ) {
|
|
var atts = {
|
|
'class': _.fusionFontAwesome( values.icon )
|
|
};
|
|
|
|
return atts;
|
|
},
|
|
|
|
/**
|
|
* Get the animation class corresponding with the animation id.
|
|
*
|
|
* @since 3.5
|
|
* @param {string} animationName - The animation name.
|
|
* @return {string} - Empty string if do not exist.
|
|
*/
|
|
animationToClassName: function( animationName ) {
|
|
if ( 'pumping' === animationName ) {
|
|
return 'awb-image-hotspots-hotspot-anim-pumping';
|
|
}
|
|
|
|
if ( 'pulsating' === animationName ) {
|
|
return 'awb-image-hotspots-hotspot-anim-pulsating';
|
|
}
|
|
|
|
if ( 'showing' === animationName ) {
|
|
return 'awb-image-hotspots-hotspot-anim-showing';
|
|
}
|
|
|
|
if ( 'sonar' === animationName ) {
|
|
return 'awb-image-hotspots-hotspot-anim-sonar';
|
|
}
|
|
|
|
if ( 'pumping_showing' === animationName ) {
|
|
return 'awb-image-hotspots-hotspot-anim-pump-showing';
|
|
}
|
|
|
|
return '';
|
|
},
|
|
|
|
/**
|
|
* Run after the element has been patched.
|
|
*
|
|
* @since 3.5
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
var popover = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( this.$el ),
|
|
textArea,
|
|
title,
|
|
popoverData;
|
|
|
|
if ( 'link' === this.values.button_action ) {
|
|
popover.popover( 'destroy' );
|
|
} else {
|
|
popover.popover( { html: true } );
|
|
|
|
// Change popover placement, via jquery data.
|
|
popoverData = popover.data( 'bs.popover' );
|
|
if ( popoverData && popoverData.options && popover.attr( 'data-placement' ) ) {
|
|
popoverData.options.placement = popover.attr( 'data-placement' );
|
|
}
|
|
|
|
// Popover title needs to change manually also.
|
|
if ( popoverData && popoverData.options ) {
|
|
// The title needs to be decoded for special characters.
|
|
textArea = document.createElement( 'textarea' );
|
|
textArea.innerHTML = popover.attr( 'data-title' );
|
|
title = textArea.value;
|
|
if ( ! _.isString( title ) ) {
|
|
title = '';
|
|
}
|
|
|
|
popoverData.options.title = title;
|
|
}
|
|
|
|
popover.data( 'bs.popover', popoverData );
|
|
}
|
|
},
|
|
|
|
onSettingsOpen: function() {
|
|
var self = this;
|
|
|
|
setTimeout( function() {
|
|
self.draggable();
|
|
}, 100 );
|
|
},
|
|
|
|
onSettingsClose: function() {
|
|
var $el = this.$el;
|
|
|
|
if ( ! $el ) {
|
|
return;
|
|
}
|
|
|
|
$el.draggable( 'destroy' );
|
|
},
|
|
|
|
/**
|
|
* Make the hotspots draggable.
|
|
*
|
|
* @since 3.5
|
|
* @return {void}
|
|
*/
|
|
draggable: function() {
|
|
var self = this,
|
|
$el = this.$el,
|
|
elWidth,
|
|
elHeight,
|
|
imageWidth,
|
|
imageHeight;
|
|
|
|
if ( ! $el ) {
|
|
return;
|
|
}
|
|
|
|
$el.draggable( {
|
|
zIndex: 999999,
|
|
delay: 100,
|
|
cursorAt: { top: 15, left: 15 },
|
|
scroll: false,
|
|
containment: $el.parent(),
|
|
start: function() {
|
|
$el.parent().css( 'overflow', 'hidden' );
|
|
elWidth = Math.ceil( $el.outerWidth() );
|
|
elHeight = Math.ceil( $el.outerHeight() );
|
|
imageWidth = Math.floor( $el.parent().width() );
|
|
imageHeight = Math.floor( $el.parent().height() );
|
|
},
|
|
drag: function( event, ui ) {
|
|
ui.position.left = Math.min( imageWidth - elWidth, ui.position.left );
|
|
ui.position.top = Math.min( imageHeight - elHeight, ui.position.top );
|
|
|
|
self.updateDragSettings( '#pos_x', Math.round( ui.position.left / imageWidth * 1000 ) / 10 );
|
|
self.updateDragSettings( '#pos_y', Math.round( ui.position.top / imageHeight * 1000 ) / 10 );
|
|
},
|
|
stop: function() {
|
|
// Remove relative position CSS set by jQuery.
|
|
$el.css( { 'left': '', 'top': '', 'z-index': '' } );
|
|
$el.parent().css( 'overflow', '' );
|
|
}
|
|
} );
|
|
}
|
|
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|