JSFiddle - React, Tailwind, and code Playground

by sparebytes

JavaScript

var util = (function () {

    // Class
    var pos2d;
    pos2d = function (percents) {
        this.percents = percents;
    };

    // Predefined Positions
    pos2d.tl = new pos2d([0.0, 0.0]);
    pos2d.tc = new pos2d([0.5, 0.0]);
    pos2d.tr = new pos2d([1.0, 0.0]);

    pos2d.cl = new pos2d([0.0, 0.5]);
    pos2d.cc = new pos2d([0.5, 0.5]);
    pos2d.cr = new pos2d([1.0, 0.5]);

    pos2d.bl = new pos2d([0.0, 1.0]);
    pos2d.bc = new pos2d([0.5, 1.0]);
    pos2d.br = new pos2d([1.0, 1.0]);

    // Axes
    pos2d.axes = {};

    // Vert Axis
    pos2d.axes.vert = {};
    pos2d.axes.vert.percentsByName = {
        "top": 0.0, "center": 0.5, "bottom": 1.0
    };
    pos2d.axes.vert.names = ["top", "bottom"];

    // Horz Axis
    pos2d.axes.horz = {};
    pos2d.axes.horz.percentsByName = {
        "left": 0.0, "center": 0.5, "right": 1.0
    };
    pos2d.axes.horz.names = ["left", "right"];

    // Both Axis
    pos2d.axes.both = {};
    pos2d.axes.both.names = ["top", "bottom", "left", "right", "center"];
    pos2d.axes.both.posByName = {
        "top": {
            "left": pos2d.tl,
            "center": pos2d.tc,
            "right": pos2d.tr
        },
        "bottom": {
            "left": pos2d.bl,
            "center": pos2d.bc,
            "right": pos2d.br
        },
        "left": {
            "top": pos2d.tl,
            "center": pos2d.cl,
            "bottom": pos2d.bl
        },
        "right": {
            "top": pos2d.tr,
            "center": pos2d.cr,
            "bottom": pos2d.br
        },
        "center": {
            "top": pos2d.tc,
            "bottom": pos2d.bc,
            "left": pos2d.cl,
            "right": pos2d.cr,
            "center": pos2d.cc
        }
    }

    // Parse
    pos2d.parse = function (p) {
        p = p || 'center';

        var posA;
        var posB;

        var ps = p.split(' ');
        if (ps.length == 1) {
            if (p == "center") {
                posA = posB = p;
            } else {
 ...