Improved: share to clipboard improved with animation and icon

[math-GH]

Sharing Service Clipboard

Before:
User clicks on the Clipboard and there is no visual feedback.

After:
Click on Clipboard:

• a background animatoin runs from left to right side (it is not so good visible in the gif)
• a checkmark icon is set, that easeout after 10 seconds
  

Notice:
Only the Clipboard is animated, because only this sharing service does not open another service as click feedback.

Changes proposed in this pull request:

• JS and CSS

How to test the feature manually:

1. add Clipboard to the sharing service list
2. share an article via click on Clipboard
3. see the animation and checkmark

Pull request checklist:

• clear commit messages
• code manually tested

[math-GH]

Let me explain these lines:

The ok CSS class is used for the animation of the checkmark icon. When the class is set, then the animation starts (animation: show the checkmark char and ease out later).
The animation can run only once.

see frss.css:

.item.share button.ok::before {
	content: "✓";
	position: absolute;
	left: 0.5rem;
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-name: easeOut;
}

@keyframes easeOut {
	0% {opacity: 1;}

	80% {opacity: 1;}

	100% {opacity: 0;}
}

What would happen, if the user clicks more than once on the Clipboard button? It is expected, that the checkmark icon is shown again.

So the ok class needs to removed and set again.

BUT: just remove() and add() does not trigger the animation again. Between it needs to be done something else.
I found a working hack on https://css-tricks.com/restart-css-animation/ void element.offsetWidth;

Our Github action pipeline does not like the void:

scripts\main.js
  1093:4  error  Expected 'undefined' and instead saw 'void'  no-void

So I solved it with writing the offsetWidth value into the data-foo that is not used for anything.