@pernod-ricard-global-cms/jsutils 1.6.4 → 1.7.1

package/.prettierrc

@@ -0,0 +1,19 @@
+{
+	"useTabs": true,
+	"overrides": [
+		{
+			"files": "*.test.js",
+			"options": {
+				"semi": true
+			}
+		},
+		{
+			"files": ["*.js"],
+			"options": {
+				"semi": true,
+				"singleQuote": true,
+				"trailingComma": "none"
+			}
+		}
+	]
+}

package/jsutils.js

@@ -2,47 +2,58 @@
 /* eslint-disable no-console */
 
 /**
- * This function accepts an html element and returns the position of that element on the page. 
- * 
+ * Function for check whether the code is running within the Wordpress admin page. Checks for wp-admin class.
+ * @returns {Boolean}
+ */
+export function isWpAdmin() {
+	return document.body.classList.contains('wp-admin') ? true : false;
+}
+
+/**
+ * This function accepts an html element and returns the position of that element on the page.
+ *
  * @param {htmlElement} element The element whose position you want to get.
  * @returns {object} An object with the x and y pixel values.
  */
-export function getPosition( element ) {
+export function getPosition(element) {
 	const scrollElementTag = document.scrollingElement.tagName;
 	let xPosition = 0;
 	let yPosition = 0;
-	while ( element ) {
-		xPosition +=
-			element.offsetLeft - element.scrollLeft + element.clientLeft;
+	while (element) {
+		xPosition += element.offsetLeft - element.scrollLeft + element.clientLeft;
 		yPosition += element.offsetTop - element.scrollTop + element.clientTop;
 		element = element.offsetParent;
 	}
 	// Quirks mode safety - in case of missing DOCTYPE
-	if ( scrollElementTag === 'BODY' ) {
-		yPosition += document.querySelector( 'body' ).scrollTop;
+	if (scrollElementTag === 'BODY') {
+		yPosition += document.querySelector('body').scrollTop;
 	}
 	return { x: xPosition, y: yPosition };
 }
 
 /**
- * Adds or removes a 'valid' class to an input and button element depending on whether the value of the input is valid. 
+ * Adds or removes a 'valid' class to an input and button element depending on whether the value of the input is valid.
  * @param {htmlElement} input The input element to check.
- * @param {htmlElement} button A corresponding button to disable if invalid. 
+ * @param {htmlElement} button A corresponding button to disable if invalid.
  */
-export function toggleClassByValidity( input, button ) {
-	input.addEventListener( 'input', () => {
-		if ( input.validity.valid && input.value ) {
-			if ( ! button.classList.contains( 'valid' ) ) {
-				button.classList.add( 'valid' );
-			}
-			if ( ! input.classList.contains( 'valid' ) ) {
-				input.classList.add( 'valid' );
+export function toggleClassByValidity(input, button) {
+	try {
+		input.addEventListener('input', () => {
+			if (input.validity.valid && input.value) {
+				if (!button.classList.contains('valid')) {
+					button.classList.add('valid');
+				}
+				if (!input.classList.contains('valid')) {
+					input.classList.add('valid');
+				}
+			} else {
+				button.classList.remove('valid');
+				input.classList.remove('valid');
 			}
-		} else {
-			button.classList.remove( 'valid' );
-			input.classList.remove( 'valid' );
-		}
-	} );
+		});
+	} catch (error) {
+		console.error('jsutils.js ~ toggleClassByValidity ~ error', error);
+	}
 }
 
 /**
@@ -51,13 +62,13 @@ export function toggleClassByValidity( input, button ) {
  * @param {string} assetKey The assetkey string of the block.
  * @returns {boolean}
  */
-export function inCriticalCssConfig( assetKey ) {
-	if(!globalThis.criticalConfig) {
+export function inCriticalCssConfig(assetKey) {
+	if (!globalThis.criticalConfig) {
 		return false;
 	}
 	if (
 		globalThis.criticalConfig &&
-		globalThis.criticalConfig.indexOf( assetKey ) === -1
+		globalThis.criticalConfig.indexOf(assetKey) === -1
 	) {
 		return false;
 	}
@@ -70,16 +81,16 @@ export function inCriticalCssConfig( assetKey ) {
  * @param {object} options The options object which will at the very least contain the css property set to true.
  * @returns {promise}
  */
-export function loadCss( assetKey, options = { css: true } ) {
-	const promise = new Promise( ( resolve ) => {
-		if ( options.css === true && ! inCriticalCssConfig( assetKey ) ) {
+export function loadCss(assetKey, options = { css: true }) {
+	const promise = new Promise((resolve) => {
+		if (options.css === true && !inCriticalCssConfig(assetKey)) {
 			import(
-				/* webpackChunkName: "[request]" */ `Assets/scss/components/blocks/${ assetKey }.scss`
-			).then( () => resolve( true ) );
+				/* webpackChunkName: "[request]" */ `Assets/scss/components/blocks/${assetKey}.scss`
+			).then(() => resolve(true));
 		} else {
-			return resolve( true );
+			return resolve(true);
 		}
-	} );
+	});
 	return promise;
 }
 
@@ -89,104 +100,106 @@ export function loadCss( assetKey, options = { css: true } ) {
 export function checkDevice() {
 	try {
 		const deviceAgent = navigator.userAgent.toLowerCase();
-		const htmlElement = document.querySelector( 'html' );
-		if ( ( 'ontouchstart' in globalThis )&&( (window.screen.width * window.devicePixelRatio) >= 2048 ) && (window.screen.width<window.screen.height)) {
-			htmlElement.classList.add( 'highResTabletPortrait' );
+		const htmlElement = document.querySelector('html');
+		if (
+			'ontouchstart' in globalThis &&
+			window.screen.width * window.devicePixelRatio >= 2048 &&
+			window.screen.width < window.screen.height
+		) {
+			htmlElement.classList.add('highResTabletPortrait');
 		}
-		if ( 'ontouchstart' in globalThis ) {
-			htmlElement.classList.add( 'touch' );
+		if ('ontouchstart' in globalThis) {
+			htmlElement.classList.add('touch');
 		}
-		if ( navigator.connection ) {
-			htmlElement.classList.add( navigator.connection.effectiveType );
+		if (navigator.connection) {
+			htmlElement.classList.add(navigator.connection.effectiveType);
 		}
-		if ( navigator.platform ) {
+		if (navigator.platform) {
 			let platform = navigator.platform.toLowerCase();
 			let platformArray = [platform];
-			if ( platform.search('-') ) {
+			if (platform.search('-')) {
 				platformArray = platform.split('-');
 			}
-			if ( platform.search(' ') ) {
+			if (platform.search(' ')) {
 				platformArray = platform.split(' ');
 			}
-			htmlElement.classList.add( ...platformArray );
+			htmlElement.classList.add(...platformArray);
 		}
-		if ( deviceAgent.match( /(iphone|ipod|ipad)/ ) ) {
-			htmlElement.classList.add( 'ios' );
-			htmlElement.classList.add( 'mobile' );
+		if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
+			htmlElement.classList.add('ios');
+			htmlElement.classList.add('mobile');
 		}
-		if (deviceAgent.match( /(windows)/ )) {
-				htmlElement.classList.add( 'windows' );
+		if (deviceAgent.match(/(windows)/)) {
+			htmlElement.classList.add('windows');
 		}
-		if (deviceAgent.match( /(macintosh)/ )) {
-				htmlElement.classList.add( 'mac' );
+		if (deviceAgent.match(/(macintosh)/)) {
+			htmlElement.classList.add('mac');
 		}
-		if (deviceAgent.match( /(android)/ )) {
-				htmlElement.classList.add( 'android' );
+		if (deviceAgent.match(/(android)/)) {
+			htmlElement.classList.add('android');
 		}
-		if ( navigator.userAgent.search( 'MSIE' ) >= 0 ) {
-			htmlElement.classList.add( 'ie' );
-		} else if ( navigator.userAgent.search( 'Edge' ) >= 0 ) {
-			htmlElement.classList.add( 'edge-legacy' );
-		} else if ( navigator.userAgent.search( 'Chrome' ) >= 0 ) {
-			htmlElement.classList.add( 'chrome' );
-		} else if ( navigator.userAgent.search( 'Firefox' ) >= 0 ) {
-			htmlElement.classList.add( 'firefox' );
+		if (navigator.userAgent.search('MSIE') >= 0) {
+			htmlElement.classList.add('ie');
+		} else if (navigator.userAgent.search('Edge') >= 0) {
+			htmlElement.classList.add('edge-legacy');
+		} else if (navigator.userAgent.search('Chrome') >= 0) {
+			htmlElement.classList.add('chrome');
+		} else if (navigator.userAgent.search('Firefox') >= 0) {
+			htmlElement.classList.add('firefox');
 		} else if (
-			navigator.userAgent.search( 'Safari' ) >= 0 &&
-			navigator.userAgent.search( 'Chrome' ) < 0
+			navigator.userAgent.search('Safari') >= 0 &&
+			navigator.userAgent.search('Chrome') < 0
 		) {
-			htmlElement.classList.add( 'safari' );
-		} else if ( navigator.userAgent.search( 'Opera' ) >= 0 ) {
-			htmlElement.classList.add( 'opera' );
+			htmlElement.classList.add('safari');
+		} else if (navigator.userAgent.search('Opera') >= 0) {
+			htmlElement.classList.add('opera');
 		}
 	} catch (error) {
-		console.error(error)
+		console.error(error);
 	}
 }
 
 /**
- * Check and possibly wait for an image to have downloaded before running an optional function. 
+ * Check and possibly wait for an image to have downloaded before running an optional function.
  * Returns a resolved promise when the load event has fired.
  * @param {htmlElement} img The image element you want to wait for.
- * @param {function} delayedFunction The optional function you want to run when/if the image has downloaded. 
+ * @param {function} delayedFunction The optional function you want to run when/if the image has downloaded.
  * @returns {promise}
  */
-export async function waitForLoad( img, delayedFunction ) {
-	const loaded = new Promise( ( resolve ) => {
-		if ( img.complete ) {
-			if ( typeof delayedFunction === 'function' ) {
+export async function waitForLoad(img, delayedFunction) {
+	const loaded = new Promise((resolve) => {
+		if (img.complete) {
+			if (typeof delayedFunction === 'function') {
 				delayedFunction();
 			}
-			return resolve( true );
+			return resolve(true);
 		}
 		img.addEventListener(
 			'load',
 			() => {
-				if ( typeof delayedFunction === 'function' ) {
+				if (typeof delayedFunction === 'function') {
 					delayedFunction();
 				}
-				return resolve( true );
+				return resolve(true);
 			},
 			{ once: true }
 		);
-	} ).catch( ( error ) =>
-		console.log( error, 'could not load the image', img )
-	);
+	}).catch((error) => console.log(error, 'could not load the image', img));
 	return loaded;
 }
 
 /**
- * Check whether the current environment supports the webp image format. 
- * Returns true if it does. 
+ * Check whether the current environment supports the webp image format.
+ * Returns true if it does.
  * @returns {boolean}
  */
 export async function supportsWebp() {
 	// eslint-disable-next-line no-restricted-globals
-	if ( ! self.createImageBitmap ) return false;
+	if (!self.createImageBitmap) return false;
 	const webpData =
 		'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
-	const blob = await fetch( webpData ).then( ( r ) => r.blob() );
-	return createImageBitmap( blob ).then(
+	const blob = await fetch(webpData).then((r) => r.blob());
+	return createImageBitmap(blob).then(
 		() => true,
 		() => false
 	);
@@ -199,30 +212,28 @@ export async function supportsWebp() {
 // } )();
 
 /**
- * DEPRECATED!! footerIntersection will be removed in a future version. 
+ * DEPRECATED!! footerIntersection will be removed in a future version.
  */
-export function footerIntersection( entries, element ) {
-	entries.forEach( ( entry ) => {
-		if ( element ) {
-			if ( entry.isIntersecting ) {
+export function footerIntersection(entries, element) {
+	entries.forEach((entry) => {
+		if (element) {
+			if (entry.isIntersecting) {
 				const { height } = entry.boundingClientRect;
-				element.style.bottom = `${ height }px`;
+				element.style.bottom = `${height}px`;
 			} else {
 				element.style.bottom = '0px';
 			}
 		}
-	} );
+	});
 }
 
 /**
- * Dynamically retrieves the swiper css and js and returns a resolved promise when they have both been successfully fetched. 
+ * Dynamically retrieves the swiper css and js and returns a resolved promise when they have both been successfully fetched.
  * @returns {promise}
  */
 export function getSwiperAssets() {
 	const getSwiperJs = () =>
-		import(
-			/* webpackChunkName: 'swiper' */ '../../swiper/swiper-bundle.js'
-		);
+		import(/* webpackChunkName: 'swiper' */ '../../swiper/swiper-bundle.js');
 
 	const getSwiperCss = () =>
 		import(
@@ -230,8 +241,8 @@ export function getSwiperAssets() {
 			'../../swiper/swiper-bundle.min.css'
 		);
 
-	const promisedJs = Promise.all( [ getSwiperJs(), getSwiperCss() ] ).then(
-		( values ) => {
+	const promisedJs = Promise.all([getSwiperJs(), getSwiperCss()]).then(
+		(values) => {
 			return values;
 		}
 	);
@@ -239,11 +250,11 @@ export function getSwiperAssets() {
 }
 
 /**
- * Dynamically retrieves the jQuery and returns a resolved promise when it has been successfully fetched. 
+ * Dynamically retrieves the jQuery and returns a resolved promise when it has been successfully fetched.
  * @returns {promise}
  */
 export function getJquery() {
-	if ( ! window.jQuery ) {
+	if (!window.jQuery) {
 		const importCode = () =>
 			import(
 				/* webpackChunkName: 'jquery' */ '../../jquery/dist/jquery.min.js'
@@ -254,29 +265,25 @@ export function getJquery() {
 }
 
 /**
- * Dynamically retrieves GSAP and the scrolltrigger plugin and returns a resolved promise when they have both been successfully fetched. 
+ * Dynamically retrieves GSAP and the scrolltrigger plugin and returns a resolved promise when they have both been successfully fetched.
  * @returns {promise}
  */
 export function getGsap() {
 	const gsapCore = () =>
-		import( '../../gsap/dist/gsap.min.js' ).then( ( gsapObj ) => {
+		import('../../gsap/dist/gsap.min.js').then((gsapObj) => {
 			const { gsap } = gsapObj;
 			return gsap;
-		} );
+		});
 
 	const gsapPlugin = () =>
-		import( '../../gsap/dist/ScrollTrigger.min.js' ).then(
-			( scrollObj ) => {
-				const ScrollTrigger = scrollObj;
-				return ScrollTrigger;
-			}
-		);
-
-	const prom = Promise.all( [ gsapCore(), gsapPlugin() ] ).then(
-		( values ) => {
-			return values;
-		}
-	);
+		import('../../gsap/dist/ScrollTrigger.min.js').then((scrollObj) => {
+			const ScrollTrigger = scrollObj;
+			return ScrollTrigger;
+		});
+
+	const prom = Promise.all([gsapCore(), gsapPlugin()]).then((values) => {
+		return values;
+	});
 	return prom;
 }
 
@@ -285,7 +292,7 @@ export function getGsap() {
  * @param {*} userAgent Pass the value of navigator.userAgent.
  * @returns {boolean}
  */
-export function isTablet( userAgent ) {
+export function isTablet(userAgent) {
 	return /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(
 		userAgent.toLowerCase()
 	);
@@ -293,35 +300,45 @@ export function isTablet( userAgent ) {
 
 /**
  * Returns true if the device is a mobile device. Checks navigator.userAgent||navigator.vendor||window.opera.
- * @returns {boolean} 
+ * @returns {boolean}
  */
-export function mobileCheck () {
+export function mobileCheck() {
 	let check = false;
-	(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+	(function (a) {
+		if (
+			/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
+				a
+			) ||
+			/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+				a.substr(0, 4)
+			)
+		)
+			check = true;
+	})(navigator.userAgent || navigator.vendor || window.opera);
 	return check;
-  };
+}
 
 /**
- * Run a function after a window resize event, but only after the alloted time has ended. 
+ * Run a function after a window resize event, but only after the alloted time has ended.
  * If another resize even occurs it resets the time window.
  * @param {function} debouncedFunction The function you want to run after a window resize event.
  * @param {number} time The time in ms.
- */  
-export function resizeDebouncer( debouncedFunction, time = 250 ) {
+ */
+export function resizeDebouncer(debouncedFunction, time = 250) {
 	let resizeTimer;
-	window.addEventListener( 'resize', () => {
-		clearTimeout( resizeTimer );
-		resizeTimer = setTimeout( () => {
+	window.addEventListener('resize', () => {
+		clearTimeout(resizeTimer);
+		resizeTimer = setTimeout(() => {
 			debouncedFunction();
-		}, time );
-	} );
+		}, time);
+	});
 }
 
 /**
- * General purpose utility for running a function after a particular event fires on a specified element. The function only fires after the alloted time has ended. 
+ * General purpose utility for running a function after a particular event fires on a specified element. The function only fires after the alloted time has ended.
  * If another resize even occurs it resets the time window.
  * @param {htmlElement} element The element that emits the event.
- * @param {string} eventType The type of event to listen for. 
+ * @param {string} eventType The type of event to listen for.
  * @param {function} debouncedFunction The function to run after the event.
  * @param {number} time The time in ms.
  */
@@ -332,49 +349,49 @@ export function eventListenerDebouncer(
 	time = 250
 ) {
 	let timer;
-	element.addEventListener( eventType, ( event ) => {
-		clearTimeout( timer );
-		timer = setTimeout( () => {
-			debouncedFunction( event );
-		}, time );
-	} );
+	element.addEventListener(eventType, (event) => {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			debouncedFunction(event);
+		}, time);
+	});
 }
 
 /**
  * Injects the youtube iframe api script and waits for the YT object to be instantiated before resolving the promise
- * @returns {promise} Resolves once the YT object is available. 
+ * @returns {promise} Resolves once the YT object is available.
  */
 export function injectYouTubeIframeScript() {
-	const prom = new Promise( ( resolve ) => {
-		if ( globalThis.YT ) {
+	const prom = new Promise((resolve) => {
+		if (globalThis.YT) {
 			return resolve();
 		}
-		const tag = document.createElement( 'script' );
+		const tag = document.createElement('script');
 		tag.id = 'iframe-api';
 		tag.src = 'https://www.youtube.com/iframe_api';
 
-		const firstScriptTag = document.getElementsByTagName( 'script' )[ 0 ];
-		firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );
+		const firstScriptTag = document.getElementsByTagName('script')[0];
+		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
-		tag.addEventListener( 'load', () => {
+		tag.addEventListener('load', () => {
 			if (!YT.loaded) {
 				const loadingCheck = setInterval(() => {
 					if (YT.loaded) {
 						clearInterval(loadingCheck);
-						return resolve( true );
+						return resolve(true);
 					}
 				}, 50);
 			} else {
-				return resolve( true );
+				return resolve(true);
 			}
-		} );
-	} );
+		});
+	});
 
 	return prom;
 }
 
-export function fallbackCopyToClipboard( text ) {
-	const textArea = document.createElement( 'textarea' );
+export function fallbackCopyToClipboard(text) {
+	const textArea = document.createElement('textarea');
 	textArea.value = text;
 
 	// Avoid scrolling to bottom
@@ -382,58 +399,55 @@ export function fallbackCopyToClipboard( text ) {
 	textArea.style.left = '0';
 	textArea.style.position = 'fixed';
 
-	document.body.appendChild( textArea );
+	document.body.appendChild(textArea);
 	textArea.focus();
 	textArea.select();
 
 	try {
-		const successful = document.execCommand( 'copy' );
+		const successful = document.execCommand('copy');
 		const msg = successful ? 'successful' : 'unsuccessful';
-		console.log( `Fallback: Copying text command was ${ msg }` );
-	} catch ( err ) {
-		console.error( 'Fallback: Oops, unable to copy', err );
+		console.log(`Fallback: Copying text command was ${msg}`);
+	} catch (err) {
+		console.error('Fallback: Oops, unable to copy', err);
 	}
 
-	document.body.removeChild( textArea );
+	document.body.removeChild(textArea);
 }
 
-
 export function copyToClipboard() {
-	const copyLinks = document.querySelectorAll( '.copy-to-clipboard' );
+	const copyLinks = document.querySelectorAll('.copy-to-clipboard');
 	let timeout;
-	copyLinks.forEach( ( link ) => {
-		link.addEventListener( 'click', function () {
+	copyLinks.forEach((link) => {
+		link.addEventListener('click', function () {
 			const copyToClipboardDone = link.nextElementSibling;
-			if ( ! navigator.clipboard ) {
-				fallbackCopyToClipboard( this.dataset.url );
+			if (!navigator.clipboard) {
+				fallbackCopyToClipboard(this.dataset.url);
 				return;
 			}
 
-			navigator.clipboard.writeText( this.dataset.url ).then(
+			navigator.clipboard.writeText(this.dataset.url).then(
 				function () {
-					console.log( 'Copying to clipboard was successful!' );
+					console.log('Copying to clipboard was successful!');
 				},
-				function ( err ) {
-					console.error( 'Could not copy text: ', err );
+				function (err) {
+					console.error('Could not copy text: ', err);
 				}
 			);
 
 			if (
 				copyToClipboardDone &&
 				copyToClipboardDone.classList &&
-				copyToClipboardDone.classList.contains(
-					'sharing__clipboard-done'
-				)
+				copyToClipboardDone.classList.contains('sharing__clipboard-done')
 			) {
-				clearTimeout( timeout );
-				copyToClipboardDone.classList.remove( 'hidden' );
+				clearTimeout(timeout);
+				copyToClipboardDone.classList.remove('hidden');
 
-				timeout = setTimeout( () => {
-					copyToClipboardDone.classList.add( 'hidden' );
-				}, 2000 );
+				timeout = setTimeout(() => {
+					copyToClipboardDone.classList.add('hidden');
+				}, 2000);
 			}
-		} );
-	} );
+		});
+	});
 }
 
 /**
@@ -442,21 +456,25 @@ export function copyToClipboard() {
  * @returns {boolean} True if visible and false if not.
  */
 export function isInViewport(element) {
-    const position = element.getBoundingClientRect();
-    return ( position.top >= 0 && position.bottom <= window.innerHeight ) || ( position.top < window.innerHeight && position.bottom >= 0 );
+	const position = element.getBoundingClientRect();
+	return (
+		(position.top >= 0 && position.bottom <= window.innerHeight) ||
+		(position.top < window.innerHeight && position.bottom >= 0)
+	);
 }
 
 /* eslint-disable-next-line */
-const emailRegex = /^[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*\.?[a-zA-Z0-9])*\.[a-zA-Z](-?[a-zA-Z0-9])+$/;
+const emailRegex =
+	/^[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*\.?[a-zA-Z0-9])*\.[a-zA-Z](-?[a-zA-Z0-9])+$/;
 
 /**
  * Checks to make sure a passed string has a valid email address structure and characters.
  * @param {RegExp} email - The email address as a string.
  * @returns {boolean} True if valid and false if not.
  */
-export function isEmailValid( email ) {
-	return emailRegex.test( email );
-};
+export function isEmailValid(email) {
+	return emailRegex.test(email);
+}
 
 /**
  * Get the value of a css property on a specific element.
@@ -526,9 +544,7 @@ export function detectSwipe(element, callback, removeHandlers = false) {
 		function (event) {
 			touchendX = event.changedTouches[0].screenX;
 			touchendY = event.changedTouches[0].screenY;
-			callback(
-				handleGesture(touchstartX, touchstartY, touchendX, touchendY)
-			);
+			callback(handleGesture(touchstartX, touchstartY, touchendX, touchendY));
 		},
 		false
 	);
@@ -541,7 +557,7 @@ export function detectSwipe(element, callback, removeHandlers = false) {
 
 /**
  * Function for getting the ios operating system version
- * 
+ *
  * @returns {number} the ios version
  */
 export function checkIosVersion() {
@@ -556,6 +572,27 @@ export function checkIosVersion() {
 	return 0;
 }
 
+/**
+ * Function for adding a link tag with preconnect to the head of the document. Very useful if you need to add this dynamically.
+ * @param {string} domain The domain you wish to preconnect to.
+ * @returns {void} The preconnect will be appended to the head tag.
+ */
+export function appendPreconnect(domain) {
+	try {
+		if (!domain) {
+			console.log('The domain was missing or broken...');
+			return;
+		}
+		const link = document.createElement('link');
+		link.rel = 'preconnect';
+		link.href = domain;
+		document.head.appendChild(link);
+		return;
+	} catch (error) {
+		console.error(error);
+	}
+}
+
 const api = {
 	copyToClipboard,
 	checkDevice,
@@ -579,6 +616,7 @@ const api = {
 	waitForLoad,
 	getElementStyles,
 	getPercent,
-	checkIosVersion
+	checkIosVersion,
+	appendPreconnect
 };
 export default api;

package/package.json

@@ -1,29 +1,30 @@
 {
-  "name": "@pernod-ricard-global-cms/jsutils",
-  "version": "1.6.4",
-  "description": "Handy collection of Javascript utility functions",
-  "type": "module",
-  "main": "jsutils.js",
-  "scripts": {
-    "test": "jasmine"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Chivas-Brothers/jsUtils.git"
-  },
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/Chivas-Brothers/jsUtils/issues"
-  },
-  "homepage": "https://github.com/Chivas-Brothers/jsUtils#readme",
-  "dependencies": {
-    "gsap": "^3.7.1",
-    "jquery": "^3.6.0",
-    "swiper": "^6.8.3"
-  },
-  "devDependencies": {
-    "jasmine": "^3.9.0",
-    "jsdoc": "^3.6.7"
-  }
+	"name": "@pernod-ricard-global-cms/jsutils",
+	"version": "1.7.1",
+	"description": "Handy collection of Javascript utility functions",
+	"type": "module",
+	"main": "jsutils.js",
+	"scripts": {
+		"test": "jasmine"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Chivas-Brothers/jsUtils.git"
+	},
+	"author": "",
+	"license": "ISC",
+	"bugs": {
+		"url": "https://github.com/Chivas-Brothers/jsUtils/issues"
+	},
+	"homepage": "https://github.com/Chivas-Brothers/jsUtils#readme",
+	"dependencies": {
+		"gsap": "^3.7.1",
+		"jquery": "^3.6.0",
+		"prettier": "^2.5.1",
+		"swiper": "^6.8.3"
+	},
+	"devDependencies": {
+		"jasmine": "^3.9.0",
+		"jsdoc": "^3.6.7"
+	}
 }