image-optimization
/
modules
/
optimization
/
assets
/
js
/
templates
/
optimization-details
/
index.js
index.js in Image Optimizer – Compress Images and Convert to WebP or AVIF 1.7.4, at modules/optimization/assets/js/templates/optimization-details/index.js
| 1 | import { __, sprintf } from '@wordpress/i18n'; |
| 2 | import { formatFileSize } from '../../utils'; |
| 3 | import { getUpgradeLink } from '../../../../../../assets/dev/js/utils'; |
| 4 | |
| 5 | const header = () => { |
| 6 | return ` |
| 7 | <div> |
| 8 | <table class="wp-list-table widefat striped image-optimization-details-table"> |
| 9 | <thead> |
| 10 | <tr> |
| 11 | <th>${ __( 'Size Name', 'image-optimization' ) }</th> |
| 12 | <th>${ __( 'Image Size', 'image-optimization' ) }</th> |
| 13 | <th>${ __( 'Savings', 'image-optimization' ) }</th> |
| 14 | <th></th> |
| 15 | </tr> |
| 16 | </thead> |
| 17 | |
| 18 | <tbody> |
| 19 | `; |
| 20 | }; |
| 21 | |
| 22 | const footer = ( data ) => { |
| 23 | const totalSize = sprintf( |
| 24 | // Translators: %s - total file size |
| 25 | __( 'Total: %s', 'image-optimization' ), |
| 26 | formatFileSize( data?.total ), |
| 27 | ); |
| 28 | |
| 29 | return ` |
| 30 | </tbody> |
| 31 | </table> |
| 32 | |
| 33 | <p> |
| 34 | <b> |
| 35 | ${ totalSize } |
| 36 | </b> |
| 37 | </p> |
| 38 | </div> |
| 39 | `; |
| 40 | }; |
| 41 | |
| 42 | const rowStart = ( data ) => { |
| 43 | return ` |
| 44 | <tr> |
| 45 | <td class="image-optimization-details-table__size-name"><b>${ data.size_name }</b></td> |
| 46 | <td class="image-optimization-details-table__size">${ formatFileSize( data.file_size ) }</td> |
| 47 | `; |
| 48 | }; |
| 49 | |
| 50 | const rowEnd = () => { |
| 51 | return '</tr>'; |
| 52 | }; |
| 53 | |
| 54 | const optimizedChunk = ( data ) => { |
| 55 | const optimizationStats = sprintf( |
| 56 | // Translators: %1$s: Optimization percentage, %2$ file size decrease |
| 57 | __( 'Reduced by %1$s%% (%2$s)', 'image-optimization' ), |
| 58 | data.saved.relative, |
| 59 | formatFileSize( data.saved.absolute ), |
| 60 | ); |
| 61 | |
| 62 | const croppingStats = data.new_dimensions ? sprintf( |
| 63 | // Translators: %1$s: Width, %2$ height |
| 64 | __( 'Resized to %1$s(w) x %2$s(h)', 'image-optimization' ), |
| 65 | data.new_dimensions.width, |
| 66 | data.new_dimensions.height, |
| 67 | ) : ''; |
| 68 | |
| 69 | return ` |
| 70 | <td class="image-optimization-details-table__status"> |
| 71 | <span class="image-optimization-details-table__property"> |
| 72 | ${ optimizationStats } |
| 73 | </span> |
| 74 | |
| 75 | <span class="image-optimization-details-table__property"> |
| 76 | ${ croppingStats } |
| 77 | </span> |
| 78 | </td> |
| 79 | |
| 80 | <td class="image-optimization-details-table__action"></td> |
| 81 | `; |
| 82 | }; |
| 83 | |
| 84 | const notOptimizedChunk = ( data ) => { |
| 85 | return ` |
| 86 | <td class="image-optimization-details-table__status"> |
| 87 | <span class="image-optimization-details-table__property"> |
| 88 | ${ __( 'Not optimized', 'image-optimization' ) } |
| 89 | </span> |
| 90 | </td> |
| 91 | |
| 92 | <td class="image-optimization-details-table__action"> |
| 93 | <button type="button" |
| 94 | class="button button-primary image-optimization-details-table__optimization-button" |
| 95 | data-image-id="${ data.imageId }"> |
| 96 | ${ __( 'Optimize', 'image-optimization' ) } |
| 97 | </button> |
| 98 | </td> |
| 99 | `; |
| 100 | }; |
| 101 | |
| 102 | const notFoundChunk = () => { |
| 103 | return ` |
| 104 | <td class="image-optimization-details-table__status"> |
| 105 | <span class="image-optimization-details-table__property image-optimization-details-table__property--error"> |
| 106 | ${ __( 'File is missing', 'image-optimization' ) } |
| 107 | </span> |
| 108 | </td> |
| 109 | |
| 110 | <td class="image-optimization-details-table__action"></td> |
| 111 | `; |
| 112 | }; |
| 113 | |
| 114 | const tooLargeChunk = () => { |
| 115 | const message = sprintf( |
| 116 | // Translators: %s - max file size |
| 117 | __( 'File is too large. Max size is %s', 'image-optimization' ), |
| 118 | formatFileSize( window?.imageOptimizerUserData?.maxFileSize ), |
| 119 | ); |
| 120 | |
| 121 | const subscriptionId = window?.imageOptimizerUserData?.planData?.subscription_id; |
| 122 | |
| 123 | return ` |
| 124 | <td class="image-optimization-details-table__status"> |
| 125 | <span class="image-optimization-details-table__property"> |
| 126 | ${ message } |
| 127 | </span> |
| 128 | </td> |
| 129 | |
| 130 | <td class="image-optimization-details-table__action"> |
| 131 | <a class="button button-primary button-large" |
| 132 | href="${ getUpgradeLink( 'https://go.elementor.com/io-panel-upgrade/', subscriptionId ) }" |
| 133 | target="_blank" rel="noopener noreferrer"> |
| 134 | ${ __( 'Upgrade', 'image-optimization' ) } |
| 135 | </a> |
| 136 | </td> |
| 137 | `; |
| 138 | }; |
| 139 | |
| 140 | const error = ( data ) => { |
| 141 | return ` |
| 142 | <span class="image-optimization-details-table__error">${ data.message }</span> |
| 143 | `; |
| 144 | }; |
| 145 | |
| 146 | const optimizationDetailsTemplate = Object.freeze( { |
| 147 | header, |
| 148 | footer, |
| 149 | rowStart, |
| 150 | rowEnd, |
| 151 | optimizedChunk, |
| 152 | notOptimizedChunk, |
| 153 | notFoundChunk, |
| 154 | tooLargeChunk, |
| 155 | error, |
| 156 | } ); |
| 157 | |
| 158 | export default optimizationDetailsTemplate; |
| 159 |