JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<div id="parent">
    <div id="child"></div>
</div>

CSS

#parent {
    border:1px solid red;
    width:100px;
    height:100px
}
#child {
    margin-top:22px;
    margin-left:22px;
    border:1px solid blue;
    width:50px;
    height:50px;
}

JavaScript

var focusedP = false;

function addHandler(node, type, handler) {
    function registerEventHandler(node, event, handler) {
        if (typeof node.addEventListener == "function") node.addEventListener(event, handler, false);
        else node.attachEvent("on" + event, handler);
    }

    function wrapHandler(event) {
        function normaliseEvent(event) {
            if (!event.stopPropagation) {
                event.stopPropagation = function () {
                    this.cancelBubble = true;
                };
                event.preventDefault = function () {
                    this.returnValue = false;
                };
            }
            if (!event.stop) {
                event.stop = function () {
                    this.stopPropagation();
                    this.preventDefault();
                };
            }
            if (event.srcElement && !event.target) event.target = event.srcElement;
            if ((event.toElement || event.fromElement) && !event.relatedTarget) event.relatedTarget = event.toElement || event.fromElement;
            if (event.clientX != undefined && event.pageX == undefined) {
                event.pageX = event.clientX + document.body.scrollLeft;
                event.pageY = event.clientY + document.body.scrollTop;
            }
            if (event.type == "keypress") {
                if (event.charCode === 0 || event.charCode == undefined) event.character = String.fromCharCode(event.keyCode);
                else event.character = String.fromCharCode(event.charCode);
            }

            return event;
        }

        handler(normaliseEvent(event || window.event));
    }

    registerEventHandler(node, type, wrapHandler);
    return {
        node: node,
        type: type,
        handler: wrapHandler
    };
}

function focusCard(focus, cards) {
    console.log("focus");
    return true;
}

function unfocusCard() {
    console.log("unfocus");
    return...