COVE ‐ Wrapper Middleware Index

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import React, { StrictMode } from 'react';
import { render, unmountComponentAtNode } from 'react-dom';

import Wrapper from './Wrapper';

const initMetrics = (configURL) => {
	widgetPageView();

	//window.CDC.Common.metrics.trackEvent( 'widget-loaded' );
	widgetInteraction('', 'widget-loaded');
};

function widgetPageView() {
	var contentTitle =
		window.CDC.Widget.Common.getCallParam('title') ||
		window.CDC.Widget.Common.getCallParam('wn') ||
		'CDC Visualization Widget: Unknown Title';
	var contentChannel = window.CDC.Widget.Common.getCallParam('contentChannel') || null;

	// window.CDC.Common.metrics.init( {
	//     useMetrics: true,
	//     trackAs: "widget",
	//     widgetId: "widget-165",
	//     contentTitle: contentTitle,
	//     contentChannel: contentChannel,
	//     feedName: configURL,
	//     metricsApi: "omniture",
	//     translation: {
	//         fromKey: "varName",
	//         toKey: "omnitureVarName",
	//         appendTranslations: false
	//     }
	// } );
	if (window.hasOwnProperty('_satellite')) {
		var dataObject = {};
		var _satellite = window._satellite;
		dataObject.ch = contentChannel;
		dataObject.pageName = contentTitle;
		dataObject.prop2 = document.title;
		dataObject.prop3 = location.host;
		dataObject.prop5 = 'es' === window.cdcCommon.getCallParam('lang') ? 'spa' : 'eng';
		dataObject.prop8 = 'Widget';
		dataObject.prop16 = location.host + location.pathname;
		dataObject.prop17 = window.cdcCommon.getCallParam('chost') + window.cdcCommon.getCallParam('cpath');
		dataObject.prop27 = 'Widget Framework';
		dataObject.prop32 = 'widget-165';
		_satellite.track('pageview', dataObject);
	}
}

function widgetInteraction(eventLabel, eventValue, eventType) {
	var contentTitle =
		window.CDC.Widget.Common.getCallParam('title') ||
		window.CDC.Widget.Common.getCallParam('wn') ||
		'CDC Visualization Widget: Unknown Title';
	var contentChannel = window.CDC.Widget.Common.getCallParam('contentChannel') || null;

	if (window.hasOwnProperty('_satellite')) {
		var dataObject = {};
		var _satellite = window._satellite;
		eventType = eventType || 'o';
		dataObject.ch = contentChannel;
		dataObject.pageName = contentTitle;
		dataObject.prop2 = document.title;
		dataObject.prop3 = location.host;
		dataObject.prop5 = 'es' === window.lang ? 'spa' : 'eng';
		dataObject.prop8 = 'Widget';
		dataObject.prop14 = eventValue;
		dataObject.prop16 = location.host + location.pathname;
		dataObject.prop17 = window.cdcCommon.getCallParam('chost') + window.cdcCommon.getCallParam('cpath');
		dataObject.prop27 = 'Widget Framework';
		dataObject.prop32 = 'widget-165';
		dataObject.prop33 = eventLabel;
		dataObject.events = 'prop2,prop3,prop5,prop8,prop14,prop16,prop17,prop27,prop32,prop33,channel';
		dataObject.label = eventLabel;
		dataObject.interactionType = eventType;
		dataObject.interactionValue = 'ci-' + eventLabel + ': ' + eventValue;
		_satellite.track('interaction', dataObject);
	}
}

const loadViz = () => {
	const vizContainers = Array.from(document.querySelectorAll('.wcms-viz-container'));

	vizContainers.forEach((container) => {
		// Remove existing if there is one so you can start fresh
		unmountComponentAtNode(container);

		// Grab data attributes from the container we're going to be rendering inside of and set defaults.
		let {
			configUrl: relativePath = null,
			host: hostName = null,
			standalone = false,
			language = 'en',
			config = null,
			editor: isEditor = false,
		} = container.dataset;
		let constructedURL = null;
		let sharePath = container.getAttribute('data-sharepath');

		//If we are not in the context of syndication, use the current host, not the data-host attribute value
		if (!document.body.classList.contains('syndicated-content')) {
			hostName = location.host;
		}

		// Transform values to type boolean
		standalone = standalone === 'true';

		// Only allow URL properties if we're running this in standalone mode (widget loader or development environment.)
		if (true === standalone) {
			const params = new URLSearchParams(window.location.search);

			// Set Editor Flag
			if ('true' === params.get('editor')) {
				isEditor = true;
			}

			let queryStringRelativePath = params.get('configUrl');
			let queryStringHostName = params.get('host');
			let queryStringSharePath = params.get('sharePath');

			let queryStringConfigURL = `https://` + queryStringHostName + queryStringRelativePath;

			// Config file load method: URL parameter
			if (queryStringHostName && queryStringRelativePath) {
				const configURLObject = new URL(queryStringConfigURL);

				// We can load URLs this way from either cdc.gov or localhost for local development.
				if (true === configURLObject.hostname.endsWith('cdc.gov') || 'localhost' === configURLObject.hostname) {
					constructedURL = queryStringConfigURL;
				} else {
					const errorMsg = new Error(
						'Invalid JSON file provided to URL query. Must be from cdc.gov or localhost.'
					);
					throw errorMsg;
				}
			}
		}

		// If we received a config instead of the URL
		if ('string' === typeof config) {
			config = JSON.parse(config);
		}

		if (null === config && null !== relativePath) {
			constructedURL = `https://` + hostName + relativePath;

			try {
				const configURLObject = new URL(constructedURL);

				configURLObject.protocol = window.location.protocol;
				constructedURL = configURLObject.toString();
			} catch (err) {
				new Error(err);
			}
		}

		if (constructedURL && window.hasOwnProperty('CDC') && standalone) {
			initMetrics(constructedURL);
		}

		render(
			<StrictMode>
				<Wrapper
					language={language}
					configURL={constructedURL}
					config={config}
					isEditor={isEditor}
					sharePath={sharePath}
				/>
			</StrictMode>,
			container
		);
	});
};

// Assign to CDC object for external use
window.CDC_Load_Viz = loadViz;
// Call on load
if (document.readyState !== 'loading') {
	loadViz();
} else {
	document.addEventListener('DOMContentLoaded', function () {
		loadViz();
	});
}