Sharing Functionality

Relevant source files

The following files were used as context for generating this wiki page:

• redesign/script.js
• script.js
• redesign/README.md
• README.md
• redesign/styles.css
• styles.css

The Sharing Functionality is a core user experience feature introduced in the redesigned prototype of the Jokes section. It provides users with a simple and modern way to share individual jokes, either from the main paginated list or from the random joke generator modal. This feature is highlighted as a key enhancement in the project's redesign.

The system prioritizes a native sharing experience using the Web Share API and provides a seamless fallback to copying the joke text to the clipboard for unsupported browsers. This ensures broad compatibility while offering the best possible experience on modern devices.

Sources: redesign/README.md:14, redesign/README.md:21, redesign/script.js:416-429

Core Logic

The entire sharing mechanism is implemented in client-side JavaScript, relying on modern browser APIs with graceful degradation for older browsers.

Sources: redesign/script.js:416-478

The shareJoke Function

The primary entry point for the sharing feature is the shareJoke(joke) function. It orchestrates the process of preparing the text and attempting to use the most appropriate sharing method.

1. Text Formatting: It first constructs the text to be shared by formatting the joke content and attributing it to Norm Macdonald.

   const shareText = `"${joke.joke}"\n\n- Norm Macdonald`;
   

2. API Detection: It checks for the presence of the navigator.share (Web Share API).
3. Execution:
   • If the Web Share API is available, it's invoked with a title and the formatted text. This opens the device's native sharing dialog.
   • If the API is not available or the share action fails, it calls the copyToClipboard() function as a fallback.

The following diagram illustrates the logic flow within the shareJoke function.

The copyToClipboard Function

This function serves as the fallback mechanism when native sharing is not possible. It handles copying the joke text to the user's clipboard.

• Primary Method: It first attempts to use the modern, promise-based navigator.clipboard.writeText() API for a secure and efficient copy operation.
• Legacy Fallback: If the Clipboard API is unavailable, it reverts to a legacy method. This involves dynamically creating a <textarea> element, assigning the text to it, selecting the text, and executing the document.execCommand('copy') command.
• User Feedback: Upon successfully copying the text via either method, it calls showToast('Copied to clipboard!') to inform the user.

Sources: redesign/script.js:431-448

User Feedback: showToast

To confirm a successful copy action, the showToast(message) function provides a brief, non-blocking notification.

• It dynamically creates a <div> element with the class .toast.
• This element is appended to the <body> and styled to appear at the bottom-center of the viewport.
• The toast is visible for 2 seconds, after which it is animated out and removed from the DOM.

Sources: redesign/script.js:450-478, redesign/styles.css:668-685

Sequence of Operations

This sequence diagram shows the complete interaction between the user, the application's JavaScript, and the browser APIs.

UI Triggers and Styling

The sharing functionality is accessible from two locations in the user interface, both of which are created dynamically.

Triggers

Location	Element ID/Class	Trigger	Handler Function
Individual Joke Card	.action-btn	onclick	shareJoke(joke)
Random Joke Modal	#share-joke-btn	click event listener	shareJoke(state.currentRandomJoke)

Sources: redesign/script.js:233-236, redesign/script.js:296-302, redesign/script.js:530-534

Styling

The visual appearance of the share buttons and the toast notification is defined in the project's stylesheet.

CSS Class	Description	Key Styles
.action-btn	The 'Share' button on each joke card.	background: var(--bg-tertiary), border: 1px solid var(--border-color), border-radius: var(--radius-md). Hover state changes color to var(--accent).
.btn-secondary	Used for the 'Share' button in the random joke modal.	background: var(--bg-tertiary), border: 1px solid var(--border-color). Hover state changes color and border to var(--accent).
.toast	The notification message shown after a successful copy action.	position: fixed, bottom: 2rem, background: var(--accent), color: white, border-radius: var(--radius-full), box-shadow: var(--shadow-lg).

Sources: redesign/styles.css:502-523, redesign/styles.css:738-750, redesign/styles.css:668-685

Summary

The sharing functionality in the Norm Macdonald Archive redesign is a well-implemented feature that enhances usability. By leveraging modern web APIs like navigator.share and navigator.clipboard with appropriate fallbacks, it ensures a consistent and reliable experience across different devices and browsers. The inclusion of clear user feedback via toast notifications makes the interaction intuitive and satisfying, fulfilling a key goal of the site's redesign.

Sources: redesign/script.js:416-478, redesign/README.md:14