| 1 | /**
|
| 2 | * Copyright IBM Corp. 2016, 2018
|
| 3 | *
|
| 4 | * This source code is licensed under the Apache-2.0 license found in the
|
| 5 | * LICENSE file in the root directory of this source tree.
|
| 6 | */
|
| 7 |
|
| 8 | import settings from '../../globals/js/settings';
|
| 9 | import mixin from '../../globals/js/misc/mixin';
|
| 10 | import createComponent from '../../globals/js/mixins/create-component';
|
| 11 | import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
|
| 12 | import handles from '../../globals/js/mixins/handles';
|
| 13 | import on from '../../globals/js/misc/on';
|
| 14 |
|
| 15 | class CopyButton extends mixin(createComponent, initComponentBySearch, handles) {
|
| 16 | /**
|
| 17 | * CopyBtn UI.
|
| 18 | * @extends CreateComponent
|
| 19 | * @extends InitComponentBySearch
|
| 20 | * @extends Handles
|
| 21 | * @param {HTMLElement} element The element working as a copy button UI.
|
| 22 | */
|
| 23 | constructor(element, options) {
|
| 24 | super(element, options);
|
| 25 | this.manage(on(this.element, 'click', () => this.handleClick()));
|
| 26 | }
|
| 27 |
|
| 28 | /**
|
| 29 | * Show the feedback tooltip on click. Hide the feedback tooltip after specified timeout value.
|
| 30 | */
|
| 31 | handleClick() {
|
| 32 | const feedback = this.element.querySelector(this.options.feedbackTooltip);
|
| 33 | if (feedback) {
|
| 34 | feedback.classList.add(this.options.classShowFeedback);
|
| 35 | setTimeout(() => {
|
| 36 | feedback.classList.remove(this.options.classShowFeedback);
|
| 37 | }, this.options.timeoutValue);
|
| 38 | }
|
| 39 | }
|
| 40 |
|
| 41 | /**
|
| 42 | * The map associating DOM element and copy button UI instance.
|
| 43 | * @member CopyBtn.components
|
| 44 | * @type {WeakMap}
|
| 45 | */
|
| 46 | static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
|
| 47 |
|
| 48 | /**
|
| 49 | * The component options.
|
| 50 | * If `options` is specified in the constructor, {@linkcode CopyBtn.create .create()}, or {@linkcode CopyBtn.init .init()},
|
| 51 | * properties in this object are overriden for the instance being create and how {@linkcode CopyBtn.init .init()} works.
|
| 52 | * @member CopyBtn.options
|
| 53 | * @type {Object}
|
| 54 | * @property {string} selectorInit The data attribute to find copy button UIs.
|
| 55 | * @property {string} feedbackTooltip The data attribute to find feedback tooltip.
|
| 56 | * @property {string} classShowFeedback The CSS selector for showing the feedback tooltip.
|
| 57 | * @property {number} timeoutValue The specified timeout value before the feedback tooltip is hidden.
|
| 58 | */
|
| 59 | static get options() {
|
| 60 | const { prefix } = settings;
|
| 61 | return {
|
| 62 | selectorInit: '[data-copy-btn]',
|
| 63 | feedbackTooltip: '[data-feedback]',
|
| 64 | classShowFeedback: `${prefix}--btn--copy__feedback--displayed`,
|
| 65 | timeoutValue: 2000,
|
| 66 | };
|
| 67 | }
|
| 68 | }
|
| 69 |
|
| 70 | export default CopyButton;
|