main/NewsletterSignup.js

/**
 * Redirect user to signup page
 *
 * @example
 * <div data-load-content="more-stories">
 *     [fetched content goes here]
 * </div>
 *
 * @module NewsLetters
 */
const NewsletterSignup = {
	buttonSelector: 'button.c-newsletterSignup__button',
	errorClass: 'c-newsletterSignup__input--error',
	dataTopicAttr: 'data-topic',

	init() {
		const $buttons = document.querySelectorAll( this.buttonSelector );
		if ( $buttons.length < 1 ) {
			return;
		}
		for ( let i = 0; i < $buttons.length; i += 1 ) {
			$buttons[i].addEventListener( 'click', ( e ) => {
				const $textbox = e.currentTarget.parentElement.querySelector( 'input[type="text"]' );
				if ( ! $textbox ) {
					return;
				}
				if ( '' === $textbox.value ) {
					$textbox.classList.add( this.errorClass );
					return;
				}

				// Track sign up clicks
				const signUpId = e.currentTarget.dataset.newsletterSignupId;
				/* eslint-disable camelcase */
				/* global gn_analytics */
				if ( 'undefined' !== typeof ( gn_analytics ) && signUpId ) {
					gn_analytics.Analytics.track(['ga', 'adobe'], {
						eventType: 'Newsletter',
						action: 'Newsletter sign up attempts',
						target: e.currentTarget,
						data: {
							'newsletter.signup': '1',
							'newsletter.signupform': signUpId,
						},
					});
				}
				/* eslint-enable camelcase */

				$textbox.classList.remove( this.errorClass );

				// check if this a topic newsletter signup
				const topic = $buttons[i].getAttribute( this.dataTopicAttr );
				let url = `https://globalnews.ca/pages/email-alerts/?email=${$textbox.value}`;
				url = topic ? `${url}&category=${topic}` : url;

				document.location = url;
			});
		}
	},
};
export default NewsletterSignup;