441 lines
13 KiB
JavaScript
441 lines
13 KiB
JavaScript
/* global fusionAllElements */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Countdown view
|
|
FusionPageBuilder.fusion_countdown = FusionPageBuilder.ElementView.extend( {
|
|
|
|
/**
|
|
* Init.
|
|
*
|
|
* @since 2.2
|
|
* @return {void}
|
|
*/
|
|
onInit: function() {
|
|
this.deprecatedParams();
|
|
},
|
|
|
|
/**
|
|
* Runs during render() call.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
onRender: function() {
|
|
var that = this;
|
|
|
|
jQuery( window ).on( 'load', function() {
|
|
that.afterPatch();
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Runs before element is removed.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
beforeRemove: function() {
|
|
this.beforePatch();
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
beforePatch: function() {
|
|
var countdown = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( this.$el.find( '.fusion-countdown-counter-wrapper' ) );
|
|
|
|
countdown.stopCountDown();
|
|
countdown.removeData();
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
var countdown = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( this.$el.find( '.fusion-countdown-counter-wrapper' ) );
|
|
|
|
setTimeout( function() {
|
|
countdown.stopCountDown();
|
|
countdown.fusion_countdown();
|
|
}, 300 );
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var wrapperAttributes = {},
|
|
counterAttributes = {},
|
|
countdownShortcodeLink = {},
|
|
headingAttr = {},
|
|
subHeadingAttr = {},
|
|
dashhtml = '',
|
|
headingText = '',
|
|
subheadingText = '',
|
|
linkUrl = '',
|
|
linkText = '',
|
|
elementContent = '';
|
|
|
|
// Validate values.
|
|
this.validateValues( atts.values );
|
|
this.values = atts.values;
|
|
|
|
// Create attribute objects
|
|
wrapperAttributes = this.buildWrapperAtts( atts.values );
|
|
counterAttributes = this.buildCounterAtts( atts.values, atts.extras );
|
|
countdownShortcodeLink = this.buildLinkAtts( atts.values, atts.extras );
|
|
dashhtml = this.buildDashHtml( atts.values, atts.extras );
|
|
headingAttr = this.buildHeadingAttr( atts.values );
|
|
subHeadingAttr = this.buildSubHeadingAttr( atts.values );
|
|
headingText = atts.values.heading_text;
|
|
subheadingText = atts.values.subheading_text;
|
|
linkUrl = atts.values.link_url;
|
|
linkText = atts.values.link_text;
|
|
elementContent = atts.values.element_content;
|
|
|
|
// Reset atts.
|
|
atts = {};
|
|
|
|
// Build attributes.
|
|
atts.wrapperAttributes = wrapperAttributes;
|
|
atts.counterAttributes = counterAttributes;
|
|
atts.countdownShortcodeLink = countdownShortcodeLink;
|
|
atts.dashhtml = dashhtml;
|
|
atts.headingAttr = headingAttr;
|
|
atts.subHeadingAttr = subHeadingAttr;
|
|
atts.heading_text = headingText;
|
|
atts.subheading_text = subheadingText;
|
|
atts.link_url = linkUrl;
|
|
atts.link_text = linkText;
|
|
atts.element_content = elementContent;
|
|
|
|
// Any extras that need passed on.
|
|
atts.cid = this.model.get( 'cid' );
|
|
|
|
return atts;
|
|
},
|
|
|
|
/**
|
|
* Modify the values.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {void}
|
|
*/
|
|
validateValues: function( values ) {
|
|
values.border_radius = _.fusionValidateAttrValue( values.border_radius, 'px' );
|
|
values.counter_border_size = _.fusionValidateAttrValue( values.counter_border_size, 'px' );
|
|
values.counter_border_radius = _.fusionValidateAttrValue( values.counter_border_radius, 'px' );
|
|
|
|
if ( 'default' === values.link_target ) {
|
|
values.link_target = fusionAllElements.fusion_countdown.link_target;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildWrapperAtts: function( values ) {
|
|
var wrapperAttributes = {
|
|
class: 'countdown-shortcode fusion-countdown fusion-countdown-cid' + this.model.get( 'cid' ) + ' fusion-countdown-' + values.layout + ' fusion-countdown-label-' + values.label_position,
|
|
style: this.getStyles()
|
|
},
|
|
bgColor;
|
|
|
|
if ( values.heading_text || values.subheading_text ) {
|
|
wrapperAttributes[ 'class' ] += ' fusion-countdown-has-heading';
|
|
}
|
|
|
|
if ( values.link_text ) {
|
|
wrapperAttributes[ 'class' ] += ' fusion-countdown-has-link';
|
|
}
|
|
|
|
wrapperAttributes = _.fusionVisibilityAtts( values.hide_on_mobile, wrapperAttributes );
|
|
|
|
bgColor = jQuery.AWB_Color( values.background_color );
|
|
if ( ! values.background_image && ( ! values.background_color || 0 === bgColor.alpha() || 'transparent' === values.background_color ) ) {
|
|
wrapperAttributes[ 'class' ] += ' fusion-no-bg';
|
|
}
|
|
|
|
if ( values[ 'class' ] ) {
|
|
wrapperAttributes[ 'class' ] += ' ' + values[ 'class' ];
|
|
}
|
|
|
|
if ( values.id ) {
|
|
wrapperAttributes.id = values.id;
|
|
}
|
|
|
|
wrapperAttributes = _.fusionAnimations( values, wrapperAttributes );
|
|
|
|
return wrapperAttributes;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @param {Object} extras - Extra params.
|
|
* @return {Object}
|
|
*/
|
|
buildCounterAtts: function( values, extras ) {
|
|
var counterAttributes = {
|
|
class: 'fusion-countdown-counter-wrapper countdown-shortcode-counter-wrapper',
|
|
id: 'fusion-countdown-cid' + this.model.get( 'cid' )
|
|
},
|
|
s,
|
|
date,
|
|
month;
|
|
|
|
if ( ! values.subheading_text && ! values.heading_text && ! values.link_url ) {
|
|
counterAttributes[ 'class' ] += ' awb-flex-grow';
|
|
}
|
|
|
|
if ( 'site_time' === values.timezone ) {
|
|
counterAttributes[ 'data-gmt-offset' ] = extras.gmt_offset;
|
|
}
|
|
function pad( num, size ) {
|
|
s = '000000000' + num;
|
|
return s.substr( s.length - size );
|
|
}
|
|
if ( 'object' === typeof values.countdown_end && 'string' === typeof values.countdown_end.date ) {
|
|
values.countdown_end = values.countdown_end.date;
|
|
}
|
|
if ( values.countdown_end ) {
|
|
date = new Date( values.countdown_end );
|
|
month = pad( date.getMonth() + 1, 2 );
|
|
counterAttributes[ 'data-timer' ] = date.getFullYear() + '-' + month + '-' + date.getDate() + '-' + date.getHours() + '-' + date.getMinutes() + '-' + date.getSeconds();
|
|
}
|
|
|
|
counterAttributes[ 'data-omit-weeks' ] = ( 'yes' === values.show_weeks ) ? '0' : '1';
|
|
|
|
return counterAttributes;
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildLinkAtts: function( values ) {
|
|
var countdownShortcodeLink = {
|
|
class: 'fusion-countdown-link',
|
|
target: values.link_target,
|
|
href: values.link_url
|
|
};
|
|
|
|
if ( '_blank' === values.link_target ) {
|
|
countdownShortcodeLink.rel = 'noopener noreferrer';
|
|
}
|
|
|
|
return countdownShortcodeLink;
|
|
},
|
|
|
|
/**
|
|
* Builds the HTML.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @param {Object} extras - Extra args.
|
|
* @return {string}
|
|
*/
|
|
buildDashHtml: function( values, extras ) {
|
|
var dashClass = '',
|
|
dashhtml = '',
|
|
counterBoxColor,
|
|
dashes = [
|
|
{
|
|
show: values.show_weeks,
|
|
class: 'weeks',
|
|
shortname: extras.weeks_text,
|
|
longname: extras.weeks_text
|
|
},
|
|
{
|
|
show: 'yes',
|
|
class: 'days',
|
|
shortname: extras.days_text,
|
|
longname: extras.days_text
|
|
},
|
|
{
|
|
show: 'yes',
|
|
class: 'hours',
|
|
shortname: extras.hrs_text,
|
|
longname: extras.hours_text
|
|
},
|
|
{
|
|
show: 'yes',
|
|
class: 'minutes',
|
|
shortname: extras.min_text,
|
|
longname: extras.minutes_text
|
|
},
|
|
{
|
|
show: 'yes',
|
|
class: 'seconds',
|
|
shortname: extras.sec_text,
|
|
longname: extras.seconds_text
|
|
}
|
|
];
|
|
|
|
if ( 'text_flow' !== values.label_position ) {
|
|
values.dash_titles = 'long';
|
|
}
|
|
|
|
counterBoxColor = jQuery.AWB_Color( values.counter_box_color );
|
|
if ( ! values.counter_box_color || 0 === counterBoxColor.alpha() || 'transparent' === values.counter_box_color ) {
|
|
dashClass = ' fusion-no-bg';
|
|
}
|
|
|
|
jQuery.each( dashes, function( index, dash ) {
|
|
if ( 'yes' === dash.show ) {
|
|
dashhtml += '<div class="fusion-dash-wrapper ' + dashClass + '">';
|
|
dashhtml += '<div class="fusion-dash fusion-dash-' + dash[ 'class' ] + '">';
|
|
dashhtml += '<div class="fusion-digit-wrapper">';
|
|
if ( 'days' === dash[ 'class' ] ) {
|
|
dashhtml += '<div class="fusion-thousand-digit fusion-digit">0</div>';
|
|
}
|
|
if ( 'weeks' === dash[ 'class' ] || 'days' === dash[ 'class' ] ) {
|
|
dashhtml += '<div class="fusion-hundred-digit fusion-digit">0</div>';
|
|
}
|
|
dashhtml += '<div class="fusion-digit">0</div><div class="fusion-digit">0</div>';
|
|
dashhtml += '</div>';
|
|
dashhtml += '<div class="fusion-dash-title">' + dash[ values.dash_titles + 'name' ] + '</div>';
|
|
dashhtml += '</div></div>';
|
|
}
|
|
} );
|
|
|
|
return dashhtml;
|
|
},
|
|
|
|
/**
|
|
* Builds styles.
|
|
*
|
|
* @since 2.0
|
|
* @return {string}
|
|
*/
|
|
getStyles: function() {
|
|
var customVars = {},
|
|
cssVars = [
|
|
'border_radius',
|
|
'counter_box_color',
|
|
'counter_border_color',
|
|
'counter_border_radius',
|
|
'counter_font_size',
|
|
'counter_text_color',
|
|
'label_font_size',
|
|
'label_color',
|
|
'heading_font_size',
|
|
'heading_text_color',
|
|
'subheading_font_size',
|
|
'subheading_text_color',
|
|
'link_text_color',
|
|
'element_margin_top',
|
|
'element_margin_right',
|
|
'element_margin_bottom',
|
|
'element_margin_left'
|
|
];
|
|
|
|
cssVars.counter_padding_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVars.counter_padding_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVars.counter_padding_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVars.counter_padding_left = { 'callback': _.fusionGetValueWithUnit };
|
|
|
|
if ( '' !== this.values.background_image && ! this.isDefault( 'background_image' ) ) {
|
|
customVars.background = 'url(' + this.values.background_image + ') ' + this.values.background_position + ' ' + this.values.background_repeat + ' ' + this.values.background_color;
|
|
if ( 'no-repeat' === this.values.background_repeat ) {
|
|
customVars[ 'background-size' ] = 'cover';
|
|
}
|
|
} else if ( '' !== this.values.background_color && ! this.isDefault( 'background_color' ) ) {
|
|
customVars.background = this.values.background_color;
|
|
}
|
|
if ( '' !== this.values.counter_box_spacing ) {
|
|
customVars[ 'counter-box-spacing' ] = ( parseFloat( this.values.counter_box_spacing ) / 2 ) + this.values.counter_box_spacing.replace( parseFloat( this.values.counter_box_spacing ), '' );
|
|
}
|
|
|
|
if ( '' !== this.values.counter_border_size ) {
|
|
customVars[ 'counter-border-size' ] = parseFloat( this.values.counter_border_size );
|
|
}
|
|
|
|
return this.getCssVarsForOptions( cssVars ) + this.getCustomCssVars( customVars );
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @return {Object}
|
|
*/
|
|
buildHeadingAttr: function() {
|
|
var self = this;
|
|
|
|
return _.fusionInlineEditor( {
|
|
cid: self.model.get( 'cid' ),
|
|
param: 'heading_text',
|
|
'disable-return': true,
|
|
'disable-extra-spaces': true,
|
|
toolbar: false
|
|
}, { class: 'fusion-countdown-heading' } );
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @return {Object}
|
|
*/
|
|
buildSubHeadingAttr: function() {
|
|
var self = this;
|
|
|
|
return _.fusionInlineEditor( {
|
|
cid: self.model.get( 'cid' ),
|
|
param: 'subheading_text',
|
|
'disable-return': true,
|
|
'disable-extra-spaces': true,
|
|
toolbar: false
|
|
}, { class: 'fusion-countdown-subheading' } );
|
|
},
|
|
|
|
/**
|
|
* Updates now deprecated params and adds BC checks.
|
|
*
|
|
* @since 2.2
|
|
* @return {void}
|
|
*/
|
|
deprecatedParams: function() {
|
|
var params = this.model.get( 'params' );
|
|
|
|
// Correct old combined border radius setting.
|
|
if ( 'undefined' === typeof params.counter_border_radius && 'string' === typeof params.border_radius ) {
|
|
params.counter_border_radius = params.border_radius;
|
|
}
|
|
|
|
// Correct the label text color.
|
|
if ( 'undefined' === typeof params.label_color && 'string' === typeof params.counter_text_color ) {
|
|
params.label_color = params.counter_text_color;
|
|
}
|
|
|
|
this.model.set( 'params', params );
|
|
}
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|