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;