232 lines
8.8 KiB
JavaScript
232 lines
8.8 KiB
JavaScript
/* global FusionApp, fusionAllElements, FusionPageBuilderApp */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function () {
|
|
|
|
jQuery( document ).ready( function () {
|
|
|
|
FusionPageBuilder.fusion_submenu = FusionPageBuilder.ElementView.extend( {
|
|
|
|
onRender: function() {
|
|
var self = this;
|
|
setTimeout( function() {
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( 'body' ).trigger( 'fusion-element-render-fusion_menu', self.model.get( 'cid' ) );
|
|
}, 300 );
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 3.0
|
|
* @param {Object} atts - The attributes object.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function ( atts ) {
|
|
var attributes = {};
|
|
|
|
this.values = atts.values;
|
|
|
|
// Force opacity submenu transition for vertical menus.
|
|
this.values.expand_transition = 'row' !== this.values.direction ? 'opacity' : this.values.expand_transition;
|
|
|
|
attributes.attr = this.buildAttr();
|
|
|
|
attributes.menuMarkup = 'undefined' !== typeof atts.query_data && 'undefined' !== typeof atts.query_data.menu_markup ? atts.query_data.menu_markup : 'No menu markup';
|
|
return attributes;
|
|
},
|
|
|
|
isDefault: function( param ) {
|
|
return this.values[ param ] === fusionAllElements.fusion_submenu.defaults[ param ];
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 3.0
|
|
* @return {Object}
|
|
*/
|
|
buildAttr: function () {
|
|
|
|
var attr = {
|
|
class: [
|
|
'awb-submenu',
|
|
'awb-submenu_' + this.values.direction,
|
|
'awb-submenu_icons-' + this.values.icons_position,
|
|
'awb-submenu_dc-' + this.values.dropdown_carets
|
|
].join( ' ' ),
|
|
style: ''
|
|
},
|
|
cssVarsOptions,
|
|
cssVariables,
|
|
self = this;
|
|
|
|
let expandMethod = this.values.expand_method;
|
|
if ( 'stacked' === this.values.submenu_mode && 'column' === this.values.direction ) {
|
|
attr[ 'class' ] += ' awb-submenu_v-stacked';
|
|
if ( 'always' === this.values.stacked_expand_method ) {
|
|
attr[ 'class' ] += ' awb-submenu_em-always';
|
|
}
|
|
expandMethod = this.values.stacked_expand_method;
|
|
|
|
if ( 'always' === this.values.stacked_expand_method ) {
|
|
expandMethod = 'click';
|
|
}
|
|
|
|
if ( 'click' === this.values.stacked_expand_method ) {
|
|
attr[ 'class' ] += ' awb-submenu_cm_' + this.values.stacked_click_mode;
|
|
}
|
|
} else {
|
|
attr[ 'class' ] += ' awb-submenu_dropdown';
|
|
attr[ 'class' ] += ' awb-submenu_expand-' + this.values.expand_direction;
|
|
attr[ 'class' ] += ' awb-submenu_transition-' + this.values.expand_transition;
|
|
}
|
|
|
|
|
|
attr[ 'class' ] += ' awb-submenu_em-' + expandMethod;
|
|
|
|
|
|
attr[ 'data-cid' ] = this.model.get( 'cid' );
|
|
|
|
attr[ 'class' ] += _.fusionGetStickyClass( this.values.sticky_display );
|
|
|
|
attr[ 'data-transition-type' ] = this.values.transition_type;
|
|
|
|
if ( '' !== this.values[ 'class' ] ) {
|
|
attr[ 'class' ] += ' ' + this.values[ 'class' ];
|
|
}
|
|
|
|
if ( '' !== this.values.id ) {
|
|
attr.id = this.values.id;
|
|
}
|
|
|
|
attr = _.fusionAnimations( this.values, attr );
|
|
attr = _.fusionVisibilityAtts( this.values.hide_on_mobile, attr );
|
|
|
|
this.values.main_justify_content = this.values.main_justify_content.replace( 'left', 'flex-start' ).replace( 'right', 'flex-end' );
|
|
this.values.sub_justify_content = this.values.sub_justify_content.replace( 'left', 'flex-start' ).replace( 'right', 'flex-end' );
|
|
|
|
cssVarsOptions = [
|
|
'line_height',
|
|
'transition_time',
|
|
'fusion_font_family_typography',
|
|
'fusion_font_variant_typography',
|
|
'text_transform',
|
|
'bg',
|
|
'align_items',
|
|
'justify_content',
|
|
'border_color',
|
|
'color',
|
|
'active_color',
|
|
'active_bg',
|
|
'active_border_color',
|
|
'submenu_color',
|
|
'submenu_bg',
|
|
'submenu_sep_color',
|
|
'submenu_items_padding_top',
|
|
'submenu_items_padding_right',
|
|
'submenu_items_padding_bottom',
|
|
'submenu_items_padding_left',
|
|
'fusion_font_family_submenu_typography',
|
|
'fusion_font_variant_submenu_typography',
|
|
'submenu_active_bg',
|
|
'submenu_active_color',
|
|
'submenu_space',
|
|
'submenu_text_transform',
|
|
'submenu_line_height',
|
|
'submenu_letter_spacing',
|
|
'submenu_max_width',
|
|
'icons_size',
|
|
'icons_color',
|
|
'icons_hover_color',
|
|
'main_justify_content',
|
|
'sub_justify_content',
|
|
'sticky_min_height',
|
|
'stacked_submenu_indent'
|
|
];
|
|
|
|
cssVarsOptions.margin_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.items_padding_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.items_padding_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.items_padding_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.items_padding_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.gap = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.font_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.min_height = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.border_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.border_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.border_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.border_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.active_border_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.active_border_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.active_border_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.active_border_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.border_radius_top_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.border_radius_top_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.border_radius_bottom_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.border_radius_bottom_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.submenu_border_radius_top_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.submenu_border_radius_top_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.submenu_border_radius_bottom_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.submenu_border_radius_bottom_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.submenu_space = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.submenu_items_padding_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.submenu_items_padding_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.submenu_items_padding_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.submenu_items_padding_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.submenu_font_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.thumbnail_size_width = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.thumbnail_size_height = { 'callback': _.fusionGetValueWithUnit };
|
|
|
|
attr.style += this.getCssVarsForOptions( cssVarsOptions );
|
|
cssVariables = {};
|
|
|
|
// Add box shadow as a full string.
|
|
if ( 'yes' === this.values.box_shadow ) {
|
|
cssVariables.box_shadow = _.fusionGetBoxShadowStyle( this.values );
|
|
}
|
|
|
|
jQuery.each( _.fusionGetFontStyle( 'typography', self.values, 'object' ), function( rule, value ) {
|
|
cssVariables[ 'fusion-' + rule + '-typography' ] = value;
|
|
} );
|
|
jQuery.each( _.fusionGetFontStyle( 'submenu_typography', self.values, 'object' ), function( rule, value ) {
|
|
cssVariables[ 'fusion-' + rule + '-submenu-typography' ] = value;
|
|
} );
|
|
|
|
attr.style += this.getCustomCssVars( cssVariables );
|
|
|
|
return attr;
|
|
},
|
|
|
|
/**
|
|
* Runs just after render on cancel.
|
|
*
|
|
* @since 3.5
|
|
* @return null
|
|
*/
|
|
beforeGenerateShortcode: function() {
|
|
var elementType = this.model.get( 'element_type' ),
|
|
options = fusionAllElements[ elementType ].params,
|
|
values = jQuery.extend( true, {}, fusionAllElements[ elementType ].defaults, _.fusionCleanParameters( this.model.get( 'params' ) ) );
|
|
|
|
if ( 'object' !== typeof options ) {
|
|
return;
|
|
}
|
|
|
|
// If images needs replaced lets check element to see if we have media being used to add to object.
|
|
if ( 'undefined' !== typeof FusionApp.data.replaceAssets && FusionApp.data.replaceAssets && ( 'undefined' !== typeof FusionApp.data.fusion_element_type || 'fusion_template' === FusionApp.getPost( 'post_type' ) ) ) {
|
|
|
|
this.mapStudioImages( options, values );
|
|
|
|
if ( '' !== values.menu ) {
|
|
// If its not within object already, add it.
|
|
if ( 'undefined' === typeof FusionPageBuilderApp.mediaMap.menus[ values.menu ] ) {
|
|
FusionPageBuilderApp.mediaMap.menus[ values.menu ] = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|