| 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 |
|
