JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<div id="outer"></div>

CSS

*{
    outline:dashed red 1px;
}
.hovered{
    outline:1px dotted #0ff;
}
#outer {
  position: relative;
  
  margin-left: 100px;
  margin-top: 100px;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 2px;
  border: 3px solid #000;
  color: #fff;
  background: #333;
  opacity: 0.5;
}

JavaScript

// create some boxes
var _setTimeout = setTimeout;
setTimeout = function () {
    if (Array.isArray(arguments[0])) {
        var a = arguments[0].map(function (e) {
            return setTimeout(e, this).bind(arguments[1])
        });
        a.cancel = function () {
            this.forEach(function (e) {
                e.cancel()
            })
        };
        a.then = function () {
            this.every(function (e) {
                return e.done;
            })
        };
        a.bounce = function (t) {
            return this.map(function (e) {
                e.bounce(t);
            });
        };
        return a;
    } else {
        var a = Object.create(null);
        a.function = arguments[0];
        a.delay = arguments[1];
        a._then =null;
        a._pointer = _setTimeout.call(null, function () {
            a.function();
            if(a._then)a._then();
        }.bind(a), a.delay);
        a.cancel = function () {
            clearTimeout(this._pointer);
            return this;
        };
        
        a.then = function (f) {
            this._then = f.bind(this);
            return this;
        };
        a.bounce = function (t) {
            clearTimeout(this._pointer);
            return setTimeout(a.function, t);
        };
        a.loop = function () {
            var _loop = function(){setTimeout(function() {
                this.function();
            }.bind(this), this.delay).then(_loop)}.bind(this);
            return _loop;
        }

        return a;
    }
};
for (var i = 0,c = 0; i < 1000;c+=20, i ++ ){
  $('<div class="box" />').appendTo('#outer').css({
    left:c%200,
    top: Math.floor(c/200)*20
  });
}

// this function should (did not enough testing) return all elements at a given
// point in the order of top to bottom.
var elementsFromPoint = function (root, x, y) {
   var _root =  document.elementFromPoint(x,y).parentElement;
    if(!!_root)
        root=_root;
        var result = [], i = 0, lim =...