image-optimization
/
trunk
/
modules
/
optimization
/
assets
/
js
/
templates
/
list-view
/
index.js
index.js in Image Optimizer – Compress Images and Convert to WebP or AVIF 1.5.2, at trunk/modules/optimization/assets/js/templates/list-view/index.js
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { escapeHTML } from '@wordpress/escape-html'; |
| 3 | import { formatFileSize } from '../../utils'; |
| 4 | import { UPGRADE_LINK } from '../../constants'; |
| 5 | |
| 6 | const notOptimizedTemplate = () => { |
| 7 | return ` |
| 8 | <button type="button" |
| 9 | class="button button-primary image-optimization-control__button image-optimization-control__button--optimize"> |
| 10 | ${ __( 'Optimize now', 'image-optimization' ) } |
| 11 | </button> |
| 12 | `; |
| 13 | }; |
| 14 | |
| 15 | const loadingTemplate = ( action ) => { |
| 16 | let buttonText; |
| 17 | |
| 18 | switch ( action ) { |
| 19 | case 'restore': |
| 20 | buttonText = __( 'Restoring…', 'image-optimization' ); |
| 21 | break; |
| 22 | |
| 23 | case 'optimize': |
| 24 | buttonText = __( 'Optimizing…', 'image-optimization' ); |
| 25 | break; |
| 26 | |
| 27 | case 'reoptimize': |
| 28 | buttonText = __( 'Reoptimizing…', 'image-optimization' ); |
| 29 | break; |
| 30 | |
| 31 | default: |
| 32 | buttonText = __( 'Loading…', 'image-optimization' ); |
| 33 | } |
| 34 | |
| 35 | return ` |
| 36 | <button class="button button-secondary image-optimization-control__button image-optimization-control__button--optimize" |
| 37 | disabled=""> |
| 38 | <span class="spinner is-active"></span> ${ buttonText } |
| 39 | </button> |
| 40 | `; |
| 41 | }; |
| 42 | |
| 43 | const errorTemplate = ( message, imagesLeft ) => { |
| 44 | return ` |
| 45 | <span class="image-optimization-control__error-message">${ escapeHTML( message ) }</span> |
| 46 | |
| 47 | ${ imagesLeft === 0 |
| 48 | ? `<a class="button button-secondary button-large image-optimization-control__button" |
| 49 | href="${ UPGRADE_LINK }" |
| 50 | target="_blank" rel="noopener noreferrer"> |
| 51 | ${ __( 'Upgrade', 'image-optimization' ) } |
| 52 | </a> |
| 53 | ` : ` |
| 54 | <button class="button button-secondary button-large button-link-delete image-optimization-control__button image-optimization-control__button--try-again" |
| 55 | type="button"> |
| 56 | ${ __( 'Try again', 'image-optimization' ) } |
| 57 | </button>` } |
| 58 | `; |
| 59 | }; |
| 60 | |
| 61 | const optimizedTemplate = ( data ) => { |
| 62 | const absoluteValue = formatFileSize( data?.saved?.absolute, 1 ); |
| 63 | |
| 64 | return ` |
| 65 | <p class="image-optimization-control__property"> |
| 66 | ${ __( 'Image sizes optimized', 'image-optimization' ) }: |
| 67 | |
| 68 | <span>${ data?.sizesOptimized }</span> |
| 69 | </p> |
| 70 | |
| 71 | <p class="image-optimization-control__property"> |
| 72 | ${ data?.saved?.absolute !== 0 |
| 73 | ? `${ __( 'Overall saving', 'image-optimization' ) }: <span>${ data?.saved?.relative }% (${ absoluteValue })</span>` |
| 74 | : `<span>${ __( 'Image is fully optimized', 'image-optimization' ) }</span>` } |
| 75 | </p> |
| 76 | |
| 77 | <div class="image-optimization-control__buttons-wrapper"> |
| 78 | ${ data?.canBeRestored ? ` |
| 79 | <button type="button" |
| 80 | class="button button-secondary image-optimization-control__button image-optimization-control__button--restore-original"> |
| 81 | ${ __( 'Restore original', 'image-optimization' ) } |
| 82 | </button> |
| 83 | ` : '' } |
| 84 | |
| 85 | <button type="button" |
| 86 | class="button button-secondary image-optimization-control__button image-optimization-control__button--reoptimize"> |
| 87 | ${ __( 'Reoptimize', 'image-optimization' ) } |
| 88 | </button> |
| 89 | </div> |
| 90 | `; |
| 91 | }; |
| 92 | |
| 93 | const listViewTemplates = Object.freeze( { |
| 94 | notOptimizedTemplate, |
| 95 | loadingTemplate, |
| 96 | errorTemplate, |
| 97 | optimizedTemplate, |
| 98 | } ); |
| 99 | |
| 100 | export default listViewTemplates; |
| 101 |