maycur-business/lib/Tippy/js/core/createPopperElement.js

maycur business react components of web

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = createPopperElement;

var _getCorePlacement = _interopRequireDefault(require("../utils/getCorePlacement"));

var _getOffsetDistanceInPx = _interopRequireDefault(require("../utils/getOffsetDistanceInPx"));

var _utils = _interopRequireDefault(require("../../../utils/utils"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var prefix = _utils["default"].prefixCls;
/**
* Creates a popper element then returns it
* @param {Number} id - the popper id
* @param {String} title - the tooltip's `title` attribute
* @param {Object} settings - individual settings
* @return {Element} - the popper element
*/

function createPopperElement(id, title, settings) {
  var position = settings.position,
      distance = settings.distance,
      arrow = settings.arrow,
      animateFill = settings.animateFill,
      inertia = settings.inertia,
      animation = settings.animation,
      arrowSize = settings.arrowSize,
      size = settings.size,
      theme = settings.theme,
      html = settings.html,
      zIndex = settings.zIndex,
      interactive = settings.interactive,
      test = settings.test;
  var popper = document.createElement('div');
  popper.setAttribute('class', "".concat(prefix, "-tippy-popper"));
  popper.setAttribute('role', 'tooltip');
  popper.setAttribute('aria-hidden', 'true');
  popper.setAttribute('id', "".concat(prefix, "-tippy-tooltip-").concat(id));
  popper.style.zIndex = zIndex;
  var tooltip = document.createElement('div');
  tooltip.setAttribute('class', "".concat(prefix, "-tippy-tooltip ").concat(prefix, "-tippy-tooltip--").concat(size, " leave ").concat(test ? 'tippy-test' : null));
  tooltip.setAttribute('data-animation', animation);
  theme.split(' ').forEach(function (t) {
    tooltip.classList.add(t + '-theme');
  });

  if (arrow) {
    // Add an arrow
    var _arrow = document.createElement('div');

    _arrow.setAttribute('class', "arrow-".concat(arrowSize));

    _arrow.setAttribute('x-arrow', '');

    tooltip.appendChild(_arrow);
  }

  if (animateFill) {
    // Create animateFill circle element for animation
    tooltip.setAttribute('data-animatefill', '');
    var circle = document.createElement('div');
    circle.setAttribute('class', 'leave');
    circle.setAttribute('x-circle', '');
    tooltip.appendChild(circle);
  }

  if (inertia) {
    // Change transition timing function cubic bezier
    tooltip.setAttribute('data-inertia', '');
  }

  if (interactive) {
    tooltip.setAttribute('data-interactive', '');
  } // Tooltip content (text or HTML)


  var content = document.createElement('div');
  content.setAttribute('class', "".concat(prefix, "-tippy-tooltip-content"));

  if (html) {
    var templateId;

    if (html instanceof Element) {
      content.appendChild(html);
      templateId = '#' + html.id || 'tippy-html-template';
    } else {
      content.innerHTML = document.getElementById(html.replace('#', '')).innerHTML;
      templateId = html;
    }

    popper.classList.add('html-template');
    interactive && popper.setAttribute('tabindex', '-1');
    tooltip.setAttribute('data-template-id', templateId);
  } else {
    content.innerHTML = title;
  } // Init distance. Further updates are made in the popper instance's `onUpdate()` method


  tooltip.style[(0, _getCorePlacement["default"])(position)] = (0, _getOffsetDistanceInPx["default"])(distance);
  tooltip.appendChild(content);
  popper.appendChild(tooltip); // var observer = new MutationObserver(function (mutations, observer) {
  //   mutations.forEach(function (mutation) {
  //     console.log(mutation.target.getAttribute('x-placement'));
  //   });
  // });
  // var config = {
  //   attributes: true,
  //   // attributeOldValue: true,
  //   attributeFilter: [
  //     'x-placement'
  //   ]
  // };
  // observer.observe(popper, config);

  return popper;
}