article/GraphicImage.js

/**
 * 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;