| 1 |
<?php |
| 2 |
defined( 'ABSPATH' ) or die( 'Cheatin\' uh?' ); |
| 3 |
|
| 4 |
/** |
| 5 |
* The main settings page construtor using the required functions from WP |
| 6 |
* |
| 7 |
* @since 1.0 |
| 8 |
*/ |
| 9 |
function _imagify_display_bulk_page() { |
| 10 |
$user = new Imagify_User(); |
| 11 |
?> |
| 12 |
<div class="wrap imagify-settings imagify-bulk"> |
| 13 |
<div class="imagify-title"> |
| 14 |
<div class="imagify-title-right"> |
| 15 |
<div class="imagify-account"> |
| 16 |
<p class="imagify-meteo-title"><?php _e( 'Account status', 'imagify' ); ?></p> |
| 17 |
<p class="imagify-meteo-subs"><?php _e( 'Your subscription:', 'imagify' ); ?> <strong class="imagify-user-plan"><?php echo $user->plan_label; ?></strong></p> |
| 18 |
</div> |
| 19 |
<div class="imagify-account-link"> |
| 20 |
<a href="<?php echo IMAGIFY_APP_MAIN; ?>/#/subscription" class="button button-ghost" target="_blank"> |
| 21 |
<span class="dashicons dashicons-admin-users"></span> |
| 22 |
<span class="button-text"><?php _e( 'View My Subscription', 'imagify' ); ?></span> |
| 23 |
</a> |
| 24 |
</div> |
| 25 |
|
| 26 |
<?php if ( 1 === $user->plan_id ) { ?> |
| 27 |
<div class="imagify-sep-v"></div> |
| 28 |
<div class="imagify-credit-left"> |
| 29 |
<?php |
| 30 |
$unconsumed_quota = $user->get_percent_unconsumed_quota(); |
| 31 |
$meteo_icon = '<img src="' . IMAGIFY_ASSETS_IMG_URL . 'sun.svg" width="37" height="38" alt="" />'; |
| 32 |
$bar_class = 'positive'; |
| 33 |
$is_display_bubble = false; |
| 34 |
|
| 35 |
if( $unconsumed_quota >= 21 && $unconsumed_quota <= 50 ) { |
| 36 |
$bar_class = 'neutral'; |
| 37 |
$meteo_icon = '<img src="' . IMAGIFY_ASSETS_IMG_URL . 'cloudy-sun.svg" width="37" height="38" alt="" />'; |
| 38 |
} elseif( $unconsumed_quota <= 20 ) { |
| 39 |
$bar_class = 'negative'; |
| 40 |
$is_display_bubble = true; |
| 41 |
$meteo_icon = '<img src="' . IMAGIFY_ASSETS_IMG_URL . 'stormy.svg" width="38" height="36" alt="" />'; |
| 42 |
} |
| 43 |
?> |
| 44 |
<span class="imagify-meteo-icon"><?php echo $meteo_icon; ?></span> |
| 45 |
<div class="imagify-space-left"> |
| 46 |
|
| 47 |
<p><?php printf( __( 'You have %s space credit left' , 'imagify' ), '<span class="imagify-unconsumed-percent">' . $unconsumed_quota . '%</span>' ); ?></p> |
| 48 |
|
| 49 |
<div class="imagify-bar-<?php echo $bar_class; ?>"> |
| 50 |
<div class="imagify-unconsumed-bar imagify-progress" style="width: <?php echo $unconsumed_quota . '%'; ?>;"></div> |
| 51 |
</div> |
| 52 |
</div> |
| 53 |
<div class="imagify-space-tooltips imagify-tooltips <?php echo ( ! $is_display_bubble ) ? 'hidden' : ''; ?>"> |
| 54 |
<div class="tooltip-content tooltip-table"> |
| 55 |
<div class="cell-icon"> |
| 56 |
<span aria-hidden="true" class="icon icon-round">i</span> |
| 57 |
</div> |
| 58 |
<div class="cell-text"> |
| 59 |
<?php _e( 'Upgrade your account to continue optimizing your images', 'imagify' ); ?> |
| 60 |
</div> |
| 61 |
<div class="cell-sep"></div> |
| 62 |
<div class="cell-cta"> |
| 63 |
<a href="<?php echo IMAGIFY_APP_MAIN; ?>/#/subscription" target="_blank"><?php _e( 'More info', 'imagify' ); ?></a> |
| 64 |
</div> |
| 65 |
</div> |
| 66 |
</div> |
| 67 |
</div> |
| 68 |
<?php } ?> |
| 69 |
|
| 70 |
</div> |
| 71 |
|
| 72 |
<img width="225" height="26" alt="Imagify" src="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>imagify-logo.png" class="imagify-logo" /> |
| 73 |
</div> |
| 74 |
|
| 75 |
<div class="imagify-sub-title"> |
| 76 |
<svg class="icon icon-bulk" viewBox="0 0 38 36" width="38" height="36" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m233.09 177.21l-5.52 10.248c-.08.145-.018.272-.023.388-.074.193-.033.4-.033.619v21.615c0 .952.601 1.429 1.552 1.429h33.897c.952 0 1.962-.478 1.962-1.429v-21.615c0-.487-.323-.925-.649-1.24l-5.623-9.976c-.405-.726-1.202-1.179-2.034-1.182l-21.486-.068c-.849 0-1.64.464-2.043 1.211m30.424 32.869c0 .173-.378.018-.551.018h-33.897c-.172 0-.14.155-.14-.018v-21.576l33.961-.281c.066.008.186.09.263.128.054.027.205.049.258.073.002.014.106.027.106.041v21.615m-6.153-32.11l4.91 8.835h-14.992v-9.354l9.306.045c.322.001.619.192.776.474m-11.494-.523v9.358h-16.306l4.773-8.892c.155-.289.456-.484.787-.484l10.746.018m7.06 17.12c0 .39-.316.706-.706.706h-12.706c-.39 0-.706-.316-.706-.706 0-.39.316-.706.706-.706h12.706c.39 0 .706.316.706.706" transform="translate(-227-176)" fill="#7a8996"/></g></svg> |
| 77 |
<span class="title-text"> |
| 78 |
<?php _e( 'Bulk Optimization', 'imagify' ); ?> |
| 79 |
<small><sup><?php echo IMAGIFY_VERSION; ?></sup></small> |
| 80 |
</span> |
| 81 |
</div> |
| 82 |
|
| 83 |
<div class="imagify-settings-section"> |
| 84 |
|
| 85 |
<div class="imagify-columns"> |
| 86 |
|
| 87 |
<div class="col-1-3 col-informations"> |
| 88 |
<h3><?php _e( 'Information', 'imagify' ); ?></h3> |
| 89 |
<ul class="imagify-list-dash"> |
| 90 |
<li><strong><?php _e( 'Please be aware that optimizing a large number of images can take a while depending on your server and network speed.', 'imagify' ); ?></strong></li> |
| 91 |
<li><?php _e( 'You must keep this page open while the bulk optimizaton is processing. If you leave you can come back to continue where it left off.', 'imagify' ); ?></li> |
| 92 |
</ul> |
| 93 |
|
| 94 |
<div class="imagify-bulk-submit"> |
| 95 |
|
| 96 |
<?php if ( get_imagify_option( 'backup', 0 ) == "1" ) { ?> |
| 97 |
|
| 98 |
<p> |
| 99 |
<strong><?php _e( 'Select Your Compression Level', 'imagify' ); ?></strong> |
| 100 |
<br> |
| 101 |
<?php |
| 102 |
$default_set = __( 'Ultra', 'imagify' ); |
| 103 |
switch( get_imagify_option( 'optimization_level' ) ) { |
| 104 |
case '1': |
| 105 |
$default_set = __( 'Aggressive', 'imagify' ); |
| 106 |
break; |
| 107 |
case '0': |
| 108 |
$default_set = __( 'Normal', 'imagify' ); |
| 109 |
break; |
| 110 |
} |
| 111 |
|
| 112 |
_e( 'Your default setting:', 'imagify' ); |
| 113 |
echo ' <strong class="imagify-primary">' . $default_set . '</strong>'; |
| 114 |
?> |
| 115 |
</p> |
| 116 |
|
| 117 |
<p class="imagify-inline-options"> |
| 118 |
<input type="radio" id="imagify-optimization_level_normal" name="optimization_level" value="0" <?php checked( get_imagify_option( 'optimization_level' ), 0 ); ?>> |
| 119 |
<label for="imagify-optimization_level_normal"> |
| 120 |
<?php _e( 'Normal', 'imagify' ); ?> |
| 121 |
</label> |
| 122 |
|
| 123 |
<input type="radio" id="imagify-optimization_level_aggro" name="optimization_level" value="1" <?php checked( get_imagify_option( 'optimization_level' ), 1 ); ?>> |
| 124 |
<label for="imagify-optimization_level_aggro"> |
| 125 |
<?php _e( 'Aggressive', 'imagify' ); ?> |
| 126 |
</label> |
| 127 |
|
| 128 |
<input type="radio" id="imagify-optimization_level_ultra" name="optimization_level" value="2" <?php checked( get_imagify_option( 'optimization_level' ), 2 ); ?>> |
| 129 |
<label for="imagify-optimization_level_ultra"> |
| 130 |
<?php _e( 'Ultra', 'imagify' ); ?> |
| 131 |
</label> |
| 132 |
</p> |
| 133 |
|
| 134 |
<?php |
| 135 |
} |
| 136 |
else { |
| 137 |
?> |
| 138 |
<p> |
| 139 |
<strong><?php printf( __( 'Don\'t forget to check %syour settings%s before bulk optimization.', 'imagify' ), '<a href="' . get_imagify_admin_url() . '">', '</a>' ); ?></strong> |
| 140 |
</p> |
| 141 |
<?php |
| 142 |
} |
| 143 |
?> |
| 144 |
|
| 145 |
<p> |
| 146 |
<?php wp_nonce_field( 'imagify-bulk-upload', 'imagifybulkuploadnonce' ); ?> |
| 147 |
<button id="imagify-bulk-action" type="button" class="button button-primary"> |
| 148 |
<span class="dashicons dashicons-admin-generic"></span> |
| 149 |
<span class="button-text"><?php _e( 'Imagif\'em all', 'imagify'); ?></span> |
| 150 |
</button> |
| 151 |
<?php |
| 152 |
if ( $user->is_free() ) { ?> |
| 153 |
<span class="imagify-tooltips right"> |
| 154 |
<span class="tooltip-content"> |
| 155 |
<span class="icon icon-round" aria-hidden="true">i</span> |
| 156 |
<?php printf( __( 'All images which are over to %s could be optimized using the pro version.', 'imagify' ), size_format( IMAGIFY_MAX_BYTES , 0 ) ); ?> |
| 157 |
</span> |
| 158 |
</span> |
| 159 |
<?php |
| 160 |
} |
| 161 |
?> |
| 162 |
</p> |
| 163 |
</div> |
| 164 |
</div> |
| 165 |
|
| 166 |
<div class="col-1-3"> |
| 167 |
<h3><?php _e( 'Overview', 'imagify' ); ?></h3> |
| 168 |
|
| 169 |
<div class="imagify-chart-container"> |
| 170 |
<canvas id="imagify-overview-chart" width="180" height="180"></canvas> |
| 171 |
<div id="imagify-overview-chart-percent" class="imagify-chart-percent"><?php echo imagify_percent_optimized_attachments(); ?><span>%</span></div> |
| 172 |
</div> |
| 173 |
<div id="imagify-overview-chart-legend"></div> |
| 174 |
</div> |
| 175 |
|
| 176 |
<div class="col-1-3 col-statistics"> |
| 177 |
<h3><?php _e( 'Statistics', 'imagify' ); ?></h3> |
| 178 |
|
| 179 |
<?php |
| 180 |
$total_saving_data = imagify_count_saving_data(); |
| 181 |
$optimized_percent = $total_saving_data['percent']; |
| 182 |
$optimized_nb = $total_saving_data['optimized_size']; |
| 183 |
$original_nb = $total_saving_data['original_size']; |
| 184 |
?> |
| 185 |
|
| 186 |
<div class="imagify-number-you-optimized"> |
| 187 |
<p> |
| 188 |
<span id="imagify-total-optimized-attachments" class="number"><?php echo number_format_i18n( $total_saving_data['count'] ); ?></span> |
| 189 |
<span class="text"><?php printf( __( 'that\'s the number of images you optimized with Imagify', 'imagify' ), '<br>' ); ?></span> |
| 190 |
</p> |
| 191 |
</div> |
| 192 |
|
| 193 |
<div class="imagify-bars"> |
| 194 |
<p><?php _e( 'Original size', 'imagify' ); ?></p> |
| 195 |
<div class="imagify-bar-negative base-transparent right-outside-number"> |
| 196 |
<div id="imagify-original-bar" class="imagify-progress" style="width: 100%"><span class="imagify-barnb"><?php echo size_format( $original_nb, 1 ); ?></span></div> |
| 197 |
</div> |
| 198 |
|
| 199 |
<p><?php _e( 'Optimized size', 'imagify' ); ?></p> |
| 200 |
<div class="imagify-bar-positive base-transparent right-outside-number"> |
| 201 |
|
| 202 |
<div id="imagify-optimized-bar" class="imagify-progress" style="width: <?php echo $optimized_percent; ?>%"><span class="imagify-barnb"><?php echo size_format( $optimized_nb, 1 ); ?></span></div> |
| 203 |
</div> |
| 204 |
|
| 205 |
</div> |
| 206 |
|
| 207 |
<div class="imagify-number-you-optimized"> |
| 208 |
<p> |
| 209 |
<span id="imagify-total-optimized-attachments-pct" class="number"><?php echo number_format_i18n( imagify_count_saving_data('percent') ); ?>%</span> |
| 210 |
<span class="text"><?php printf( __( 'that\'s the size you saved %sby using Imagify', 'imagify' ), '<br>' ); ?></span> |
| 211 |
</p> |
| 212 |
</div> |
| 213 |
</div> |
| 214 |
|
| 215 |
</div> |
| 216 |
</div><!-- .imagify-settings-section --> |
| 217 |
|
| 218 |
<!-- The Success/Complete bar --> |
| 219 |
<div class="imagify-row-complete hidden" aria-hidden="true"> |
| 220 |
<div class="imagify-all-complete"> |
| 221 |
<div class="imagify-ac-report"> |
| 222 |
<div class="imagify-ac-chart" data-percent="0"> |
| 223 |
<span class="imagify-chart"> |
| 224 |
<span class="imagify-chart-container"> |
| 225 |
<canvas width="46" height="46"></canvas> |
| 226 |
</span> |
| 227 |
</span> |
| 228 |
</div> |
| 229 |
<div class="imagify-ac-report-text"> |
| 230 |
<p class="imagify-ac-rt-big"><?php _e( 'Well done!', 'imagify' ); ?></p> |
| 231 |
<p><?php printf( __( 'you saved %1$s out of %2$s', 'imagify' ), '<strong class="imagify-ac-rt-total-gain"></strong>', '<strong class="imagify-ac-rt-total-original"></strong>' ); ?></p> |
| 232 |
</div> |
| 233 |
</div> |
| 234 |
<div class="imagify-ac-share"> |
| 235 |
<div class="imagify-ac-share-content"> |
| 236 |
<p><?php _e( 'Share your awesome result', 'imagify' ); ?></p> |
| 237 |
<ul class="imagify-share-networks"> |
| 238 |
<li> |
| 239 |
<a target="_blank" class="imagify-sn-twitter" href=""><svg viewBox="0 0 23 18" width="23" height="18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><title>Twitter</title><path d="m244.15 12.13c-.815.361-1.691.606-2.61.716.939-.563 1.659-1.453 1.998-2.514-.878.521-1.851.898-2.886 1.103-.829-.883-2.01-1.435-3.317-1.435-2.51 0-4.544 2.034-4.544 4.544 0 .356.04.703.118 1.035-3.777-.19-7.125-1.999-9.367-4.748-.391.671-.615 1.452-.615 2.285 0 1.576.802 2.967 2.02 3.782-.745-.024-1.445-.228-2.058-.568-.001.019-.001.038-.001.057 0 2.202 1.566 4.04 3.646 4.456-.381.104-.783.159-1.197.159-.293 0-.577-.028-.855-.081.578 1.805 2.256 3.119 4.245 3.156-1.555 1.219-3.515 1.945-5.644 1.945-.367 0-.728-.021-1.084-.063 2.01 1.289 4.399 2.041 6.966 2.041 8.359 0 12.929-6.925 12.929-12.929 0-.197-.004-.393-.013-.588.888-.64 1.658-1.44 2.268-2.352" transform="translate(-222-10)" fill="#fff"/></g></svg></a> |
| 240 |
</li> |
| 241 |
<li> |
| 242 |
<a target="_blank" class="imagify-sn-twitter-facebook" href="<?php echo esc_url('https://www.facebook.com/sharer/sharer.php?u=https://wordpress.org/plugins/imagify' ); ?>"><svg viewBox="0 0 18 18" width="18" height="18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><title>Facebook</title><path d="m203.25 10h-16.5c-.415 0-.75.336-.75.75v16.5c0 .414.336.75.75.75h8.812v-6.75h-2.25v-2.813h2.25v-2.25c0-2.325 1.472-3.469 3.546-3.469.993 0 1.847.074 2.096.107v2.43h-1.438c-1.128 0-1.391.536-1.391 1.322v1.859h2.813l-.563 2.813h-2.25l.045 6.75h4.83c.414 0 .75-.336.75-.75v-16.5c0-.414-.336-.75-.75-.75" transform="translate(-186-10)" fill="#fff"/></g></svg></a> |
| 243 |
</li> |
| 244 |
</ul> |
| 245 |
</div> |
| 246 |
</div> |
| 247 |
</div> |
| 248 |
</div> |
| 249 |
|
| 250 |
<div class="imagify-bulk-table"> |
| 251 |
<table summary="<?php _e( 'Compression process results', 'imagify' ); ?>"> |
| 252 |
<thead> |
| 253 |
<tr> |
| 254 |
<th class="imagify-cell-filename"><?php _e( 'Filename', 'imagify' ); ?></th> |
| 255 |
<th class="imagify-cell-status"><?php _e( 'Status', 'imagify' ); ?></th> |
| 256 |
<th class="imagify-cell-original"><?php _e( 'Original', 'imagify' ); ?></th> |
| 257 |
<th class="imagify-cell-optimized"><?php _e( 'Optimized', 'imagify' ); ?></th> |
| 258 |
<th class="imagify-cell-percentage"><?php _e( 'Percentage', 'imagify' ); ?></th> |
| 259 |
<th class="imagify-cell-thumbnails"><?php _e( 'Thumbnails optimized', 'imagify' ); ?></th> |
| 260 |
<th class="imagify-cell-savings"><?php _e( 'Overall saving', 'imagify' ); ?></th> |
| 261 |
</tr> |
| 262 |
</thead> |
| 263 |
<tfoot> |
| 264 |
<tr> |
| 265 |
<td class="imagify-cell-nb-files"><span class="imagify-nb-files">0</span> <?php _e( 'file', 'imagify' ); ?></td> |
| 266 |
<td class="imagify-cell-errors"><span class="imagify-nb-errors">0</span> <?php _e( 'error', 'imagify' ); ?></td> |
| 267 |
<td class="imagify-cell-totaloriginal" colspan="4"><?php _e( 'Total:', 'imagify' ); ?> <strong><span class="imagify-total-original">0Mb</span></strong></td> |
| 268 |
<td class="imagify-cell-totalgain"><?php _e( 'Gain:', 'imagify' ); ?> <strong><span class="imagify-total-gain">0Mb</span></strong></td> |
| 269 |
</tr> |
| 270 |
</tfoot> |
| 271 |
<tbody> |
| 272 |
<!-- The progress bar --> |
| 273 |
<tr aria-hidden="true" class="imagify-row-progress hidden"> |
| 274 |
<td colspan="7"> |
| 275 |
<div class="media-item"> |
| 276 |
<div class="progress"> |
| 277 |
<div id="imagify-progress-bar" class="bar"><div class="percent">0%</div></div> |
| 278 |
</div> |
| 279 |
</div> |
| 280 |
</td> |
| 281 |
</tr> |
| 282 |
<!-- No image uploaded yet --> |
| 283 |
<tr class="imagify-no-uploaded-yet"> |
| 284 |
<td colspan="7"> |
| 285 |
<p><?php printf( __( '%sStart the bulk optimization%s', 'imagify' ), '<a id="imagify-simulate-bulk-action" href="#">', '</a>' ); ?></p> |
| 286 |
</td> |
| 287 |
</tr> |
| 288 |
</tbody> |
| 289 |
</table> |
| 290 |
</div> |
| 291 |
</div> |
| 292 |
<?php |
| 293 |
} |
