TablePress – Tables in WordPress made easy / 3.0

TablePress – Tables in WordPress made easy v3.0

tablepress / admin / js / edit / screen-options.js

screen-options.js in TablePress – Tables in WordPress made easy 3.0, at admin/js/edit/screen-options.js

111 lines 3.3 KB

Raw Download Zip

1	/**
2	* JavaScript code for the "Screen Options" tab integration on the "Edit" screen.
3	*
4	* @package TablePress
5	* @subpackage Views JavaScript
6	* @author Tobias Bäthge
7	* @since 3.0.0
8	*/
9
10	/* globals tp, ajaxurl */
11
12	/**
13	* WordPress dependencies.
14	*/
15	import { __ } from '@wordpress/i18n';
16	import { buildQueryString } from '@wordpress/url';
17
18	/**
19	* Internal dependencies.
20	*/
21	import { $ } from '../common/functions';
22
23	/**
24	* Updates table editor layout with new screen option values.
25	*
26	* @param {Event} event `input` event of the screen options fields.
27	*/
28	const update = ( event ) => {
29	if ( ! event.target ) {
30	return;
31	}
32
33	if ( 'table_editor_line_clamp' === event.target.id ) {
34	tp.editor.el.style.setProperty( '--table-editor-line-clamp', parseInt( event.target.value, 10 ) );
35	tp.editor.updateCornerPosition();
36	return;
37	}
38
39	if ( 'table_editor_column_width' === event.target.id ) {
40	tp.screen_options.table_editor_column_width = parseInt( event.target.value, 10 );
41	tp.screen_options.table_editor_column_width = Math.max( tp.screen_options.table_editor_column_width, 30 ); // Ensure a minimum column width of 30 pixesl.
42	tp.screen_options.table_editor_column_width = Math.min( tp.screen_options.table_editor_column_width, 9999 ); // Ensure a maximum column width of 9999 pixesl.
43	tp.editor.colgroup.forEach( ( col ) => col.setAttribute( 'width', tp.screen_options.table_editor_column_width ) );
44	tp.editor.updateCornerPosition();
45	return;
46	}
47	};
48
49	/**
50	* Designates a screen option field to have been changed, so that the value is sent to the server when it is blurred.
51	*
52	* @param {Event} event `change` event of the screen options fields.
53	*/
54	const setWasChanged = ( event ) => {
55	if ( event.target ) {
56	event.target.was_changed = true;
57	}
58	};
59
60	/**
61	* Saves screen options to the server after they have been changed and the field is blurred.
62	*
63	* @param {Event} event `blur` event of the screen options fields.
64	*/
65	const save = ( event ) => {
66	if ( ! event.target ) {
67	return;
68	}
69
70	if ( ! event.target.was_changed ) {
71	return;
72	}
73
74	event.target.was_changed = false;
75
76	// Prepare the data for the AJAX request.
77	const request_data = {
78	action: 'tablepress_save_screen_options',
79	_ajax_nonce: tp.nonces.screen_options,
80	tablepress: {
81	[ event.target.id ]: parseInt( event.target.value, 10 ),
82	},
83	};
84
85	// Add spinner and change cursor.
86	event.target.parentNode.insertAdjacentHTML( 'beforeend', `<span id="spinner-save-changes" class="spinner-save-changes spinner is-active" title="${ __( 'Changes are being saved …', 'tablepress' ) }"></span>` );
87	document.body.classList.add( 'wait' );
88
89	// Save the table data to the server via an AJAX request.
90	fetch( ajaxurl, {
91	method: 'POST',
92	headers: {
93	'Content-Type': 'application/x-www-form-urlencoded',
94	Accept: 'application/json',
95	},
96	body: buildQueryString( request_data ),
97	} )
98	.finally( () => {
99	$( '#spinner-save-changes' ).remove();
100	document.body.classList.remove( 'wait' );
101	} );
102	};
103
104	// Register callbacks for the screen options.
105	const screenOptions = $( '#tablepress-screen-options' );
106	if ( screenOptions ) {
107	screenOptions.addEventListener( 'input', update );
108	screenOptions.addEventListener( 'change', setWasChanged );
109	screenOptions.addEventListener( 'focusout', save ); // Use the `focusout` event instead of `blur` as that does not bubble.
110	}
111