Rectangular exclusion demo

by Jordan

HTML

<div id="region">
    <div id="exclude"></div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum justo purus, dictum at lacinia at, iaculis sit amet dolor. Ut lectus eros, posuere ac porttitor sed, volutpat sed eros. Quisque id quam mauris, sit amet blandit neque. Integer cursus faucibus magna eu fermentum. Nam  pulvinar, tellus sit amet mattis porttitor, enim dolor consectetur mi, nec laoreet augue metus id nulla. Nulla facilisi. Proin feugiat egestas scelerisque. Fusce malesuada, nisl pulvinar cursus porta, eros elit suscipit magna, sit amet dictum nisi justo ut nisi. Mauris hendrerit, mi at posuere tincidunt, quam erat fringilla dolor, ac posuere dolor nisi et erat. Vivamus suscipit tristique porta.</p>
    
    <p>Mauris euismod sodales sodales. Sed egestas auctor condimentum. Integer tincidunt, orci sit amet laoreet scelerisque, dolor est blandit dui, at aliquet tortor lectus at ante. Integer eu lorem sed sapien lacinia tristique. Proin nisl tortor, euismod et semper ut, egestas a tellus. Vestibulum sed enim auctor ipsum pulvinar pretium. Proin lobortis tincidunt sem, in suscipit dui pellentesque at.</p>
    
    <p>Aliquam nec lectus arcu, sit amet scelerisque massa. Donec eros lacus, blandit vel posuere eu, eleifend consectetur nulla. Curabitur at condimentum ante. In hac habitasse platea dictumst. Suspendisse potenti. Duis blandit sapien fringilla eros vulputate non dictum orci ultricies. Nullam tincidunt condimentum arcu, in suscipit massa vehicula vel. Donec euismod arcu vitae nisi bibendum rhoncus. Praesent vel augue massa, quis lobortis velit. Aliquam sapien dolor, ultrices consectetur hendrerit vitae, molestie id eros. Mauris rhoncus sem ac purus varius vitae tincidunt est pharetra. Etiam orci mauris, lobortis in faucibus sit amet, pulvinar sed orci. Praesent egestas malesuada placerat. Cras at risus quam.</p>
    
    <p>Quisque mollis ullamcorper aliquet. Cras vel orci et libero fringilla gravida. Nunc ornare posuere...

CSS

#region {
    position: relative;
    width: 500px;
}

p {
    margin: 1em 0;
}

#exclude {
    background: #ccc;
    cursor: move;
    height: 400px;
    left: 127px;
    top: 85px;
    position: absolute;
    width: 200px;
    margin: 1em;
}

span.exclusion-newline:before {
    content: '\A';
    white-space: pre;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    
    var exclude = document.getElementById('exclude'),
        within = document.getElementById('region'),
        exclusion = new Exclusion(exclude, within),
        startX, startY, startLeft, startTop;
    
    
    exclude.addEventListener('mousedown', function(e) {
        startX = e.clientX;
        startY = e.clientY;
        startLeft = intStyle(exclude, 'left');
        startTop = intStyle(exclude, 'top');
        window.addEventListener('mousemove', watchMove);
        document.onselectstart = function() {
            return false;
        };
    });

    window.addEventListener('mouseup', function() {
        window.removeEventListener('mousemove', watchMove);
        document.onselectstart = null;
    });
    
    function watchMove(e) {
        exclude.style.left = (startLeft + e.clientX - startX) + 'px';
        exclude.style.top = (startTop + e.clientY - startY) + 'px';
        if (e.preventDefault) e.preventDefault();
        e.stopPropagation();
        exclusion.reflow();
        return false;
    }
    
    function intStyle(element, property) {
        var value = document.defaultView.getComputedStyle(element, null)[property];
        
        return (value) ? parseInt(value, 10) : 0;
    }
});


//
// EXCLUSION CODE
//

(function() {
    var nonWhitespace = /\S+/,
        wrapClass = 'exclusion-wrapper',
        newlineClass = 'exclusion-newline';
    
    function Exclusion(exclude, region) {
        this.exclude = exclude;
        this.region = region || document;
        this.initialise();
    }
    
    Exclusion.prototype = {
        nextID: 0,
        
        getWordAtPoint: function(x, y) {
            this.exclude.style.visibility = 'hidden';
            var element = document.elementFromPoint(x, y);
            this.exclude.style.visibility = 'visible';
            
            return (element && element.nodeName == 'SPAN' && element.className.indexOf(wrapClass) > -1) ?...