Skip to content

Instantly share code, notes, and snippets.

@Grytsak
Last active May 28, 2019 12:20
Show Gist options
  • Select an option

  • Save Grytsak/5947993811fafc729f96bc5076d571e7 to your computer and use it in GitHub Desktop.

Select an option

Save Grytsak/5947993811fafc729f96bc5076d571e7 to your computer and use it in GitHub Desktop.
1) Add to parent container class js-table-cell-emulate-wrap 2) Add to elements we want to have same height classes: js-table-cell-emulate js-table-cell-emulate-target and same data-row attr, for example data-row="ppc-feature-title-1" 3) set maxWindowSize to number in pixels to disable table behavior on such screen width and lower
// Table Cell Emulate
(function(ELEMENT) {
ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
ELEMENT.closest = ELEMENT.closest || function closest(selector) {
if (!this) return null;
if (this.matches(selector)) return this;
if (!this.parentElement) {
return null
} else return this.parentElement.closest(selector)
};
}(Element.prototype));
(function(ARRAY) {
if (!ARRAY.map) {
ARRAY.map = function(callback, thisArg) {
var T, A, k;
if (this == null) {
throw new TypeError(' this is null or not defined');
}
var O = Object(this);
var len = O.length >>> 0;
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function');
}
if (arguments.length > 1) {
T = thisArg;
}
A = new Array(len);
k = 0;
while (k < len) {
var kValue, mappedValue;
if (k in O) {
kValue = O[k];
mappedValue = callback.call(T, kValue, k, O);
A[k] = mappedValue;
}
k++;
}
return A;
};
}
}(Array.prototype));
function onResizePromoRepublic() {
var
targets = document.querySelectorAll('.js-table-cell-emulate'),
allreadyCalculatedRows = [],
maxWindowSize = 900;
if(window.innerWidth >= maxWindowSize) {
[].forEach.call(targets, function(cell) {
var
row = cell.getAttribute('data-row'),
parent = cell.closest('.js-table-cell-emulate-wrap'),
allCells = parent.querySelectorAll('.js-table-cell-emulate[data-row=' + row + ']');
if (~allreadyCalculatedRows.indexOf(row)) return;
var sortedByHeight = [].map.call(allCells, function(cell) {
var heightTarget = cell.querySelector('.js-table-cell-emulate-target');
if (!heightTarget) heightTarget = cell;
return {
cell : cell,
height: heightTarget.offsetHeight
};
}).sort(function(cell1, cell2) {
return cell1.height - cell2.height
}),
maxHeight = sortedByHeight[sortedByHeight.length - 1].height;
sortedByHeight.forEach(function(item) {
item.cell.style.minHeight = maxHeight + 'px';
})
})
}
}
onResizePromoRepublic();
window.addEventListener('resize', onResizePromoRepublic);
// Table Cell Emulate end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment