Tiny File Manager

Back Back Up Advanced Editor

/**
 * JavaScript code for the "Edit" screen
 *
 * @package TablePress
 * @subpackage Views JavaScript
 * @author Tobias Bäthge
 * @since 1.0.0
 */

/* global alert, confirm, tp, tablepress_strings, tablepress_options, ajaxurl, wpLink, tb_show, wp, JSON */

// Ensure the global `tp` object exists.
window.tp = window.tp || {};

jQuery( document ).ready( function( $ ) {

'use strict';

/* Wrapper to find elements in the page faster with JS-native functions */
	var $id = function( element_id ) {
		return $( document.getElementById( element_id ) );
	};

/**
	 * TablePress object, mostly with functionality for the "Edit" screen
	 *
	 * @since 1.0.0
	 */
	tp.made_changes = false;

tp.table = {
		id: $id( 'table-id' ).val(),
		new_id: $id( 'table-new-id' ).val(),
		rows: parseInt( $id( 'number-rows' ).val(), 10 ),
		columns: parseInt( $id( 'number-columns' ).val(), 10 ),
		head: $id( 'option-table-head' ).prop( 'checked' ),
		foot: $id( 'option-table-foot' ).prop( 'checked' ),
		no_data_columns_pre: 2,
		no_data_columns_post: 1,
		body_cells_pre: '<tr><td><span class="move-handle"></span></td><td><input type="checkbox" /><input type="hidden" class="visibility" name="table[visibility][rows][]" value="1" /></td>',
		body_cells_post: '<td><span class="move-handle"></span></td></tr>',
		body_cell: '<td><textarea rows="1"></textarea></td>',
		head_cell: '<th class="head"><span class="sort-control sort-desc" title="' + tablepress_strings.sort_desc + '"><span class="sorting-indicator"></span></span><span class="sort-control sort-asc" title="' + tablepress_strings.sort_asc + '"><span class="sorting-indicator"></span></span><span class="move-handle"></span></th>',
		foot_cell: '<th><input type="checkbox" /><input type="hidden" class="visibility" name="table[visibility][columns][]" value="1" /></th>',
		set_table_changed: function() {
			tp.made_changes = true;
		},
		unset_table_changed: function() {
			tp.made_changes = false;
			$id( 'edit-form-body' ).one( 'change', 'textarea', tp.table.set_table_changed );
			// @TODO: maybe use .tablepress-postbox-table here and further below
			$( '#tablepress_edit-table-information, #tablepress_edit-table-options, #tablepress_edit-datatables-features' ).one( 'change', 'input, textarea, select', tp.table.set_table_changed );
		},
		change_id: function( /* event */ ) {
			// empty table IDs are not allowed
			if ( '' === $.trim( $id( 'table-new-id' ).val() ) ) {
				alert( tablepress_strings.table_id_not_empty );
				$id( 'table-new-id' ).val( tp.table.new_id ).focus().select();
				return;
			}
			// the '0' table ID is not allowed
			if ( '0' === $.trim( $id( 'table-new-id' ).val() ) ) {
				alert( tablepress_strings.table_id_not_zero );
				$id( 'table-new-id' ).val( tp.table.new_id ).focus().select();
				return;
			}

if ( this.value === tp.table.new_id ) {
				return;
			}

if ( confirm( tablepress_strings.ays_change_table_id ) ) {
				tp.table.new_id = this.value;
				$( '.table-shortcode' ).val( '[' + tablepress_options.shortcode + ' id=' + tp.table.new_id + ' /]' ).click(); // click() to focus and select
				tp.table.set_table_changed();
			} else {
				$(this).val( tp.table.new_id );
			}
		},
		change_table_head: function( /* event */ ) {
			tp.table.head = $(this).prop( 'checked' );
			$id( 'option-use-datatables' ).prop( 'disabled', ! tp.table.head ).change();
			$id( 'notice-datatables-head-row' ).toggle( ! tp.table.head );
			tp.rows.stripe();
		},
		change_table_foot: function( /* event */ ) {
			tp.table.foot = $(this).prop( 'checked' );
			tp.rows.stripe();
		},
		change_print_name_description: function( /* event */ ) {
			$id( this.id + '-position' ).prop( 'disabled', ! $(this).prop( 'checked' ) );
		},
		change_datatables: function() {
			var $datatables_checkbox = $id( 'option-use-datatables' ),
				checkboxes_disabled = ! ( $datatables_checkbox.prop( 'checked' ) && ! $datatables_checkbox.prop( 'disabled' ) );
			$datatables_checkbox.closest( 'tbody' ).find( 'input' ).not( $datatables_checkbox ).prop( 'disabled', checkboxes_disabled );
			tp.table.change_datatables_pagination();
		},
		change_datatables_pagination: function() {
			var $pagination_checkbox = $id( 'option-datatables-paginate' ),
				pagination_enabled = ( $pagination_checkbox.prop( 'checked' ) && ! $pagination_checkbox.prop( 'disabled' ) );
			$id( 'option-datatables-lengthchange' ).prop( 'disabled', ! pagination_enabled );
			$id( 'option-datatables-paginate_entries' ).prop( 'disabled', ! pagination_enabled );
		},
		prepare_ajax_request: function( wp_action, wp_nonce ) {
			var $table_body = $id( 'edit-form-body' ),
				table_data = [],
				table_options,
				table_number = { rows: tp.table.rows, columns: tp.table.columns, hidden_rows: 0, hidden_columns: 0 },
				table_visibility = { rows: [], columns: [] };

$table_body.children().each( function( idx, row ) {
				table_data[ idx ] = $( row ).find( 'textarea' )
					.map( function() {
						return $(this).val();
					} )
					.get();
			} );
			table_data = JSON.stringify( table_data );

// @TODO: maybe for options saving: http://stackoverflow.com/questions/1184624/serialize-form-to-json-with-jquery
			// or each()-loop through all checkboxes/textfields/selects
			table_options = {
				// Table Options
				table_head: tp.table.head,
				table_foot: tp.table.foot,
				alternating_row_colors: $id( 'option-alternating-row-colors' ).prop( 'checked' ),
				row_hover: $id( 'option-row-hover' ).prop( 'checked' ),
				print_name: $id( 'option-print-name' ).prop( 'checked' ),
				print_description: $id( 'option-print-description' ).prop( 'checked' ),
				print_name_position: $id( 'option-print-name-position' ).val(),
				print_description_position: $id( 'option-print-description-position' ).val(),
				extra_css_classes: $id( 'option-extra-css-classes' ).val(),
				// DataTables JS features
				use_datatables: $id( 'option-use-datatables' ).prop( 'checked' ),
				datatables_sort: $id( 'option-datatables-sort' ).prop( 'checked' ),
				datatables_filter: $id( 'option-datatables-filter' ).prop( 'checked' ),
				datatables_paginate: $id( 'option-datatables-paginate' ).prop( 'checked' ),
				datatables_lengthchange: $id( 'option-datatables-lengthchange' ).prop( 'checked' ),
				datatables_paginate_entries: $id( 'option-datatables-paginate_entries' ).val(),
				datatables_info: $id( 'option-datatables-info' ).prop( 'checked' ),
				datatables_scrollx: $id( 'option-datatables-scrollx' ).prop( 'checked' ),
				datatables_custom_commands: $id( 'option-datatables-custom-commands' ).val()
			};
			table_options = JSON.stringify( table_options );

table_visibility.rows = $table_body.find( 'input[type="hidden"]' )
				.map( function() {
					if ( '1' === $(this).val() ) {
						return 1;
					}
					table_number.hidden_rows += 1;
					return 0;
				} )
				.get();
			table_visibility.columns = $id( 'edit-form-foot' ).find( 'input[type="hidden"]' )
				.map( function() {
					if ( '1' === $(this).val() ) {
						return 1;
					}
					table_number.hidden_columns += 1;
					return 0;
				} )
				.get();
			table_visibility = JSON.stringify( table_visibility );

// request_data =
			return {
				action: wp_action,
				_ajax_nonce : $( wp_nonce ).val(),
				tablepress: {
					id: tp.table.id,
					new_id: tp.table.new_id,
					name: $id( 'table-name' ).val(),
					description: $id( 'table-description' ).val(),
					number: table_number,
					data: table_data,
					options: table_options,
					visibility: table_visibility
				}
			};
		},
		preview: {
			trigger: function( /* event */ ) {
				if ( ! tp.made_changes ) {
					tp.table.preview.show( $(this).attr( 'href' ) + '&TB_iframe=true' );
					return false;
				}

// validation checks
				if ( $id( 'option-datatables-paginate' ).prop( 'checked' ) && ! ( /^[1-9][0-9]{0,4}$/ ).test( $id( 'option-datatables-paginate_entries' ).val() ) ) {
					alert( tablepress_strings.num_pagination_entries_invalid );
					$id( 'option-datatables-paginate_entries' ).focus().select();
					return;
				}
				if ( ( /[^A-Za-z0-9- _]/ ).test( $id( 'option-extra-css-classes' ).val() ) ) {
					alert( tablepress_strings.extra_css_classes_invalid );
					$id( 'option-extra-css-classes' ).focus().select();
					return;
				}

$(this).closest( 'p' ).append( '<span class="animation-preview spinner is-active" title="' + tablepress_strings.preparing_preview + '"/>' );
				$( 'body' ).addClass( 'wait' );
				$id( 'table-preview' ).empty(); // clear preview

$.ajax({
					'type': 'POST',
					'url': ajaxurl,
					'data': tp.table.prepare_ajax_request( 'tablepress_preview_table', '#nonce-preview-table' ),
					'success': tp.table.preview.ajax_success,
					'error': tp.table.preview.ajax_error,
					'dataType': 'json'
				} );

return false;
			},
			ajax_success: function( data, status /*, jqXHR */ ) {
				if ( ( 'undefined' === typeof status ) || ( 'success' !== status ) ) {
					tp.table.preview.error( 'AJAX call successful, but unclear status.' );
				} else if ( ( 'undefined' === typeof data ) || ( null === data ) || ( '-1' === data ) || ( 'undefined' === typeof data.success ) || ( true !== data.success ) ) {
					tp.table.preview.error( 'AJAX call successful, but unclear data.' );
				} else {
					tp.table.preview.success( data );
				}
			},
			ajax_error: function( jqXHR, status, error_thrown ) {
				tp.table.preview.error( 'AJAX call failed: ' + status + ' - ' + error_thrown );
			},
			success: function( data ) {
				$id( 'table-preview' ).empty();
				$( '<iframe id="table-preview-iframe" />' ).load( function() {
					var $iframe = $(this).contents();
					$iframe.find( 'head' ).append( data.head_html );
					$iframe.find( 'body' ).append( data.body_html );
				} ).appendTo( '#table-preview' );
				$( '.animation-preview' ).remove();
				$( 'body' ).removeClass( 'wait' );
				tp.table.preview.show( '#TB_inline?inlineId=preview-container' );
			},
			error: function( message ) {
				$( '.animation-preview' ).closest( 'p' )
					.after( '<div class="ajax-alert preview-error error"><p>' + tablepress_strings.preview_error + ': ' + message + '</p></div>' );
				$( '.animation-preview' ).remove();
				$( '.preview-error' ).delay( 6000 ).fadeOut( 2000, function() { $(this).remove(); } );
				$( 'body' ).removeClass( 'wait' );
			},
			show: function( url ) {
				var width = $( window ).width() - 120,
					height = $( window ).height() - 120;
				if ( $( '#wpadminbar' ).length ) {
					height -= parseInt( $( '#wpadminbar' ).css( 'height' ), 10 );
				}
				tb_show( $( '.show-preview-button' ).first().text(), url + '&height=' + height + '&width=' + width, false );
			}
		}
	};

tp.rows = {
		create: function( num_rows ) {
			var i, j,
				column_idxs,
				new_rows = '';

for ( i = 0; i < num_rows; i++ ) {
				new_rows += tp.table.body_cells_pre;
				for ( j = 0; j < tp.table.columns; j++ ) {
					new_rows += tp.table.body_cell;
				}
				new_rows += tp.table.body_cells_post;
			}

column_idxs = $id( 'edit-form-foot' ).find( '.column-hidden' )
				.map( function() { return $(this).index(); } ).get();
			return $( new_rows ).each( function( row_idx, row ) {
				$( row ).children()
					.filter( function( idx ) { return ( -1 !== $.inArray( idx, column_idxs ) ); } )
					.addClass( 'column-hidden' );
			} );
		},
		append: function( /* event */ ) {
			var num_rows = $id( 'rows-append-number' ).val();

if ( ! ( /^[1-9][0-9]{0,4}$/ ).test( num_rows ) ) {
				alert( tablepress_strings.append_num_rows_invalid );
				$id( 'rows-append-number' ).focus().select();
				return;
			}

$id( 'edit-form-body' ).append( tp.rows.create( num_rows ) );

tp.rows.stripe();
			tp.reindex();
		},
		insert: function( event ) {
			var $selected_rows = $id( 'edit-form-body' ).find( 'input:checked' )
				.prop( 'checked', event.shiftKey ).closest( 'tr' );

if ( 0 === $selected_rows.length ) {
				alert( tablepress_strings.no_rows_selected );
				return;
			}

$selected_rows.before( tp.rows.create( 1 ) );

tp.rows.stripe();
			tp.reindex();
		},
		duplicate: function( event ) {
			var $selected_rows = $id( 'edit-form-body' ).find( 'input:checked' )
				.prop( 'checked', event.shiftKey ).closest( 'tr' );

if ( 0 === $selected_rows.length ) {
				alert( tablepress_strings.no_rows_selected );
				return;
			}

$selected_rows.each( function( idx, row ) {
				var $row = $( row ),
					$textareas = $row.find( 'textarea' ),
					$duplicated_row = $row.clone();
				$duplicated_row.find( 'textarea' ).removeAttr( 'id' ).each( function( idx, cell ) {
					$( cell ).val( $textareas.eq( idx ).val() ); // setting val() is necessary, as clone() doesn't copy the current value, see jQuery bugs 5524, 2285, 3016
				} );
				$row.after( $duplicated_row );
			} );

tp.rows.stripe();
			tp.reindex();
		},
		hide: function( event ) {
			var $selected_rows = $id( 'edit-form-body' ).find( 'input:checked' )
				.prop( 'checked', event.shiftKey ).closest( 'tr' );

if ( 0 === $selected_rows.length ) {
				alert( tablepress_strings.no_rows_selected );
				return;
			}

$selected_rows.addClass( 'row-hidden' ).find( '.visibility' ).val( '0' );

tp.rows.stripe();
			tp.table.set_table_changed();
		},
		unhide: function( event ) {
			var $selected_rows = $id( 'edit-form-body' ).find( 'input:checked' )
				.prop( 'checked', event.shiftKey ).closest( 'tr' );

if ( 0 === $selected_rows.length ) {
				alert( tablepress_strings.no_rows_selected );
				return;
			}

$selected_rows.removeClass( 'row-hidden' ).find( '.visibility' ).val( '1' );

tp.rows.stripe();
			tp.table.set_table_changed();
		},
		remove: function( /* event */ ) {
			var confirm_message,
				$selected_rows = $id( 'edit-form-body' ).find( 'input:checked' ).closest( 'tr' );

if ( 0 === $selected_rows.length ) {
				alert( tablepress_strings.no_rows_selected );
				return;
			}

if ( tp.table.rows === $selected_rows.length ) {
				alert( tablepress_strings.no_remove_all_rows );
				return;
			}

if ( 1 === $selected_rows.length ) {
				confirm_message = tablepress_strings.ays_remove_rows_singular;
			} else {
				confirm_message = tablepress_strings.ays_remove_rows_plural;
			}
			if ( ! confirm( confirm_message ) ) {
				return;
			}

$selected_rows.remove();

tp.rows.stripe();
			tp.reindex();
		},
		move: {
			start: function( event, ui ) {
				$( ui.placeholder ).removeClass( 'row-hidden' ).css( 'visibility', 'visible' )
					.html( '<td colspan="' + ( tp.table.columns + tp.table.no_data_columns_pre + tp.table.no_data_columns_post ) + '"><div/></td>' );
				$( ui.helper ).removeClass( 'odd head-row foot-row' );
			},
			change: function( event, ui ) {
				tp.rows.stripe( ui.helper );
			},
			stop: function( /* event, ui */ ) {
				tp.rows.stripe();
			}
		},
		sort: function() {
			var column_idx = $(this).parent().index(),
				direction = ( $(this).hasClass( 'sort-asc' ) ) ? 1 : -1,
				$table_body = $('#edit-form-body'),
				$head_rows = $table_body.find( '.head-row' ).prevAll().addBack(),
				$foot_rows = $table_body.find( '.foot-row' ).nextAll().addBack(),
				rows = $table_body.children().not( $head_rows ).not( $foot_rows ).get(),
				/*
				 * Natural Sort algorithm for Javascript - Version 0.7 - Released under MIT license
				 * Author: Jim Palmer (based on chunking idea from Dave Koelle)
				 * See: https://github.com/overset/javascript-natural-sort and http://www.overset.com/2008/09/01/javascript-natural-sort-algorithm-with-unicode-support/
				 */
				natural_sort = function( a, b ) {
					var re = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?$|^0x[0-9a-f]+$|[0-9]+)/gi,
						sre = /(^[ ]*|[ ]*$)/g,
						dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/,
						hre = /^0x[0-9a-f]+$/i,
						ore = /^0/,
						// strip whitespace
						x = a.replace(sre, '') || '',
						y = b.replace(sre, '') || '',
						// chunk/tokenize
						xN = x.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),
						yN = y.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),
						// numeric, hex or date detection
						xD = parseInt(x.match(hre), 10) || (xN.length !== 1 && x.match(dre) && Date.parse(x)),
						yD = parseInt(y.match(hre), 10) || xD && y.match(dre) && Date.parse(y) || null,
						oFxNcL, oFyNcL, cLoc, numS;
					// first try and sort Hex codes or Dates
					if (yD) {
						if ( xD < yD ) { return -1; }
						else if ( xD > yD ) { return 1; }
					}
					// natural sorting through split numeric strings and default strings
					for(cLoc=0, numS=Math.max(xN.length, yN.length); cLoc < numS; cLoc++) {
						// find floats not starting with '0', string or 0 if not defined (Clint Priest)
						oFxNcL = !(xN[cLoc] || '').match(ore) && parseFloat(xN[cLoc]) || xN[cLoc] || 0;
						oFyNcL = !(yN[cLoc] || '').match(ore) && parseFloat(yN[cLoc]) || yN[cLoc] || 0;
						// handle numeric vs string comparison - number < string - (Kyle Adams)
						if (isNaN(oFxNcL) !== isNaN(oFyNcL)) { return (isNaN(oFxNcL)) ? 1 : -1; }
						// rely on string comparison if different types - i.e. '02' < 2 !== '02' < '2'
						else if (typeof oFxNcL !== typeof oFyNcL) {
							oFxNcL += '';
							oFyNcL += '';
						}
						if (oFxNcL < oFyNcL) { return -1; }
						if (oFxNcL > oFyNcL) { return 1; }
					}
					return 0;
				};

$.each( rows, function( row_idx, row ) {
				row.sort_key = ( '' + $( row ).children().eq( column_idx ).find( 'textarea' ).val() ).toLowerCase(); // convert to string, and lower case for case insensitive sorting
			} );

rows.sort( function( a, b ) {
				return direction * natural_sort( a.sort_key, b.sort_key );
			} );

// might not be necessary:
			$.each( rows, function( row_idx, row ) {
				row.sort_key = null;
			} );

$table_body.append( $head_rows );
			$table_body.append( rows );
			$table_body.append( $foot_rows );

tp.rows.stripe();
			tp.reindex();
		},
		stripe: function( helper ) {
			if ( 'undefined' === typeof helper ) {
				helper = null;
			}
			helper = $( helper );
			var $rows = $id( 'edit-form-body' ).children().removeClass( 'odd head-row foot-row' ).not( helper );
			$rows.filter( ':even' ).addClass( 'odd' );
			$rows = $rows.not( '.row-hidden' );
			if ( helper.hasClass( 'row-hidden' ) ) {
				$rows = $rows.not( '.ui-sortable-placeholder' );
			}
			if ( tp.table.head ) {
				$rows.first().addClass( 'head-row' );
			}
			if ( tp.table.foot ) {
				$rows.last().addClass( 'foot-row' );
			}
		}
	};

tp.columns = {
		append: function( /* event */ ) {
			var i,
				num_columns = $id( 'columns-append-number' ).val(),
				new_head_cells = '', new_body_cells = '', new_foot_cells = '';

if ( ! ( /^[1-9][0-9]{0,4}$/ ).test( num_columns ) ) {
				alert( tablepress_strings.append_num_columns_invalid );
				$id( 'columns-append-number' ).focus().select();
				return;
			}

for ( i = 0; i < num_columns; i++ ) {
				new_body_cells += tp.table.body_cell;
				new_head_cells += tp.table.head_cell;
				new_foot_cells += tp.table.foot_cell;
			}

$id( 'edit-form-body' ).children().each( function( row_idx, row ) {
				$( row ).children().slice( - tp.table.no_data_columns_post )
					.before( new_body_cells );
			} );
			$id( 'edit-form-head' ).children().slice( - tp.table.no_data_columns_post )
				.before( new_head_cells );
			$id( 'edit-form-foot' ).children().slice( - tp.table.no_data_columns_post )
				.before( new_foot_cells );

tp.reindex();
		},
		insert: function( event ) {
			var column_idxs,
				$selected_columns = $id( 'edit-form-foot' ).find( 'input:checked' )
					.prop( 'checked', event.shiftKey ).closest( 'th' );