MAINHACK

Viewing / Editing File: modal-modes.php

<?php
$modes_api = $modes['optimization_options'];

$table_columns = array();
foreach ( $modes_api as $mode_id => $mode ) {
	if ( $mode_id === 'custom' ) {
		continue;
	}
	$table_columns[ $mode_id ] = __( $mode['human_readable_name'], 'nitropack' );
}
$table_columns_count = count( $table_columns );

$table_cells = array(
	array(
		'name' => __( 'Add HTML preconnects', 'nitropack' ), 'features' => array( 'standard', 'medium', 'strong', 'ludicrous', 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Minify resources', 'nitropack' ), 'features' => array( 'medium', 'strong', 'ludicrous', 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Combine JavaScript', 'nitropack' ), 'features' => array( '', '', '', '' ), 'always_render' => true,
	),
	array(
		'name' => __( 'Combine CSS', 'nitropack' ), 'features' => array( 'medium', 'strong', 'ludicrous', 'ludicrousPlus' )
	),
	array(
		'name' => __( 'Merge screen and all media styles', 'nitropack' ), 'features' => array( 'medium', 'strong', 'ludicrous', 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Generate critical CSS', 'nitropack' ), 'features' => array( 'medium', 'strong', 'ludicrous', 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Remove render-blocking resources', 'nitropack' ), 'features' => array( 'medium', 'strong', 'ludicrous', 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Use resource loader script', 'nitropack' ), 'features' => array( 'strong', 'ludicrous', 'ludicrousPlus' ), 'sub' => true
	),
	array(
		'name' => __( 'Delay loading of non-critical resources', 'nitropack' ), 'features' => array( 'ludicrous', 'ludicrousPlus' ), 'sub' => true
	),
	array(
		'name' => __( 'Resource loading strategy', 'nitropack' ), 'features' => array( 'standard' => 'Styles first', 'medium' => 'Styles first', 'strong' => 'Styles first', 'ludicrous' => 'Styles first', 'ludicrousPlus' => 'Styles first' ), 'sub' => true
	),
	array(
		'name' => __( 'Images lazy-loading', 'nitropack' ), 'features' => array( 'medium', 'strong', 'ludicrous', 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Size images preemtively', 'nitropack' ), 'features' => array( 'medium', 'strong', 'ludicrous', 'ludicrousPlus' ), 'sub' => true
	),
	array(
		'name' => __( 'iFrames lazy load', 'nitropack' ), 'features' => array( 'medium', 'strong', 'ludicrous', 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Image optimization', 'nitropack' ), 'features' => array( 'standard', 'medium', 'strong', 'ludicrous', 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Image quality', 'nitropack' ), 'features' => array( 'standard' => '100%', 'medium' => '80%', 'strong' => '80%', 'ludicrous' => '80%', 'ludicrousPlus' => '80%' ), 'sub' => true
	),
	array(
		'name' => __( 'Animated image optimization', 'nitropack' ), 'features' => array( 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Adaptive image sizing', 'nitropack' ), 'features' => array( 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Override font rendering behavior', 'nitropack' ), 'features' => array( 'strong', 'ludicrous', 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Font-display value', 'nitropack' ), 'features' => array( 'standard' => '', 'medium' => '', 'strong' => 'swap', 'ludicrous' => 'swap', 'ludicrousPlus' => 'swap' ), 'sub' => true,
	),
	array(
		'name' => __( 'Font loading', 'nitropack' ), 'features' => array( 'standard' => 'native', 'medium' => 'native', 'strong' => 'native', 'ludicrous' => 'native', 'ludicrousPlus' => 'onload' ),
	),
	array(
		'name' => __( 'Font compression', 'nitropack' ), 'features' => array( 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Instant cache reoptimize', 'nitropack' ), 'features' => array( 'ludicrousPlus' ),
	),
	array(
		'name' => __( 'Dynamic queue', 'nitropack' ), 'features' => array( 'ludicrousPlus' ),
	),
); ?>

<div id="modal-modes" data-modal-backdrop="" tabindex="-1" aria-hidden="true" class="hidden modal-wrapper">
	<div class="modal-container" style="max-width: 840px;">
		<div class="modal-inner">
			
			<div class="modal-header">
				<h3><?php esc_html_e( 'Modes comparison', 'nitropack' ); ?></h3>
				<button type="button" class="close-modal" data-modal-hide="modal-modes">
					<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path fill-rule="evenodd" clip-rule="evenodd"
							d="M0.293031 1.29308C0.480558 1.10561 0.734866 1.00029 1.00003 1.00029C1.26519 1.00029 1.5195 1.10561 1.70703 1.29308L6.00003 5.58608L10.293 1.29308C10.3853 1.19757 10.4956 1.12139 10.6176 1.06898C10.7396 1.01657 10.8709 0.988985 11.0036 0.987831C11.1364 0.986677 11.2681 1.01198 11.391 1.06226C11.5139 1.11254 11.6255 1.18679 11.7194 1.28069C11.8133 1.37458 11.8876 1.48623 11.9379 1.60913C11.9881 1.73202 12.0134 1.8637 12.0123 1.99648C12.0111 2.12926 11.9835 2.26048 11.9311 2.38249C11.8787 2.50449 11.8025 2.61483 11.707 2.70708L7.41403 7.00008L11.707 11.2931C11.8892 11.4817 11.99 11.7343 11.9877 11.9965C11.9854 12.2587 11.8803 12.5095 11.6948 12.6949C11.5094 12.8803 11.2586 12.9855 10.9964 12.9878C10.7342 12.99 10.4816 12.8892 10.293 12.7071L6.00003 8.41408L1.70703 12.7071C1.51843 12.8892 1.26583 12.99 1.00363 12.9878C0.741432 12.9855 0.49062 12.8803 0.305212 12.6949C0.119804 12.5095 0.0146347 12.2587 0.0123563 11.9965C0.0100779 11.7343 0.110873 11.4817 0.293031 11.2931L4.58603 7.00008L0.293031 2.70708C0.10556 2.51955 0.000244141 2.26525 0.000244141 2.00008C0.000244141 1.73492 0.10556 1.48061 0.293031 1.29308Z"
							fill="#1B004E" />
					</svg>
					<span class="sr-only"><?php esc_html_e( 'Close modal', 'nitropack' ); ?></span>
				</button>
			</div>
			
			<div class="modal-body">
				<div class="modern-table">
					<div class="grid grid-cols-first-240 col-span-2 thead">
						<div></div>
						<div class="grid grid-cols-<?php echo esc_attr( $table_columns_count ); ?>">
							<?php foreach ( $table_columns as $table_column ) : ?>
								<div class="th">
									<?php echo $table_column; ?>
								</div>
							<?php endforeach; ?>
						</div>
					</div>
					<div class="scrollbar-default overflow-auto" style="max-height: calc(100% - 50px);">
						<?php
						foreach ( $table_cells as $feature ) :
							$has_any_mode_feature = false;
							foreach ( $table_columns as $key => $column ) {
								if ( in_array( $key, $feature['features'], true ) || array_key_exists( $key, $feature['features'] ) ) {
									$has_any_mode_feature = true;
									break;
								}
							}

if ( ! $has_any_mode_feature && empty( $feature['always_render'] ) ) {
								continue;
							}
							?>
							<div class="col-span-2 grid grid-cols-first-240 tr">
								<div class="flex gap-2 td feature-name">
									<?php if ( isset( $feature['sub'] ) ) : ?>
										<svg width="10" height="16" viewBox="0 0 10 16" fill="none"
											xmlns="http://www.w3.org/2000/svg" class="text-gray-500">
											<path
												d="M1 12H0.5V12.5H1V12ZM9.35355 12.3536C9.54882 12.1583 9.54882 11.8417 9.35355 11.6464L6.17157 8.46447C5.97631 8.2692 5.65973 8.2692 5.46447 8.46447C5.2692 8.65973 5.2692 8.97631 5.46447 9.17157L8.29289 12L5.46447 14.8284C5.2692 15.0237 5.2692 15.3403 5.46447 15.5355C5.65973 15.7308 5.97631 15.7308 6.17157 15.5355L9.35355 12.3536ZM0.5 0V12H1.5V0H0.5ZM1 12.5H9V11.5H1V12.5Z"
												fill="currentColor"></path>
										</svg>
									<?php endif; ?>
									<?php echo $feature['name']; ?>
								</div>

<div class="grid grid-cols-<?php echo esc_attr( $table_columns_count ); ?> td modes">
									<?php if ( $feature['features'] ) :
										foreach ( $table_columns as $key => $column ) {
											echo '<div class="flex justify-center items-center mode">';
											// Check if the feature is available in the current column
											$has_feature = in_array( $key, $feature['features'] );
											// Display checkbox if the feature is available                                           
											if ( $has_feature ) {
												echo '<svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M14.6666 1L5.49992 10.1667L1.33325 6" stroke="#4600CC" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                                </svg>
                                                ';
											}
											if ( array_key_exists( $key, $feature['features'] ) ) {
												// Display the text specified in the features
												echo '' . $feature['features'][ $key ] . '';
											}
											echo '</div>';
										}
										?>

<?php
									endif; ?>
								</div>
							</div>
						<?php endforeach; ?>
					</div>
				</div>
				
				<div class="modal-footer" style="margin-bottom: 0">
					<button data-modal-hide="modal-modes" type="button"
						class="btn btn-secondary ml-auto"><?php esc_html_e( 'Close', 'nitropack' ); ?></button>
				</div>
			</div>
		</div>
	</div>
</div>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: modal-modes.php

Server Info

System Features

User Info