220 lines
10 KiB
JavaScript
220 lines
10 KiB
JavaScript
/* global fusionBuilderText, FusionPageBuilderApp, fusionAllElements */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function( $ ) {
|
|
|
|
$( document ).ready( function() {
|
|
|
|
FusionPageBuilder.ModuleSettingsTableView = FusionPageBuilder.ElementSettingsView.extend( {
|
|
|
|
template: FusionPageBuilder.template( $( '#fusion-builder-block-module-settings-table-template' ).html() ),
|
|
|
|
events: function() {
|
|
return _.extend( {}, FusionPageBuilder.ElementSettingsView.prototype.events, {
|
|
'click .fusion-table-builder-add-column': 'addTableColumn',
|
|
'click .fusion-builder-table-clone-column': 'cloneTableColumn',
|
|
'click .fusion-table-builder-add-row': 'addTableRow',
|
|
'click .fusion-builder-table-delete-column': 'removeTableColumn',
|
|
'click .fusion-builder-table-delete-row': 'removeTableRow',
|
|
'click .fusion-builder-table-add-button': 'addButton',
|
|
'click .fusion-form-radio-button-set-button': 'buttonSetClick'
|
|
} );
|
|
},
|
|
|
|
removeTableRow: function( event ) {
|
|
if ( event ) {
|
|
event.preventDefault();
|
|
jQuery( event.currentTarget ).parents( 'tr' ).remove();
|
|
}
|
|
|
|
},
|
|
|
|
removeTableColumn: function( event ) {
|
|
var columnID;
|
|
|
|
if ( event ) {
|
|
event.preventDefault();
|
|
|
|
columnID = $( event.currentTarget ).parents( 'th' ).data( 'th-id' );
|
|
|
|
this.$el.find( 'td[data-td-id="' + columnID + '"]' ).remove();
|
|
this.$el.find( 'th[data-th-id="' + columnID + '"]' ).remove();
|
|
}
|
|
},
|
|
|
|
addTableColumn: function( event ) {
|
|
var columnID,
|
|
columnIds;
|
|
|
|
if ( event ) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
if ( ! this.$el.find( '.fusion-table-builder .fusion-builder-table thead tr th' ).length ) {
|
|
columnID = 1;
|
|
} else {
|
|
columnIds = this.$el.find( '.fusion-table-builder .fusion-builder-table thead tr th' ).map( function() {
|
|
return $( this ).data( 'th-id' );
|
|
} ).get();
|
|
|
|
columnID = Math.max.apply( Math, columnIds ) + 1;
|
|
}
|
|
|
|
// Add th
|
|
this.$el.find( '.fusion-table-builder .fusion-builder-table thead tr' ).append( '<th align="left" class="th-' + columnID + '" data-th-id="' + columnID + '"><div class="fusion-builder-table-hold"><div class="fusion-builder-table-column-options"><strong>' + fusionBuilderText.column_title + '</strong><span class="fa fusiona-trash-o fusion-builder-table-delete-column" title="' + fusionBuilderText.delete_column + '" data-column-id="' + columnID + '" /><span class="fa fusiona-file-add fusion-builder-table-clone-column" title="' + fusionBuilderText.clone_column + '" data-column-id="' + columnID + '" /></div></div><div class="fusion-builder-table-featured"><span>' + fusionBuilderText.standout_design + '</span> <div class="fusion-form-radio-button-set ui-buttonset"><input type="hidden" value="no" class="button-set-value" /><a href="#" class="fusion-form-radio-button-set-button ui-button buttonset-item ui-state-active" data-value="no">' + fusionBuilderText.no + '</a><a href="#" class="fusion-form-radio-button-set-button ui-button buttonset-item" data-value="yes">' + fusionBuilderText.yes + '</a></div></div><div class="fusion-builder-column-title"><input type="text" placeholder="' + fusionBuilderText.head_title + '" value="" /></div></th>' );
|
|
|
|
// Add td
|
|
this.$el.find( '.fusion-table-builder .fusion-builder-table tbody tr' ).each( function() {
|
|
|
|
if ( $( this ).hasClass( 'price' ) ) {
|
|
$( this ).append( '<td class="td-' + columnID + '" data-td-id="' + columnID + '"><div class="fusion-currency-holder"><input type="text" class="currency-input" placeholder="$" value="" /><div class="fusion-form-radio-button-set ui-buttonset currencypos-' + columnID + '"><input type="hidden" id="currencypos-' + columnID + '" name="currencypos-' + columnID + '" value="' + columnID + '" class="button-set-value currency-position" /><a href="#" class="fusion-form-radio-button-set-button ui-button buttonset-item ui-state-active" data-value="left">' + fusionBuilderText.currency_before + '</a><a href="#" class="fusion-form-radio-button-set-button ui-button buttonset-item" data-value="right">' + fusionBuilderText.currency_after + '</a></div></div><input type="text" class="price-input" placeholder="' + fusionBuilderText.price + '" value="" /><input type="text" class="time-input" placeholder="' + fusionBuilderText.period + '" value="" /></td>' );
|
|
|
|
} else {
|
|
$( this ).append( '<td class="td-' + columnID + '" data-td-id="' + columnID + '"><input type="text" placeholder="' + fusionBuilderText.enter_text + '" value="" /><span class="fa fusiona-trash-o fusion-builder-table-delete-row" title="' + fusionBuilderText.delete_row + '" data-row-id="' + columnID + '" /></td>' );
|
|
}
|
|
} );
|
|
|
|
// Add tfoot
|
|
this.$el.find( '.fusion-table-builder .fusion-builder-table tfoot tr' ).each( function() {
|
|
|
|
$( this ).append( '<td class="td-' + columnID + '" data-td-id="' + columnID + '"><a href="#" class="fusion-builder-table-add-button fusion-builder-button-default" data-type="fusion_button" data-id="' + columnID + '">' + fusionBuilderText.add_button + '</a><textarea placeholder="' + fusionBuilderText.enter_text + '" id="button_' + columnID + '"></textarea></td>' );
|
|
} );
|
|
},
|
|
|
|
cloneTableColumn: function( event ) {
|
|
var columnID,
|
|
columnIds,
|
|
newColumnID,
|
|
$theadTr,
|
|
$tbodyTd,
|
|
$tfootTd;
|
|
|
|
jQuery( event.target ).trigger( 'focus' );
|
|
|
|
if ( event ) {
|
|
event.preventDefault();
|
|
columnID = $( event.currentTarget ).data( 'column-id' );
|
|
columnIds = this.$el.find( '.fusion-table-builder .fusion-builder-table thead tr th' ).map( function() {
|
|
return $( this ).data( 'th-id' );
|
|
} ).get();
|
|
|
|
newColumnID = Math.max.apply( Math, columnIds ) + 1;
|
|
}
|
|
|
|
// Add cloned th.
|
|
$theadTr = $( event.currentTarget ).parents( 'th' ).clone( true );
|
|
$theadTr.attr( 'data-th-id', newColumnID );
|
|
$theadTr.attr( 'class', 'th-' + newColumnID );
|
|
$theadTr.find( '.fusion-builder-table-clone-column' ).attr( 'data-column-id', newColumnID );
|
|
$theadTr.find( 'input' ).each( function() {
|
|
jQuery( this ).attr( 'value', jQuery( this ).val() );
|
|
} );
|
|
$( event.currentTarget ).parents( 'th' ).after( $theadTr.outerHTML() );
|
|
|
|
// Add cloned td.
|
|
this.$el.find( '.fusion-table-builder .fusion-builder-table tbody tr' ).each( function() {
|
|
$tbodyTd = jQuery( this ).find( 'td[data-td-id="' + columnID + '"]' ).clone( true );
|
|
$tbodyTd.attr( 'data-td-id', newColumnID );
|
|
$tbodyTd.attr( 'class', 'td-' + newColumnID );
|
|
$tbodyTd.find( 'input' ).each( function() {
|
|
jQuery( this ).attr( 'value', jQuery( this ).val() );
|
|
} );
|
|
jQuery( this ).find( 'td[data-td-id="' + columnID + '"]' ).after( $tbodyTd.outerHTML() );
|
|
} );
|
|
|
|
// Add cloned tfoot.
|
|
this.$el.find( '.fusion-table-builder .fusion-builder-table tfoot tr' ).each( function() {
|
|
$tfootTd = jQuery( this ).find( 'td[data-td-id="' + columnID + '"]' ).clone( true );
|
|
$tfootTd.attr( 'data-td-id', newColumnID );
|
|
$tfootTd.attr( 'class', 'td-' + newColumnID );
|
|
$tfootTd.find( 'a' ).attr( 'data-id', newColumnID );
|
|
$tfootTd.find( 'textarea' ).attr( 'id', 'button_' + newColumnID );
|
|
$tfootTd.find( 'textarea' ).text( jQuery( this ).find( 'td[data-td-id="' + columnID + '"] textarea' ).val() );
|
|
jQuery( this ).find( 'td[data-td-id="' + columnID + '"]' ).after( $tfootTd.outerHTML() );
|
|
} );
|
|
|
|
},
|
|
|
|
addTableRow: function() {
|
|
var columns = 0,
|
|
td = '',
|
|
lastRowID = ( 'undefined' !== typeof this.$el.find( '.fusion-table-builder .fusion-builder-table tbody tr:last-child' ).data( 'tr-id' ) ) ? this.$el.find( '.fusion-table-builder .fusion-builder-table tbody tr:last-child' ).data( 'tr-id' ) : 0,
|
|
newRowID = lastRowID + 1,
|
|
i;
|
|
|
|
if ( 1 > this.$el.find( '.fusion-table-builder .fusion-builder-table thead tr th' ).length ) {
|
|
return;
|
|
}
|
|
|
|
columns = this.$el.find( '.fusion-table-builder .fusion-builder-table thead tr th' ).length;
|
|
|
|
for ( i = 1; i <= columns; i++ ) {
|
|
td += '<td class="td-' + i + '" data-td-id="' + i + '" ><input type="text" placeholder="' + fusionBuilderText.enter_text + '" value="" /><span class="fa fusiona-trash-o fusion-builder-table-delete-row" title="' + fusionBuilderText.delete_row + '" data-row-id="' + newRowID + '" /></td>';
|
|
}
|
|
|
|
// Add td
|
|
this.$el.find( '.fusion-table-builder .fusion-builder-table tbody' ).append( '<tr class="fusion-table-row tr-' + newRowID + '" data-tr-id="' + newRowID + '">' + td + '</tr>' );
|
|
},
|
|
|
|
buttonSetClick: function( event ) {
|
|
var $radiosetcontainer;
|
|
|
|
event.preventDefault();
|
|
|
|
$radiosetcontainer = jQuery( event.target ).parents( '.fusion-form-radio-button-set' );
|
|
$radiosetcontainer.find( '.ui-state-active' ).removeClass( 'ui-state-active' );
|
|
jQuery( event.target ).addClass( 'ui-state-active' );
|
|
$radiosetcontainer.find( '.button-set-value' ).val( $radiosetcontainer.find( '.ui-state-active' ).data( 'value' ) );
|
|
},
|
|
|
|
addButton: function( event ) {
|
|
|
|
var defaultParams,
|
|
params,
|
|
elementType,
|
|
value,
|
|
elementID;
|
|
|
|
if ( event ) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
elementType = $( event.currentTarget ).data( 'type' );
|
|
elementID = $( event.currentTarget ).data( 'id' );
|
|
|
|
FusionPageBuilderApp.manualGenerator = FusionPageBuilderApp.shortcodeGenerator;
|
|
FusionPageBuilderApp.manualEditor = FusionPageBuilderApp.shortcodeGeneratorEditorID;
|
|
FusionPageBuilderApp.manuallyAdded = true;
|
|
FusionPageBuilderApp.shortcodeGenerator = true;
|
|
FusionPageBuilderApp.shortcodeGeneratorEditorID = 'button_' + elementID;
|
|
|
|
// Get default options
|
|
defaultParams = fusionAllElements[ elementType ].params;
|
|
params = {};
|
|
|
|
// Process default parameters from shortcode
|
|
_.each( defaultParams, function( param ) {
|
|
if ( _.isObject( param.value ) ) {
|
|
value = param[ 'default' ];
|
|
} else {
|
|
value = param.value;
|
|
}
|
|
params[ param.param_name ] = value;
|
|
} );
|
|
|
|
this.collection.add( [
|
|
{
|
|
type: 'generated_element',
|
|
added: 'manually',
|
|
element_type: elementType,
|
|
params: params
|
|
}
|
|
] );
|
|
}
|
|
|
|
} );
|
|
|
|
} );
|
|
|
|
}( jQuery ) );
|