Tooltip interactive: Boven

/**
 * Component
 *
 * @param {Element} element
 */

export default function TooltipInteractive() {
  /* eslint-disable */

  var btnNodes = document.getElementsByClassName("tooltip--interactive--triggerwrapper-trigger");
  var tooltipNodes = document.getElementsByClassName("tooltip--interactive--body--content");
  var triangleNodes = document.getElementsByClassName("tooltip--interactive--body--triangle");
  var buttonWrapper = document.getElementsByClassName("tooltip--interactive--triggerwrapper");
  var tooltip = document.getElementsByClassName("tooltip--interactive--body");
  var crossButton = document.getElementsByClassName("cross");

  function toggleVisible(number) {
    tooltipNodes[number].classList.add("visible");
    triangleNodes[number].classList.add("visible");
    tooltipNodes[number].style.display = "block";
    tooltip[number].setAttribute("aria-hidden", "false");
  }

  function toggleHidden() {
    for (let i = 0; i < tooltipNodes.length; i++) {
      if (tooltipNodes[i]) {
        tooltipNodes[i].classList.remove("visible");
      }
    }
    for (let i = 0; i < triangleNodes.length; i++) {
      if (triangleNodes[i]) {
        triangleNodes[i].classList.remove("visible");
      }
    }
    for (let i = 0; i < tooltip.length; i++) {
      if (tooltip[i]) {
        tooltip[i].setAttribute("aria-hidden", "true");
      }
    }
    var width = window.innerWidth;
    if (width <= 480) {
      for (let i = 0; i < tooltipNodes.length; i++) {
        if (tooltipNodes[i]) {
          tooltipNodes[i].style.display = "none";
        }
      }
    }
  }

  for (var i = 0; i < btnNodes.length; i++) {
    btnNodes[i].addEventListener('click', (function (j) {
        return function () {
          if (!tooltipNodes[j].classList.contains("visible")) {
            tooltipPlacement(j);
            toggleHidden();
            toggleVisible(j);
          } else {
            toggleHidden();
          }
        }
      })(i)
    )
  }

  for (var i = 0; i < crossButton.length; i++) {
    crossButton[i].addEventListener("click", function () {
      toggleHidden();
    });
  }

  //Press esc to exit tooltip
  document.addEventListener("keyup", function (e) {
    if (e.keyCode == 27) {
      toggleHidden();
    }
  });

  //click outside the tooltip to exit
  window.addEventListener("click", function (event) {
    var clickedInsideTooltipOrButton = false;

    for (var y = 0; y < btnNodes.length; y++) {
      var buttonChildElements = [];
      var iconPath = this.document.getElementsByTagName("path")[y];
      while (iconPath != buttonWrapper[y]) {
        buttonChildElements.unshift(iconPath);
        iconPath = iconPath.parentNode;
      }
      buttonChildElements.forEach(function (node) {
        if (node == event.target) {
          clickedInsideTooltipOrButton = true;
        }
      });

      var tooltipChildElements = [];
      for (var i = 0; i <= tooltipNodes[y].getElementsByTagName("*").length; i++) {
        tooltipChildElements.push(tooltipNodes[y].getElementsByTagName("*")[i]);
      }
      tooltipChildElements.forEach(function (node) {
        if (node == event.target || event.target == tooltipNodes[y]) {
          clickedInsideTooltipOrButton = true;
        }
      });
    }
    if (!clickedInsideTooltipOrButton) {
      toggleHidden();
    }
  });

  function addRemoveClassTooltip(placement, tooltipNumber) {
    var tooltip = document.getElementsByClassName("tooltip--interactive--body")[tooltipNumber];
    var tooltipArrow = document.getElementsByClassName("tooltip--interactive--body--triangle")[tooltipNumber];

    tooltip.classList.remove("tooltip--interactive--body_left");
    tooltipArrow.classList.remove("tooltip--interactive--body--triangle_left");
    tooltip.classList.remove("tooltip--interactive--body_right");
    tooltipArrow.classList.remove("tooltip--interactive--body--triangle_right");
    tooltip.classList.remove("tooltip--interactive--body_bottom");
    tooltipArrow.classList.remove("tooltip--interactive--body--triangle_bottom");
    tooltip.classList.remove("tooltip--interactive--body_top");
    tooltipArrow.classList.remove("tooltip--interactive--body--triangle_top");


    switch (placement) {
      case "left":
        tooltip.classList.add("tooltip--interactive--body_left");
        tooltipArrow.classList.add("tooltip--interactive--body--triangle_left");
        break;
      case "right":
        tooltip.classList.add("tooltip--interactive--body_right");
        tooltipArrow.classList.add("tooltip--interactive--body--triangle_right");
        break;
      case "bottom":
        tooltip.classList.add("tooltip--interactive--body_bottom");
        tooltipArrow.classList.add("tooltip--interactive--body--triangle_bottom");
        break;
      case "top":
        tooltip.classList.add("tooltip--interactive--body_top");
        tooltipArrow.classList.add("tooltip--interactive--body--triangle_top");
        break;
    }
  }

  function tooltipPlacement(tooltipNumber) {

    var tooltipInteractive = document.getElementsByClassName("tooltip--interactive")[tooltipNumber];
    var checkBoven = document.getElementsByClassName("tooltip--interactive--body_top")[tooltipNumber];
    var checkOnder = document.getElementsByClassName("tooltip--interactive--body_bottom")[tooltipNumber];
    var tooltipStyle = window.getComputedStyle(document.getElementsByClassName("tooltip--interactive--body--content")[tooltipNumber]);
    var windowHeight = window.innerHeight;
    var windowWidth = window.innerWidth;

    //check if tooltip is either top or bottom
    if (checkBoven || checkOnder != undefined) {
      var tooltipHalfWidth = parseFloat(tooltipStyle.width) / 2;
      var wrapperOffset = document.getElementsByClassName("tooltip--interactive--triggerwrapper")[tooltipNumber].offsetWidth / 2;
      var marginLeftTooltip = tooltipInteractive.getBoundingClientRect().left + wrapperOffset;
      var marginRightTooltip = windowWidth - marginLeftTooltip;

      if (windowWidth >= 700) {
        if (tooltipHalfWidth > marginRightTooltip) {
          //tooltip should go left
          addRemoveClassTooltip("left", tooltipNumber);
        }

        if (tooltipHalfWidth > marginLeftTooltip) {
          //tooltip should go right
          addRemoveClassTooltip("right", tooltipNumber);
        }
      }

      var tooltipHeight = parseFloat(tooltipStyle.height);
      var arrow = document.getElementsByClassName("tooltip--interactive--body--triangle_top")[tooltipNumber] ||
        document.getElementsByClassName("tooltip--interactive--body--triangle_bottom")[tooltipNumber];
      if (arrow != undefined) {
        var arrowStyle = window.getComputedStyle(arrow);
        var arrowHeight = parseFloat(arrowStyle.top);
      }
      if (arrowHeight < 0) {
        arrowHeight = arrowHeight * -1;
      }
      var totalTooltipHeight = tooltipHeight + arrowHeight;
      var marginTopTooltip = tooltipInteractive.getBoundingClientRect().top;
      var marginBottomTooltip = windowHeight - marginTopTooltip;

      if (marginTopTooltip < totalTooltipHeight) {
        //tooltip should go down
        addRemoveClassTooltip("bottom", tooltipNumber);
      }

      if (marginBottomTooltip < totalTooltipHeight) {
        //tooltip should go up
        addRemoveClassTooltip("top", tooltipNumber);
      }
    }

    //check if tooltip is either left or right
    var checkLinks = document.getElementsByClassName("tooltip--interactive--body_left")[tooltipNumber];
    var checkRechts = document.getElementsByClassName("tooltip--interactive--body_right")[tooltipNumber];

    if (checkLinks || checkRechts != undefined) {
      var tooltipHalfHeight = parseFloat(tooltipStyle.height) / 2;
      var marginTopTooltip = tooltipInteractive.getBoundingClientRect().top;
      var marginBottomTooltip = windowHeight - marginTopTooltip;

      if (tooltipHalfHeight > marginTopTooltip) {
        //tooltip should go down
        addRemoveClassTooltip("bottom", tooltipNumber);
      }

      if (tooltipHalfHeight > marginBottomTooltip) {
        //tooltip should go up
        addRemoveClassTooltip("top", tooltipNumber);
      }

      var tooltipWidth = parseFloat(tooltipStyle.width);
      var arrow = document.getElementsByClassName("tooltip--interactive--body--triangle_left")[tooltipNumber] ||
        document.getElementsByClassName("tooltip--interactive--body--triangle_right")[tooltipNumber];
      if (arrow != undefined) {
        var arrowStyle = window.getComputedStyle(arrow);
        var arrowWidth = parseFloat(arrowStyle.left) || parseFloat(arrowStyle.right);
      }
      var totalTooltipWidth = tooltipWidth + arrowWidth;
      var wrapperOffset = document.getElementsByClassName("tooltip--interactive--triggerwrapper")[tooltipNumber].offsetWidth / 2;
      var marginLeftTooltip = tooltipInteractive.getBoundingClientRect().left + wrapperOffset;
      var marginRightTooltip = windowWidth - marginLeftTooltip;

      if (totalTooltipWidth > marginRightTooltip && totalTooltipWidth > marginLeftTooltip) {
        //tooltip should go down
        addRemoveClassTooltip("bottom", tooltipNumber);
      } else {
        if (totalTooltipWidth > marginLeftTooltip) {
          //tooltip should go right
          addRemoveClassTooltip("right", tooltipNumber);
        }

        if (totalTooltipWidth > marginRightTooltip) {
          //tooltip should go left
          addRemoveClassTooltip("left", tooltipNumber);
        }
      }
    }
  }
}