purplecoat.js
Purplecoat.js lets you create labeled overlays that can be triggered with a click. And you don't need to write a single line of Javascript.
bower install purplecoat.js
Usage
Step 0: Add purplecoat-min.js along with jQuery.
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://ellekasai.github.io/purplecoat.js/purplecoat.min.js"></script>
Step 1: Add data-purplecoat="foo"
and data-purplecoat-label="Hello!"
to any element.
<img data-purplecoat="foo"
data-purplecoat-label="Hello!"
src="http://placehold.it/200x150">
Step 2: Add data-purplecoat-toggle="foo"
to any clickable element.
Now, go ahead and click this button to show the overlay label. Click again to hide the label.
<button data-purplecoat-toggle="foo">
✓ Click Me
</button>
(Explanation: The value of data-purplecoat-toggle
must match the value of data-purplecoat
to make this all work.)
Example Use Case
Shiori is a Jekyll blog theme I designed. Shiori lets you customize its layout by modifying the html files under its _includes
directory.
I added purplecoat.js on Shiori's demo page. Users can now understand which part of the layout corresponds to which html file.
Customizations
You can create multiple triggers:
<button data-purplecoat-toggle="odd" ...>...</button>
<button data-purplecoat-toggle="even" ...>...</button>
<img data-purplecoat="odd"
data-purplecoat-label="1 is odd" ...>
<img data-purplecoat="even"
data-purplecoat-label="2 is even" ...>
<img data-purplecoat="odd"
data-purplecoat-label="3 is odd" ...>
You can also customize the overlay color via data-purplecoat-color
:
<button data-purplecoat-toggle="color-demo"
data-purplecoat-color="rgba(63, 159, 252, 0.8)">...</button>
<img data-purplecoat="color-demo"
data-purplecoat-label="Hello!" ...>
<img data-purplecoat="color-demo"
data-purplecoat-label="Hello!"
data-purplecoat-color="rgba(122, 182, 20, 0.8)" ...>
jQuery API
Purplecoat.js also offers a simple jQuery API that lets you toggle the overlay programmatically.
<img data-purplecoat="hover"
data-purplecoat-label="Hello!" ...>
<script>
$(".js-purplecoat-hover-trigger").on("mouseover", function() {
$("[data-purplecoat=hover]").purplecoat();
});
</script>
Author
Purplecoat.js is written by Elle Kasai, a UI designer/developer based in Vancouver.
Thanks!
P.S. If you like purplecoat.js, you should check out my other project: ResumeCards, a Markdown based resume generator. It looks great on mobile/desktop and can be saved as PDF.
Thanks to @chibicode for revising my English.