Merge pull request #11 from jaas666/jaas666/use-arguments-in-functions

Closes #10: Use object destructuring for arguments

files/js/cookies.ts

@@ -1,22 +1,22 @@
 /**
  * Set cookie.
- * 
- * @param {string} name Cookie name.
- * @param {string|boolean} value Cookie value. Defaults to boolean true.
+ * @param {Object} cookie setCookie function requires an object with the following properties:
+ * @param {string} cookie.name Cookie name.
+ * @param {string|boolean=} cookie.value Cookie value. Defaults to boolean true.
  */
-export const setCookie = (name: string, value: string|boolean = true): void => {
+export const setCookie = ({ name, value = true } : { name: string, value?: string|boolean }): void => {
  const date = new Date();
  date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
  document.cookie = name + '=' + value + '; expires=' + date.toUTCString() + '; path=/';
 }
 
 /**
  * Get cookie by name.
- * 
- * @param {string} name Cookie name.
+ * @param {Object} cookie getCookie function requires an object with the following properties:
+ * @param {string} cookie.name Cookie name.
  * @returns {string} Cookie value.
  */
-export const getCookie = (name: string): string => {
+export const getCookie = ({ name }: { name: string }): string => {
  const cookieValue = document.cookie.split('; ')
  .map(cookie => {
  // Extract the cookie name and value from the cookie string.
@@ -28,4 +28,4 @@ export const getCookie = (name: string): string => {
  .filter(cookie => cookie); // Remove null values.
 
  return cookieValue[0] ?? '';
-}
+}

files/js/index.ts

@@ -7,7 +7,7 @@ import '../scss/style.scss';
 window.addEventListener('load', () => {
 
  // Display cookie notification.
- showNotification('cookie', 'notification-cookie');
+ showNotification({ text: 'cookie', className: 'notification-cookie' });
 
  // If URL parameters are passed in, check for notification.
  if (window.location.search) {
@@ -16,11 +16,11 @@ window.addEventListener('load', () => {
  const [ param, value ] = query;
 
  if ('notification' === param && value) {
- showNotification(value);
+ showNotification({ text: value });
  }
  }
  }
 
  // Set event listeners for all event links.
  setLinkEventListeners();
-});
+});

files/js/normalizeText.ts

@@ -1,11 +1,12 @@
 /**
  * Normalize a text string.
  * 
- * @param {string} text Text string to normalize.
- * @param {string} type Type of normalization to perform. Defaults to 'text'. Other possible value is 'url'.
+ * @param {Object} textString The `normalizeText` function takes an object as its parameter with the following properties:
+ * @param {string} textString.text Text string to normalize.
+ * @param {string=} textString.type Type of normalization to perform. Defaults to 'text'. Other possible value is 'url'.
  * @returns {string} Normalized text string.
  */
-const normalizeText = (text: string, type: string = 'text'): string => {
+const normalizeText = ({ text, type = 'text' } : { text: string, type?: string }): string => {
 
  // Remove leading and trailing slashes.
  let decodedText = text.replace(/^\/|\/$/g, '');
@@ -38,4 +39,4 @@ const normalizeText = (text: string, type: string = 'text'): string => {
  return decodedText;
 }
 
-export default normalizeText;
+export default normalizeText;

files/js/notifications.ts

@@ -4,14 +4,15 @@ import { setLinkEventListeners } from "./urls";
 /**
  * Show notification.
  * 
- * @param {string} text Text to display in notification. Also accepts 'paypal-confirmation' to display PayPal confirmation text, or 'cookie' to display cookie consent text.
- * @param {string} cookieName Cookie name to set once notification is closed so that the notification does not display again for the user. Defaults to ''.
- * @param {string} className Class name to apply to notification element. Defaults to ''.
+ * @param {Object} notification The `showNotification` function requires an object with the following properties:
+ * @param {string} notification.text Text to display in notification. Also accepts 'paypal-confirmation' to display PayPal confirmation text, or 'cookie' to display cookie consent text.
+ * @param {string=} notification.cookieName Cookie name to set once notification is closed so that the notification does not display again for the user. Defaults to ''.
+ * @param {string=} notification.className Class name to apply to notification element. Defaults to ''.
  */
-export const showNotification = (text: string, cookieName: string = '', className: string = ''): void => {
+export const showNotification = ({ text, cookieName = '', className = '' } : { text: string, cookieName?: string, className?: string }): void => {
 
  // Don't display notification if cookie is set.
- if (cookieName && getCookie(cookieName)) {
+ if (cookieName && getCookie({name: cookieName})) {
  return;
  }
 
@@ -97,19 +98,19 @@ export const closeNotification = (): void => {
 
  // If notification has cookie data attribute set, set cookie after closing.
  if (notificationContainer.dataset.cookie) {
- setCookie(notificationContainer.dataset.cookie, true);
+ setCookie({ name: notificationContainer.dataset.cookie, value: true });
  notificationContainer.removeAttribute('data-cookie');
  }
 }
 
 /**
  * Show promo notification.
- * 
- * @param {string} text Text to display in notification.
- * @param {string} cookieName Cookie name to provide to showNotification(), so that the promo does not display again for the user. Defaults to the website URL with '-promo' appended.
- * @param {string} customIconSelector Selector for the promo icon, if one exists. If provided, the icon will be animated and a cookie will be set on click so that it only animates once.
+ * @param {Object} notification The `showPromo` function requires an object with the following properties:
+ * @param {string} notification.text Text to display in notification.
+ * @param {string=} notification.cookieName Cookie name to provide to showNotification(), so that the promo does not display again for the user. Defaults to the website URL with '-promo' appended.
+ * @param {string=} notification.customIconSelector Selector for the promo icon, if one exists. If provided, the icon will be animated and a cookie will be set on click so that it only animates once.
  */
-export const showPromo = (text: string, cookieName: string = `${window.baseUrl}-promo`, customIconSelector: string = 'nav .custom'): void => {
+export const showPromo = ({ text, cookieName = `${window.baseUrl}-promo`, customIconSelector = 'nav .custom' }: { text: string, cookieName?: string, customIconSelector?: string }): void => {
 
  if (!text) {
  return;
@@ -126,13 +127,13 @@ export const showPromo = (text: string, cookieName: string = `${window.baseUrl}-
 
  element.classList.add('animate');
  element.addEventListener('click', () => {
- setCookie(`${cookieName}-icon`, true);
+ setCookie({ name: `${cookieName}-icon`, value: true });
  });
  }, 20000);
  }
 
  // Show the notification for the promo.
  setTimeout(() => {
- showNotification(text, cookieName);
+ showNotification({ text, cookieName });
  }, 60000);
 }

files/js/urls.ts

@@ -11,25 +11,25 @@ declare global {
 
 /**
  * Copies provided URL to clipboard if navigator.clipboard is available, otherwise displays a notification with the URL.
- *
- * @param {string} url Url to copy.
+ * @param {Object} url The `copyUrl` function requires an object with the following properties:
+ * @param {string=} url.url Url to copy.
  */
-export const copyUrl = (url: string = window.location.href): void => {
+export const copyUrl = ({ url = window.location.href } : { url?: string }): void => {
  if (!url) {
  return;
  }
 
  if (navigator.clipboard) {
  navigator.clipboard.writeText(url)
  .then(() => {
- showNotification(`<span><strong>Success! <span role='img' title='Party' class='icon icon-partyface'>🥳</span></strong> URL copied to clipboard: <span class='url'>${url}</span>`);
+ showNotification({ text: `<span><strong>Success! <span role='img' title='Party' class='icon icon-partyface'>🥳</span></strong> URL copied to clipboard: <span class='url'>${url}</span>` });
  })
  .catch(() => {
- showNotification(`<span><strong>Copy URL:</strong></span> <span class='url'>${url}</span>`);
+ showNotification({ text: `<span><strong>Copy URL:</strong></span> <span class='url'>${url}</span>` });
  });
 
  } else {
- showNotification(`<span><strong>Copy URL:</strong></span> <span class='url'>${url}</span>`);
+ showNotification({ text: `<span><strong>Copy URL:</strong></span> <span class='url'>${url}</span>` });
  }
 
  // Send copy event to GA.
@@ -40,24 +40,24 @@ export const copyUrl = (url: string = window.location.href): void => {
 
 /**
  * Displays the native sharing mechanism for the device if navigator.share is available, otherwise displays a notification with the share data.
- * 
- * @param {string} url URL to share. Defaults to window.location.href.
- * @param {string} title Title of website. Defaults to window.baseTitle. 
- * @param {string} text Text to share. Defaults to window.baseDescription.
+ * @param {Object} url The `shareUrl` function requires an object with the following properties:
+ * @param {string=} url.url URL to share. Defaults to window.location.href.
+ * @param {string=} url.title Title of website. Defaults to window.baseTitle. 
+ * @param {string=} url.text Text to share. Defaults to window.baseDescription.
  */
-export const shareUrl = (url: string = window.location.href, title: string = window.baseTitle, text: string = window.baseDescription): void => {
+export const shareUrl = ({ url = window.location.href, title = window.baseTitle, text = window.baseDescription } : { url?: string, title?: string, text?: string }): void => {
  if (navigator.share) {
  navigator.share({ title, url }).catch(error => console.warn(error));
  } else {
  const textEncoded = encodeURIComponent(text + ' ' + url);
- showNotification(
- `<a class='button facebook' href='https://www.facebook.com/sharer/sharer.php?u=${url}' title='Share on Facebook'><i class='fas fa-share-alt'></i>&nbsp;&nbsp;Facebook</a>` +
+ showNotification({
+ text:  `<a class='button facebook' href='https://www.facebook.com/sharer/sharer.php?u=${url}' title='Share on Facebook'><i class='fas fa-share-alt'></i>&nbsp;&nbsp;Facebook</a>` +
  `<a class='button twitter' href='https://twitter.com/intent/tweet?text=${textEncoded}' title='Share on Twitter'><i class='fas fa-share-alt'></i>&nbsp;&nbsp;Twitter</a>` +
  `<a class='button email' href='mailto:?subject=Check+out+${title}!&body=${textEncoded}' title='Share on Email'><i class='fas fa-share-alt'></i>&nbsp;&nbsp;Email</a>` +
  `<a class='button copy' href='#' title='Copy' data-url='${url}'><i class='fas fa-copy'></i>&nbsp;&nbsp;Copy</button>`,
- '',
- 'notification-share'
- );
+ cookieName: '',
+ className: 'notification-share'
+ });
  }
 
  // Send share event to GA.
@@ -90,11 +90,11 @@ export const setLinkEventListeners = (): void => {
  return;
  }
 
- shareUrl(
- element.dataset.url ?? window.baseUrl,
- element.dataset.title ?? window.baseTitle,
- element.dataset.text ?? window.baseDescription
- );
+ shareUrl({
+ url: element.dataset.url ?? window.baseUrl,
+ title: element.dataset.title ?? window.baseTitle,
+ text: element.dataset.text ?? window.baseDescription
+ });
  });
  });
  }
@@ -118,7 +118,7 @@ export const setLinkEventListeners = (): void => {
  return;
  }
 
- copyUrl(element.dataset.url ?? window.baseUrl);
+ copyUrl({ url: element.dataset.url ?? window.baseUrl });
  });
  });
  }

files/opt/google_auth.js

@@ -44,7 +44,7 @@ const login = () => {
  })
  .then(() => {
  // TO DO - show different notifications depending on user
- showNotification("Log-in successful!");
+ showNotification({ text: "Log-in successful!" });
  },
  error => {
  console.error("login()", error);
@@ -62,7 +62,7 @@ const logout = () => {
  if (GoogleAuth !== undefined) {
  GoogleAuth.signOut()
  .then(() => {
- showNotification("Log-out successful!");
+ showNotification({ text: "Log-out successful!" });
  });
  } else {
  console.error("logout()", "Cannot log out, GoogleAuth is null");
@@ -111,4 +111,4 @@ const updateLoginButtons = (isLoggedIn = null) => {
  logout();
  });
  }
-}
+}

template-parts/head.php

@@ -334,7 +334,7 @@ function gtag(){dataLayer.push(arguments);}
  let refreshing = false;
  navigator.serviceWorker.addEventListener('controllerchange', event => {
  if (!refreshing) {
- showNotification('New verison available! Refreshing...');
+ showNotification({ text: 'New verison available! Refreshing...' });
  setTimeout(() => {
  window.location.reload();
  refreshing = true;
@@ -346,4 +346,4 @@ function gtag(){dataLayer.push(arguments);}
  }
 </script>
 
-</head>
+</head>