image-optimization
/
trunk
/
modules
/
optimization
/
assets
/
js
/
classes
/
control
/
control-states.js
control-states.js in Image Optimizer – Compress Images and Convert to WebP or AVIF 1.6.5, at trunk/modules/optimization/assets/js/classes/control/control-states.js
| 1 | import listViewTemplates from '../../templates/list-view'; |
| 2 | import metaBoxTemplates from '../../templates/meta-box'; |
| 3 | import detailsViewTemplates from '../../templates/details-view'; |
| 4 | import { SELECTORS } from '../../constants'; |
| 5 | import ControlMeta from './control-meta'; |
| 6 | |
| 7 | class ControlStates { |
| 8 | constructor( controlWrapper ) { |
| 9 | this.controlWrapper = controlWrapper; |
| 10 | this.context = new ControlMeta( controlWrapper ).getContext(); |
| 11 | this.action = new ControlMeta( controlWrapper ).getAction(); |
| 12 | this.canBeRestored = new ControlMeta( controlWrapper ).canBeRestored(); |
| 13 | this.templates = { |
| 14 | 'list-view': listViewTemplates, |
| 15 | 'meta-box': metaBoxTemplates, |
| 16 | 'details-view': detailsViewTemplates, |
| 17 | }; |
| 18 | } |
| 19 | |
| 20 | renderNotOptimized( data ) { |
| 21 | this.controlWrapper.className = this.mixControlContextClass( SELECTORS.controlNotOptimizedClassName ); |
| 22 | this.controlWrapper.innerHTML = this.getTemplates().notOptimizedTemplate( data ); |
| 23 | |
| 24 | this.controlWrapper.dataset.imageOptimizationStatus = 'not-optimized'; |
| 25 | } |
| 26 | |
| 27 | renderOptimized( data ) { |
| 28 | const canBeRestored = this.canBeRestored && data?.saved?.absolute !== 0; |
| 29 | |
| 30 | this.controlWrapper.className = this.mixControlContextClass( SELECTORS.controlOptimizedClassName ); |
| 31 | this.controlWrapper.innerHTML = this.getTemplates().optimizedTemplate( { ...data, canBeRestored } ); |
| 32 | |
| 33 | this.controlWrapper.dataset.imageOptimizationStatus = 'optimized'; |
| 34 | } |
| 35 | |
| 36 | renderError( { message, imagesLeft, action } ) { |
| 37 | this.controlWrapper.className = this.mixControlContextClass( SELECTORS.controlErrorClassName ); |
| 38 | this.controlWrapper.innerHTML = this.getTemplates().errorTemplate( message, imagesLeft ); |
| 39 | |
| 40 | this.controlWrapper.dataset.imageOptimizationAction = action; |
| 41 | this.controlWrapper.dataset.imageOptimizationStatus = 'error'; |
| 42 | } |
| 43 | |
| 44 | renderLoading( action ) { |
| 45 | this.controlWrapper.className = this.mixControlContextClass( SELECTORS.controlLoadingClassName ); |
| 46 | this.controlWrapper.innerHTML = this.getTemplates().loadingTemplate( action ); |
| 47 | |
| 48 | this.controlWrapper.dataset.imageOptimizationStatus = 'loading'; |
| 49 | } |
| 50 | |
| 51 | getTemplates() { |
| 52 | const template = this.templates[ this.context ]; |
| 53 | |
| 54 | if ( ! template ) { |
| 55 | throw new Error( `No templates found for the context ${ this.context }` ); |
| 56 | } |
| 57 | |
| 58 | return template; |
| 59 | } |
| 60 | |
| 61 | mixControlContextClass( className ) { |
| 62 | const contextClassName = SELECTORS.controlWrapper[ this.context ]; |
| 63 | |
| 64 | if ( ! contextClassName ) { |
| 65 | throw new Error( `No context className found for the context ${ this.context }` ); |
| 66 | } |
| 67 | |
| 68 | return `${ className } ${ contextClassName }`; |
| 69 | } |
| 70 | } |
| 71 | |
| 72 | export default ControlStates; |
| 73 |