diff --git a/files/js/cookies.ts b/files/js/cookies.ts index 18ec326..0b3b232 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/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/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..01a00bc 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, cookieName }); }, 60000); } diff --git a/files/js/urls.ts b/files/js/urls.ts index 2174ab8..3be4b2a 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,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( - `` + + showNotification({ + text: `` + `` + `` + `  Copy`, - '', - '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 }); }); }); } 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 +