462 lines
13 KiB
JavaScript
462 lines
13 KiB
JavaScript
/* global FusionPageBuilderApp, fusionAllElements, fusionBuilderText, FusionEvents */
|
|
/* eslint no-unused-vars: 0 */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Content Boxes Child View.
|
|
FusionPageBuilder.fusion_pricing_column = FusionPageBuilder.ChildElementView.extend( {
|
|
|
|
/**
|
|
* Creates params from child shortcodes.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
onInit: function() {
|
|
this.setPriceParams();
|
|
this.setFooterContent();
|
|
this.setFeatureRows();
|
|
this.clearInvalidParams();
|
|
|
|
// Price params history.
|
|
this._priceUpdateHistory = _.debounce( _.bind( this.priceUpdateHistory, this ), 500 );
|
|
this.initialPriceValue = false;
|
|
|
|
// Footer content history.
|
|
this._footerUpdateHistory = _.debounce( _.bind( this.footerUpdateHistory, this ), 500 );
|
|
this.initialFooterValue = false;
|
|
|
|
// Column features history.
|
|
this._featuresUpdateHistory = _.debounce( _.bind( this.featuresUpdateHistory, this ), 500 );
|
|
this.initialFeaturesValue = false;
|
|
},
|
|
|
|
/**
|
|
* Generates child shortcodes from params.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
beforeGenerateShortcode: function() {
|
|
var params = this.model.get( 'params' ),
|
|
priceParams = this.model.get( 'priceParams' ),
|
|
shortcode = '[fusion_pricing_price',
|
|
featuredRows = this.getFeaturedRows(),
|
|
footerContent = this.model.get( 'footerContent' );
|
|
|
|
_.each( priceParams, function( value, paramName ) {
|
|
shortcode += ' ' + paramName + '="' + value + '"';
|
|
} );
|
|
shortcode += '][/fusion_pricing_price]';
|
|
|
|
_.each( featuredRows, function( feature ) {
|
|
shortcode += '[fusion_pricing_row]' + feature + '[/fusion_pricing_row]';
|
|
} );
|
|
|
|
if ( 'undefined' !== typeof footerContent && '' !== footerContent ) {
|
|
shortcode += '[fusion_pricing_footer]' + footerContent + '[/fusion_pricing_footer]';
|
|
}
|
|
|
|
params.element_content = shortcode;
|
|
|
|
this.model.set( 'params', params );
|
|
},
|
|
|
|
setPriceParams: function() {
|
|
var params = this.model.get( 'params' ),
|
|
priceShortcode = 'undefined' !== typeof params.element_content ? params.element_content : '',
|
|
innerRegExp = FusionPageBuilderApp.regExpShortcode( 'fusion_pricing_price' ),
|
|
priceShortcodeElement = priceShortcode.match( innerRegExp ),
|
|
priceShortcodeAttributes,
|
|
priceParams;
|
|
|
|
if ( ! priceShortcodeElement || ! priceShortcodeElement.length ) {
|
|
this.model.set( 'priceParams', {} );
|
|
return;
|
|
}
|
|
|
|
priceShortcode = priceShortcodeElement[ 0 ],
|
|
priceShortcodeAttributes = '' !== priceShortcodeElement[ 3 ] ? window.wp.shortcode.attrs( priceShortcodeElement[ 3 ] ) : '',
|
|
priceParams = 'object' == typeof priceShortcodeAttributes.named ? priceShortcodeAttributes.named : {};
|
|
|
|
this.model.set( 'priceParams', jQuery.extend( true, {}, priceParams ) );
|
|
},
|
|
|
|
setFooterContent: function() {
|
|
var params = this.model.get( 'params' ),
|
|
priceShortcode = 'undefined' !== typeof params.element_content ? params.element_content : '',
|
|
innerRegExp = FusionPageBuilderApp.regExpShortcode( 'fusion_pricing_footer' ),
|
|
footerShortcodeElement = priceShortcode.match( innerRegExp ),
|
|
footerShortcode;
|
|
|
|
if ( ! footerShortcodeElement ) {
|
|
this.model.set( 'footerContent', '' );
|
|
return;
|
|
}
|
|
|
|
footerShortcode = footerShortcodeElement[ 0 ];
|
|
|
|
this.model.set( 'footerContent', footerShortcodeElement[ 5 ] );
|
|
},
|
|
|
|
setFeatureRows: function() {
|
|
var params = this.model.get( 'params' ),
|
|
priceShortcode = 'undefined' !== typeof params.element_content ? params.element_content : '',
|
|
pricingColumnRows = FusionPageBuilderApp.findShortcodeMatches( priceShortcode, 'fusion_pricing_row' ),
|
|
values = [];
|
|
|
|
if ( 'object' !== typeof pricingColumnRows || ! pricingColumnRows || ! pricingColumnRows.length ) {
|
|
return;
|
|
}
|
|
|
|
_.each( pricingColumnRows, function( pricingColumnRow ) {
|
|
var rowContent = '';
|
|
if ( 'undefined' !== typeof pricingColumnRow.match( FusionPageBuilderApp.regExpShortcode( 'fusion_pricing_row' ) )[ 5 ] ) {
|
|
rowContent = pricingColumnRow.match( FusionPageBuilderApp.regExpShortcode( 'fusion_pricing_row' ) )[ 5 ];
|
|
}
|
|
values.push( rowContent );
|
|
} );
|
|
|
|
values = values.join( '|' );
|
|
|
|
this.model.set( 'featureRows', values );
|
|
},
|
|
|
|
clearInvalidParams: function() {
|
|
var params = this.model.get( 'params' );
|
|
|
|
delete params.currency;
|
|
delete params.currency_position;
|
|
delete params.price;
|
|
delete params.time;
|
|
params.footer_content = false;
|
|
params.feature_rows = false;
|
|
|
|
this.model.set( 'params', params );
|
|
},
|
|
|
|
/**
|
|
* Runs during render() call.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
onRender: function() {
|
|
if ( 'undefined' !== typeof this.model.attributes.selectors ) {
|
|
this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
|
|
this.setElementAttributes( this.$el, this.model.attributes.selectors );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
|
|
if ( 'undefined' !== typeof this.model.attributes.selectors ) {
|
|
this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
|
|
this.setElementAttributes( this.$el, this.model.attributes.selectors );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var attributes = {},
|
|
priceValues = this.getPriceValues();
|
|
|
|
attributes.title = atts.values.title;
|
|
attributes.cid = this.model.get( 'cid' );
|
|
attributes.titleAttr = this.buildTitleAttr();
|
|
|
|
this.buildColumnWrapperAttr( atts.values, atts.parentValues.columns );
|
|
|
|
// Pricing shortcode.
|
|
attributes.price = priceValues.price.split( '.' );
|
|
attributes.currencyPosition = priceValues.currency_position;
|
|
attributes.currency = priceValues.currency;
|
|
attributes.time = priceValues.time;
|
|
attributes.currencyClasses = this.getCurrencyClasses( priceValues );
|
|
attributes.timeClasses = this.getTimeClasses( priceValues );
|
|
|
|
// Feature rows.
|
|
attributes.featureRows = this.getFeaturedRows();
|
|
|
|
// Footer shortcode.
|
|
attributes.footerContent = this.model.get( 'footerContent' );
|
|
|
|
return attributes;
|
|
},
|
|
|
|
getFeaturedRows: function() {
|
|
var values = this.model.get( 'featureRows' );
|
|
if ( 'undefined' === typeof values ) {
|
|
return [];
|
|
}
|
|
if ( -1 === values.indexOf( '|' ) ) {
|
|
return [ values ];
|
|
}
|
|
return values.split( '|' );
|
|
},
|
|
|
|
getPriceValues: function() {
|
|
var priceParams = this.model.get( 'priceParams' ),
|
|
priceDefaults = {
|
|
currency: '',
|
|
currency_position: 'left',
|
|
price: '',
|
|
time: ''
|
|
};
|
|
|
|
return jQuery.extend( true, {}, priceDefaults, _.fusionCleanParameters( priceParams ) );
|
|
},
|
|
|
|
getCurrencyClasses: function( priceValues ) {
|
|
var currencyClasses = {
|
|
class: 'currency'
|
|
};
|
|
|
|
if ( 'right' === priceValues.currency_position ) {
|
|
currencyClasses[ 'class' ] += ' pos-right';
|
|
if ( -1 !== priceValues.price.indexOf( '.' ) ) {
|
|
currencyClasses[ 'class' ] += ' price-without-decimal';
|
|
}
|
|
}
|
|
return currencyClasses;
|
|
},
|
|
|
|
getTimeClasses: function( priceValues ) {
|
|
var timeClasses = {
|
|
class: 'time'
|
|
};
|
|
|
|
if ( '' !== priceValues.time ) {
|
|
if ( -1 === priceValues.price.indexOf( '.' ) ) {
|
|
timeClasses[ 'class' ] += ' price-without-decimal';
|
|
}
|
|
if ( 'right' === priceValues.currency_position ) {
|
|
timeClasses[ 'class' ] += ' pos-right';
|
|
}
|
|
}
|
|
return timeClasses;
|
|
},
|
|
|
|
buildTitleAttr: function() {
|
|
var cid = this.model.get( 'cid' ),
|
|
titleAttr = {
|
|
class: 'title-row'
|
|
};
|
|
|
|
_.fusionInlineEditor( {
|
|
cid: cid,
|
|
param: 'title',
|
|
'disable-return': true,
|
|
'disable-extra-spaces': true,
|
|
toolbar: false
|
|
}, titleAttr );
|
|
|
|
return titleAttr;
|
|
},
|
|
|
|
updatePricingTablePrice: function( name, value ) {
|
|
var priceParams = this.model.get( 'priceParams' );
|
|
|
|
priceParams[ name ] = value;
|
|
|
|
this.model.set( 'priceParams', priceParams );
|
|
|
|
this.reRender();
|
|
},
|
|
|
|
updatePricingTableFooter: function( value ) {
|
|
|
|
this.model.set( 'footerContent', value );
|
|
|
|
this.reRender();
|
|
},
|
|
|
|
updatePricingTableFeatures: function( value ) {
|
|
|
|
this.model.set( 'featureRows', value );
|
|
|
|
this.reRender();
|
|
},
|
|
|
|
priceUpdateHistory: function( name, value ) {
|
|
var priceParams = this.model.get( 'priceParams' ),
|
|
originalParam = this.initialPriceValue,
|
|
state = {
|
|
type: 'price-param',
|
|
param: name,
|
|
newValue: value,
|
|
cid: this.model.get( 'cid' )
|
|
},
|
|
elementMap = fusionAllElements[ this.model.get( 'element_type' ) ],
|
|
paramObject = elementMap.params[ name ],
|
|
paramTitle = 'object' === typeof paramObject ? paramObject.heading : name;
|
|
|
|
state.oldValue = originalParam;
|
|
|
|
FusionEvents.trigger( 'fusion-history-save-step', fusionBuilderText.edited + ' ' + elementMap.name + ' - ' + paramTitle, state );
|
|
|
|
this.initialPriceValue = false;
|
|
},
|
|
|
|
footerUpdateHistory: function( value ) {
|
|
var originalParam = this.initialFooterValue,
|
|
state = {
|
|
type: 'pricefooter-param',
|
|
newValue: value,
|
|
cid: this.model.get( 'cid' )
|
|
},
|
|
elementMap = fusionAllElements[ this.model.get( 'element_type' ) ],
|
|
paramObject = elementMap.params.footer_content,
|
|
paramTitle = 'object' === typeof paramObject ? paramObject.heading : name;
|
|
|
|
state.oldValue = originalParam;
|
|
|
|
FusionEvents.trigger( 'fusion-history-save-step', fusionBuilderText.edited + ' ' + elementMap.name + ' - ' + paramTitle, state );
|
|
|
|
this.initialFooterValue = false;
|
|
},
|
|
|
|
featuresUpdateHistory: function( value ) {
|
|
var originalParam = this.initialFeaturesValue,
|
|
state = {
|
|
type: 'pricefeatures-param',
|
|
newValue: value,
|
|
cid: this.model.get( 'cid' )
|
|
},
|
|
elementMap = fusionAllElements[ this.model.get( 'element_type' ) ],
|
|
paramObject = elementMap.params.feature_rows,
|
|
paramTitle = 'object' === typeof paramObject ? paramObject.heading : name;
|
|
|
|
state.oldValue = originalParam;
|
|
|
|
FusionEvents.trigger( 'fusion-history-save-step', fusionBuilderText.edited + ' ' + elementMap.name + ' - ' + paramTitle, state );
|
|
|
|
this.initialFeaturesValue = false;
|
|
},
|
|
|
|
/**
|
|
* Builder column wrapper attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
buildColumnWrapperAttr: function( values, columns ) {
|
|
var attr = {
|
|
class: 'panel-wrapper fusion-column column'
|
|
};
|
|
|
|
if ( '5' == columns ) {
|
|
columns = 2;
|
|
} else {
|
|
columns = 12 / parseInt( columns, 10 );
|
|
}
|
|
|
|
attr[ 'class' ] += ' col-lg-' + columns + ' col-md-' + columns + ' col-sm-' + columns;
|
|
|
|
attr[ 'class' ] += ' fusion-pricingtable-column';
|
|
|
|
if ( 'yes' === values.standout ) {
|
|
attr[ 'class' ] += ' standout';
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values[ 'class' ] && '' !== values[ 'class' ] ) {
|
|
attr[ 'class' ] += ' ' + values[ 'class' ];
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.id && '' !== values.id ) {
|
|
attr.id = values.id;
|
|
}
|
|
|
|
this.model.set( 'selectors', attr );
|
|
}
|
|
} );
|
|
|
|
_.extend( FusionPageBuilder.Callback.prototype, {
|
|
fusionPricingTablePrice: function( name, value, args, view ) {
|
|
var priceParams = view.model.get( 'priceParams' ),
|
|
originalParam = priceParams[ name ];
|
|
|
|
// If its the same value, no need to do anything.
|
|
if ( originalParam === value ) {
|
|
return;
|
|
}
|
|
|
|
if ( ! view.initialPriceValue ) {
|
|
view.initialPriceValue = originalParam;
|
|
}
|
|
|
|
view._priceUpdateHistory( name, value );
|
|
|
|
priceParams[ name ] = value;
|
|
|
|
view.model.set( 'priceParams', priceParams );
|
|
|
|
return {
|
|
render: true
|
|
};
|
|
}
|
|
} );
|
|
|
|
_.extend( FusionPageBuilder.Callback.prototype, {
|
|
fusionPricingTableFooter: function( name, value, args, view ) {
|
|
var originalParam = view.model.get( 'footerContent' );
|
|
|
|
if ( originalParam === value ) {
|
|
return;
|
|
}
|
|
|
|
if ( ! view.initialFooterValue ) {
|
|
view.initialFooterValue = originalParam;
|
|
}
|
|
|
|
view._footerUpdateHistory( value );
|
|
|
|
view.model.set( 'footerContent', value );
|
|
|
|
return {
|
|
render: true
|
|
};
|
|
}
|
|
} );
|
|
|
|
_.extend( FusionPageBuilder.Callback.prototype, {
|
|
fusionPricingTableRows: function( name, value, args, view ) {
|
|
var originalParam = view.model.get( 'featureRows' );
|
|
|
|
if ( originalParam === value ) {
|
|
return;
|
|
}
|
|
|
|
if ( ! view.initialFeaturesValue ) {
|
|
view.initialFeaturesValue = originalParam;
|
|
}
|
|
|
|
view._featuresUpdateHistory( value );
|
|
|
|
view.model.set( 'featureRows', value );
|
|
|
|
return {
|
|
render: true
|
|
};
|
|
}
|
|
} );
|
|
|
|
} );
|
|
}( jQuery ) );
|