Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
better_social_sharing_buttons
Manage
Activity
Members
Labels
Plan
Wiki
Custom issue tracker
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Model registry
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
project
better_social_sharing_buttons
Commits
8bc051a5
Commit
8bc051a5
authored
2 months ago
by
joachim desarmenien
Committed by
Shelane French
2 months ago
Browse files
Options
Downloads
Patches
Plain Diff
Issue
#3477719
by joachim desarmenien: Populate copy link's popup on click
parent
7dc6acbc
No related branches found
No related tags found
1 merge request
!21
issue #3477719 by joachim-desarmenien : populate copy link popup on click
Checking pipeline status
Changes
1
Pipelines
3
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
js/copy-current-url.js
+75
-42
75 additions, 42 deletions
js/copy-current-url.js
with
75 additions
and
42 deletions
js/copy-current-url.js
+
75
−
42
View file @
8bc051a5
(
function
()
{
/* Main function, listens for a click event,
calls all the other functions upon element click */
Drupal
.
behaviors
.
copyButtonElements
=
{
attach
(
context
)
{
const
btnCopies
=
document
.
querySelectorAll
(
'
.btn-copy.social-sharing-buttons-button
'
,
);
btnCopies
.
forEach
((
btnCopy
)
=>
{
btnCopy
.
addEventListener
(
'
click
'
,
function
(
event
)
{
event
.
preventDefault
();
// Checks if page is using HTTPS
if
(
window
.
isSecureContext
)
{
// Calls the secureCopyToClipboard function
Drupal
.
secureCopyToClipboard
(
window
.
location
.
href
);
}
else
{
// If site is not using HTTPS, use the fallback function
Drupal
.
unsecureCopyToClipboard
(
window
.
location
.
href
);
}
// Calls the function that pops up the message
Drupal
.
showPopUpMessage
(
event
.
currentTarget
);
});
});
},
};
// For HTTPS sites this is the function to copy current url to clipboard
Drupal
.
secureCopyToClipboard
=
function
(
valueToBeCopiedToClipboard
)
{
// Here we use the clipboardAPI to copy to clipboard
(
function
(
Drupal
)
{
/**
* Copies the provided text to the clipboard using
* the Clipboard API (for HTTPS sites).
*
* @param {string} valueToBeCopiedToClipboard - Text (URL) to be copied.
*/
function
secureCopyToClipboard
(
valueToBeCopiedToClipboard
)
{
// Here we use the clipboardAPI to copy to clipboard.
navigator
.
clipboard
.
writeText
(
valueToBeCopiedToClipboard
).
catch
((
err
)
=>
{
console
.
error
(
'
Error copying current URL to clipboard:
'
,
err
);
});
}
;
}
// For non-HTTPS sites this will be the fallback function
Drupal
.
unsecureCopyToClipboard
=
function
(
valueToBeCopiedToClipboard
)
{
/**
* Fallback function for copying the provided text to the clipboard
* for non-HTTPS sites. Uses an input element to select and copy the text.
*
* @param {string} valueToBeCopiedToClipboard - The text (URL) to be copied.
*/
function
unsecureCopyToClipboard
(
valueToBeCopiedToClipboard
)
{
const
inputElem
=
document
.
createElement
(
'
input
'
);
inputElem
.
value
=
valueToBeCopiedToClipboard
;
// Append the element to the body
// Append the element to the body
.
document
.
body
.
append
(
inputElem
);
// Select the element
// Select the element
.
inputElem
.
select
();
try
{
/* This section copies the current selection to clipboard using 'execCommand',
which is in the process of being deprecated, however its 'copy' command is still
fully supported by major browsers. To learn more, please follow the link below:
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand */
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
.
*/
document
.
execCommand
(
'
copy
'
);
Drupal
.
showPopUpMessage
(
inputElem
);
}
catch
(
err
)
{
// If unable to copy to clipboard, raise an error
// If unable to copy to clipboard, raise an error
.
console
.
error
(
'
Unable to copy to clipboard
'
,
err
);
}
// Remove the appended input element
// Remove the appended input element
.
document
.
body
.
removeChild
(
inputElem
);
}
;
}
Drupal
.
showPopUpMessage
=
function
(
clickedButton
)
{
// Find the parent container
/**
* Displays a popup message when the button is clicked,
* showing a confirmation of the copied URL.
* The popup message is hidden after a certain duration.
*
* @param {HTMLElement} clickedButton - The button element that was clicked.
* @param {string} popupMessage - The message to be displayed in the popup.
*/
function
showPopUpMessage
(
clickedButton
,
popupMessage
)
{
// Find the parent container.
const
parentContainer
=
clickedButton
.
closest
(
'
.social-sharing-buttons
'
);
if
(
parentContainer
)
{
const
elemPopUpShow
=
parentContainer
.
querySelector
(
'
.social-sharing-buttons-popup
'
,
);
if
(
elemPopUpShow
)
{
/* Restore the original popup text to trigger
the aria-live for assistive technologies. */
elemPopUpShow
.
innerHTML
=
popupMessage
;
elemPopUpShow
.
classList
.
add
(
'
visible
'
);
// Remove 'visible' from class after a certain time
/* Remove 'visible' from class after a certain time
and empty popup content so that the popup content is read again
by assistive technologies on next click. */
setTimeout
(()
=>
{
elemPopUpShow
.
classList
.
remove
(
'
visible
'
);
elemPopUpShow
.
innerHTML
=
''
;
},
4000
);
}
}
}
/* Main function, listens for a click event,
calls all the other functions upon element click */
Drupal
.
behaviors
.
copyButtonElements
=
{
attach
(
context
)
{
/* Select buttons within the current context using 'once' to ensure
listeners are added only once. */
once
(
'
copyButtonBehavior
'
,
context
.
querySelectorAll
(
'
.btn-copy.social-sharing-buttons-button
'
),
).
forEach
((
btnCopy
)
=>
{
const
popup
=
btnCopy
.
querySelector
(
'
.social-sharing-buttons-popup
'
);
// Store popup content and clear popup text on page load.
let
originalText
=
''
;
originalText
=
popup
.
innerHTML
;
popup
.
innerHTML
=
''
;
btnCopy
.
addEventListener
(
'
click
'
,
function
(
event
)
{
event
.
preventDefault
();
// Checks if page is using HTTPS.
if
(
window
.
isSecureContext
)
{
// Calls the secureCopyToClipboard function.
secureCopyToClipboard
(
window
.
location
.
href
);
}
else
{
// If site is not using HTTPS, use the fallback function.
unsecureCopyToClipboard
(
window
.
location
.
href
);
}
// Calls the function that pops up the message.
showPopUpMessage
(
event
.
currentTarget
,
originalText
);
});
});
},
};
})(
Drupal
);
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment