| @@ -6,137 +6,14 @@ | ||
| 6 | 6 | * @author Tobias Bäthge |
| 7 | 7 | * @since 1.0.0 |
| 8 | 8 | */ |
| 9 | 9 | |
| 10 | -/* globals jSuites */ | |
| 11 | - | |
| 12 | 10 | /** |
| 13 | - * WordPress dependencies. | |
| 14 | - */ | |
| 15 | -import { __, _n, sprintf } from '@wordpress/i18n'; | |
| 16 | - | |
| 17 | -/** | |
| 18 | 11 | * Internal dependencies. |
| 19 | 12 | */ |
| 20 | -import { $ } from './_common-functions'; | |
| 13 | +import { initializeReactComponent } from './common/react-loader'; | |
| 14 | +import Screen from './import/screen'; | |
| 21 | 15 | |
| 22 | -const data = { | |
| 23 | - source: '', | |
| 24 | - type: '', | |
| 25 | -}; | |
| 26 | - | |
| 27 | -const $import_form = $( '#tablepress_import-import-form' ); | |
| 28 | -const $tables_import_file_upload_field = $( '#tables-import-file-upload' ); | |
| 29 | -const $tables_import_file_upload_field_dropzone = $( '#tables-import-file-upload-dropzone' ); | |
| 30 | -const $tables_import_server_field = $( '#tables-import-server' ); // The input field only exists for admins! | |
| 31 | -const $import_existing_table_dropdown = $( '#tables-import-existing-table' ); | |
| 32 | - | |
| 33 | -/** | |
| 34 | - * Progressively enhance the "Table to replace or append to" HTML select field with live-search and auto-complete. | |
| 35 | - * | |
| 36 | - * @since 2.0.0 | |
| 37 | - */ | |
| 38 | -jSuites.dropdown( $import_existing_table_dropdown, { | |
| 39 | - autocomplete: true, | |
| 40 | - placeholder: $import_existing_table_dropdown.options[0].innerText, | |
| 41 | -} ); | |
| 42 | - | |
| 43 | -/** | |
| 44 | - * Set state of visible form elements depending on selected options. | |
| 45 | - * | |
| 46 | - * @since 2.0.0 | |
| 47 | - */ | |
| 48 | -$import_form.addEventListener( 'change', () => { | |
| 49 | - data.source = document.querySelector( '#row-import-source input:checked' ).value; | |
| 50 | - data.type = document.querySelector( '#row-import-type input:checked' ).value; | |
| 51 | - | |
| 52 | - // Don't show validation :invalid CSS pseudo-selector highlighting, but only when the user wants to submit the form. | |
| 53 | - $import_form.classList.add( 'no-validation-highlighting' ); | |
| 54 | - // Reset validation messages after a change to a form field was made. | |
| 55 | - $tables_import_server_field?.setCustomValidity( '' ); // The input field only exists for admins! | |
| 56 | - $import_existing_table_dropdown.previousElementSibling.querySelector( '.jdropdown-header' ).setCustomValidity( '' ); // Use the jSuites dropdown input field, as the actual <select> is hidden. | |
| 57 | - | |
| 58 | - // Show the correct input field section depending on the chosen import source. Set the contained form field to required. | |
| 59 | - [ 'file-upload', 'url', 'server', 'form-field' ].forEach( ( source ) => { | |
| 60 | - $( `#row-import-source-${ source }` ).style.display = ( source === data.source ) ? 'table-row' : 'none'; | |
| 61 | - $( `#tables-import-${ source }` ).required = ( source === data.source ); | |
| 62 | - } ); | |
| 63 | - // Only make the URL field a URL field if URL is the selected import source, to prevent validation errors. | |
| 64 | - $( '#tables-import-url' ).type = ( 'url' === data.source ) ? 'url' : 'text'; | |
| 65 | - | |
| 66 | - // Disable the existing table dropdown when adding new tables, or when uploading more than one file, or when uploading a ZIP file. | |
| 67 | - const dropdown_disabled = ( 'add' === data.type || | |
| 68 | - ( | |
| 69 | - 'file-upload' === data.source && | |
| 70 | - ( | |
| 71 | - 1 < $tables_import_file_upload_field?.files?.length || | |
| 72 | - ( 1 === $tables_import_file_upload_field?.files?.length && $tables_import_file_upload_field?.files?.[0].name.endsWith( '.zip' ) ) | |
| 73 | - ) | |
| 74 | - ) | |
| 75 | - ); | |
| 76 | - $import_existing_table_dropdown.disabled = dropdown_disabled; | |
| 77 | - $import_existing_table_dropdown.previousElementSibling.classList.toggle( 'disabled', dropdown_disabled ); // Disable the artificial dropdown via a class, as it can not use :disabled. | |
| 78 | -} ); | |
| 79 | -document.querySelector( '#row-import-source input:checked' ).dispatchEvent( new Event( 'change', { bubbles: true } ) ); // Trigger the change handler on page load to initialize the form fields. | |
| 80 | - | |
| 81 | -/** | |
| 82 | - * Add a list of selected files for the import from file upload. | |
| 83 | - * | |
| 84 | - * @since 2.0.0 | |
| 85 | - */ | |
| 86 | -$tables_import_file_upload_field.addEventListener( 'change', function( event) { | |
| 87 | - if ( event?.target?.files?.length > 0 ) { | |
| 88 | - $tables_import_file_upload_field_dropzone.innerHTML = `<span>${ sprintf( _n( 'You have selected %1$d file:', 'You have selected %1$d files:', event.target.files.length, 'tablepress' ), event.target.files.length ) }</span>`; | |
| 89 | - [ ...event.target.files ].forEach( ( file ) => { | |
| 90 | - const $file_span = document.createElement( 'span' ); | |
| 91 | - $file_span.textContent = file.name; | |
| 92 | - $tables_import_file_upload_field_dropzone.appendChild( $file_span ); | |
| 93 | - } ); | |
| 94 | - } else { | |
| 95 | - $tables_import_file_upload_field_dropzone.innerHTML = `<span>${ __( 'Click to select a file, or drag it here.', 'tablepress' ) }</span>`; | |
| 96 | - } | |
| 97 | -} ); | |
| 98 | - | |
| 99 | -/** | |
| 100 | - * Visualize when files are dragged over the file upload drop zone. | |
| 101 | - * | |
| 102 | - * @since 2.0.0 | |
| 103 | - */ | |
| 104 | -$tables_import_file_upload_field.addEventListener( 'dragenter', function() { | |
| 105 | - $tables_import_file_upload_field_dropzone.classList.add( 'dragover' ); | |
| 106 | -} ); | |
| 107 | -$tables_import_file_upload_field.addEventListener( 'dragleave', function() { | |
| 108 | - $tables_import_file_upload_field_dropzone.classList.remove( 'dragover' ); | |
| 109 | -} ); | |
| 110 | - | |
| 111 | -/** | |
| 112 | - * Check, whether special form elements are valid. | |
| 113 | - * | |
| 114 | - * The submit button's `click` event is used so that the validation warnings can be shown. | |
| 115 | - * This does not work when using the form's `submit` event. | |
| 116 | - * | |
| 117 | - * @since 2.0.0 | |
| 118 | - */ | |
| 119 | -$( '#import-submit-button' ).addEventListener( 'click', () => { | |
| 120 | - // Show validation :invalid CSS pseudo-selector highlighting. | |
| 121 | - $import_form.classList.remove( 'no-validation-highlighting' ); | |
| 122 | - | |
| 123 | - // When importing from the server, the value must have been changed from the default (normally ABSPATH). The input field only exists for admins! | |
| 124 | - if ( 'server' === data.source && $tables_import_server_field ) { | |
| 125 | - if ( $tables_import_server_field.defaultValue === $tables_import_server_field.value ) { | |
| 126 | - $tables_import_server_field.setCustomValidity( __( 'You must specify a path to a file on the server.', 'tablepress' ) ); | |
| 127 | - } | |
| 128 | - } | |
| 129 | - | |
| 130 | - // If replace or append is selected while a single non-ZIP file is to be uploaded, a table must be selected. | |
| 131 | - if ( ( 'replace' === data.type || 'append' === data.type ) && | |
| 132 | - ( | |
| 133 | - 'file-upload' !== data.source || | |
| 134 | - ( 1 === $tables_import_file_upload_field?.files?.length && ! $tables_import_file_upload_field?.files?.[0].name.endsWith( '.zip' ) ) | |
| 135 | - ) | |
| 136 | - ) { | |
| 137 | - // The "- Select or type -" entry has an empty string as its value. | |
| 138 | - if ( '' === $import_existing_table_dropdown.value ) { | |
| 139 | - $import_existing_table_dropdown.previousElementSibling.querySelector( '.jdropdown-header' ).setCustomValidity( __( 'You must select a table.', 'tablepress' ) ); // Use the jSuites dropdown input field, as the actual <select> is hidden. | |
| 140 | - } | |
| 141 | - } | |
| 142 | -} ); | |
| 16 | +initializeReactComponent( | |
| 17 | + 'tablepress-import-screen', | |
| 18 | + <Screen /> | |
| 19 | +); | |
