/**
* Script for revealing graphic images on click
*
* @module GraphicImage
* @prop {String} graphicImageSelector - Graphic image container selector
* @prop {String} graphicBlurSelector - Graphic image blurred layer selector
* @prop {String} graphicWarningSelector - Graphic image warning layer selector
* @prop {Object} hidingClass - CSS hiding class
* @prop {Array} graphicImages - Array of graphic image containers
*/
const GraphicImage = {
graphicImageSelector: '.c-figure--graphic',
graphicPhotoSelector: '.c-figure__image',
/**
* Initializes graphic image logic on article pages
*
* @method init
*/
init() {
const graphicImages = document.querySelectorAll( this.graphicImageSelector );
if ( ! graphicImages ) {
return;
}
[].forEach.call( graphicImages, ( $image ) => {
$image.addEventListener( 'click', ( e ) => {
this.handleClick( e );
});
});
},
/**
* Reveals graphic image by hiding blur and warning layers
*
* @method handleClick
*/
handleClick( e ) {
const graphicImage = e.currentTarget;
graphicImage.classList.remove( this.graphicImageSelector.replace( '.', '' ) );
graphicImage.querySelector( this.graphicPhotoSelector ).style.visibility = 'visible';
},
};
export default GraphicImage;