<commit_before>import $ from "jquery";
import './tooltip.scss';

const TOOLTIP_CLASS = 'tooltip';
const TOOLTIP_ARROW_CLASS = 'arrow';
const TOOLTIP_ARROW_BORDER_WIDTH = 5;
const TOOLTIP_MARGIN = 2;
const TOOLTIP_DEFAULT_BACKGROUND_COLOR = 'rgba(0, 0, 0, .8)';
const TOOLTIP_FADE_SPEED = 'slow';
const POSITION_FN = {
  top: positionTooltipToTop,
  left: positionTooltipToLeft,
  right: positionTooltipToRight,
  bottom: positionTooltipToBottom
};

export const tooltip = {
  inserted: (el, binding) => {
    const $body = $('body');
    const $el = $(el);
    const $tooltip = createTooltip($body, $el, binding);
    $el.mouseenter(() => {
      $tooltip
        .stop()
        .hide()
        .appendTo($body)
        .fadeIn(TOOLTIP_FADE_SPEED || binding.value.fade);
    });
    $el.mouseleave(() => {
      $tooltip
        .stop()
        .fadeOut(TOOLTIP_FADE_SPEED || binding.value.fade, () => {
          $tooltip.detach();
        });
    });
  }
};

export function createTooltip($body, $el, binding) {
  const $arrow = createTooltipArrow();
  const $tooltip = $(document.createElement('span'));
  $tooltip.html(binding.value.message);
  $tooltip.append($arrow);
  if (binding.value.color) {
    $tooltip.css('color', binding.value.color);
  }
  if (binding.value.backgroundColor) {
    $tooltip.css('background-color', binding.value.backgroundColor);
  }
  $tooltip.addClass(TOOLTIP_CLASS);
  $body.append($tooltip);
  POSITION_FN[binding.value.position || 'right']($el, $tooltip, $arrow, binding);
  $tooltip.detach();
  return $tooltip;
}

export function createTooltipArrow() {
  const $arrow = $(document.createElement('span'));
  $arrow.addClass(TOOLTIP_ARROW_CLASS);
  return $arrow;
}

export function positionTooltipToTop($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top - $tooltip.outerHeight() - (TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_MARGIN)),
    left: $el.offset().left + ($el.outerWidth() / 2) - ($tooltip.outerWidth() / 2)
  });
  $arrow.css({
    top: '100%',
    left: '50%',
    marginLeft: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderTopColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}

export function positionTooltipToRight($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top + ($el.outerHeight() / 2) - ($tooltip.outerHeight() / 2),
    left: $el.offset().left + $el.outerWidth() + TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_MARGIN)
  });
  $arrow.css({
    top: '50%',
    right: '100%',
    marginTop: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderRightColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}

export function positionTooltipToLeft($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top + ($el.outerHeight() / 2) - ($tooltip.outerHeight() / 2),
    left: $el.offset().left - $tooltip.outerWidth() - (TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_MARGIN))
  });
  $arrow.css({
    top: '50%',
    left: '100%',
    marginTop: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderLeftColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}

export function positionTooltipToBottom($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top + $el.outerHeight() + TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_MARGIN),
    left: $el.offset().left + ($el.outerWidth() / 2) - ($tooltip.outerWidth() / 2)
  });
  $arrow.css({
    bottom: '100%',
    left: '50%',
    marginLeft: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderBottomColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}<commit_msg>refactor(tooltip): change tooltip directive constants<commit_after>import $ from "jquery";
import './tooltip.scss';

const TOOLTIP_CLASS = 'tooltip';
const TOOLTIP_ARROW_CLASS = 'arrow';
const TOOLTIP_ARROW_BORDER_WIDTH = 5;
const TOOLTIP_DEFAULT_MARGIN = 2;
const TOOLTIP_DEFAULT_BACKGROUND_COLOR = 'rgba(0, 0, 0, .8)';
const TOOLTIP_DEFAULT_FADE_SPEED = 'slow';
const TOOLTIP_DEFAULT_POSITION = 'right';
const POSITION_FN = {
  top: positionTooltipToTop,
  left: positionTooltipToLeft,
  right: positionTooltipToRight,
  bottom: positionTooltipToBottom
};

export const tooltip = {
  inserted: (el, binding) => {
    const $body = $('body');
    const $el = $(el);
    const $tooltip = createTooltip($body, $el, binding);
    $el.mouseenter(() => {
      $tooltip
        .stop()
        .hide()
        .appendTo($body)
        .fadeIn(TOOLTIP_DEFAULT_FADE_SPEED || binding.value.fade);
    });
    $el.mouseleave(() => {
      $tooltip
        .stop()
        .fadeOut(TOOLTIP_DEFAULT_FADE_SPEED || binding.value.fade, () => {
          $tooltip.detach();
        });
    });
  }
};

export function createTooltip($body, $el, binding) {
  const $arrow = createTooltipArrow();
  const $tooltip = $(document.createElement('span'));
  $tooltip.html(binding.value.message);
  $tooltip.append($arrow);
  if (binding.value.color) {
    $tooltip.css('color', binding.value.color);
  }
  if (binding.value.backgroundColor) {
    $tooltip.css('background-color', binding.value.backgroundColor);
  }
  $tooltip.addClass(TOOLTIP_CLASS);
  $body.append($tooltip);
  POSITION_FN[binding.value.position || TOOLTIP_DEFAULT_POSITION]($el, $tooltip, $arrow, binding);
  $tooltip.detach();
  return $tooltip;
}

export function createTooltipArrow() {
  const $arrow = $(document.createElement('span'));
  $arrow.addClass(TOOLTIP_ARROW_CLASS);
  return $arrow;
}

export function positionTooltipToTop($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top - $tooltip.outerHeight() - (TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_DEFAULT_MARGIN)),
    left: $el.offset().left + ($el.outerWidth() / 2) - ($tooltip.outerWidth() / 2)
  });
  $arrow.css({
    top: '100%',
    left: '50%',
    marginLeft: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderTopColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}

export function positionTooltipToRight($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top + ($el.outerHeight() / 2) - ($tooltip.outerHeight() / 2),
    left: $el.offset().left + $el.outerWidth() + TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_DEFAULT_MARGIN)
  });
  $arrow.css({
    top: '50%',
    right: '100%',
    marginTop: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderRightColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}

export function positionTooltipToLeft($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top + ($el.outerHeight() / 2) - ($tooltip.outerHeight() / 2),
    left: $el.offset().left - $tooltip.outerWidth() - (TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_DEFAULT_MARGIN))
  });
  $arrow.css({
    top: '50%',
    left: '100%',
    marginTop: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderLeftColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}

export function positionTooltipToBottom($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top + $el.outerHeight() + TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_DEFAULT_MARGIN),
    left: $el.offset().left + ($el.outerWidth() / 2) - ($tooltip.outerWidth() / 2)
  });
  $arrow.css({
    bottom: '100%',
    left: '50%',
    marginLeft: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderBottomColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}
{'fraction_non_alphanumeric': 0.1647945024448262, 'fraction_numerical': 0.010043610413638165, 'mean_word_length': 4.151803948264125, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2101383', 'n_tokens_mistral': 2725, 'n_tokens_neox': 2657, 'n_words': 459}