styledot
Version:
23andMe Design System
136 lines (112 loc) • 12.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.initTooltips = void 0;
var _tippy = _interopRequireDefault(require("tippy.js"));
var _keyboard = require("./utilities/keyboard");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function isMobile() {
var isMobilePixel = document.querySelector('.js-is-mobile-pixel');
if (!isMobilePixel) {
return false;
}
return window.getComputedStyle(isMobilePixel).display !== 'none';
}
/**
* Tippy.js Custom Plugins
*/
// Hide tooltips when ESC is pressed.
var hideOnEsc = {
name: 'hideOnEsc',
defaultValue: true,
fn: function fn(_ref) {
var hide = _ref.hide;
function onKeyDown(event) {
if ((0, _keyboard.isEscapeKeypress)(event)) {
hide();
}
}
return {
onShow: function onShow() {
document.addEventListener('keydown', onKeyDown);
},
onHide: function onHide() {
document.removeEventListener('keydown', onKeyDown);
}
};
}
};
var hideOnPopperBlur = {
name: 'hideOnPopperBlur',
defaultValue: true,
fn: function fn(instance) {
return {
onCreate: function onCreate() {
instance.popper.addEventListener('focusout', function (event) {
if (instance.props.hideOnPopperBlur && event.relatedTarget && !instance.popper.contains(event.relatedTarget)) {
instance.hide();
}
});
}
};
}
};
/**
* Tippy.js configuration
*/
var defaultProps = {
theme: 'light-border',
// Built-in theme that provides easy arrow "border"
arrow: true,
// Include an arrow pointing to reference element
touch: true,
// Open the tooltip when touching on a mobile device
trigger: 'mouseenter focus',
// Open the tooltip on mouse enter OR focus
zIndex: 2003,
// above sd-modal
allowHTML: true,
plugins: [hideOnEsc, hideOnPopperBlur]
};
var desktopTabletProps = {
offset: [0, 8],
// Distance: 8px away from the reference element
maxWidth: 300 // Do not allow tooltip > 300px on desktop.
}; // Mobile behavior is slightly different than the typical tooltip behavior.
var mobileProps = {
maxWidth: 'none'
}; // If the media query matches, then use the mobile props for setup, desktop/tablet otherwise.
var props = isMobile() ? _objectSpread(_objectSpread({}, defaultProps), mobileProps) : _objectSpread(_objectSpread({}, defaultProps), desktopTabletProps);
/**
* Global tooltip initialization
*/
var initTooltips = function initTooltips() {
var customInteractiveClasses = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var customClasses = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
_tippy["default"].setDefaultProps(props);
(0, _tippy["default"])('.js-tooltip.phenotype-symbol');
(0, _tippy["default"])('.js-tooltip.js-info-icon');
(0, _tippy["default"])('.js-interactive-tooltip', {
interactive: true
});
if (customInteractiveClasses) {
customInteractiveClasses.forEach(function (className) {
(0, _tippy["default"])(".".concat(className), {
interactive: true
});
});
}
if (customClasses) {
customClasses.forEach(function (className) {
(0, _tippy["default"])(".".concat(className), {
interactive: true
});
});
}
};
exports.initTooltips = initTooltips;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJpc01vYmlsZSIsImlzTW9iaWxlUGl4ZWwiLCJkb2N1bWVudCIsInF1ZXJ5U2VsZWN0b3IiLCJ3aW5kb3ciLCJnZXRDb21wdXRlZFN0eWxlIiwiZGlzcGxheSIsImhpZGVPbkVzYyIsIm5hbWUiLCJkZWZhdWx0VmFsdWUiLCJmbiIsImhpZGUiLCJvbktleURvd24iLCJldmVudCIsImlzRXNjYXBlS2V5cHJlc3MiLCJvblNob3ciLCJhZGRFdmVudExpc3RlbmVyIiwib25IaWRlIiwicmVtb3ZlRXZlbnRMaXN0ZW5lciIsImhpZGVPblBvcHBlckJsdXIiLCJpbnN0YW5jZSIsIm9uQ3JlYXRlIiwicG9wcGVyIiwicHJvcHMiLCJyZWxhdGVkVGFyZ2V0IiwiY29udGFpbnMiLCJkZWZhdWx0UHJvcHMiLCJ0aGVtZSIsImFycm93IiwidG91Y2giLCJ0cmlnZ2VyIiwiekluZGV4IiwiYWxsb3dIVE1MIiwicGx1Z2lucyIsImRlc2t0b3BUYWJsZXRQcm9wcyIsIm9mZnNldCIsIm1heFdpZHRoIiwibW9iaWxlUHJvcHMiLCJpbml0VG9vbHRpcHMiLCJjdXN0b21JbnRlcmFjdGl2ZUNsYXNzZXMiLCJjdXN0b21DbGFzc2VzIiwidGlwcHkiLCJzZXREZWZhdWx0UHJvcHMiLCJpbnRlcmFjdGl2ZSIsImZvckVhY2giLCJjbGFzc05hbWUiXSwic291cmNlcyI6WyIuLi9zcmMvbGliL3Rvb2x0aXAuanMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHRpcHB5IGZyb20gJ3RpcHB5LmpzJztcbmltcG9ydCB7IGlzRXNjYXBlS2V5cHJlc3MgfSBmcm9tICcuL3V0aWxpdGllcy9rZXlib2FyZCc7XG5cbmZ1bmN0aW9uIGlzTW9iaWxlKCkge1xuICAgIGNvbnN0IGlzTW9iaWxlUGl4ZWwgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuanMtaXMtbW9iaWxlLXBpeGVsJyk7XG5cbiAgICBpZiAoIWlzTW9iaWxlUGl4ZWwpIHtcbiAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1cblxuICAgIHJldHVybiB3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZShpc01vYmlsZVBpeGVsKS5kaXNwbGF5ICE9PSAnbm9uZSc7XG59XG5cbi8qKlxuICogVGlwcHkuanMgQ3VzdG9tIFBsdWdpbnNcbiAqL1xuLy8gSGlkZSB0b29sdGlwcyB3aGVuIEVTQyBpcyBwcmVzc2VkLlxuY29uc3QgaGlkZU9uRXNjID0ge1xuICAgIG5hbWU6ICdoaWRlT25Fc2MnLFxuICAgIGRlZmF1bHRWYWx1ZTogdHJ1ZSxcbiAgICBmbih7IGhpZGUgfSkge1xuICAgICAgICBmdW5jdGlvbiBvbktleURvd24oZXZlbnQpIHtcbiAgICAgICAgICAgIGlmIChpc0VzY2FwZUtleXByZXNzKGV2ZW50KSkge1xuICAgICAgICAgICAgICAgIGhpZGUoKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgb25TaG93KCkge1xuICAgICAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBvbktleURvd24pO1xuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIG9uSGlkZSgpIHtcbiAgICAgICAgICAgICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdrZXlkb3duJywgb25LZXlEb3duKTtcbiAgICAgICAgICAgIH0sXG4gICAgICAgIH07XG4gICAgfSxcbn07XG5cbmNvbnN0IGhpZGVPblBvcHBlckJsdXIgPSB7XG4gICAgbmFtZTogJ2hpZGVPblBvcHBlckJsdXInLFxuICAgIGRlZmF1bHRWYWx1ZTogdHJ1ZSxcbiAgICBmbihpbnN0YW5jZSkge1xuICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgb25DcmVhdGUoKSB7XG4gICAgICAgICAgICAgICAgaW5zdGFuY2UucG9wcGVyLmFkZEV2ZW50TGlzdGVuZXIoJ2ZvY3Vzb3V0JywgZXZlbnQgPT4ge1xuICAgICAgICAgICAgICAgICAgICBpZiAoXG4gICAgICAgICAgICAgICAgICAgICAgICBpbnN0YW5jZS5wcm9wcy5oaWRlT25Qb3BwZXJCbHVyICYmXG4gICAgICAgICAgICAgICAgICAgICAgICBldmVudC5yZWxhdGVkVGFyZ2V0ICYmXG4gICAgICAgICAgICAgICAgICAgICAgICAhaW5zdGFuY2UucG9wcGVyLmNvbnRhaW5zKGV2ZW50LnJlbGF0ZWRUYXJnZXQpXG4gICAgICAgICAgICAgICAgICAgICkge1xuICAgICAgICAgICAgICAgICAgICAgICAgaW5zdGFuY2UuaGlkZSgpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9LFxuICAgICAgICB9O1xuICAgIH0sXG59O1xuXG4vKipcbiAqIFRpcHB5LmpzIGNvbmZpZ3VyYXRpb25cbiAqL1xuY29uc3QgZGVmYXVsdFByb3BzID0ge1xuICAgIHRoZW1lOiAnbGlnaHQtYm9yZGVyJywgLy8gQnVpbHQtaW4gdGhlbWUgdGhhdCBwcm92aWRlcyBlYXN5IGFycm93IFwiYm9yZGVyXCJcbiAgICBhcnJvdzogdHJ1ZSwgLy8gSW5jbHVkZSBhbiBhcnJvdyBwb2ludGluZyB0byByZWZlcmVuY2UgZWxlbWVudFxuICAgIHRvdWNoOiB0cnVlLCAvLyBPcGVuIHRoZSB0b29sdGlwIHdoZW4gdG91Y2hpbmcgb24gYSBtb2JpbGUgZGV2aWNlXG4gICAgdHJpZ2dlcjogJ21vdXNlZW50ZXIgZm9jdXMnLCAvLyBPcGVuIHRoZSB0b29sdGlwIG9uIG1vdXNlIGVudGVyIE9SIGZvY3VzXG4gICAgekluZGV4OiAyMDAzLCAvLyBhYm92ZSBzZC1tb2RhbFxuICAgIGFsbG93SFRNTDogdHJ1ZSxcbiAgICBwbHVnaW5zOiBbaGlkZU9uRXNjLCBoaWRlT25Qb3BwZXJCbHVyXSxcbn07XG5cbmNvbnN0IGRlc2t0b3BUYWJsZXRQcm9wcyA9IHtcbiAgICBvZmZzZXQ6IFswLCA4XSwgLy8gRGlzdGFuY2U6IDhweCBhd2F5IGZyb20gdGhlIHJlZmVyZW5jZSBlbGVtZW50XG4gICAgbWF4V2lkdGg6IDMwMCwgLy8gRG8gbm90IGFsbG93IHRvb2x0aXAgPiAzMDBweCBvbiBkZXNrdG9wLlxufTtcblxuLy8gTW9iaWxlIGJlaGF2aW9yIGlzIHNsaWdodGx5IGRpZmZlcmVudCB0aGFuIHRoZSB0eXBpY2FsIHRvb2x0aXAgYmVoYXZpb3IuXG5jb25zdCBtb2JpbGVQcm9wcyA9IHtcbiAgICBtYXhXaWR0aDogJ25vbmUnLFxufTtcblxuLy8gSWYgdGhlIG1lZGlhIHF1ZXJ5IG1hdGNoZXMsIHRoZW4gdXNlIHRoZSBtb2JpbGUgcHJvcHMgZm9yIHNldHVwLCBkZXNrdG9wL3RhYmxldCBvdGhlcndpc2UuXG5jb25zdCBwcm9wcyA9IGlzTW9iaWxlKCkgPyB7XG4gICAgLi4uZGVmYXVsdFByb3BzLFxuICAgIC4uLm1vYmlsZVByb3BzLFxufSA6IHtcbiAgICAuLi5kZWZhdWx0UHJvcHMsXG4gICAgLi4uZGVza3RvcFRhYmxldFByb3BzLFxufTtcblxuLyoqXG4gKiBHbG9iYWwgdG9vbHRpcCBpbml0aWFsaXphdGlvblxuICovXG5jb25zdCBpbml0VG9vbHRpcHMgPSAoY3VzdG9tSW50ZXJhY3RpdmVDbGFzc2VzID0gbnVsbCwgY3VzdG9tQ2xhc3NlcyA9IG51bGwpID0+IHtcbiAgICB0aXBweS5zZXREZWZhdWx0UHJvcHMocHJvcHMpO1xuICAgIHRpcHB5KCcuanMtdG9vbHRpcC5waGVub3R5cGUtc3ltYm9sJyk7XG4gICAgdGlwcHkoJy5qcy10b29sdGlwLmpzLWluZm8taWNvbicpO1xuICAgIHRpcHB5KCcuanMtaW50ZXJhY3RpdmUtdG9vbHRpcCcsIHtcbiAgICAgICAgaW50ZXJhY3RpdmU6IHRydWUsXG4gICAgfSk7XG4gICAgaWYgKGN1c3RvbUludGVyYWN0aXZlQ2xhc3Nlcykge1xuICAgICAgICBjdXN0b21JbnRlcmFjdGl2ZUNsYXNzZXMuZm9yRWFjaChjbGFzc05hbWUgPT4ge1xuICAgICAgICAgICAgdGlwcHkoYC4ke2NsYXNzTmFtZX1gLCB7XG4gICAgICAgICAgICAgICAgaW50ZXJhY3RpdmU6IHRydWUsXG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfSk7XG4gICAgfVxuICAgIGlmIChjdXN0b21DbGFzc2VzKSB7XG4gICAgICAgIGN1c3RvbUNsYXNzZXMuZm9yRWFjaChjbGFzc05hbWUgPT4ge1xuICAgICAgICAgICAgdGlwcHkoYC4ke2NsYXNzTmFtZX1gLCB7XG4gICAgICAgICAgICAgICAgaW50ZXJhY3RpdmU6IHRydWUsXG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfSk7XG4gICAgfVxufTtcblxuZXhwb3J0IHsgaW5pdFRvb2x0aXBzIH07XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7QUFDQTs7Ozs7Ozs7OztBQUVBLFNBQVNBLFFBQVQsR0FBb0I7RUFDaEIsSUFBTUMsYUFBYSxHQUFHQyxRQUFRLENBQUNDLGFBQVQsQ0FBdUIscUJBQXZCLENBQXRCOztFQUVBLElBQUksQ0FBQ0YsYUFBTCxFQUFvQjtJQUNoQixPQUFPLEtBQVA7RUFDSDs7RUFFRCxPQUFPRyxNQUFNLENBQUNDLGdCQUFQLENBQXdCSixhQUF4QixFQUF1Q0ssT0FBdkMsS0FBbUQsTUFBMUQ7QUFDSDtBQUVEO0FBQ0E7QUFDQTtBQUNBOzs7QUFDQSxJQUFNQyxTQUFTLEdBQUc7RUFDZEMsSUFBSSxFQUFFLFdBRFE7RUFFZEMsWUFBWSxFQUFFLElBRkE7RUFHZEMsRUFIYyxvQkFHRDtJQUFBLElBQVJDLElBQVEsUUFBUkEsSUFBUTs7SUFDVCxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtNQUN0QixJQUFJLElBQUFDLDBCQUFBLEVBQWlCRCxLQUFqQixDQUFKLEVBQTZCO1FBQ3pCRixJQUFJO01BQ1A7SUFDSjs7SUFDRCxPQUFPO01BQ0hJLE1BREcsb0JBQ007UUFDTGIsUUFBUSxDQUFDYyxnQkFBVCxDQUEwQixTQUExQixFQUFxQ0osU0FBckM7TUFDSCxDQUhFO01BSUhLLE1BSkcsb0JBSU07UUFDTGYsUUFBUSxDQUFDZ0IsbUJBQVQsQ0FBNkIsU0FBN0IsRUFBd0NOLFNBQXhDO01BQ0g7SUFORSxD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