share-this: Medium-like text sharing
Ever read an article on Medium, and tried to select some text for copy/pasting purposes? I bet you did. So you also noticed the little balloon that appears on top of your selection, allowing you to do some nice things like highlighting that snippet in a collaborative effort to give it more prominence, or commenting on it or share it on Twitter. I think it’s a pretty cool feature.
Now, you may have noticed this is not an article on Medium. We’re, in fact, on GitHub pages. It looks like Medium, but it’s because I’m joking with the styles. So, is that functionality still here? Try to select some text.
It is! All thanks to share-this, a package I’ve developed with the following principles in mind:
- no dependencies - no jQuery, no icon sets, nothing;
- as much unopinionated as possible, which means:
- it’s highly customizable;
- it has a very minimal DOM skeleton;
- its functionality is not predetermined.
I think the first part is quite clear, so let’s see the others in detail.
Highly customizable
Being “customizable” for share-this is something that involves both its general appearance and the sharing channels it provides.
Although share-this does come with a curated style sheet that’s ready to use and probably fits
most of a developer’s needs, it’s not considered a vital part of the library. This means it could
be completely replaced by something else. It makes use of just a CSS class (share-this-popover,
but that can be set with the popoverClass setting) that serves as a “namespace” for the style
rules. No IDs, no attributes, it’s all styled on top of the simple popover’s DOM structure.
There’s also a breakpoint set to a viewport width of less than 576 pixels for a special styling for smaller devices like smartphones in portrait mode. It’s the same breakpoint of Bootstrap v4 for extra-small devices.
And if you like the stylesheet provided but you want to tweak some values, you’re lucky! Because the library
provides the sources for the style sheet in both LESS and SCSS format. No magic numbers, you can just
override the values in the vars file.
And what about the sharing channels, usually called “sharers” throughout the documentation? The
great news is that you can include the ones that you need, and create your custom sharer! You can
even enable and disable them at runtime with the active property (being a boolean or a function
returning a boolean). Finally, you can decide what should happen when clicking/tapping on the buttons with the
action callback, completely overriding any original behavior.
Minimal DOM skeleton
This should be pretty straightforward, but this is the complete structure that share-this creates for its popovers:
That’s it. Just a div wrapper containing an unordered list (of supposedly sharer buttons), whose
items have a data-share-via attribute with the sharer’s name as the value. What’s inside the
li elements is up to the render method of each single sharer (altough the default
style sheet presumes it’s wrapped in an anchor element). The wrapper (which is not the popover itself,
but rather a place marker for the selected text) is styled dynamically to set its position in the document.
(If you’re asking if there are plans to support JSX for the render method, yes, there are.)
Undetermined behavior
Everyone expects share-this to just offer text sharing capabilities, as the name implies and actually as it does when providing some example sharers. But it’s not all the story, here: what a “sharer” can do is actually up to the developer.
In fact, in this very page the popover provides a
couple of “sharers” that don’t do anything like sharing the selected text. The
first one allows you to take notes on the article that are saved in the localStorage (they’re not
sent anywhere, and other readers won’t see them, don’t worry). The other one is something that triggers the
speech synthesis API to pronounce the selected text (I guess more for fun than for actually learning).
What now?
Dive into the documentation (which is just the project’s readme) and start coding. GitHub Issues are available for questions and problems. Also, you’re more than welcome to contributing!
Have fun!