ads/WallpaperAd.js

import customEvent from '../utils/customEvent';

/**
 * Wallpaper ad
 *
 * Define functions called by wallpaper ad units for displaying background images
 *
 * @module WallpaperAd
 */

const WallpaperAd = {
	selectors: {
		wallpaperUnit: '.c-ad--wallpaper .c-ad__unit',
		container: '.l-content',
		districtMSelector: '.districtm-skin-b',
		header: '.l-header',
	},

	wallpaperCss: 'has-wallpaper',

	staticWallpaperCss: 'has-staticWallpaper',

	districtMWallpaperCss: 'has-districtM',

	$container: null,

	$header: null,

	init() {
		this.$header = document.querySelector( this.selectors.header );

		const $ad = document.querySelector( this.selectors.wallpaperUnit );
		if ( $ad ) {
			$ad.addEventListener( customEvent.LOADED, ( evt ) => {
				if ( evt.detail && ! evt.detail.isEmpty ) {
					this.$container.classList.add( this.wallpaperCss );
					this.setWallpaperStyle();

					// Place ad panels on a timeout on ad load
					setTimeout( () => {
						this.positionAdPanels();
					}, 1000 );

					// Listen to nav transition event for positioning ad panels
					window.addEventListener( customEvent.NAV_TRANSITIONED, () => {
						this.positionAdPanels();
					});
				}
			});
		}

		this.$container = document.querySelector( this.selectors.container );

		window.gnca_outer_ad_pixel_call_from_footer = ( image, colour ) => {
			this.$container.classList.add( this.staticWallpaperCss );
			this.showWallpaper( image, colour, false );
		};

		window.gnca_outer_ad_pixel_call_from_footer_fixed = ( image, colour, attachment ) => {
			this.$container.classList.add( this.staticWallpaperCss );
			this.showWallpaper( image, colour, attachment );
		};

		window.gnca_outer_ad_pixel_call_from_footer_scroll_option = ( image, colour, attachment ) => {
			this.$container.classList.add( this.staticWallpaperCss );
			this.showWallpaper( image, colour, attachment );
		};
	},

	/**
	 * Search for any sticky ad elements and bind click and ad complete events
	 *
	 * @method showWallpaper
	 * @param {string} image url of wallpaper creative
	 * @param {string} background colour hex value in a string
	 * @param {boolean} attachment - true if background should be fixed
	 */
	showWallpaper( image, colour, attachment ) {
		if ( 'string' === typeof ( image ) ) {
			let style = `background: ${colour} url(${image}) no-repeat center top;`;
			if ( true === attachment ) {
				style = `${style} background-attachment: fixed;`;
			}

			this.setWallpaperStyle( style );
		}
	},

	/**
	 * Add wallpaper flag to contain body element in fixed width
	 *
	 * @method setWallpaperStyle
	 * @param {string} style - optional css style applied to body tag
	 */
	setWallpaperStyle( style = '' ) {
		if ( style ) {
			this.$container.setAttribute( 'style', style );
		}
	},

	/**
	 * Make wallpaper ad panels sticky / non-sticky
	 *
	 * @method positionAdPanels
	 */
	positionAdPanels() {
		const $adPanels = document.querySelectorAll( this.selectors.districtMSelector );
		if ( $adPanels.length > 0 ) {
			// header is currently sticky, place ads accordingly
			[].forEach.call( $adPanels, ( $adPanel ) => {
				if ( 'false' === this.$header.dataset.inView ) {
					$adPanel.classList.add( 'is-sticky' );
				} else {
					$adPanel.classList.remove( 'is-sticky' );
				}
			});

			if ( ! this.$container.classList.contains( this.districtMWallpaperCss ) ) {
				this.$container.classList.add( this.districtMWallpaperCss );
			}
		}
	},
};

export default WallpaperAd;