bitandblack-rows
Version:
A small and simple CSS gutter to create rows and cells using the flexbox model.
200 lines (199 loc) • 7.46 kB
JavaScript
"use strict";
/**
* Bit&Black Rows
*
* @copyright Copyright (c) Bit&Black
* @author Tobias Köngeter <hello@bitandblack.com>
* @link https://www.bitandblack.com
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.Position = void 0;
/**
* Receiving information about the cell positions in the grid.
*/
var Position = /** @class */ (function () {
function Position() {
this._resizeObserver = null;
this._addCssClassesForOutsideCells = true;
this._addDataAttributesAboutCellPositions = false;
this._cssClassFirstOfRow = "row__cell--first-of-row";
this._cssClassLastOfRow = "row__cell--last-of-row";
this._cssClassFirstOfColumn = "row__cell--first-of-column";
this._cssClassLastOfColumn = "row__cell--last-of-column";
this.resizeObserverCallback = this.resizeObserverCallback.bind(this);
this._resizeObserver = new ResizeObserver(this.resizeObserverCallback);
}
/**
* Add a rows-container element.
*
* @param element {HTMLElement}
* @return self
*/
Position.prototype.add = function (element) {
this._resizeObserver.observe(element);
return this;
};
/**
* Removes a rows-container element from observing.
*
* @param element {HTMLElement}
* @return self
*/
Position.prototype.remove = function (element) {
this._resizeObserver.unobserve(element);
this.removeElement(element);
return this;
};
/**
* Tells if adding CSS classes to outside laying cells has been enabled or disabled.
*/
Position.prototype.addCssClassesForOutsideCells = function () {
return this._addCssClassesForOutsideCells;
};
/**
* Enable or disable adding CSS classes to outside laying cells.
*
* @param addCssClassesForOutsideCells {boolean}
*/
Position.prototype.setAddCssClassesForOutsideCells = function (addCssClassesForOutsideCells) {
this._addCssClassesForOutsideCells = addCssClassesForOutsideCells;
return this;
};
/**
* Tells if adding data attributes to each cell with information about its position has been enabled or disabled.
*/
Position.prototype.addDataAttributesAboutCellPositions = function () {
return this._addDataAttributesAboutCellPositions;
};
/**
* Enable or disable adding data attributes to each cell with information about its position.
*
* @param addDataAttributesAboutCellPositions {boolean}
*/
Position.prototype.setAddDataAttributesAboutCellPositions = function (addDataAttributesAboutCellPositions) {
this._addDataAttributesAboutCellPositions = addDataAttributesAboutCellPositions;
return this;
};
/**
* @return {string}
*/
Position.prototype.getCssClassFirstOfRow = function () {
return this._cssClassFirstOfRow;
};
/**
* @param cssClassFirstOfRow {string}
* @return self
*/
Position.prototype.setCssClassFirstOfRow = function (cssClassFirstOfRow) {
this._cssClassFirstOfRow = cssClassFirstOfRow;
return this;
};
/**
* @return {string}
*/
Position.prototype.getCssClassLastOfRow = function () {
return this._cssClassLastOfRow;
};
/**
* @param cssClassLastOfRow {string}
* @return self
*/
Position.prototype.setCssClassLastOfRow = function (cssClassLastOfRow) {
this._cssClassLastOfRow = cssClassLastOfRow;
return this;
};
/**
* @return {string}
*/
Position.prototype.getCssClassFirstOfColumn = function () {
return this._cssClassFirstOfColumn;
};
/**
* @param cssClassFirstOfColumn {string}
* @return self
*/
Position.prototype.setCssClassFirstOfColumn = function (cssClassFirstOfColumn) {
this._cssClassFirstOfColumn = cssClassFirstOfColumn;
return this;
};
/**
* @return {string}
*/
Position.prototype.getCssClassLastOfColumn = function () {
return this._cssClassLastOfColumn;
};
/**
* @param cssClassLastOfColumn {string}
* @return self
*/
Position.prototype.setCssClassLastOfColumn = function (cssClassLastOfColumn) {
this._cssClassLastOfColumn = cssClassLastOfColumn;
return this;
};
/**
* @param resizeObserverEntries {ResizeObserverEntry[]}
* @private
*/
Position.prototype.resizeObserverCallback = function (resizeObserverEntries) {
for (var _i = 0, resizeObserverEntries_1 = resizeObserverEntries; _i < resizeObserverEntries_1.length; _i++) {
var resizeObserverEntry = resizeObserverEntries_1[_i];
this.handleEntry(resizeObserverEntry);
}
};
;
/**
* @param resizeObserverEntry {ResizeObserverEntry}
* @private
*/
Position.prototype.handleEntry = function (resizeObserverEntry) {
var rowElement = resizeObserverEntry.target;
var rowCells = Array.from(rowElement.children);
var columnCounter = 0;
var rowCounter = 0;
for (var _i = 0, _a = Object.entries(rowCells); _i < _a.length; _i++) {
var _b = _a[_i], index = _b[0], rowCell = _b[1];
var rowCellIndex = Number.parseInt(index);
var rowCellFirst = rowCells[0];
var rowCellPrevious = rowCells[rowCellIndex - 1];
var rowCellNext = rowCells[rowCellIndex + 1];
var rowCellLast = rowCells[rowCells.length - 1];
var isFirstOfRow = !rowCellPrevious || rowCell.offsetTop !== rowCellPrevious.offsetTop;
var isLastOfRow = !rowCellNext || rowCell.offsetTop !== rowCellNext.offsetTop;
var isFirstOfColumn = rowCell.offsetTop === rowCellFirst.offsetTop;
var isLastOfColumn = rowCell.offsetTop === rowCellLast.offsetTop;
if (true === this.addCssClassesForOutsideCells()) {
rowCell.classList.toggle(this.getCssClassFirstOfRow(), isFirstOfRow);
rowCell.classList.toggle(this.getCssClassLastOfRow(), isLastOfRow);
rowCell.classList.toggle(this.getCssClassFirstOfColumn(), isFirstOfColumn);
rowCell.classList.toggle(this.getCssClassLastOfColumn(), isLastOfColumn);
}
if (true === this.addDataAttributesAboutCellPositions()) {
rowCell.dataset.nthOfColumn = columnCounter.toString();
rowCell.dataset.nthOfRow = rowCounter.toString();
}
++columnCounter;
if (isLastOfRow) {
columnCounter = 0;
++rowCounter;
}
}
};
/**
* @param rowElement {HTMLElement}
* @private
*/
Position.prototype.removeElement = function (rowElement) {
var rowCells = Array.from(rowElement.children);
for (var _i = 0, _a = Object.entries(rowCells); _i < _a.length; _i++) {
var _b = _a[_i], rowCell = _b[1];
rowCell.classList.remove(this.getCssClassFirstOfRow());
rowCell.classList.remove(this.getCssClassLastOfRow());
rowCell.classList.remove(this.getCssClassFirstOfColumn());
rowCell.classList.remove(this.getCssClassLastOfColumn());
delete rowCell.dataset.nthOfColumn;
delete rowCell.dataset.nthOfRow;
}
};
return Position;
}());
exports.Position = Position;