import customEvent from '../utils/customEvent';
import positionSticky from '../utils/positionSticky';
import InView from '../utils/classes/InView';
/**
* SendToNews
*
* Dynamically initiate send to news player
*
* @module SendToNews
*/
const SendToNews = {
selectors: {
player: '.c-video--sendToNews',
script: 'script[data-type="s2nScript"]',
},
/**
* If position sticky is supported, load send to news player right away.
* Otherwise, set up in view listener to load the player in view
* for better user experience on IE as player doesn't stick on IE.
*
* @method init
*/
init() {
let watcher = null;
[].forEach.call( document.querySelectorAll( this.selectors.player ), ( $player ) => {
if ( positionSticky.supported() ) {
this.loadPlayer( false, $player );
} else {
$player.addEventListener( customEvent.IN_VIEW, evt => this.loadPlayer( evt, $player ) );
// set up in view watcher for Send to news player
if ( ! watcher ) {
watcher = new InView({
threshold: 0.1,
}, 'sendToNewsWatcher' );
watcher.init();
}
watcher.startWatching( $player );
}
});
},
/**
* Load the send to news player script.
*
* @method loadPlayer
* @param {event} event - in view event, false if function not triggered by in view
* @param {HTMLElement} $player - player DOM element
*/
loadPlayer( event, $player ) {
if ( ! event || ( event.detail && event.detail.isInView ) ) {
const $script = $player.querySelector( this.selectors.script );
if ( $script && ! $script.src && $script.dataset.src ) {
// Triggered by in view, turn off async.
if ( event ) {
$script.removeAttribute( 'async' );
}
$script.src = $script.dataset.src;
$script.dataset.src = '';
}
}
},
};
export default SendToNews;