From 24b2b1b63bddfcfdd0e0401675870753b12deb29 Mon Sep 17 00:00:00 2001 From: Juan A <30204147+jaas666@users.noreply.github.com> Date: Sun, 24 Dec 2023 17:55:09 -0600 Subject: [PATCH 1/7] Use object destructuring for arguments --- files/js/cookies.ts | 16 +++++++-------- files/js/normalizeText.ts | 9 ++++---- files/js/notifications.ts | 27 ++++++++++++------------ files/js/urls.ts | 43 +++++++++++++++++++-------------------- 4 files changed, 48 insertions(+), 47 deletions(-) diff --git a/files/js/cookies.ts b/files/js/cookies.ts index 18ec326..cc3c36c 100644 --- a/files/js/cookies.ts +++ b/files/js/cookies.ts @@ -1,10 +1,10 @@ /** * 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=/'; @@ -12,11 +12,11 @@ export const setCookie = (name: string, value: string|boolean = true): void => { /** * 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] ?? ''; -} \ No newline at end of file +} diff --git a/files/js/normalizeText.ts b/files/js/normalizeText.ts index 3ac2543..7fcba3f 100644 --- a/files/js/normalizeText.ts +++ b/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; \ No newline at end of file +export default normalizeText; diff --git a/files/js/notifications.ts b/files/js/notifications.ts index 246fdb0..944cc0f 100644 --- a/files/js/notifications.ts +++ b/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: text, cookieName: cookieName}); }, 60000); } diff --git a/files/js/urls.ts b/files/js/urls.ts index 2174ab8..ddb5080 100644 --- a/files/js/urls.ts +++ b/files/js/urls.ts @@ -11,10 +11,10 @@ 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; } @@ -22,14 +22,14 @@ export const copyUrl = (url: string = window.location.href): void => { if (navigator.clipboard) { navigator.clipboard.writeText(url) .then(() => { - showNotification(`Success! 🥳 URL copied to clipboard: ${url}`); + showNotification({ text: `Success! 🥳 URL copied to clipboard: ${url}` }); }) .catch(() => { - showNotification(`Copy URL: ${url}`); + showNotification({ text: `Copy URL: ${url}` }); }); } else { - showNotification(`Copy URL: ${url}`); + showNotification({ text: `Copy URL: ${url}` }); } // Send copy event to GA. @@ -40,24 +40,23 @@ 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( - `` + + showNotification({ + text: `` + `` + `` + `  Copy`, - '', - 'notification-share' - ); + className: 'notification-share' + }); } // Send share event to GA. @@ -90,11 +89,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 +117,7 @@ export const setLinkEventListeners = (): void => { return; } - copyUrl(element.dataset.url ?? window.baseUrl); + copyUrl({ url: element.dataset.url ?? window.baseUrl }); }); }); } From e4b20b9166a88f18424cca88667a5fa101175948 Mon Sep 17 00:00:00 2001 From: Juan A <30204147+jaas666@users.noreply.github.com> Date: Sat, 30 Dec 2023 19:34:48 -0600 Subject: [PATCH 2/7] Update files/js/cookies.ts Co-authored-by: Nicole Furlan --- files/js/cookies.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/js/cookies.ts b/files/js/cookies.ts index cc3c36c..0b3b232 100644 --- a/files/js/cookies.ts +++ b/files/js/cookies.ts @@ -16,7 +16,7 @@ export const setCookie = ({ name, value = true } : { name: string, value?: strin * @param {string} cookie.name Cookie name. * @returns {string} Cookie value. */ -export const getCookie = ({name}:{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. From 77eca753a35242410ec6f0affd79e7e9b400aab5 Mon Sep 17 00:00:00 2001 From: Juan A <30204147+jaas666@users.noreply.github.com> Date: Sat, 30 Dec 2023 19:35:11 -0600 Subject: [PATCH 3/7] Update files/js/notifications.ts Co-authored-by: Nicole Furlan --- files/js/notifications.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/js/notifications.ts b/files/js/notifications.ts index 944cc0f..2c7b141 100644 --- a/files/js/notifications.ts +++ b/files/js/notifications.ts @@ -110,7 +110,7 @@ export const closeNotification = (): void => { * @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, cookieName = `${window.baseUrl}-promo`, customIconSelector = 'nav .custom'}:{text: string, cookieName?: string, customIconSelector?: string}): void => { +export const showPromo = ({ text, cookieName = `${window.baseUrl}-promo`, customIconSelector = 'nav .custom' }: { text: string, cookieName?: string, customIconSelector?: string }): void => { if (!text) { return; From be4c284ff3f618ff91c54fc54b43dd670e2a5da7 Mon Sep 17 00:00:00 2001 From: Juan A <30204147+jaas666@users.noreply.github.com> Date: Sat, 30 Dec 2023 19:35:25 -0600 Subject: [PATCH 4/7] Update files/js/notifications.ts Co-authored-by: Nicole Furlan --- files/js/notifications.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/js/notifications.ts b/files/js/notifications.ts index 2c7b141..78fb9f5 100644 --- a/files/js/notifications.ts +++ b/files/js/notifications.ts @@ -127,7 +127,7 @@ export const showPromo = ({ text, cookieName = `${window.baseUrl}-promo`, custom element.classList.add('animate'); element.addEventListener('click', () => { - setCookie({name: `${cookieName}-icon`, value: true}); + setCookie({ name: `${cookieName}-icon`, value: true }); }); }, 20000); } From d9ba22d13cf5bf502527129dd7301b40e8278344 Mon Sep 17 00:00:00 2001 From: Juan A <30204147+jaas666@users.noreply.github.com> Date: Sat, 30 Dec 2023 19:35:50 -0600 Subject: [PATCH 5/7] Update files/js/notifications.ts Co-authored-by: Nicole Furlan --- files/js/notifications.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/js/notifications.ts b/files/js/notifications.ts index 78fb9f5..01a00bc 100644 --- a/files/js/notifications.ts +++ b/files/js/notifications.ts @@ -134,6 +134,6 @@ export const showPromo = ({ text, cookieName = `${window.baseUrl}-promo`, custom // Show the notification for the promo. setTimeout(() => { - showNotification({text: text, cookieName: cookieName}); + showNotification({ text, cookieName }); }, 60000); } From cc0f5dfa91dabf6ac1bb3a334ac0003bd2715c4c Mon Sep 17 00:00:00 2001 From: Juan A <30204147+jaas666@users.noreply.github.com> Date: Sat, 30 Dec 2023 19:36:42 -0600 Subject: [PATCH 6/7] Update files/js/urls.ts Co-authored-by: Nicole Furlan --- files/js/urls.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/files/js/urls.ts b/files/js/urls.ts index ddb5080..3be4b2a 100644 --- a/files/js/urls.ts +++ b/files/js/urls.ts @@ -55,6 +55,7 @@ export const shareUrl = ({ url = window.location.href, title = window.baseTitle, `` + `` + `  Copy`, + cookieName: '', className: 'notification-share' }); } From f7374796fd09ab1a43b16d3e7253d6af3975cb77 Mon Sep 17 00:00:00 2001 From: Juan A <30204147+jaas666@users.noreply.github.com> Date: Sat, 30 Dec 2023 19:54:45 -0600 Subject: [PATCH 7/7] Fix missing calls --- files/js/index.ts | 6 +++--- files/opt/google_auth.js | 6 +++--- template-parts/head.php | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/files/js/index.ts b/files/js/index.ts index 361cad4..f119274 100644 --- a/files/js/index.ts +++ b/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(); -}); \ No newline at end of file +}); diff --git a/files/opt/google_auth.js b/files/opt/google_auth.js index a650c96..20d1e32 100644 --- a/files/opt/google_auth.js +++ b/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(); }); } -} \ No newline at end of file +} diff --git a/template-parts/head.php b/template-parts/head.php index 77c6632..0fde7e5 100644 --- a/template-parts/head.php +++ b/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);} } - \ No newline at end of file +