Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<spoiler>

David Friedman wondered aloud about a <spoiler> element. The Web Components proposal will allow custom HTML elements. This is an example of an <x-spoiler> element (the spec requires a hypen in the name) implemented using Google's Polymer library.

Click on the obscured text to reveal the spoiler.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://www.polymer-project.org/polymer.min.js"></script>
<link rel="import" href="spoiler.html">
</head>
<body>
<p>No frills: <x-spoiler>Snape</x-spoiler> kills <x-spoiler>Trinity</x-spoiler> with <x-spoiler>Rosebud</x-spoiler>.</p>
<p>Supply your own color: Soylent Green is <x-spoiler color='green'>PEOPLE!</x-spoiler></p>
<p>Some spoilers should expire quickly: Yesterday, <x-spoiler expires='2013-10-04'>all my troubles seemed so far away</x-spoiler>.</p>
<p>But some should last a hundred years: Rosebud was <x-spoiler expires='2041-05-01'>his sled</x-spoiler>.</p>
</body>
</html>
<polymer-element name="x-spoiler" constructor="Spoiler" attributes="color expires">
<template>
<style>
@host {
* { display: inline-block; }
*:hover { cursor: pointer; }
}
</style>
<span id='spoiler'></span>
</template>
<script>
function spoil(o) {
o.style.backgroundColor = o.parentElement.style.backgroundColor;
o.style.color= o.parentElement.style.color;
}
Polymer('x-spoiler', {
created: function() {
var e = this.$.spoiler;
e.innerHTML = this.innerHTML;
e.setAttribute('onclick', 'spoil(this)');
if (this.color === '') this.color = 'black';
if (this.expires === '' || Date.now() < Date.parse(this.expires)) {
e.setAttribute('style',
'background-color: ' + this.color + '; color: ' + this.color);
}
},
color: '',
expires: ''
});
</script>
</polymer-element>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment