Issues with "Copy" when multiple block instances on a page. Customization ability enhancements.

Created on 28 December 2021, over 2 years ago
Updated 1 June 2023, about 1 year ago

Problem/Motivation

Main problem: When using 2 instances of the social sharing block on a single page and the block has the "Copy to clipboard" button turned on - the tooltip with the popup notification appears on both instances of the block which doesn't brings an unexpected user experience. Attepmts to fix it myself led to another issue with customizability explained below.

Customization problem: when attempting to fix with our own overrides for the Drupal.showCopiedMessage we detect then the click event on the "btnCopy" passes the "popupElements" parameter which basically means "all .social-sharing-buttons__popup elements on the page", without any information about which exact button was pressed and which exact popup should be toggled.

Customization side-bug: Drupal.fallbackCopyTextToClipboard accepts "text" as a parameter, but the $inputURL.val is still set to window.location.href no matter what text we pass into the function. Basically this makes the whole Drupal.showCopiedMessage fallback mechanism un-reusable as a whole

Steps to reproduce

- Create and configure a social sharing block, make sure to turn on the "Copy" button.
- Place this block into 2 different regions
- Alternatively, like in my case, render the block programmatically into 2 parts of the page.
- Open the page containing the 2 blocks
- Additional for my case: attempt to fix/override by yourself :)

Proposed resolution

- Instead of popupElements, pass a new parameter - $clickedElement. It will have a $ sign in the variable name as it will contain a jQuery object.
- The $clickedElement will contain the jQuery object of that exact link which was just pressed
- Inside Drupal.showCopiedMessage we find the child .social-sharing-buttons__popup element of that button in particular, and toggle it.

Extra solutions for future extensibility/reusability:
- The popup selector should be declared as a global variable: Drupal.better_social_sharing_popup_child_selector
- The popup visibile class should be declared as a global variable: Drupal.better_social_sharing_indicator_visible_class = 'visible';
- Drupal.fallbackCopyTextToClipboard need to have $inputURL.val(text) instead of window.location.href

πŸ› Bug report
Status

Fixed

Version

4.0

Component

Code

Created by

πŸ‡²πŸ‡©Moldova nyph1337

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.69.0 2024