{"size": 2993, "ext": "js", "max_stars_repo_path": "web-frontend/modules/core/mixins/dropdownHelpers.js", "max_stars_repo_name": "ashishdhngr/baserow", "max_stars_repo_stars_event_min_datetime": "2020-07-20T13:29:34.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-31T21:09:16.000Z", "max_issues_repo_path": "web-frontend/modules/core/mixins/dropdownHelpers.js", "max_issues_repo_name": "rasata/baserow", "max_issues_repo_issues_event_min_datetime": "2020-08-07T09:23:58.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-01T22:32:40.000Z", "max_forks_repo_path": "web-frontend/modules/core/mixins/dropdownHelpers.js", "max_forks_repo_name": "rasata/baserow", "max_forks_repo_forks_event_min_datetime": "2020-08-04T01:48:01.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-27T13:30:54.000Z"}
{"max_stars_count": 839, "max_issues_count": 28, "max_forks_count": 79, "avg_line_length": 41.5694444444, "max_line_length": 95, "alphanum_fraction": 0.7049782827}
export default {
  methods: {
    /**
     * This method is a helper for extracting certain style properties of a parent container
     * and one of it's child items. This is helpful for determining the amount of pixels
     * to scroll in order to get a child element aligned at the bottom of the parent container,
     * either when scrolling by keydown/keyup or manually setting a scroll position.
     *
     * It expects the parent container to have :before and :after pseudo elements.
     *
     * Returns an object containing the following:
     *
     * parentContainerHeight: The height of the parent container.
     * parentContainerAfterHeight: The height of the parents 'after' pseudo element.
     * parentContainerBeforeHeight: The height of the parents 'before' pseudo element.
     * itemHeightWithMargins: The height of the child item including its margins.
     * itemMarginTop: The top margin of the child item.
     * itemMarginBottom: The bottom margin of the child item.
     * itemsInView: The amount of times the child item fits into the parent viewport.
     */
    getStyleProperties(parentContainer, childItem) {
      // Styles of the childItem. Needed in order to get margins and height
      const childItemStyles =
        childItem.currentStyle || window.getComputedStyle(childItem)

      // Styles of the parent container. Needed in order to get
      // ::before height and ::after height
      const parentContainerBeforeStyles =
        parentContainer.currentStyle ||
        window.getComputedStyle(parentContainer, ':before')

      const parentContainerAfterStyles =
        parentContainer.currentStyle ||
        window.getComputedStyle(parentContainer, ':after')

      const parentContainerBeforeHeight = parseInt(
        parentContainerBeforeStyles.height
      )
      const parentContainerAfterHeight = parseInt(
        parentContainerAfterStyles.height
      )
      const parentContainerHeight = parentContainer.clientHeight

      const itemHeight = parseInt(childItemStyles.height)
      const itemMarginTop = parseInt(childItemStyles.marginTop)
      const itemMarginBottom = parseInt(childItemStyles.marginBottom)
      const itemHeightWithMargins =
        itemHeight + itemMarginTop + itemMarginBottom

      // Based on the values set in the SCSS files. The height of a dropdowns select
      // item is set to 32px and the height of the select_items window is set to 4 *
      // 36 (select item height plus margins) plus 20 (heights of before and after
      // pseudo elements) so that there is room for four elements
      const itemsInView =
        (parentContainerHeight -
          parentContainerBeforeHeight -
          parentContainerAfterHeight) /
        itemHeightWithMargins

      return {
        parentContainerHeight,
        parentContainerAfterHeight,
        parentContainerBeforeHeight,
        itemHeightWithMargins,
        itemMarginTop,
        itemMarginBottom,
        itemsInView,
      }
    },
  },
}
