@pernod-ricard-global-cms/jsutils 2.0.0 → 2.2.0

package/cypress/e2e/getPercent.cy.js

@@ -0,0 +1,13 @@
+import { getPercent } from '../../jsutils';
+
+describe('A suite to test getPercent()', () => {
+	it('passes by rounding down', () => {
+		expect(getPercent(30, 10)).to.eq(33);
+	});
+	it('passes with various numbers', () => {
+		expect(getPercent(100, 10)).to.eq(10);
+	});
+	it('passes by rounding up', () => {
+		expect(getPercent(30, 20)).to.eq(67);
+	});
+});

package/cypress/e2e/isEmailValid.cy.js

@@ -0,0 +1,22 @@
+import jsutils from '../../jsutils';
+
+describe('A suite', () => {
+	it('passes with mixed case letters and numbers', () => {
+		expect(jsutils.isEmailValid('aS93scFFx@jKoO0908ahdb.com')).to.eq(true);
+	});
+	it('fails on a string of letters', () => {
+		expect(jsutils.isEmailValid('jkahdb')).to.eq(false);
+	});
+	it('fails with mixed case letters and numbers and no @', () => {
+		expect(jsutils.isEmailValid('aS93scFFxjKoO0908ahdb.com')).to.eq(false);
+	});
+	it('fails with a space in the string', () => {
+		expect(jsutils.isEmailValid('hello@te st.com')).to.eq(false);
+	});
+	it('fails with a £ symbol', () => {
+		expect(jsutils.isEmailValid('hello@te£st.com')).to.eq(false);
+	});
+	it('fails with a § symbol', () => {
+		expect(jsutils.isEmailValid('hello@te£st.com')).to.eq(false);
+	});
+});

package/cypress/e2e/resizeDebouncer.cy.js

@@ -0,0 +1,5 @@
+import { resizeDebouncer } from '../../jsutils';
+
+describe('A suite to test resizeDebouncer()', () => {
+	// Test coming soon!
+});

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

package/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+  },
+})

package/{jsutils.js → jsutils.mjs}

@@ -6,7 +6,7 @@
  * @returns {Boolean}
  */
 export function isWpAdmin() {
-	return document.body.classList.contains('wp-admin') ? true : false;
+	return document.body.classList.contains("wp-admin") ? true : false;
 }
 
 /**
@@ -25,8 +25,8 @@ export function getPosition(element) {
 		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 };
 }
@@ -38,21 +38,21 @@ export function getPosition(element) {
  */
 export function toggleClassByValidity(input, button) {
 	try {
-		input.addEventListener('input', () => {
+		input.addEventListener("input", () => {
 			if (input.validity.valid && input.value) {
-				if (!button.classList.contains('valid')) {
-					button.classList.add('valid');
+				if (!button.classList.contains("valid")) {
+					button.classList.add("valid");
 				}
-				if (!input.classList.contains('valid')) {
-					input.classList.add('valid');
+				if (!input.classList.contains("valid")) {
+					input.classList.add("valid");
 				}
 			} else {
-				button.classList.remove('valid');
-				input.classList.remove('valid');
+				button.classList.remove("valid");
+				input.classList.remove("valid");
 			}
 		});
 	} catch (error) {
-		console.error('jsutils.js ~ toggleClassByValidity ~ error', error);
+		console.error("jsutils.js ~ toggleClassByValidity ~ error", error);
 	}
 }
 
@@ -100,16 +100,16 @@ export function loadCss(assetKey, options = { css: true }) {
 export function checkDevice() {
 	try {
 		const deviceAgent = navigator.userAgent.toLowerCase();
-		const htmlElement = document.querySelector('html');
+		const htmlElement = document.querySelector("html");
 		if (
-			'ontouchstart' in globalThis &&
+			"ontouchstart" in globalThis &&
 			window.screen.width * window.devicePixelRatio >= 2048 &&
 			window.screen.width < window.screen.height
 		) {
-			htmlElement.classList.add('highResTabletPortrait');
+			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);
@@ -117,42 +117,42 @@ export function checkDevice() {
 		if (navigator.platform) {
 			let platform = navigator.platform.toLowerCase();
 			let platformArray = [platform];
-			if (platform.search('-')) {
-				platformArray = platform.split('-');
+			if (platform.search("-")) {
+				platformArray = platform.split("-");
 			}
-			if (platform.search(' ')) {
-				platformArray = platform.split(' ');
+			if (platform.search(" ")) {
+				platformArray = platform.split(" ");
 			}
 			htmlElement.classList.add(...platformArray);
 		}
 		if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
-			htmlElement.classList.add('ios');
-			htmlElement.classList.add('mobile');
+			htmlElement.classList.add("ios");
+			htmlElement.classList.add("mobile");
 		}
 		if (deviceAgent.match(/(windows)/)) {
-			htmlElement.classList.add('windows');
+			htmlElement.classList.add("windows");
 		}
 		if (deviceAgent.match(/(macintosh)/)) {
-			htmlElement.classList.add('mac');
+			htmlElement.classList.add("mac");
 		}
 		if (deviceAgent.match(/(android)/)) {
-			htmlElement.classList.add('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);
@@ -169,22 +169,22 @@ export function checkDevice() {
 export async function waitForLoad(img, delayedFunction) {
 	const loaded = new Promise((resolve) => {
 		if (img.complete) {
-			if (typeof delayedFunction === 'function') {
+			if (typeof delayedFunction === "function") {
 				delayedFunction();
 			}
 			return resolve(true);
 		}
 		img.addEventListener(
-			'load',
+			"load",
 			() => {
-				if (typeof delayedFunction === 'function') {
+				if (typeof delayedFunction === "function") {
 					delayedFunction();
 				}
 				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;
 }
 
@@ -197,7 +197,7 @@ export async function supportsWebp() {
 	// eslint-disable-next-line no-restricted-globals
 	if (!self.createImageBitmap) return false;
 	const webpData =
-		'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
+		"data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=";
 	const blob = await fetch(webpData).then((r) => r.blob());
 	return createImageBitmap(blob).then(
 		() => true,
@@ -221,7 +221,7 @@ export function footerIntersection(entries, element) {
 				const { height } = entry.boundingClientRect;
 				element.style.bottom = `${height}px`;
 			} else {
-				element.style.bottom = '0px';
+				element.style.bottom = "0px";
 			}
 		}
 	});
@@ -231,9 +231,8 @@ export function footerIntersection(entries, element) {
  * Dynamically retrieves the swiper css and js and returns a resolved promise when they have both been successfully fetched.
  * @returns {promise}
  */
-export function getSwiperAssetsV2(options = { css: 'bundle' }) {
-	const getSwiperJs = () =>
-		import(/* webpackChunkName: 'swiper' */ 'NodeModules/swiper/swiper.esm');
+export function getSwiperAssetsV2(options = { css: "bundle" }) {
+	const getSwiperJs = () => import(/* webpackChunkName: 'swiper' */ "swiper");
 
 	const promisedJs = Promise.all([getSwiperJs()]).then((values) => {
 		return values;
@@ -248,9 +247,7 @@ export function getSwiperAssetsV2(options = { css: 'bundle' }) {
 export function getJquery() {
 	if (!window.jQuery) {
 		const importCode = () =>
-			import(
-				/* webpackChunkName: 'jquery' */ '../../jquery/dist/jquery.min.js'
-			);
+			import(/* webpackChunkName: 'jquery' */ "jquery/dist/jquery.min.js");
 		return importCode();
 	}
 	return Promise.resolve();
@@ -262,13 +259,13 @@ export function getJquery() {
  */
 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) => {
+		import("gsap/dist/ScrollTrigger.min.js").then((scrollObj) => {
 			const ScrollTrigger = scrollObj;
 			return ScrollTrigger;
 		});
@@ -312,23 +309,37 @@ export function mobileCheck() {
 
 /**
  * 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.
+ * If another resize event 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.
+ * @param {boolean} ignoreVertical Set to true if you only want to listen for horizontal resizing events.
  */
-export function resizeDebouncer(debouncedFunction, time = 250) {
+export function resizeDebouncer(
+	debouncedFunction,
+	time = 250,
+	ignoreVertical = false
+) {
 	let resizeTimer;
-	window.addEventListener('resize', () => {
+	let screenWidth = window.innerWidth;
+	window.addEventListener("resize", () => {
 		clearTimeout(resizeTimer);
 		resizeTimer = setTimeout(() => {
-			debouncedFunction();
+			if (ignoreVertical) {
+				let currentWidth = window.innerWidth;
+				if (currentWidth - screenWidth !== 0) {
+					debouncedFunction();
+				}
+				screenWidth = currentWidth;
+			} else {
+				debouncedFunction();
+			}
 		}, 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.
- * If another resize even occurs it resets the time window.
+ * If another resize event 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 {function} debouncedFunction The function to run after the event.
@@ -358,14 +369,14 @@ export function injectYouTubeIframeScript() {
 		if (globalThis.YT) {
 			return resolve();
 		}
-		const tag = document.createElement('script');
-		tag.id = 'iframe-api';
-		tag.src = 'https://www.youtube.com/iframe_api';
+		const tag = document.createElement("script");
+		tag.id = "iframe-api";
+		tag.src = "https://www.youtube.com/iframe_api";
 
-		const firstScriptTag = document.getElementsByTagName('script')[0];
+		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) {
@@ -383,34 +394,34 @@ export function injectYouTubeIframeScript() {
 }
 
 export function fallbackCopyToClipboard(text) {
-	const textArea = document.createElement('textarea');
+	const textArea = document.createElement("textarea");
 	textArea.value = text;
 
 	// Avoid scrolling to bottom
-	textArea.style.top = '0';
-	textArea.style.left = '0';
-	textArea.style.position = 'fixed';
+	textArea.style.top = "0";
+	textArea.style.left = "0";
+	textArea.style.position = "fixed";
 
 	document.body.appendChild(textArea);
 	textArea.focus();
 	textArea.select();
 
 	try {
-		const successful = document.execCommand('copy');
-		const msg = successful ? 'successful' : 'unsuccessful';
+		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.error("Fallback: Oops, unable to copy", err);
 	}
 
 	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 () {
+		link.addEventListener("click", function () {
 			const copyToClipboardDone = link.nextElementSibling;
 			if (!navigator.clipboard) {
 				fallbackCopyToClipboard(this.dataset.url);
@@ -419,23 +430,23 @@ export function copyToClipboard() {
 
 			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);
+					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');
+				copyToClipboardDone.classList.remove("hidden");
 
 				timeout = setTimeout(() => {
-					copyToClipboardDone.classList.add('hidden');
+					copyToClipboardDone.classList.add("hidden");
 				}, 2000);
 			}
 		});
@@ -515,13 +526,13 @@ export function detectSwipe(element, callback, removeHandlers = false) {
 
 		if (Math.abs(delx) > pixels || Math.abs(dely) > pixels) {
 			if (Math.abs(delx) > Math.abs(dely)) {
-				if (delx > 0) return 'right';
-				else return 'left';
+				if (delx > 0) return "right";
+				else return "left";
 			} else if (Math.abs(delx) < Math.abs(dely)) {
-				if (dely > 0) return 'down';
-				else return 'up';
+				if (dely > 0) return "down";
+				else return "up";
 			}
-		} else return 'tap';
+		} else return "tap";
 	}
 
 	function touchStart(event) {
@@ -529,10 +540,10 @@ export function detectSwipe(element, callback, removeHandlers = false) {
 		touchstartY = event.changedTouches[0].screenY;
 	}
 
-	element.addEventListener('touchstart', () => touchStart(event), false);
+	element.addEventListener("touchstart", () => touchStart(event), false);
 
 	element.addEventListener(
-		'touchend',
+		"touchend",
 		function (event) {
 			touchendX = event.changedTouches[0].screenX;
 			touchendY = event.changedTouches[0].screenY;
@@ -540,9 +551,9 @@ export function detectSwipe(element, callback, removeHandlers = false) {
 		},
 		false
 	);
-	if (removeHandlers === 'remove') {
-		element.removeEventListener('touchstart', touchStart);
-		element.removeEventListener('touchend', handleGesture);
+	if (removeHandlers === "remove") {
+		element.removeEventListener("touchstart", touchStart);
+		element.removeEventListener("touchend", handleGesture);
 		return;
 	}
 }
@@ -554,12 +565,12 @@ export function detectSwipe(element, callback, removeHandlers = false) {
  */
 export function checkIosVersion() {
 	const agent = window.navigator.userAgent,
-		start = agent.indexOf('OS ');
+		start = agent.indexOf("OS ");
 	if (
-		(agent.indexOf('iPhone') > -1 || agent.indexOf('iPad') > -1) &&
+		(agent.indexOf("iPhone") > -1 || agent.indexOf("iPad") > -1) &&
 		start > -1
 	) {
-		return window.Number(agent.substr(start + 3, 3).replace('_', '.'));
+		return window.Number(agent.substr(start + 3, 3).replace("_", "."));
 	}
 	return 0;
 }
@@ -572,11 +583,11 @@ export function checkIosVersion() {
 export function appendPreconnect(domain) {
 	try {
 		if (!domain) {
-			console.log('The domain was missing or broken...');
+			console.log("The domain was missing or broken...");
 			return;
 		}
-		const link = document.createElement('link');
-		link.rel = 'preconnect';
+		const link = document.createElement("link");
+		link.rel = "preconnect";
 		link.href = domain;
 		document.head.appendChild(link);
 		return;
@@ -609,6 +620,6 @@ const api = {
 	getElementStyles,
 	getPercent,
 	checkIosVersion,
-	appendPreconnect
+	appendPreconnect,
 };
 export default api;

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "@pernod-ricard-global-cms/jsutils",
-	"version": "2.0.0",
+	"version": "2.2.0",
 	"description": "Handy collection of Javascript utility functions",
-	"type": "module",
-	"main": "jsutils.js",
+	"type": "commonjs",
+	"main": "jsutils.mjs",
 	"scripts": {
-		"test": "jasmine"
+		"test": "cypress"
 	},
 	"repository": {
 		"type": "git",
@@ -18,13 +18,13 @@
 	},
 	"homepage": "https://github.com/Chivas-Brothers/jsUtils#readme",
 	"dependencies": {
-		"gsap": "^3.7.1",
+		"gsap": "^3.10.4",
 		"jquery": "^3.6.0",
 		"prettier": "^2.5.1",
 		"swiper": "^8.1.4"
 	},
 	"devDependencies": {
-		"jasmine": "^3.9.0",
+		"cypress": "^10.5.0",
 		"jsdoc": "^3.6.7"
 	}
 }

package/spec/isEmailValid.spec.js

@@ -1,10 +0,0 @@
-import jsutils from "../jsutils.js";
-
-describe("A suite", function() {
-  it("fails on a string of letters", function() {
-    expect(jsutils.isEmailValid('jkahdb')).toBe(false);
-  });
-  it("passes with mixed case letters and numbers", function() {
-    expect(jsutils.isEmailValid('aS93scFFx@jKoO0908ahdb.com')).toBe(true);
-  });
-});

package/spec/isInViewport.spec.js

@@ -1,7 +0,0 @@
-import jsutils from "../jsutils.js";
-
-describe("A suite", function() {
-  it("passes as element is in the viewport", function() {
-
-  });
-});

package/spec/support/jasmine.json

@@ -1,12 +0,0 @@
-{
-  "spec_dir": "spec",
-  "spec_files": [
-    "**/*[sS]pec.?(m)js"
-  ],
-  "helpers": [
-    "helpers/**/*.?(m)js"
-  ],
-  "jsLoader": "import",
-  "stopSpecOnExpectationFailure": false,
-  "random": true
-}