Advertisement
rdsedmundo

equalBoxesHeight

Jul 6th, 2017
120
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.     public equalBoxesHeights(): void {
  2.         const productsBoxes: HTMLCollectionOf<Element> = document.getElementsByClassName('my-product-box');
  3.  
  4.         [].forEach.call(
  5.             productsBoxes,
  6.             (node: HTMLElement) => {
  7.                 const box: HTMLElement = <HTMLElement> (node.querySelector('.gfi-box'));
  8.  
  9.                 if (box.style.height) {
  10.                     box.style.height = '';
  11.                 }
  12.             },
  13.         );
  14.  
  15.         const maxHeight: number = [].reduce.call(
  16.             productsBoxes,
  17.             (carry: number, node: HTMLElement) => {
  18.                 const height: number = Math.max(
  19.                     parseInt(window.getComputedStyle(node).getPropertyValue('height'), 10),
  20.                     node.offsetHeight,
  21.                     node.clientHeight,
  22.                     carry,
  23.                 );
  24.  
  25.                 return height;
  26.             },
  27.             0,
  28.         );
  29.  
  30.         [].forEach.call(
  31.             productsBoxes,
  32.             (node: HTMLElement) => {
  33.                 const box: HTMLElement = <HTMLElement> (node.querySelector('.gfi-box'));
  34.  
  35.                 node.style.overflow = 'hidden';
  36.                 box.style.minHeight = '0';
  37.                 box.style.height = `${maxHeight + 35}px`;
  38.             },
  39.         );
  40.     }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement