carbon-components
Version:
The Carbon Design System is IBM’s open-source design system for products and experiences.
117 lines (107 loc) • 3.83 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2018
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import debounce from 'lodash.debounce';
import settings from '../../globals/js/settings';
import mixin from '../../globals/js/misc/mixin';
import createComponent from '../../globals/js/mixins/create-component';
import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
import handles from '../../globals/js/mixins/handles';
import eventMatches from '../../globals/js/misc/event-matches';
import on from '../../globals/js/misc/on';
export default class TooltipSimple extends mixin(
createComponent,
initComponentBySearch,
handles
) {
/**
* Simple Tooltip.
* @extends CreateComponent
* @extends InitComponentBySearch
* @extends Handles
* @param {HTMLElement} element - The element functioning as a text field.
*/
constructor(element, options) {
super(element, options);
this.manage(
on(this.element.ownerDocument, 'keydown', (event) => {
// ESC
if (event.which === 27) {
this.allowTooltipVisibility({ visible: false });
const tooltipTriggerButton = this.getTooltipTriggerButton();
if (tooltipTriggerButton) {
tooltipTriggerButton.classList.remove(
this.options.classTooltipVisible
);
}
}
})
);
this.manage(
on(this.element, 'mouseenter', () => {
this.tooltipFadeOut.cancel();
this.allowTooltipVisibility({ visible: true });
const tooltipTriggerButton = this.getTooltipTriggerButton();
if (tooltipTriggerButton) {
tooltipTriggerButton.classList.add(this.options.classTooltipVisible);
}
})
);
this.manage(on(this.element, 'mouseleave', this.tooltipFadeOut));
this.manage(
on(this.element, 'focusin', (event) => {
if (eventMatches(event, this.options.selectorTriggerButton)) {
this.allowTooltipVisibility({ visible: true });
}
})
);
}
tooltipFadeOut = debounce(() => {
const tooltipTriggerButton = this.getTooltipTriggerButton();
if (tooltipTriggerButton) {
tooltipTriggerButton.classList.remove(this.options.classTooltipVisible);
}
}, 100);
getTooltipTriggerButton = () =>
this.element.matches(this.options.selectorTriggerButton)
? this.element
: this.element.querySelector(this.options.selectorTriggerButton);
allowTooltipVisibility = ({ visible }) => {
const tooltipTriggerButton = this.getTooltipTriggerButton();
if (!tooltipTriggerButton) {
return;
}
if (visible) {
tooltipTriggerButton.classList.remove(this.options.classTooltipHidden);
} else {
tooltipTriggerButton.classList.add(this.options.classTooltipHidden);
}
};
/**
* The component options.
*
* If `options` is specified in the constructor,
* {@linkcode TooltipSimple.create .create()},
* or {@linkcode TooltipSimple.init .init()},
* properties in this object are overridden for the instance being
* created and how {@linkcode TooltipSimple.init .init()} works.
* @property {string} selectorInit The CSS selector to find simple tooltip UIs.
*/
static get options() {
const { prefix } = settings;
return {
selectorInit: '[data-tooltip-definition],[data-tooltip-icon]',
selectorTriggerButton: `.${prefix}--tooltip__trigger.${prefix}--tooltip--a11y`,
classTooltipHidden: `${prefix}--tooltip--hidden`,
classTooltipVisible: `${prefix}--tooltip--visible`,
};
}
/**
* The map associating DOM element and simple tooltip UI instance.
* @type {WeakMap}
*/
static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
}