css-grid-template-parser/dist/css-grid-template-parser.es5.js

A simple CSS Grid template parser

function track(start, end) {
    return {
        start: start,
        end: end,
        span: end - start,
    };
}
function area(rect) {
    var _a = rect.x, x = _a === void 0 ? 0 : _a, _b = rect.y, y = _b === void 0 ? 0 : _b, _c = rect.width, width = _c === void 0 ? 0 : _c, _d = rect.height, height = _d === void 0 ? 0 : _d;
    return {
        column: track(x + 1, x + width + 1),
        row: track(y + 1, y + height + 1),
    };
}
function rect(area) {
    var column = area.column, row = area.row;
    return {
        x: column.start - 1,
        y: row.start - 1,
        width: column.end - column.start,
        height: row.end - row.start,
    };
}

var sep = /['"]\s*['"]?/g;
var ws = /\s+/g;
var cleanTpl = function (t) { return t.trim().slice(1, -1); };
var cleanLine = function (l) { return l.replace(ws, ' ').trim(); };
var getTpl = function (t) { return cleanTpl(t).split(sep); };
var getRow = function (l) { return cleanLine(l).split(' '); };
var reduceLines = function (acc, line, r) {
    if (line.trim() !== '') {
        getRow(line).forEach(function (area, c) {
            if (area !== '.') {
                if (typeof acc[area] === 'undefined') {
                    acc[area] = {
                        column: track(c + 1, c + 2),
                        row: track(r + 1, r + 2),
                    };
                }
                else {
                    var _a = acc[area], column = _a.column, row = _a.row;
                    column.start = Math.min(column.start, c + 1);
                    column.end = Math.max(column.end, c + 2);
                    column.span = column.end - column.start;
                    row.start = Math.min(row.start, r + 1);
                    row.end = Math.max(row.end, r + 2);
                    row.span = row.end - row.start;
                }
            }
        });
    }
    return acc;
};
/**
 * grid
 * @param tpl string
 * @example
 * grid(`
 * ". ."
 * ". ."
 * `);
 * @returns
 * `{
 * width: 2,
 * height: 2,
 * areas: {},
 * }`
 */
function grid(tpl) {
    var lines = getTpl(tpl);
    var width = getRow(lines[0]).length;
    var height = lines.length;
    var areas = lines.reduce(reduceLines, {});
    return { width: width, height: height, areas: areas };
}

/**
 * Matching area
 * @param areas
 * @param row
 * @param column
 * @returns
 */
function matchingArea(areas, row, column) {
    return function (area) {
        return areas[area].row.start <= row + 1 &&
            areas[area].row.end > row + 1 &&
            areas[area].column.start <= column + 1 &&
            areas[area].column.end > column + 1;
    };
}
/**
 * Gets columns
 * @param areas
 * @param grid
 * @param row
 * @param [current]
 * @param [cols]
 * @returns columns
 */
function getColumns(areas, grid, row, current, cols) {
    if (current === void 0) { current = 0; }
    if (cols === void 0) { cols = ''; }
    var area = areas.find(matchingArea(grid.areas, row, current));
    cols += typeof area === 'string' ? area : '.';
    if (current < grid.width - 1) {
        return getColumns(areas, grid, row, current + 1, cols + " ");
    }
    return cols;
}
/**
 * Gets rows
 * @param areas
 * @param grid
 * @param [current]
 * @param [rows]
 * @returns rows
 */
function getRows(areas, grid, current, rows) {
    if (current === void 0) { current = 0; }
    if (rows === void 0) { rows = ''; }
    rows += "\"" + getColumns(areas, grid, current) + "\"";
    if (current < grid.height - 1) {
        return getRows(areas, grid, current + 1, rows + "\n");
    }
    return rows;
}
/**
 *
 * @param grid
 * @example
 * const areas = template({
  width: 5,
  height: 4,
  areas: {
    a: {
      column: { start: 1, end: 4, span: 3 },
      row: { start: 1, end: 3, span: 2 },
    },
    b: {
      column: { start: 3, end: 6, span: 3 },
      row: { start: 3, end: 5, span: 2 },
    },
  },
})

// → `"a a a . ."
//    "a a a . ."
//    ". . b b b"
//    ". . b b b"`
 */
function template(grid) {
    return getRows(Object.keys(grid.areas), grid);
}

function find(fn, direction, extremum, _a) {
    var areas = _a.areas;
    return fn.apply(void 0, Object.keys(areas).map(function (cell) { return areas[cell][direction][extremum]; }));
}
/**
 * Mins column start
 * @param grid
 * @returns column start
 */
function minColumnStart(grid) {
    return find(Math.min, 'column', 'start', grid);
}
/**
 * Maxs column start
 * @param grid
 * @returns column start
 */
function maxColumnStart(grid) {
    return find(Math.max, 'column', 'start', grid);
}
/**
 * Mins row start
 * @param grid
 * @returns row start
 */
function minRowStart(grid) {
    return find(Math.min, 'row', 'start', grid);
}
/**
 * Maxs row start
 * @param grid
 * @returns row start
 */
function maxRowStart(grid) {
    return find(Math.max, 'row', 'start', grid);
}
/**
 * Mins column end
 * @param grid
 * @returns column end
 */
function minColumnEnd(grid) {
    return find(Math.min, 'column', 'end', grid);
}
/**
 * Maxs column end
 * @param grid
 * @returns column end
 */
function maxColumnEnd(grid) {
    return find(Math.max, 'column', 'end', grid);
}
/**
 * Mins row end
 * @param grid
 * @returns row end
 */
function minRowEnd(grid) {
    return find(Math.min, 'row', 'end', grid);
}
/**
 * Maxs row end
 * @param grid
 * @returns row end
 */
function maxRowEnd(grid) {
    return find(Math.max, 'row', 'end', grid);
}

export { area, grid, maxColumnEnd, maxColumnStart, maxRowEnd, maxRowStart, minColumnEnd, minColumnStart, minRowEnd, minRowStart, rect, template, track };
//# sourceMappingURL=css-grid-template-parser.es5.js.map