selection

by Darby Rathbone

HTML

<div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div><div class='random'> select me</div>
<div class='random'></div>

CSS

[selected="true"]{
    background-color:RGBA(255,0,0,.25);
    
}


.selector {
    position:absolute;
    display:block;
    outline:dashed RGBA(0, 0, 0, .8) 1px;
}
html {
    width:100%;
    height:100%;
}
.random {
    position:absolute;
    display:block;
    outline:solid black 1px;
    min-width:10px;
    min-height:10px;
}

JavaScript

var selectbox = document.createElement('div');
selectbox.setAttribute('class', 'selector');
document.body.appendChild(selectbox);
var pos = [0, 0];
window.addEventListener('mousedown', function (e) {
    selectbox.style.display = 'block';
    selectbox.style.top = e.pageY + 'px';
    selectbox.style.left = e.pageX + 'px';
    selectbox.style.width = '0px';
    selectbox.style.height = '0px';
    pos = [e.pageX, e.pageY];
    window.addEventListener('mousemove', resizer);
    e.preventDefault();

});
window.addEventListener('mouseup', resizeend);

function resizer(e) {
    setTimeout(function () {
        selectbox.style.top = Math.min(pos[1], e.pageY) + 'px';
        selectbox.style.left = Math.min(pos[0], e.pageX) + 'px';
        selectbox.style.width = Math.abs(e.pageX - pos[0]) + 'px';
        selectbox.style.height = Math.abs(e.pageY - pos[1]) + 'px';
    });


}

function resizeend(e) {
    resizer(e);
    window.removeEventListener('mousemove', resizer);
    findElementsWithin();
    selectbox.style.display = 'none';
    //window.removeEventListener('mouseup', resizeend);
}
var width = document.body.getBoundingClientRect().width;


([].splice.call(document.getElementsByClassName('random'), 0)).forEach(function (e) {




    e.style.left = Math.random() * width + "px";
    e.style.top = Math.random() * width + "px";
});

function findElementsWithin() {
    var position =selectbox.getBoundingClientRect();
    var Elements = document.querySelectorAll('body > *');
     [].splice.call(Elements,0).forEach(function(e){e.setAttribute('selected',false);});
    Elements = [].splice.call(Elements, 0).filter(function (e) {
        var tmp =e.getBoundingClientRect();
        return ( tmp.top > position.top  && tmp.top+tmp.height < position.top+position.height && tmp.left > position.left && tmp.left+tmp.width < position.left+position.width );
    });
    Elements.forEach(function(e){e.setAttribute('selected',true);});
    console.log(Elements); /// gets all elements in...