many-items.js
113 lines
| 1 | ( function ( $ ) { |
| 2 | var menuSelector, nonceInput, methods; |
| 3 | |
| 4 | methods = { |
| 5 | init: function (/*options*/) { |
| 6 | var $this = this, |
| 7 | tbody, |
| 8 | row; |
| 9 | |
| 10 | this.on( 'keypress.manyItemsTable', function ( event ) { |
| 11 | if ( 13 !== event.which ) { |
| 12 | return; |
| 13 | } |
| 14 | |
| 15 | event.preventDefault(); |
| 16 | if ( 'function' === typeof FormData ) { |
| 17 | methods.submitRow.apply( $this ); |
| 18 | } |
| 19 | methods.addRow.apply( $this ); |
| 20 | } ).on( 'focus.manyItemsTable', ':input', function (/*event*/) { |
| 21 | $this.data( 'currentRow', $( this ).parents( 'tr:first' ) ); |
| 22 | } ); |
| 23 | |
| 24 | tbody = this.find( 'tbody:last' ); |
| 25 | row = tbody.find( 'tr:first' ).clone(); |
| 26 | |
| 27 | this.data( 'form', this.parents( 'form:first' ) ); |
| 28 | this.data( 'tbody', tbody ); |
| 29 | this.data( 'row', row ); |
| 30 | this.data( 'currentRow', row ); |
| 31 | |
| 32 | menuSelector = $( '#nova-menu-tax' ); |
| 33 | nonceInput = $( '#_wpnonce' ); |
| 34 | |
| 35 | return this; |
| 36 | }, |
| 37 | |
| 38 | destroy: function () { |
| 39 | this.off( '.manyItemsTable' ); |
| 40 | |
| 41 | return this; |
| 42 | }, |
| 43 | |
| 44 | submitRow: function () { |
| 45 | var submittedRow, currentInputs, allInputs, partialFormData; |
| 46 | |
| 47 | submittedRow = this.data( 'currentRow' ); |
| 48 | currentInputs = submittedRow.find( ':input' ); |
| 49 | allInputs = this.data( 'form' ) |
| 50 | .find( ':input' ) |
| 51 | .not( currentInputs ) |
| 52 | .attr( 'disabled', true ) |
| 53 | .end(); |
| 54 | |
| 55 | partialFormData = new FormData( this.data( 'form' ).get( 0 ) ); |
| 56 | partialFormData.append( 'ajax', '1' ); |
| 57 | partialFormData.append( 'nova_menu_tax', menuSelector.val() ); |
| 58 | partialFormData.append( '_wpnonce', nonceInput.val() ); |
| 59 | |
| 60 | allInputs.attr( 'disabled', false ); |
| 61 | |
| 62 | $.ajax( { |
| 63 | url: '', |
| 64 | type: 'POST', |
| 65 | data: partialFormData, |
| 66 | processData: false, |
| 67 | contentType: false, |
| 68 | } ).complete( function ( xhr ) { |
| 69 | submittedRow.html( xhr.responseText ); |
| 70 | } ); |
| 71 | |
| 72 | currentInputs.attr( 'disabled', true ); |
| 73 | |
| 74 | return this; |
| 75 | }, |
| 76 | |
| 77 | addRow: function () { |
| 78 | var row = this.data( 'row' ).clone(); |
| 79 | row.appendTo( this.data( 'tbody' ) ); |
| 80 | row.find( ':input:first' ).focus(); |
| 81 | |
| 82 | return this; |
| 83 | }, |
| 84 | }; |
| 85 | |
| 86 | $.fn.manyItemsTable = function ( method ) { |
| 87 | // Method calling logic |
| 88 | if ( methods[ method ] ) { |
| 89 | return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ) ); |
| 90 | } else if ( typeof method === 'object' || ! method ) { |
| 91 | return methods.init.apply( this, arguments ); |
| 92 | } else { |
| 93 | $.error( 'Method ' + method + ' does not exist on jQuery.manyItemsTable' ); |
| 94 | return this; |
| 95 | } |
| 96 | }; |
| 97 | |
| 98 | $.fn.clickAddRow = function () { |
| 99 | var tbody = this.find( 'tbody:last' ), |
| 100 | row = tbody.find( 'tr:first' ).clone(); |
| 101 | |
| 102 | $( row ).find( 'input, textarea' ).val( '' ); |
| 103 | $( row ).appendTo( tbody ); |
| 104 | }; |
| 105 | } )( jQuery ); |
| 106 | |
| 107 | jQuery( '.many-items-table' ).one( 'focus', ':input', function ( event ) { |
| 108 | jQuery( event.delegateTarget ).manyItemsTable(); |
| 109 | } ); |
| 110 | jQuery( '.many-items-table' ).on( 'click', 'a.nova-new-row', function ( event ) { |
| 111 | jQuery( event.delegateTarget ).clickAddRow(); |
| 112 | } ); |
| 113 |