TablePress – Tables in WordPress made easy / 3.0

TablePress – Tables in WordPress made easy v3.0

tablepress / admin / js / edit / table-manipulation.js

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

342 lines 11.8 KB

Raw Download Zip

1	/**
2	* JavaScript code for the "Edit" section integration of the "Table Manipulation" buttons.
3	*
4	* @package TablePress
5	* @subpackage Views JavaScript
6	* @author Tobias Bäthge
7	* @since 3.0.0
8	*/
9
10	/**
11	* WordPress dependencies.
12	*/
13	import { useState } from 'react';
14	import {
15	Button,
16	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
17	__experimentalNumberControl as NumberControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
18	__experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
19	} from '@wordpress/components';
20	import { createInterpolateElement } from '@wordpress/element';
21	import { __, _x, sprintf } from '@wordpress/i18n';
22
23	const modifierKey = ( window?.navigator?.platform?.includes( 'Mac' ) ) ?
24	_x( '⌘', 'keyboard shortcut modifier key on a Mac keyboard', 'tablepress' ) :
25	_x( 'Ctrl+', 'keyboard shortcut modifier key on a non-Mac keyboard', 'tablepress' );
26
27	/**
28	* Internal dependencies.
29	*/
30	import { initializeReactComponentInPortal } from '../common/react-loader';
31
32	const Section = () => {
33	const [ columnsAppendNumber, setColumnsAppendNumber ] = useState( 1 );
34	const [ rowsAppendNumber, setRowsAppendNumber ] = useState( 1 );
35
36	const move = ( direction, type ) => {
37	if ( ! tp.helpers.move_allowed( type, direction ) ) {
38	window.alert( __( 'You can not do this move, because you reached the border of the table.', 'tablepress' ) );
39	return;
40	}
41	tp.callbacks.move( direction, type );
42	};
43
44	const remove = ( type ) => {
45	const handling_rows = ( 'rows' === type );
46	const num_rocs = handling_rows ? tp.editor.options.data.length : tp.editor.options.columns.length;
47	if ( num_rocs === tp.helpers.selection[ type ].length ) {
48	window.alert( handling_rows ? __( 'You can not delete all table rows!', 'tablepress' ) : __( 'You can not delete all table columns!', 'tablepress' ) );
49	return;
50	}
51	tp.callbacks.remove( type );
52	};
53
54	return (
55	<VStack
56	spacing="16px"
57	style={ {
58	paddingTop: '6px',
59	} }
60	>
61	<table className="tablepress-postbox-table fixed">
62	<tbody>
63	<tr className="bottom-border">
64	<td className="column-1">
65	<HStack alignment="left">
66	<span>{ __( 'Selected cells', 'tablepress' ) }:</span>
67	<HStack spacing="4px" alignment="left" expanded={ false } wrap={ true }>
68	<Button
69	variant="secondary"
70	size="compact"
71	text={ __( 'Insert Link', 'tablepress' ) }
72	title={ sprintf( __( 'Keyboard Shortcut: %s', 'tablepress' ), sprintf( _x( '%1$sL', 'keyboard shortcut for Insert Link', 'tablepress' ), modifierKey ) ) }
73	onClick={ () => tp.callbacks.insert_link.open_dialog() }
74	/>
75	<Button
76	variant="secondary"
77	size="compact"
78	text={ __( 'Insert Image', 'tablepress' ) }
79	title={ sprintf( __( 'Keyboard Shortcut: %s', 'tablepress' ), sprintf( _x( '%1$sI', 'keyboard shortcut for Insert Image', 'tablepress' ), modifierKey ) ) }
80	onClick={ () => tp.callbacks.insert_image.open_dialog() }
81	/>
82	<Button
83	variant="secondary"
84	size="compact"
85	text={ __( 'Advanced Editor', 'tablepress' ) }
86	title={ sprintf( __( 'Keyboard Shortcut: %s', 'tablepress' ), sprintf( _x( '%1$sE', 'keyboard shortcut for Advanced Editor', 'tablepress' ), modifierKey ) ) }
87	onClick={ () => tp.callbacks.advanced_editor.open_dialog() }
88	/>
89	</HStack>
90	</HStack>
91	</td>
92	<td className="column-2">
93	<HStack alignment="left">
94	<span>{ __( 'Selected cells', 'tablepress' ) }:</span>
95	<HStack spacing="4px" alignment="left" expanded={ false } wrap={ true }>
96	<Button
97	variant="secondary"
98	size="compact"
99	text={ __( 'Combine/Merge', 'tablepress' ) }
100	onClick={ () => {
101	if ( tp.helpers.cell_merge_allowed( 'alert' ) ) {
102	tp.callbacks.merge_cells();
103	}
104	} }
105	/>
106	<Button
107	variant="secondary"
108	size="compact"
109	text={ __( '?', 'tablepress' ) }
110	title={ __( 'Help on combining cells', 'tablepress' ) }
111	onClick={ () => tp.callbacks.help_box.open_dialog( '#help-box-combine-cells' ) }
112	/>
113	</HStack>
114	</HStack>
115	</td>
116	</tr>
117	<tr className="top-border">
118	<td className="column-1">
119	<HStack alignment="left">
120	<span>{ __( 'Selected rows', 'tablepress' ) }:</span>
121	<HStack spacing="4px" alignment="left" expanded={ false } wrap={ true }>
122	<Button
123	variant="secondary"
124	size="compact"
125	text={ __( 'Duplicate', 'tablepress' ) }
126	onClick={ () => tp.callbacks.insert_duplicate( 'duplicate', 'rows' ) }
127	/>
128	<Button
129	variant="secondary"
130	size="compact"
131	text={ __( 'Insert', 'tablepress' ) }
132	onClick={ () => tp.callbacks.insert_duplicate( 'insert', 'rows' ) }
133	/>
134	<Button
135	variant="secondary"
136	size="compact"
137	text={ __( 'Delete', 'tablepress' ) }
138	onClick={ () => remove( 'rows' ) }
139	/>
140	</HStack>
141	</HStack>
142	</td>
143	<td className="column-2">
144	<HStack alignment="left">
145	<span>{ __( 'Selected columns', 'tablepress' ) }:</span>
146	<HStack spacing="4px" alignment="left" expanded={ false } wrap={ true }>
147	<Button
148	variant="secondary"
149	size="compact"
150	text={ __( 'Duplicate', 'tablepress' ) }
151	onClick={ () => tp.callbacks.insert_duplicate( 'duplicate', 'columns' ) }
152	/>
153	<Button
154	variant="secondary"
155	size="compact"
156	text={ __( 'Insert', 'tablepress' ) }
157	onClick={ () => tp.callbacks.insert_duplicate( 'insert', 'columns' ) }
158	/>
159	<Button
160	variant="secondary"
161	size="compact"
162	text={ __( 'Delete', 'tablepress' ) }
163	onClick={ () => remove( 'columns' ) }
164	/>
165	</HStack>
166	</HStack>
167	</td>
168	</tr>
169	<tr>
170	<td className="column-1">
171	<HStack alignment="left">
172	<span>{ __( 'Selected rows', 'tablepress' ) }:</span>
173	<HStack spacing="4px" alignment="left" expanded={ false } wrap={ true }>
174	<Button
175	variant="secondary"
176	size="compact"
177	text={ __( 'Move up', 'tablepress' ) }
178	title={ sprintf( __( 'Keyboard Shortcut: %s', 'tablepress' ), sprintf( _x( '%1$s⇧↑', 'keyboard shortcut for Move up', 'tablepress' ), modifierKey ) ) }
179	onClick={ () => move( 'up', 'rows' ) }
180	/>
181	<Button
182	variant="secondary"
183	size="compact"
184	text={ __( 'Move down', 'tablepress' ) }
185	title={ sprintf( __( 'Keyboard Shortcut: %s', 'tablepress' ), sprintf( _x( '%1$s⇧↓', 'keyboard shortcut for Move down', 'tablepress' ), modifierKey ) ) }
186	onClick={ () => move( 'down', 'rows' ) }
187	/>
188	</HStack>
189	</HStack>
190	</td>
191	<td className="column-2">
192	<HStack alignment="left">
193	<span>{ __( 'Selected columns', 'tablepress' ) }:</span>
194	<HStack spacing="4px" alignment="left" expanded={ false } wrap={ true }>
195	<Button
196	variant="secondary"
197	size="compact"
198	text={ __( 'Move left', 'tablepress' ) }
199	title={ sprintf( __( 'Keyboard Shortcut: %s', 'tablepress' ), sprintf( _x( '%1$s⇧←', 'keyboard shortcut for Move left', 'tablepress' ), modifierKey ) ) }
200	onClick={ () => move( 'left', 'columns' ) }
201	/>
202	<Button
203	variant="secondary"
204	size="compact"
205	text={ __( 'Move right', 'tablepress' ) }
206	title={ sprintf( __( 'Keyboard Shortcut: %s', 'tablepress' ), sprintf( _x( '%1$s⇧→', 'keyboard shortcut for Move right', 'tablepress' ), modifierKey ) ) }
207	onClick={ () => move( 'right', 'columns' ) }
208	/>
209	</HStack>
210	</HStack>
211	</td>
212	</tr>
213	<tr className="bottom-border">
214	<td className="column-1">
215	<HStack alignment="left">
216	<span>{ __( 'Selected rows', 'tablepress' ) }:</span>
217	<HStack spacing="4px" alignment="left" expanded={ false } wrap={ true }>
218	<Button
219	variant="secondary"
220	size="compact"
221	text={ __( 'Hide', 'tablepress' ) }
222	onClick={ () => tp.callbacks.hide_unhide( 'hide', 'rows' ) }
223	/>
224	<Button
225	variant="secondary"
226	size="compact"
227	text={ __( 'Show', 'tablepress' ) }
228	onClick={ () => tp.callbacks.hide_unhide( 'unhide', 'rows' ) }
229	/>
230	</HStack>
231	</HStack>
232	</td>
233	<td className="column-2">
234	<HStack alignment="left">
235	<span>{ __( 'Selected columns', 'tablepress' ) }:</span>
236	<HStack spacing="4px" alignment="left" expanded={ false } wrap={ true }>
237	<Button
238	variant="secondary"
239	size="compact"
240	text={ __( 'Hide', 'tablepress' ) }
241	onClick={ () => tp.callbacks.hide_unhide( 'hide', 'columns' ) }
242	/>
243	<Button
244	variant="secondary"
245	size="compact"
246	text={ __( 'Show', 'tablepress' ) }
247	onClick={ () => tp.callbacks.hide_unhide( 'unhide', 'columns' ) }
248	/>
249	</HStack>
250	</HStack>
251	</td>
252	</tr>
253	<tr className="top-border">
254	<td className="column-1">
255	<HStack alignment="left">
256	<label htmlFor="rows-append-number">
257	<HStack>
258	{
259	createInterpolateElement(
260	__( 'Add <input /> row(s)', 'tablepress' ),
261	{
262	input: (
263	<NumberControl
264	id="rows-append-number"
265	title={ __( 'This field must contain a positive number.', 'tablepress' ) }
266	isDragEnabled={ false }
267	value={ rowsAppendNumber }
268	onChange={ ( newRowsAppendNumber ) => {
269	newRowsAppendNumber = '' !== newRowsAppendNumber ? parseInt( newRowsAppendNumber, 10 ) : 1;
270	setRowsAppendNumber( newRowsAppendNumber )
271	} }
272	min={ 1 }
273	required={ true }
274	style={ {
275	width: '55px',
276	} }
277	/>
278	),
279	},
280	)
281	}
282	</HStack>
283	</label>
284	<Button
285	variant="secondary"
286	size="compact"
287	text={ __( 'Add', 'tablepress' ) }
288	onClick={ () => tp.callbacks.append( 'rows', rowsAppendNumber ) }
289	/>
290	</HStack>
291	</td>
292	<td className="column-2">
293	<HStack alignment="left">
294	<label htmlFor="columns-append-number">
295	<HStack>
296	{
297	createInterpolateElement(
298	__( 'Add <input /> column(s)', 'tablepress' ),
299	{
300	input: (
301	<NumberControl
302	id="columns-append-number"
303	title={ __( 'This field must contain a positive number.', 'tablepress' ) }
304	isDragEnabled={ false }
305	value={ columnsAppendNumber }
306	onChange={ ( newColumnsAppendNumber ) => {
307	newColumnsAppendNumber = '' !== newColumnsAppendNumber ? parseInt( newColumnsAppendNumber, 10 ) : 1;
308	setColumnsAppendNumber( newColumnsAppendNumber )
309	} }
310	min={ 1 }
311	required={ true }
312	style={ {
313	width: '55px',
314	} }
315	/>
316	),
317	},
318	)
319	}
320	</HStack>
321	</label>
322	<Button
323	variant="secondary"
324	size="compact"
325	text={ __( 'Add', 'tablepress' ) }
326	onClick={ () => tp.callbacks.append( 'columns', columnsAppendNumber ) }
327	/>
328	</HStack>
329	</td>
330	</tr>
331	</tbody>
332	</table>
333	</VStack>
334	);
335	};
336
337	initializeReactComponentInPortal(
338	'table-manipulation',
339	'edit',
340	Section,
341	);
342