← All changes | admin/js/import.js +10 -123 1.14 → 3.0 View file →

		@@ -1,6 +1,6 @@
1	1	/**
2		- * JavaScript code for the "Import" screen
	2	+ * JavaScript code for the "Import" screen.
3	3	*
4	4	* @package TablePress
5	5	* @subpackage Views JavaScript
6	6	* @author Tobias Bäthge
		@@ -6,127 +6,14 @@
6	6	* @author Tobias Bäthge
7	7	* @since 1.0.0
8	8	*/
9	9
10		-jQuery( function( $ ) {
	10	+/**
	11	+ * Internal dependencies.
	12	+ */
	13	+import { initializeReactComponent } from './common/react-loader';
	14	+import Screen from './import/screen';
11	15
12		- 'use strict';
13		-
14		- /**
15		- * File extension of the file that is imported.
16		- */
17		- var extension = 'csv';
18		-
19		- /**
20		- * Show select box for table to replace only if needed.
21		- *
22		- * @since 1.0.0
23		- */
24		- $( '#row-import-type' ).on( 'change', 'input', function() {
25		- var import_type = $( this ).val();
26		- $( '#tables-import-existing-table' ).prop( 'disabled', ( ( 'replace' !== import_type && 'append' !== import_type ) || 'zip' === extension ) );
27		- } )
28		- .find( 'input:checked' ).trigger( 'change' );
29		-
30		- /**
31		- * Show only the import source field that was selected with the radio button.
32		- *
33		- * @since 1.0.0
34		- */
35		- $( '#row-import-source' ).on( 'change', 'input', function() {
36		- $( '#row-import-source-file-upload, #row-import-source-url, #row-import-source-server, #row-import-source-form-field' ).hide();
37		- $( '#row-import-source-' + $(this).val() ).show();
38		- } )
39		- .find( 'input:checked' ).trigger( 'change' );
40		-
41		- /**
42		- * Select correct value in import format dropdown on file select.
43		- *
44		- * @since 1.0.0
45		- */
46		- $( '#tables-import-file-upload, #tables-import-url, #tables-import-server' ).on( 'change', function( event ) {
47		- var path = $(this).val(),
48		- import_type = $( '#row-import-type' ).find( 'input:checked' ).val(),
49		- filename_start,
50		- extension_start,
51		- filename = path;
52		-
53		- // Default extension: CSV for file upload and server, HTML for URL.
54		- if ( 'tables-import-url' === event.target.id ) {
55		- extension = 'html';
56		- }
57		- // Determine filename from full path.
58		- filename_start = path.lastIndexOf( '\\' );
59		- if ( -1 !== filename_start ) { // Windows-based path
60		- filename = path.substr( filename_start + 1 );
61		- } else {
62		- filename_start = path.lastIndexOf( '/' );
63		- if ( -1 !== filename_start ) { // Windows-based path
64		- filename = path.substr( filename_start + 1 );
65		- }
66		- }
67		- // Determine extension from filename.
68		- extension_start = filename.lastIndexOf( '.' );
69		- if ( -1 !== extension_start ) {
70		- extension = filename.substr( extension_start + 1 ).toLowerCase();
71		- }
72		-
73		- // Allow .htm for HTML as well.
74		- if ( 'htm' === extension ) {
75		- extension = 'html';
76		- }
77		-
78		- // Allow .xlsm for Excel as well.
79		- if ( 'xlsm' === extension ) {
80		- extension = 'xlsx';
81		- }
82		-
83		- $( '#tables-import-existing-table' ).prop( 'disabled', ( ( 'replace' !== import_type && 'append' !== import_type ) || 'zip' === extension ) );
84		-
85		- // Don't change the format for ZIP archives.
86		- if ( 'zip' === extension ) {
87		- return;
88		- }
89		-
90		- $( '#tables-import-format' ).val( extension );
91		- } );
92		-
93		- /**
94		- * Check, whether inputs are valid
95		- *
96		- * @since 1.0.0
97		- */
98		- $( '#tablepress-page' ).find( 'form' ).on( 'submit.tablepress', function( /* event */ ) {
99		- var import_source = $( '#row-import-source' ).find( 'input:checked' ).val(),
100		- selected_import_source_field = $( '#tables-import-' + import_source ).get(0),
101		- valid_form = true,
102		- import_type = $( '#row-import-type' ).find( 'input:checked' ).val();
103		-
104		- // The value of the selected import source field must be set/changed from the default.
105		- if ( selected_import_source_field.defaultValue === selected_import_source_field.value ) {
106		- $( selected_import_source_field )
107		- .addClass( 'invalid' )
108		- .one( 'change', function() { $(this).removeClass( 'invalid' ); } )
109		- .trigger( 'focus' ).trigger( 'select' );
110		- valid_form = false;
111		- }
112		-
113		- // If replace or append is selected, a table must be selected - except for ZIP files.
114		- if ( ( 'replace' === import_type || 'append' === import_type ) && 'zip' !== extension ) {
115		- if ( '' === $( '#tables-import-existing-table' ).val() ) {
116		- $( '#row-import-type' )
117		- .one( 'change', 'input', function() { $( '#tables-import-existing-table' ).removeClass( 'invalid' ); } );
118		- $( '#tables-import-existing-table' )
119		- .addClass( 'invalid' )
120		- .one( 'change', function() { $(this).removeClass( 'invalid' ); } )
121		- .trigger( 'focus' ).trigger( 'select' );
122		- valid_form = false;
123		- }
124		- }
125		-
126		- // Don't submit the form if it's not valid.
127		- if ( ! valid_form ) {
128		- return false;
129		- }
130		- } );
131		-
132		-} );
	16	+initializeReactComponent(
	17	+ 'tablepress-import-screen',
	18	+ <Screen />
	19	+);