fix #57 ShareLink- Copy Feedback + Clipboard Fallback Enhancement #58

Likhithakathireddy · 2025-10-29T21:21:19Z

Description

This PR refactors ShareLink to improve URL construction for sharing and make the Copy action reliable and user-friendly across both HTTPS and HTTP.
Key UX enhancements:

On click, the copy control shows “✓ Copied!” briefly.
Copy works in secure contexts (Clipboard API) and falls back on HTTP.
Rapid clicks don’t stack timers or leave the control stuck.

Related Issues
No tracked bug; this is a UX/robustness improvement over the existing implementation.

Script Details

Script Name: ShareLink
Purpose of Update: Fix URL encoding bugs, use correct share endpoints, harden copy behavior (HTTP fallback), and align with Webtricks standards (class-based, attribute-driven, self-init, global registration, defensive errors).
New Behavior:

Properly encodes URL and title separately and passes them to each platform’s recommended endpoint.
Copy: uses navigator. clipboard on secure contexts, falls back to document.execCommand('copy') on HTTP.
Prevents navigation for copy elements (removes href).
Idempotent UI feedback (single reset timer, no stacking on rapid clicks).

Changes Made

Encoding & params

Replaced “encode entire blob” with separate encoding of URL and title.
Switched to platform-appropriate share endpoints:
Twitter: intent/tweet

LinkedIn: sharing/share-offsite
Pinterest/Reddit: HTTPS and correct param names

Copy behavior

Added HTTP-safe fallback for .clipboard (hidden <textarea> + execCommand('copy')).
Added idempotent feedback (single reset timer) and short click lock to avoid spam.
Removed href on copy elements to prevent accidental navigation.

Standards & safety

Constructor validations (element, platform, URL).
Clear console warnings/errors for unknown platforms or invalid config.
Preserved self-init on DOM ready and global registration via window. webtricks.
Guard against double initialization on the same element.

Features

Reliable copy on HTTP & HTTPS
Clear inline feedback (“✓ Copied!” for ~1s)
No stuck states on multiple rapid clicks
Correct share links with proper encoding and endpoints
Webtricks-compliant initialization and structure

Testing Notes

Manual tests:

Clicked copy over 10 times quickly → results in a single, consistent reset; no stuck styles.
Verified behavior on HTTP (fallback path) and HTTPS (Clipboard API path).
Confirmed platform links open with the expected parameters in new tabs.

Suggested quick checks:

On a page with Copy, confirm it does not navigate.
Inspect share URLs for each platform and verify url/title presence.

…ge will pop up.

Copilot

Copilot wasn't able to review any files in this pull request.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Likhithakathireddy

JorchCortez

left some comments in

JorchCortez · 2025-10-29T23:54:38Z

Dist/Functional/ShareLink.js

+        if (this._copyResetTimer) clearTimeout(this._copyResetTimer);
+
+        // Update UI and temporarily disable clicks
+        this.element.textContent = '✓ Copied!';


I get why we're adding this but, as mentioned in the Issue, we should allow for the text to be set by the site owner (eg. adding an attribute wt-share-copytext) and setting the value there instead of setting a pre defined one., same goes for the styles.
This being said I can notice we also are adding the temp message which also shows a pop-up this would be better done by adding an additional attribute (wt-share-showpopup) which will show if the attribute exists along with allowing the user to create an object with the attribute wt-share-element="popup" with which they can make sure the pop up looks however they want and is placed the same way.

please take a look at those and if possible, though I don't condemn ai-generated code at all, most of the coments in here are fairly unnecessary, thanks for keeping the structure clean, it is pretty readable that way

Created a .gitignore file to prevent node_modules directory from being tracked by git.

Improves copy-to-clipboard feedback by supporting external HTML templates, custom success/error classes, and configurable timeouts. Refactors UI update logic for copy actions, adds screen reader support, and enables module export for testing environments. Also updates LinkedIn share URL to include title.

Introduces a workflow to run tests on pull requests targeting the Develop branch. The workflow sets up Node.js, installs dependencies, and executes tests using npm.

Introduces comprehensive Jest tests for the ShareLink module, covering initialization, clipboard copy success/failure, and fallback behavior. Adds Jest and jsdom environment dependencies for testing.

ShareLink now supports a 'wt-share-copytemplate' attribute to select a specific template for the copy message. Templates are cached and removed from the DOM after use to improve performance. Added a test to verify per-element template selection.

Likhithakathireddy · 2025-11-07T21:42:17Z

I have created a new pull request, so you can go ahead and close this one.

JorchCortez · 2025-11-07T21:59:28Z

I have created a new pull request, so you can go ahead and close this one.

@Likhithakathireddy I've actually added some changes to this PR and kept a bunch of the work you added just solidifying the implementation. As I stated before, the changes you added were in a great track we were just missing some tweaks. I apologize I forgot to mention that I was adding some changes to your PR to close it full.

I've reviewed the other PR and closed it as this was closer to the expected outcome.
Thanks a lot for the support on this project!

There will be more options for changes/features on the different modules in the future so please feel free to either review, add or take over on future improvements you feel like helping!

Once you click the copy button it will say clicked and an alert messa…

1eed54f

…ge will pop up.

Likhithakathireddy changed the title ~~ShareLink- Copy Feedback + Clipboard Fallback Enhancement~~ Fix #57 ShareLink- Copy Feedback + Clipboard Fallback Enhancement Oct 29, 2025

Likhithakathireddy changed the title ~~Fix #57 ShareLink- Copy Feedback + Clipboard Fallback Enhancement~~ closes #57 ShareLink- Copy Feedback + Clipboard Fallback Enhancement Oct 29, 2025

Likhithakathireddy mentioned this pull request Oct 29, 2025

[FUNCTIONALITY REQUEST]: Add "copied" state, icon or text when using social share module #57

Closed

1 task

Likhithakathireddy changed the title ~~closes #57 ShareLink- Copy Feedback + Clipboard Fallback Enhancement~~ fix #57 ShareLink- Copy Feedback + Clipboard Fallback Enhancement Oct 29, 2025

JorchCortez requested review from JorchCortez and Copilot October 29, 2025 21:58

Copilot AI reviewed Oct 29, 2025

View reviewed changes

Likhithakathireddy commented Oct 29, 2025

View reviewed changes

JorchCortez requested changes Oct 29, 2025

View reviewed changes

JorchCortez added 5 commits November 7, 2025 13:05

Add .gitignore to exclude node_modules

2b39f51

Created a .gitignore file to prevent node_modules directory from being tracked by git.

Add GitHub Actions workflow for tests

01f63d7

Introduces a workflow to run tests on pull requests targeting the Develop branch. The workflow sets up Node.js, installs dependencies, and executes tests using npm.

Add ShareLink Jest tests and setup dependencies

c43ad14

Introduces comprehensive Jest tests for the ShareLink module, covering initialization, clipboard copy success/failure, and fallback behavior. Adds Jest and jsdom environment dependencies for testing.

Update tests.yml

d0b4f1c

JorchCortez merged commit 1d814cb into TheCodeRaccoons:main Nov 7, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix #57 ShareLink- Copy Feedback + Clipboard Fallback Enhancement #58

fix #57 ShareLink- Copy Feedback + Clipboard Fallback Enhancement #58

Uh oh!

Likhithakathireddy commented Oct 29, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Likhithakathireddy left a comment

Uh oh!

JorchCortez left a comment

Uh oh!

JorchCortez Oct 29, 2025

Uh oh!

Likhithakathireddy commented Nov 7, 2025

Uh oh!

JorchCortez commented Nov 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

fix #57 ShareLink- Copy Feedback + Clipboard Fallback Enhancement #58

fix #57 ShareLink- Copy Feedback + Clipboard Fallback Enhancement #58

Uh oh!

Conversation

Likhithakathireddy commented Oct 29, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Likhithakathireddy left a comment

Choose a reason for hiding this comment

Uh oh!

JorchCortez left a comment

Choose a reason for hiding this comment

Uh oh!

JorchCortez Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Likhithakathireddy commented Nov 7, 2025

Uh oh!

JorchCortez commented Nov 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants