Skip to content

Instantly share code, notes, and snippets.

@jcarbaugh

jcarbaugh/redactionmachine.html

Created March 4, 2015 17:24
Show Gist options
  • Save jcarbaugh/9bb402a2fec3b7182880 to your computer and use it in GitHub Desktop.
Save jcarbaugh/9bb402a2fec3b7182880 to your computer and use it in GitHub Desktop.
Download ZIP
Redaction Machine demo
Raw
redactionmachine.html
<!doctype html>
<html lang="en-us">
<style>
html { font-family: sans-serif; }
p.document {
border: 1px solid #999999;
font-family: serif;
font-size: 120%;
line-height: 150%;
padding: 2em;
width: 600px;
}
.redacted {
color: #000000;
color: rgba(0, 0, 0, 0);
background-color: #000000;
}
.word:hover {
background-color: #DDDDDD;
}
.word.redacted:hover {
background-color: #000000;
}
</style>
<div class="container">
<h1>Redaction Machine</h1>
<p class="document">
<span class="word" id="wPnK">Lorem</span> <span class="word" id="wGH2">ipsum</span> <span class="word" id="w7Pa">dolor</span> <span class="word" id="w7I5">sit</span> <span class="word" id="w9Iv">amet</span>, <span class="word" id="wZbK">consectetur</span> <span class="word" id="wKsk">adipiscing</span> <span class="word" id="wovy">elit</span>, <span class="word" id="wCEg">sed</span> <span class="word" id="waV3">do</span> <span class="word" id="wMSf">eiusmod</span> <span class="word" id="wd8I">tempor</span> <span class="word" id="wPPF">incididunt</span> <span class="word" id="wSTe">ut</span> <span class="word" id="w7fa">labore</span> <span class="word" id="wS9R">et</span> <span class="word" id="wHja">dolore</span> <span class="word" id="wJnj">magna</span> <span class="word" id="wwYK">aliqua</span>.
</p>
<div>
<button id="btn-redact">Redact all</button>
<button id="btn-reveal">Reveal all</button>
</div>
</div>
<script>
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function toggleClass(el, className) {
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) {
classes.splice(existingIndex, 1);
} else {
classes.push(className);
}
el.className = classes.join(' ');
}
}
function removeClass(el, className) {
if (el.classList) {
el.classList.remove(className);
} else {
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
function addClass(el, className) {
if (el.classList) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}
}
function toggleRedaction(ev) {
toggleClass(ev.target, 'redacted');
}
function redactAll() {
var els = document.querySelectorAll('p.document .word:not(.redacted)');
for (var i = 0; i < els.length; i++) {
addClass(els[i], 'redacted');
}
}
function revealAll() {
var els = document.querySelectorAll('p.document .word.redacted');
for (var i = 0; i < els.length; i++) {
removeClass(els[i], 'redacted');
}
}
ready(function() {
var els = document.getElementsByClassName('word');
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('click', toggleRedaction);
}
document.getElementById('btn-redact').addEventListener('click', redactAll);
document.getElementById('btn-reveal').addEventListener('click', revealAll);
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment