/**
 * @module tgam-patterns-dimensions
 */

/**
 * @method dimensions
 * @description returns the width and height of a DOM element
 * @param el {HTMLElement} - an html element
 * @return {object} An object that exposes width and height properties of the element
 */
export function getDimensions(el) {
  return el.getBoundingClientRect();
}

/**
 * @method getPercentageOfElementInViewport
 * @description returns a percentage of an element viewable in the viewport
 * @param el {HTMLElement} - an html element
 * @return {number}
 */
export function getPercentageOfElementInViewport(el) {
  const windowHeight = (window.innerHeight || document.body.clientHeight);
  const d = getDimensions(el);

  if (!windowHeight || d.top > windowHeight) {
    return 0;
  } else if (d.bottom < windowHeight) {
    return 100;
  } else {
    const a = Math.abs(windowHeight - d.top);
    const b = d.height;
    return Math.round((a / b) * 100);
  }
}
