utilityFunctions

/**
 * Match Height Function
 * @note A helper function for setting a group of divs to the same height.
 * @param {el} is the group element the height is being set
 * @callback matchHeights('example_element');
 */
export function matchHeights(el) {

  // Grab divs with 'data-matchheights'
  let getDivs = document.querySelectorAll(el);

  // Find out how my divs there are with the class 'match-height' 
  const arrayLength = getDivs.length;
  let heights = [];

  // Create a loop that iterates through the getDivs variable and pushes the heights of the divs into an empty array
  for (let i = 0; i < arrayLength; i++) {
    heights.push(getDivs[i].offsetHeight);
  }

  // Find the largest of the divs
  function getHighest() {
    return Math.max(...heights);
  }

  // Set a variable equal to the tallest div
  const tallest = getHighest();

  // Iterate through getDivs and set all their height style equal to the tallest variable
  for (let i = 0; i < getDivs.length; i++) {
    getDivs[i].style.height = tallest + "px";
  }

}; // END matchHeights

/**
 * ForEach Function
 * @note A helper function for looping
 * @param {array} 
 * @param {callback} 
 * @param {scope}
 * @callback forEach('elements_loop','callback_function','function_scope');
 */
export function forEach(array, callback, scope) {

  // Loop over array elements
  for (let i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); 
  }

} // END forEach

/**
 * Sibling Selector Function
 * @note A helper function for selecting the siblings of an element being clicked, such as filter links.
 * @param {el} is the parent element to select 
 * @param {callback} is the class name to be applied to the child elements
 * @callback siblingSelector('example_element','example_class');
 */
export function siblingSelector(el, callback) {

  const parentNode = document.querySelector(el);

  // Loop over all children elements of the parent node
  for (let i = 0; i < parentNode.children.length; i++) {

    // On click of element, set 
    parentNode.children[i].addEventListener('click', () => {

      // Get the previous and next siblings of the clicked element
      let prevSiblings = parentNode.children[i].previousElementSibling;
      let nextSibling = parentNode.children[i].nextElementSibling;

      // Set the correct state for the clicked element and siblings
      parentNode.children[i].classList.add(callback);
      prevSiblings.classList.remove(callback);
      nextSibling.classList.remove(callback);

    });

  }

} // END siblingSelector