Jetpack – WP Security, Backup, Speed, & Growth / 16.2

Jetpack – WP Security, Backup, Speed, & Growth v16.2

jetpack / modules / custom-post-types / js / many-items.js

many-items.js in Jetpack – WP Security, Backup, Speed, & Growth 16.2, at modules/custom-post-types/js/many-items.js

145 lines 4.0 KB

Raw Download Zip

1	( function () {
2	let menuSelector, nonceInput;
3	const initializedTables = new Set();
4
5	const methods = {
6	init: function ( table ) {
7	let tbody = table.lastElementChild;
8	while ( tbody && tbody.tagName !== 'TBODY' ) {
9	tbody = tbody.previousElementSibling;
10	}
11	const row = tbody.querySelector( 'tr:first-child' ).cloneNode( true );
12
13	table.dataset.form = table.closest( 'form' );
14	table.dataset.tbody = tbody;
15	table.dataset.row = row;
16	table.dataset.currentRow = row;
17
18	menuSelector = document.getElementById( 'nova-menu-tax' );
19	nonceInput = document.getElementById( '_wpnonce' );
20
21	table.addEventListener( 'keypress', function ( event ) {
22	if ( event.which !== 13 ) return;
23
24	event.preventDefault();
25	if ( typeof FormData === 'function' ) {
26	methods.submitRow.call( table );
27	}
28	methods.addRow.call( table );
29	} );
30
31	table.addEventListener( 'focusin', function ( event ) {
32	if ( event.target.tagName === 'INPUT' \|\| event.target.tagName === 'TEXTAREA' ) {
33	table.dataset.currentRow = event.target.closest( 'tr' );
34	}
35	} );
36
37	initializedTables.add( table );
38	return table;
39	},
40
41	destroy: function ( table ) {
42	if ( this.observer ) {
43	this.observer.disconnect();
44	}
45	table.removeEventListener( 'keypress', methods.keypressHandler );
46	table.removeEventListener( 'focusin', methods.focusinHandler );
47	initializedTables.delete( table );
48	return table;
49	},
50
51	submitRow: function ( table ) {
52	const submittedRow = table.dataset.currentRow;
53	const currentInputs = submittedRow.querySelectorAll( 'input, textarea, select' );
54	const form = document.querySelector( table.dataset.form );
55	const allInputs = Array.from( form.querySelectorAll( 'input, textarea, select' ) );
56
57	currentInputs.forEach( input => ( input.disabled = true ) );
58	allInputs
59	.filter( input => ! currentInputs.includes( input ) )
60	.forEach( input => ( input.disabled = true ) );
61
62	const partialFormData = new FormData( form );
63	partialFormData.append( 'ajax', '1' );
64	partialFormData.append( 'nova_menu_tax', menuSelector.value );
65	partialFormData.append( '_wpnonce', nonceInput.value );
66
67	fetch( '', {
68	method: 'POST',
69	body: partialFormData,
70	} )
71	.then( response => response.text() )
72	.then( responseText => {
73	submittedRow.innerHTML = responseText;
74	} );
75
76	allInputs.forEach( input => ( input.disabled = false ) );
77
78	return table;
79	},
80
81	addRow: function ( table ) {
82	const row = table.dataset.row.cloneNode( true );
83
84	const tbody = table.dataset.tbody;
85	tbody.appendChild( row );
86
87	const firstInput = row.querySelector( 'input, textarea, select' );
88	if ( firstInput ) firstInput.focus();
89
90	return table;
91	},
92
93	clickAddRow: function ( table ) {
94	let tbody = table.lastElementChild;
95
96	while ( tbody && tbody.tagName !== 'TBODY' ) {
97	tbody = tbody.previousElementSibling;
98	}
99	const row = tbody.querySelector( 'tr:first-child' ).cloneNode( true );
100
101	row.querySelectorAll( 'input, textarea' ).forEach( input => {
102	input.value = '';
103	} );
104
105	tbody.appendChild( row );
106	},
107	};
108
109	const observeTableRemoval = function ( list ) {
110	const observer = new MutationObserver( mutations => {
111	mutations.forEach( mutation => {
112	mutation.removedNodes.forEach( node => {
113	if ( node.matches && node.matches( '.many-items-table' ) ) {
114	methods.destroy( node );
115	}
116	} );
117	} );
118	} );
119
120	observer.observe( list, { childList: true, subtree: true } );
121	};
122
123	// Initialization for many-items-table
124	document.addEventListener( 'focusin', event => {
125	const table = event.target.closest( '.many-items-table' );
126	if ( table && ! initializedTables.has( table ) ) {
127	methods.init( table );
128	}
129	} );
130
131	document.addEventListener( 'click', event => {
132	if ( event.target.matches( 'a.nova-new-row' ) ) {
133	const table = event.target.closest( '.many-items-table' );
134	if ( table ) {
135	event.preventDefault();
136	methods.clickAddRow( table );
137	}
138	}
139	} );
140	const list = document.querySelector( '#the-list' ); // Scope to the specific table
141	if ( list ) {
142	observeTableRemoval( list );
143	}
144	} )();
145