| @@ -1,74 +1,19 @@ | ||
| 1 | 1 | /** |
| 2 | - * JavaScript code for the "Add New" screen | |
| 2 | + * JavaScript code for the "Add New" screen. | |
| 3 | 3 | * |
| 4 | 4 | * @package TablePress |
| 5 | 5 | * @subpackage Views JavaScript |
| 6 | 6 | * @author Tobias Bäthge |
| 7 | - * @since 1.0.0 | |
| 7 | + * @since 3.0.0 | |
| 8 | 8 | */ |
| 9 | 9 | |
| 10 | -/* global validateForm */ | |
| 10 | +/** | |
| 11 | + * Internal dependencies. | |
| 12 | + */ | |
| 13 | +import { initializeReactComponent } from './common/react-loader'; | |
| 14 | +import Screen from './add/screen'; | |
| 11 | 15 | |
| 12 | -jQuery( document ).ready( function( $ ) { | |
| 13 | - | |
| 14 | - 'use strict'; | |
| 15 | - | |
| 16 | - /** | |
| 17 | - * Check, whether entered numbers for rows and columns are valid | |
| 18 | - * | |
| 19 | - * @since 1.0.0 | |
| 20 | - */ | |
| 21 | - $( '#tablepress-page' ).find( 'form' ).on( 'submit', function( /* event */ ) { | |
| 22 | - var valid_form = true; | |
| 23 | - | |
| 24 | - // remove default values from required placeholders, if no value was entered | |
| 25 | - $( '#tablepress-page' ).find( '.form-required' ).find( '.placeholder' ).each( function() { | |
| 26 | - if ( this.value === this.defaultValue ) { | |
| 27 | - this.value = ''; | |
| 28 | - $(this).removeClass( 'placeholder-active' ); | |
| 29 | - } | |
| 30 | - } ); | |
| 31 | - | |
| 32 | - // WordPress validation function, checks if required fields (.form-required) are non-empty | |
| 33 | - if ( ! validateForm( $(this) ) ) { | |
| 34 | - valid_form = false; | |
| 35 | - } | |
| 36 | - | |
| 37 | - // validate numerical values (.form-field-numbers-only): only 1 < x < 9...9 (up to maxlength) are allowed | |
| 38 | - $( '#tablepress-page' ).find( '.form-field-numbers-only' ).find( 'input' ).each( function() { | |
| 39 | - var $field = $(this), | |
| 40 | - maxlength = parseInt( $field.attr( 'maxlength' ), 10 ), | |
| 41 | - regexp_number; | |
| 42 | - | |
| 43 | - if ( ! isNaN( maxlength ) ) { | |
| 44 | - maxlength += -1; // first number is handled already in RegExp | |
| 45 | - } else { | |
| 46 | - maxlength = ''; | |
| 47 | - } | |
| 48 | - | |
| 49 | - regexp_number = new RegExp( '^[1-9][0-9]{0,' + maxlength + '}$' ); | |
| 50 | - if ( regexp_number.test( $field.val() ) ) { | |
| 51 | - return; // field is valid | |
| 52 | - } | |
| 53 | - | |
| 54 | - $field | |
| 55 | - .one( 'change', function() { $(this).closest( '.form-invalid' ).removeClass( 'form-invalid' ); } ) | |
| 56 | - .focus().select() | |
| 57 | - .closest( '.form-field' ).addClass( 'form-invalid' ); | |
| 58 | - valid_form = false; | |
| 59 | - } ); | |
| 60 | - | |
| 61 | - if ( ! valid_form ) { | |
| 62 | - return false; | |
| 63 | - } | |
| 64 | - // at this point, the form is valid and will be submitted | |
| 65 | - | |
| 66 | - // remove the default values of optional fields, as we don't want to save those | |
| 67 | - $( '#tablepress-page' ).find( '.placeholder' ).each( function() { | |
| 68 | - if ( this.value === this.defaultValue ) { | |
| 69 | - this.value = ''; | |
| 70 | - } | |
| 71 | - } ); | |
| 72 | - } ); | |
| 73 | - | |
| 74 | -} ); | |
| 16 | +initializeReactComponent( | |
| 17 | + 'tablepress-add-screen', | |
| 18 | + <Screen /> | |
| 19 | +); | |
