carbon-components
Version:
The Carbon Design System is IBM’s open-source design system for products and experiences.
100 lines (92 loc) • 3.45 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 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 on from '../../globals/js/misc/on';
class CopyButton extends mixin(
createComponent,
initComponentBySearch,
handles
) {
/**
* CopyBtn UI.
* @extends CreateComponent
* @extends InitComponentBySearch
* @extends Handles
* @param {HTMLElement} element The element working as a copy button UI.
*/
constructor(element, options) {
super(element, options);
this.manage(on(this.element, 'click', () => this.handleClick()));
this.manage(
on(this.element, 'animationend', (event) =>
this.handleAnimationEnd(event)
)
);
}
/**
* Cleanup animation classes
*/
handleAnimationEnd(event) {
if (event.animationName === 'hide-feedback') {
this.element.classList.remove(this.options.classAnimating);
this.element.classList.remove(this.options.classFadeOut);
}
}
/**
* Show the feedback tooltip on click. Hide the feedback tooltip after specified timeout value.
*/
handleClick() {
const feedback = this.element.querySelector(this.options.feedbackTooltip);
if (feedback) {
feedback.classList.add(this.options.classShowFeedback);
setTimeout(() => {
feedback.classList.remove(this.options.classShowFeedback);
}, this.options.timeoutValue);
} else {
this.element.classList.add(this.options.classAnimating);
this.element.classList.add(this.options.classFadeIn);
setTimeout(() => {
this.element.classList.remove(this.options.classFadeIn);
this.element.classList.add(this.options.classFadeOut);
}, this.options.timeoutValue);
}
}
/**
* The map associating DOM element and copy button UI instance.
* @member CopyBtn.components
* @type {WeakMap}
*/
static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
/**
* The component options.
* If `options` is specified in the constructor, {@linkcode CopyBtn.create .create()}, or {@linkcode CopyBtn.init .init()},
* properties in this object are overridden for the instance being create and how {@linkcode CopyBtn.init .init()} works.
* @member CopyBtn.options
* @type {object}
* @property {string} selectorInit The data attribute to find copy button UIs.
* @property {string} feedbackTooltip The data attribute to find feedback tooltip.
* @property {string} classShowFeedback The CSS selector for showing the feedback tooltip.
* @property {number} timeoutValue The specified timeout value before the feedback tooltip is hidden.
*/
static get options() {
const { prefix } = settings;
return {
selectorInit: '[data-copy-btn]',
feedbackTooltip: '[data-feedback]',
classShowFeedback: `${prefix}--btn--copy__feedback--displayed`,
classAnimating: `${prefix}--copy-btn--animating`,
classFadeIn: `${prefix}--copy-btn--fade-in`,
classFadeOut: `${prefix}--copy-btn--fade-out`,
timeoutValue: 2000,
};
}
}
export default CopyButton;