/* global shippingClassesLocalizeScript, ajaxurl */
( function( $, data, wp, ajaxurl ) {
$( function() {
var $tbody = $( '.kkart-shipping-class-rows' ),
$save_button = $( '.kkart-shipping-class-save' ),
$row_template = wp.template( 'kkart-shipping-class-row' ),
$blank_template = wp.template( 'kkart-shipping-class-row-blank' ),
// Backbone model
ShippingClass = Backbone.Model.extend({
changes: {},
logChanges: function( changedRows ) {
var changes = this.changes || {};
_.each( changedRows, function( row, id ) {
changes[ id ] = _.extend( changes[ id ] || { term_id : id }, row );
} );
this.changes = changes;
this.trigger( 'change:classes' );
},
save: function() {
if ( _.size( this.changes ) ) {
$.post( ajaxurl + ( ajaxurl.indexOf( '?' ) > 0 ? '&' : '?' ) + 'action=kkart_shipping_classes_save_changes', {
kkart_shipping_classes_nonce : data.kkart_shipping_classes_nonce,
changes : this.changes
}, this.onSaveResponse, 'json' );
} else {
shippingClass.trigger( 'saved:classes' );
}
},
discardChanges: function( id ) {
var changes = this.changes || {};
// Delete all changes
delete changes[ id ];
// No changes? Disable save button.
if ( 0 === _.size( this.changes ) ) {
shippingClassView.clearUnloadConfirmation();
}
},
onSaveResponse: function( response, textStatus ) {
if ( 'success' === textStatus ) {
if ( response.success ) {
shippingClass.set( 'classes', response.data.shipping_classes );
shippingClass.trigger( 'change:classes' );
shippingClass.changes = {};
shippingClass.trigger( 'saved:classes' );
} else if ( response.data ) {
window.alert( response.data );
} else {
window.alert( data.strings.save_failed );
}
}
shippingClassView.unblock();
}
} ),
// Backbone view
ShippingClassView = Backbone.View.extend({
rowTemplate: $row_template,
initialize: function() {
this.listenTo( this.model, 'change:classes', this.setUnloadConfirmation );
this.listenTo( this.model, 'saved:classes', this.clearUnloadConfirmation );
this.listenTo( this.model, 'saved:classes', this.render );
$tbody.on( 'change', { view: this }, this.updateModelOnChange );
$( window ).on( 'beforeunload', { view: this }, this.unloadConfirmation );
$save_button.on( 'click', { view: this }, this.onSubmit );
$( document.body ).on( 'click', '.kkart-shipping-class-add', { view: this }, this.onAddNewRow );
$( document.body ).on( 'click', '.kkart-shipping-class-save-changes', { view: this }, this.onSubmit );
},
block: function() {
$( this.el ).block({
message: null,
overlayCSS: {
background: '#fff',
opacity: 0.6
}
});
},
unblock: function() {
$( this.el ).unblock();
},
render: function() {
var classes = _.indexBy( this.model.get( 'classes' ), 'term_id' ),
view = this;
this.$el.empty();
this.unblock();
if ( _.size( classes ) ) {
// Sort classes
classes = _.sortBy( classes, function( shipping_class ) {
return shipping_class.name;
} );
// Populate $tbody with the current classes
$.each( classes, function( id, rowData ) {
view.renderRow( rowData );
} );
} else {
view.$el.append( $blank_template );
}
},
renderRow: function( rowData ) {
var view = this;
view.$el.append( view.rowTemplate( rowData ) );
view.initRow( rowData );
},
initRow: function( rowData ) {
var view = this;
var $tr = view.$el.find( 'tr[data-id="' + rowData.term_id + '"]');
// Support select boxes
$tr.find( 'select' ).each( function() {
var attribute = $( this ).data( 'attribute' );
$( this ).find( 'option[value="' + rowData[ attribute ] + '"]' ).prop( 'selected', true );
} );
// Make the rows function
$tr.find( '.view' ).show();
$tr.find( '.edit' ).hide();
$tr.find( '.kkart-shipping-class-edit' ).on( 'click', { view: this }, this.onEditRow );
$tr.find( '.kkart-shipping-class-delete' ).on( 'click', { view: this }, this.onDeleteRow );
$tr.find( '.editing .kkart-shipping-class-edit' ).trigger('click');
$tr.find( '.kkart-shipping-class-cancel-edit' ).on( 'click', { view: this }, this.onCancelEditRow );
// Editing?
if ( true === rowData.editing ) {
$tr.addClass( 'editing' );
$tr.find( '.kkart-shipping-class-edit' ).trigger( 'click' );
}
},
onSubmit: function( event ) {
event.data.view.block();
event.data.view.model.save();
event.preventDefault();
},
onAddNewRow: function( event ) {
event.preventDefault();
var view = event.data.view,
model = view.model,
classes = _.indexBy( model.get( 'classes' ), 'term_id' ),
changes = {},
size = _.size( classes ),
newRow = _.extend( {}, data.default_shipping_class, {
term_id: 'new-' + size + '-' + Date.now(),
editing: true,
newRow : true
} );
changes[ newRow.term_id ] = newRow;
model.logChanges( changes );
view.renderRow( newRow );
$( '.kkart-shipping-classes-blank-state' ).remove();
},
onEditRow: function( event ) {
event.preventDefault();
$( this ).closest('tr').addClass('editing');
$( this ).closest('tr').find('.view').hide();
$( this ).closest('tr').find('.edit').show();
event.data.view.model.trigger( 'change:classes' );
},
onDeleteRow: function( event ) {
var view = event.data.view,
model = view.model,
classes = _.indexBy( model.get( 'classes' ), 'term_id' ),
changes = {},
term_id = $( this ).closest('tr').data('id');
event.preventDefault();
if ( classes[ term_id ] ) {
delete classes[ term_id ];
changes[ term_id ] = _.extend( changes[ term_id ] || {}, { deleted : 'deleted' } );
model.set( 'classes', classes );
model.logChanges( changes );
}
view.render();
},
onCancelEditRow: function( event ) {
var view = event.data.view,
model = view.model,
row = $( this ).closest('tr'),
term_id = $( this ).closest('tr').data('id'),
classes = _.indexBy( model.get( 'classes' ), 'term_id' );
event.preventDefault();
model.discardChanges( term_id );
if ( classes[ term_id ] ) {
classes[ term_id ].editing = false;
row.after( view.rowTemplate( classes[ term_id ] ) );
view.initRow( classes[ term_id ] );
}
row.remove();
},
setUnloadConfirmation: function() {
this.needsUnloadConfirm = true;
$save_button.removeAttr( 'disabled' );
},
clearUnloadConfirmation: function() {
this.needsUnloadConfirm = false;
$save_button.attr( 'disabled', 'disabled' );
},
unloadConfirmation: function( event ) {
if ( event.data.view.needsUnloadConfirm ) {
event.returnValue = data.strings.unload_confirmation_msg;
window.event.returnValue = data.strings.unload_confirmation_msg;
return data.strings.unload_confirmation_msg;
}
},
updateModelOnChange: function( event ) {
var model = event.data.view.model,
$target = $( event.target ),
term_id = $target.closest( 'tr' ).data( 'id' ),
attribute = $target.data( 'attribute' ),
value = $target.val(),
classes = _.indexBy( model.get( 'classes' ), 'term_id' ),
changes = {};
if ( ! classes[ term_id ] || classes[ term_id ][ attribute ] !== value ) {
changes[ term_id ] = {};
changes[ term_id ][ attribute ] = value;
}
model.logChanges( changes );
}
} ),
shippingClass = new ShippingClass({
classes: data.classes
} ),
shippingClassView = new ShippingClassView({
model: shippingClass,
el: $tbody
} );
shippingClassView.render();
});
})( jQuery, shippingClassesLocalizeScript, wp, ajaxurl );