jcarbaugh/redactionmachine.html

## 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>
	<!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>