270 lines
7.4 KiB
JavaScript
270 lines
7.4 KiB
JavaScript
/* global fusionSanitize */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Accordion View.
|
|
FusionPageBuilder.fusion_checklist = FusionPageBuilder.ParentElementView.extend( {
|
|
|
|
/**
|
|
* Runs when child view is added.
|
|
*
|
|
* @since 3.9
|
|
* @return {void}
|
|
*/
|
|
childViewAdded: function() {
|
|
this.updateList();
|
|
},
|
|
|
|
/**
|
|
* Runs when child view is removed.
|
|
*
|
|
* @since 3.9
|
|
* @return {void}
|
|
*/
|
|
childViewRemoved: function() {
|
|
this.updateList();
|
|
},
|
|
|
|
/**
|
|
* Runs when child view is cloned.
|
|
*
|
|
* @since 3.9
|
|
* @return {void}
|
|
*/
|
|
childViewCloned: function() {
|
|
var self = this;
|
|
|
|
setTimeout( function() {
|
|
self.updateList();
|
|
}, 100 );
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var attributes = {};
|
|
|
|
this.validateValues( atts.values, atts.extras );
|
|
|
|
this.values = atts.values;
|
|
atts.values.size = '' === atts.values.size ? '16px' : atts.values.size;
|
|
|
|
if ( -1 !== atts.values.size.indexOf( 'clamp(' ) ) {
|
|
const clampSizes = atts.values.size.replace( /clamp\(|\)/g, '' ).split( ',' );
|
|
|
|
// Define output object
|
|
let sizes = {};
|
|
|
|
// Define multipliers
|
|
const factors = {
|
|
circle_yes_font_size: 0.88,
|
|
line_height: 1.7,
|
|
icon_margin: 0.7,
|
|
content_margin: 2.4
|
|
};
|
|
|
|
// Utility function to separate number and unit
|
|
function parseValue( value ) {
|
|
let match = value.trim().match( /^([-\d.]+)([a-z%]*)$/i );
|
|
return match ? { number: parseFloat( match[1]), unit: match[2] } : { number: 0, unit: '' };
|
|
}
|
|
|
|
// Process each factor
|
|
jQuery.each( factors, function( name, factor ) {
|
|
let multipliedSizes = clampSizes.map( function( value ) {
|
|
let parsed = parseValue( value );
|
|
let multiplied = parsed.number * factor;
|
|
return multiplied + parsed.unit;
|
|
} );
|
|
|
|
sizes[ name ] = 'clamp(' + multipliedSizes.join(', ') + ')';
|
|
} );
|
|
|
|
// Set the results back into `defaults`
|
|
this.circle_yes_font_size = sizes.circle_yes_font_size;
|
|
this.line_height = sizes.line_height;
|
|
this.icon_margin = sizes.icon_margin;
|
|
this.content_margin = sizes.content_margin;
|
|
} else {
|
|
const fontSize = parseFloat( atts.values.size );
|
|
this.font_size = _.fusionValidateAttrValue( fontSize, 'px' );
|
|
this.line_height = _.fusionValidateAttrValue( fontSize * 1.7, 'px' );
|
|
this.icon_margin = _.fusionValidateAttrValue( fontSize * 0.7, 'px' );
|
|
this.content_margin = _.fusionValidateAttrValue( fontSize * 2.4, 'px' );
|
|
}
|
|
|
|
// Create attribute objects.
|
|
attributes.checklistShortcode = this.buildChecklistAttr( atts.values );
|
|
|
|
// Any extras that need passed on.
|
|
attributes.values = atts.values;
|
|
attributes.cid = this.model.get( 'cid' );
|
|
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* Modify values.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @param {Object} extras - The extras object.
|
|
* @return {void}
|
|
*/
|
|
validateValues: function( values, extras ) {
|
|
values.size = _.fusionValidateAttrValue( values.size, 'px' );
|
|
|
|
// Fallbacks for old size parameter and 'px' check+
|
|
if ( 'small' === values.size ) {
|
|
values.size = '13px';
|
|
} else if ( 'medium' === values.size ) {
|
|
values.size = '18px';
|
|
} else if ( 'large' === values.size ) {
|
|
values.size = '40px';
|
|
} else if ( -1 === values.size.indexOf( 'px' ) && -1 === values.size.indexOf( 'clamp(' ) ) {
|
|
values.size = fusionSanitize.convert_font_size_to_px( values.size, extras.body_font_size );
|
|
}
|
|
|
|
values.circle = ( 1 == values.circle ) ? 'yes' : values.circle;
|
|
|
|
values.margin_bottom = _.fusionValidateAttrValue( values.margin_bottom, 'px' );
|
|
values.margin_left = _.fusionValidateAttrValue( values.margin_left, 'px' );
|
|
values.margin_right = _.fusionValidateAttrValue( values.margin_right, 'px' );
|
|
values.margin_top = _.fusionValidateAttrValue( values.margin_top, 'px' );
|
|
},
|
|
|
|
/**
|
|
* Builds attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {Object}
|
|
*/
|
|
buildChecklistAttr: function( values ) {
|
|
|
|
// Main Attributes
|
|
var checklistShortcode = {
|
|
'class': 'fusion-checklist fusion-checklist-' + this.model.get( 'cid' ),
|
|
'style': this.getStyleVars( values )
|
|
};
|
|
|
|
if ( -1 === checklistShortcode.style.indexOf( '--awb-odd-row-bgcolor' ) && -1 === checklistShortcode.style.indexOf( '--awb-item-padding-top' ) ) {
|
|
checklistShortcode[ 'class' ] += ' fusion-checklist-default';
|
|
}
|
|
|
|
checklistShortcode = _.fusionVisibilityAtts( values.hide_on_mobile, checklistShortcode );
|
|
|
|
if ( 'yes' === values.divider ) {
|
|
checklistShortcode[ 'class' ] += ' fusion-checklist-divider';
|
|
}
|
|
|
|
if ( '' !== values.type ) {
|
|
checklistShortcode[ 'class' ] += ' type-' + values.type;
|
|
}
|
|
|
|
if ( '' !== values[ 'class' ] ) {
|
|
checklistShortcode[ 'class' ] += ' ' + values[ 'class' ];
|
|
}
|
|
|
|
if ( '' !== values.id ) {
|
|
checklistShortcode.id = values.id;
|
|
}
|
|
checklistShortcode[ 'class' ] += ' fusion-child-element';
|
|
checklistShortcode[ 'data-empty' ] = this.emptyPlaceholderText;
|
|
|
|
return checklistShortcode;
|
|
},
|
|
|
|
/**
|
|
* Extendable function for when child elements get generated.
|
|
*
|
|
* @since 3.9
|
|
* @param {Object} modules An object of modules that are not a view yet.
|
|
* @return {void}
|
|
*/
|
|
onGenerateChildElements: function( modules ) {
|
|
var i = 1;
|
|
|
|
// Set child counter. Used for auto rotation.
|
|
_.each( modules, function( child ) {
|
|
child.counter = i;
|
|
i++;
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Updates list when type is set to numbered.
|
|
*
|
|
* @since 3.9
|
|
* @return {void}
|
|
*/
|
|
updateList: function() {
|
|
var counter = 1,
|
|
self = this;
|
|
if ( 'numbered' === this.values.type ) {
|
|
this.$el.find( '.fusion-li-item' ).each( function() {
|
|
jQuery( this ).find( '.icon-wrapper' ).html( counter );
|
|
counter++;
|
|
} );
|
|
|
|
setTimeout( function() {
|
|
var i = 1;
|
|
_.each( self.model.children.models, function( child ) {
|
|
child.set( 'counter', i );
|
|
i++;
|
|
} );
|
|
}, 100 );
|
|
}
|
|
},
|
|
|
|
getStyleVars: function( values ) {
|
|
var cssVarsOptions = [
|
|
'size',
|
|
'margin_top',
|
|
'margin_right',
|
|
'margin_bottom',
|
|
'margin_left',
|
|
'item_padding_top',
|
|
'item_padding_right',
|
|
'item_padding_bottom',
|
|
'item_padding_left',
|
|
'odd_row_bgcolor',
|
|
'even_row_bgcolor',
|
|
'iconcolor'
|
|
],
|
|
customVars = {};
|
|
|
|
if ( 'yes' === values.divider ) {
|
|
cssVarsOptions.push( 'divider_color' );
|
|
}
|
|
|
|
if ( '' !== values.textcolor ) {
|
|
cssVarsOptions.push( 'textcolor' );
|
|
}
|
|
|
|
customVars.line_height = this.line_height;
|
|
customVars.icon_width = this.line_height;
|
|
customVars.icon_height = this.line_height ;
|
|
customVars.icon_margin = this.icon_margin
|
|
customVars.content_margin = this.content_margin
|
|
|
|
if ( 'yes' === values.circle ) {
|
|
customVars.circlecolor = values.circlecolor;
|
|
customVars.circle_yes_font_size = values.circle_yes_font_size + 'px';
|
|
}
|
|
|
|
return this.getCssVarsForOptions( cssVarsOptions ) + this.getCustomCssVars( customVars );
|
|
}
|
|
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|