webtranslator-gateway.js

jQuery( document ).ready(
	function( $ ) {
		var timer;
		var logAjax = 0;
		var $nonce = $( '#gts_webtranslator_gateway_nonce' ).val();
		var $progressBarWrap = $( '#progress-bar-wrap' );
		var $progressDot = $( '#progress-dot' );
		var $progressCount = $( '#progress-count' );
		var $progressBar = $( '#progress-bar' );
		var $logElement = $( '#webtranslator-log' );
		var $submitBtn = $( '#gts_wt_gw_form input[type="submit"]' );
		var dataKey = '';

		function cleanProgress() {
			$progressCount.html( '' );
			$progressBar.width( 0 );
			$logElement.html( '' );
		}

		function scrollToBottom() {
			var scrollHeight = $logElement.get()[ 0 ].scrollHeight;
			$logElement.stop().animate(
				{ scrollTop: scrollHeight - $logElement.height() },
				300,
			);
		}

		function cleanLogMessage( message ) {
			return message.replace( /<br \/>|\n/g, '' );
		}

		function showLog() {
			if ( ! dataKey ) {
				return;
			}

			// Restart animation of the progress dot.
			$progressDot.toggleClass( 'animate' );

			logAjax++;

			return $.post(
				gts_webtranslator.url,
				{
					action: gts_webtranslator.log_action,
					gts_webtranslator_gateway_nonce: $nonce,
					data_key: dataKey,
				}, function( response ) {
					if ( response.success ) {
						var percent = '';
						var logArray = response.data[ 'log_array' ] ? response.data[ 'log_array' ] : [];
						logArray = $.each( logArray, function( index, entry ) {
								var matches = entry.message.match( / \d+%/ );
								if ( matches ) {
									percent = matches[ 0 ].trim();
								}
								logArray[ index ] = entry.message;
							},
						);

						$progressCount.html( percent );
						$progressBar.width( percent );
						$progressBarWrap.show();

						$logElement.html( logArray.join( '' ) );

						if ( response.data[ 'time_end' ] ) {
							clearTimeout( timer );
							dataKey = '';
							$logElement.finish();
							$progressDot.removeClass( 'animate' );

							scrollToBottom();

							// Timeout to display current state of progress and log.
							setTimeout( function() {
									var logLength = logArray.length;
									alert(
										'Website ' + response.data[ 'settings' ][ 'site_url' ] + ' processed.' + '\n' +
										cleanLogMessage( logArray[ logLength - 3 ] ) + '\n' +
										cleanLogMessage( logArray[ logLength - 2 ] )
									);
								},
								400
							);

							$submitBtn.attr( 'disabled', false );

							// submitNextForm( response.data.responses, sourceLanguage, targetLanguages );
						}
					} else {
						scrollToBottom();

						// Timeout to display current state of progress and log.
						setTimeout( function() {
								alert( response.data );
							},
							400
						);
					}
					logAjax--;
					if ( logAjax < 0 ) {
						logAjax = 0;
					}
				},
				'json',
			);
		}

		function log() {
			timer = setTimeout( log, 1000 );

			if ( logAjax > 0 ) {
				return;
			}

			showLog();
		}

		function submitNextForm( responses, sourceLanguage, targetLanguages ) {
			$( '#counted_urls' ).val( JSON.stringify( responses ) );
			$( '#regi_source_language' ).val( sourceLanguage );
			$( '#regi_target_language' ).val( JSON.stringify( targetLanguages ) );
			$( '#regi_industry' ).val( 'General' );
			$( '#gts_wt_gw_continue_to_form' ).submit();
		}

		$( '#gts_wt_gw_form' ).submit( function() {
			$submitBtn.attr( 'disabled', true );

			var $type = $( 'input[name="url_type[]"]:checked' );
			var type = 'urls';
			if ( $type.length ) {
				type = $type.val();
			}

			var urls = $( '#urls' ).val().trim();

			var $website = $( '#website' );
			var website = '';
			if ( $website.length ) {
				website = $website.val().trim();
			}

			var sourceLanguage = $( '#source_language' ).val();
			var targetLanguages = $( '#target_language' ).val();

			var errors = '';
			if ( type === 'urls' && '' === urls ) {
				errors += 'Please specify URLs.\n';
			}
			if ( type === 'website' && '' === website ) {
				errors += 'Please specify website home URL.\n';
			}
			if ( null === sourceLanguage ) {
				errors += 'Please select source language.\n';
			}
			if ( null === targetLanguages ) {
				errors += 'Please select target languages.\n';
			}
			if ( '' !== errors ) {
				alert( errors );
				return false;
			}

			if ( type === 'website' ) {
				cleanProgress();
				$progressDot.addClass( 'animate' );
				$progressBarWrap.show();

				log();
			}

			var response = null;

			$.when(
				$.post(
					gts_webtranslator.url,
					{
						action: gts_webtranslator.action,
						gts_webtranslator_gateway_nonce: $nonce,
						type: type,
						urls: urls,
						website: website,
						log_id: gts_webtranslator.log_id,
						fromLanguage: sourceLanguage,
						language: targetLanguages,
					}, function( resp ) {
						response = resp;
					},
					'json',
				)
			).done(
				function() {
					if ( response.success ) {
						if ( type === 'website' ) {
							dataKey = response.data.dataKey;
						} else {
							submitNextForm( response.data, sourceLanguage, targetLanguages );
						}
					} else {
						errors = '';

						if ( $.isArray( response.data ) ) {
							$.each(
								response.data,
								function( index, response ) {
									if ( ! response.status ) {
										errors = response.body + '\n';
									}
								},
							);
						} else {
							errors = response.data;
						}
						alert( errors );
					}
				},
			);

			return false;
		} );

		var urlTypeRadio = $( 'input[name="url_type[]"]' );
		function switchUrlType() {
			if ( 0 === urlTypeRadio.length ) {
				return;
			}

			cleanProgress();
			$progressBarWrap.hide();

			$( '#urls-wrap, #website-wrap' ).hide();

			if ( urlTypeRadio[ 0 ].checked ) {
				$( '#urls-wrap' ).show();
			} else {
				$( '#website-wrap' ).show();
			}
		}

		$( '.page-content' ).addClass( 'bgimg' );

		urlTypeRadio.on(
			'change', switchUrlType
		);

		switchUrlType();
	},
);