107 lines
3.5 KiB
JavaScript
107 lines
3.5 KiB
JavaScript
/* global FusionPageBuilderApp, fusionBuilderGetContent */
|
|
/* eslint no-unused-vars: off */
|
|
/* eslint no-loop-func: off */
|
|
jQuery( document ).ready( function() {
|
|
|
|
jQuery( 'body' ).on( 'change', '#fusion_table_type, #sliderfusion_table_rows, #sliderfusion_table_columns', function() {
|
|
var types = [
|
|
'',
|
|
'table-1',
|
|
'table-2'
|
|
],
|
|
tableOptions = jQuery( this ).closest( '.fusion_table' ),
|
|
type = tableOptions.find( '#fusion_table_type' ).val(),
|
|
rows = tableOptions.find( '#sliderfusion_table_rows' ).val(),
|
|
columns = tableOptions.find( '#sliderfusion_table_columns' ).val(),
|
|
oldContent, newContent,
|
|
i, j, tableDOM;
|
|
|
|
if ( true === FusionPageBuilderApp.shortcodeGenerator ) {
|
|
oldContent = fusionBuilderGetContent( 'generator_element_content' );
|
|
} else {
|
|
oldContent = fusionBuilderGetContent( 'element_content' );
|
|
}
|
|
|
|
tableDOM = jQuery.parseHTML( oldContent.trim() );
|
|
tableDOM = generateTable( tableDOM, tableOptions );
|
|
|
|
newContent = jQuery( tableDOM ).prop( 'outerHTML' );
|
|
|
|
setTimeout( function() {
|
|
if ( true === FusionPageBuilderApp.shortcodeGenerator ) {
|
|
FusionPageBuilderApp.fusionBuilderSetContent( 'generator_element_content', newContent );
|
|
} else {
|
|
FusionPageBuilderApp.fusionBuilderSetContent( 'element_content', newContent );
|
|
}
|
|
|
|
}, 100 );
|
|
|
|
} );
|
|
|
|
/**
|
|
* Generates table HTML.
|
|
*
|
|
* @since 2.0.0
|
|
* @param {string} tableDOM - The existing DOM.
|
|
* @return {string}
|
|
*/
|
|
function generateTable( tableDOM, tableOptions ) {
|
|
var i, j,
|
|
styleNew = tableOptions.find( '#fusion_table_type' ).val(),
|
|
rowsNew = parseInt( tableOptions.find( '#sliderfusion_table_rows' ).val() ),
|
|
columnsNew = parseInt( tableOptions.find( '#sliderfusion_table_columns' ).val() ),
|
|
styleOld = jQuery( tableDOM ).attr( 'class' ).replace( /[^\d.]/g, '' ),
|
|
tr = jQuery( tableDOM ).find( 'tbody > tr' ),
|
|
thTdOld = jQuery( tableDOM ).find( 'th' ).length,
|
|
tdOld = tr.first().children( 'td' ).length,
|
|
rowsOld = tr.length + 1,
|
|
columnsOld = Math.max( thTdOld, tdOld ),
|
|
rowMarkup = '';
|
|
|
|
if ( styleOld !== styleNew ) {
|
|
jQuery( tableDOM ).attr( 'class', jQuery( tableDOM ).attr( 'class' ).replace( styleOld, styleNew ) );
|
|
}
|
|
|
|
if ( rowsNew > rowsOld ) {
|
|
if ( ! jQuery( tableDOM ).find( 'tbody' ).length ) {
|
|
jQuery( tableDOM ).find( 'thead' ).after( '<tbody></tbod>' );
|
|
}
|
|
|
|
for ( i = rowsOld; i < rowsNew; i++ ) {
|
|
rowMarkup = '';
|
|
|
|
for ( j = 1; j <= columnsNew; j++ ) {
|
|
rowMarkup += '<td align="left">Column ' + j + ' Value ' + i + '</td>';
|
|
}
|
|
|
|
jQuery( tableDOM ).find( 'tbody' ).append( '<tr>' + rowMarkup + '</tr>' );
|
|
}
|
|
} else if ( rowsNew < rowsOld && 0 !== rowsNew ) {
|
|
for ( i = rowsNew + 1; i <= rowsOld; i++ ) {
|
|
jQuery( tableDOM ).find( 'tbody > tr' ).last().remove();
|
|
}
|
|
}
|
|
|
|
if ( columnsNew > columnsOld ) {
|
|
for ( i = columnsOld + 1; i <= columnsNew; i++ ) {
|
|
jQuery( tableDOM ).find( 'thead tr' ).append( '<th align="left">Column ' + i + '</th>' );
|
|
jQuery( tableDOM ).find( 'tbody tr' ).each( function( index ) {
|
|
var rowIndex = ( 0 < index ) ? ' ' + ( index + 1 ) : '';
|
|
|
|
jQuery( this ).append( '<td align="left">Column ' + i + ' Value' + rowIndex + '</td>' );
|
|
} );
|
|
}
|
|
|
|
} else if ( columnsNew < columnsOld ) {
|
|
for ( i = columnsNew + 1; i <= columnsOld; i++ ) {
|
|
jQuery( tableDOM ).find( 'thead th' ).last().remove();
|
|
jQuery( tableDOM ).find( 'tbody tr' ).each( function() {
|
|
jQuery( this ).find( 'td' ).last().remove();
|
|
} );
|
|
}
|
|
}
|
|
|
|
return tableDOM;
|
|
}
|
|
} );
|