wazuh-kibana-app/public/utils/dynamic-height.js

/*
 * Wazuh app - Helper class for div heights
 * Copyright (C) 2015-2019 Wazuh, Inc.
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Find more information about this on the LICENSE file.
 */
export class DynamicHeight {
  /**
   * Calculates dynamically the height
   * @param {String} classElement
   * @param {Number} extraHeight
   */
  static dynamicHeight(classElement, extraHeight, isLogs = false) {
    let editorContainer;
    const codeMirror = $('.CodeMirror');
    const interval = setInterval(() => {
      editorContainer = $(`.${classElement}`);
      if (editorContainer.length) {
        clearInterval(interval);
        setTimeout(() => {
          const windows = $(window).height();
          const offsetTop = DynamicHeight.getPosition(editorContainer[0]).y;
          const bottom = isLogs ? 75 : 20;
          const headerContainer = $('.wzXmlEditorHeader');
          const headerContainerHeight =
            headerContainer.height() + extraHeight
              ? headerContainer.height() + extraHeight
              : isLogs
              ? 0
              : 80;
          editorContainer.height(windows - (offsetTop + bottom));
          codeMirror.length
            ? $(`.${classElement} .CodeMirror`).height(
                windows - (offsetTop + bottom + headerContainerHeight)
              )
            : $(`.${classElement}`).height(
                windows - (offsetTop + bottom + headerContainerHeight)
              );
        }, 1);
      }
    }, 100);
  }

  /**
   * Calculate the dynamic height for the XML editor
   */
  static dynamicHeightXmlEditor() {
    let editorContainer;
    const interval = setInterval(() => {
      editorContainer = $('.wzXmlEditor');
      if (editorContainer.length) {
        clearInterval(interval);
        setTimeout(() => {
          const editorContainer = $('.wzXmlEditor');
          const headerContainer = $('#wzXmlEditorHeader');
          const windows = $(window).height();
          const offsetTop = DynamicHeight.getPosition(editorContainer[0]).y;
          editorContainer.height(windows - (offsetTop + 20));
          $('.wzXmlEditorBody .CodeMirror').css({
            height: 'calc(100% - ' + (headerContainer.height() - 22) + 'px)'
          });
        }, 1);
      }
    }, 100);
  }

  /**
   * Calculates the dynamic height for the dev tools
   * @param {Object} self
   * @param {Object} window
   */
  static dynamicHeightDevTools(self, window) {
    let devToolsElement;
    const interval = setInterval(() => {
      devToolsElement = $('#wz-dev-left-column');
      if (devToolsElement) {
        clearInterval(interval);
        setTimeout(() => {
          const windows = $(window).height();
          $('#wz-dev-left-column').height(
            windows -
              (DynamicHeight.getPosition($('#wz-dev-left-column')[0]).y + 20)
          );
          $('.wz-dev-column-separator').height(
            windows -
              (DynamicHeight.getPosition($('.wz-dev-column-separator')[0]).y +
                20)
          );
          $('#wz-dev-right-column').height(
            windows -
              (DynamicHeight.getPosition($('#wz-dev-right-column')[0]).y + 20)
          );
          $('.wz-dev-column-separator span').height(
            windows -
              (DynamicHeight.getPosition($('.wz-dev-column-separator span')[0])
                .y +
                20)
          );
        }, 1);
      }
    });
  }

  static getPosition(element) {
    let xPosition = 0;
    let yPosition = 0;

    while (element) {
      xPosition += element.offsetLeft - element.scrollLeft + element.clientLeft;
      yPosition += element.offsetTop - element.scrollTop + element.clientTop;
      element = element.offsetParent;
    }

    return { x: xPosition, y: yPosition };
  }
}