From 407af8ac7f9296627aebc1e4c5d0ee948f8be1f3 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sat, 19 Feb 2022 15:10:47 +0200 Subject: [PATCH] Make event name helper and use it on tooltip & popover to reduce dist sizes (#35856) * feat: create eventName getter function in baseComponent * refactor: use `eventName` getter on tooltip & popover --- js/src/base-component.js | 4 +++ js/src/popover.js | 19 ----------- js/src/tooltip.js | 59 +++++++++++++---------------------- js/tests/unit/popover.spec.js | 8 +---- js/tests/unit/tooltip.spec.js | 6 ---- 5 files changed, 27 insertions(+), 69 deletions(-) diff --git a/js/src/base-component.js b/js/src/base-component.js index 4140bf1947..75bb90c326 100644 --- a/js/src/base-component.js +++ b/js/src/base-component.js @@ -76,6 +76,10 @@ class BaseComponent extends Config { static get EVENT_KEY() { return `.${this.DATA_KEY}` } + + static eventName(name) { + return `${name}${this.EVENT_KEY}` + } } export default BaseComponent diff --git a/js/src/popover.js b/js/src/popover.js index b62b6a2123..b6d1e2010e 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -13,8 +13,6 @@ import Tooltip from './tooltip' */ const NAME = 'popover' -const DATA_KEY = 'bs.popover' -const EVENT_KEY = `.${DATA_KEY}` const SELECTOR_TITLE = '.popover-header' const SELECTOR_CONTENT = '.popover-body' @@ -37,19 +35,6 @@ const DefaultType = { content: '(null|string|element|function)' } -const Event = { - HIDE: `hide${EVENT_KEY}`, - HIDDEN: `hidden${EVENT_KEY}`, - SHOW: `show${EVENT_KEY}`, - SHOWN: `shown${EVENT_KEY}`, - INSERTED: `inserted${EVENT_KEY}`, - CLICK: `click${EVENT_KEY}`, - FOCUSIN: `focusin${EVENT_KEY}`, - FOCUSOUT: `focusout${EVENT_KEY}`, - MOUSEENTER: `mouseenter${EVENT_KEY}`, - MOUSELEAVE: `mouseleave${EVENT_KEY}` -} - /** * Class definition */ @@ -68,10 +53,6 @@ class Popover extends Tooltip { return NAME } - static get Event() { - return Event - } - // Overrides _isWithContent() { return this._getTitle() || this._getContent() diff --git a/js/src/tooltip.js b/js/src/tooltip.js index ef5b9fa825..5cf56ce6e3 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -6,14 +6,7 @@ */ import * as Popper from '@popperjs/core' -import { - defineJQueryPlugin, - findShadowRoot, - getElement, - getUID, - isRTL, - noop -} from './util/index' +import { defineJQueryPlugin, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index' import { DefaultAllowlist } from './util/sanitizer' import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' @@ -25,8 +18,6 @@ import TemplateFactory from './util/template-factory' */ const NAME = 'tooltip' -const DATA_KEY = 'bs.tooltip' -const EVENT_KEY = `.${DATA_KEY}` const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn']) const CLASS_NAME_FADE = 'fade' @@ -43,6 +34,17 @@ const TRIGGER_FOCUS = 'focus' const TRIGGER_CLICK = 'click' const TRIGGER_MANUAL = 'manual' +const EVENT_HIDE = 'hide' +const EVENT_HIDDEN = 'hidden' +const EVENT_SHOW = 'show' +const EVENT_SHOWN = 'shown' +const EVENT_INSERTED = 'inserted' +const EVENT_CLICK = 'click' +const EVENT_FOCUSIN = 'focusin' +const EVENT_FOCUSOUT = 'focusout' +const EVENT_MOUSEENTER = 'mouseenter' +const EVENT_MOUSELEAVE = 'mouseleave' + const AttachmentMap = { AUTO: 'auto', TOP: 'top', @@ -94,19 +96,6 @@ const DefaultType = { popperConfig: '(null|object|function)' } -const Event = { - HIDE: `hide${EVENT_KEY}`, - HIDDEN: `hidden${EVENT_KEY}`, - SHOW: `show${EVENT_KEY}`, - SHOWN: `shown${EVENT_KEY}`, - INSERTED: `inserted${EVENT_KEY}`, - CLICK: `click${EVENT_KEY}`, - FOCUSIN: `focusin${EVENT_KEY}`, - FOCUSOUT: `focusout${EVENT_KEY}`, - MOUSEENTER: `mouseenter${EVENT_KEY}`, - MOUSELEAVE: `mouseleave${EVENT_KEY}` -} - /** * Class definition */ @@ -146,10 +135,6 @@ class Tooltip extends BaseComponent { return NAME } - static get Event() { - return Event - } - // Public enable() { this._isEnabled = true @@ -212,7 +197,7 @@ class Tooltip extends BaseComponent { return } - const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW) + const showEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOW)) const shadowRoot = findShadowRoot(this._element) const isInTheDom = shadowRoot === null ? this._element.ownerDocument.documentElement.contains(this._element) : @@ -230,7 +215,7 @@ class Tooltip extends BaseComponent { if (!this._element.ownerDocument.documentElement.contains(this.tip)) { container.append(tip) - EventHandler.trigger(this._element, this.constructor.Event.INSERTED) + EventHandler.trigger(this._element, this.constructor.eventName(EVENT_INSERTED)) } if (this._popper) { @@ -255,7 +240,7 @@ class Tooltip extends BaseComponent { const previousHoverState = this._isHovered this._isHovered = false - EventHandler.trigger(this._element, this.constructor.Event.SHOWN) + EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOWN)) if (previousHoverState) { this._leave() @@ -270,7 +255,7 @@ class Tooltip extends BaseComponent { return } - const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE) + const hideEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDE)) if (hideEvent.defaultPrevented) { return } @@ -301,7 +286,7 @@ class Tooltip extends BaseComponent { } this._element.removeAttribute('aria-describedby') - EventHandler.trigger(this._element, this.constructor.Event.HIDDEN) + EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDDEN)) this._disposePopper() } @@ -484,14 +469,14 @@ class Tooltip extends BaseComponent { for (const trigger of triggers) { if (trigger === 'click') { - EventHandler.on(this._element, this.constructor.Event.CLICK, this._config.selector, event => this.toggle(event)) + EventHandler.on(this._element, this.constructor.eventName(EVENT_CLICK), this._config.selector, event => this.toggle(event)) } else if (trigger !== TRIGGER_MANUAL) { const eventIn = trigger === TRIGGER_HOVER ? - this.constructor.Event.MOUSEENTER : - this.constructor.Event.FOCUSIN + this.constructor.eventName(EVENT_MOUSEENTER) : + this.constructor.eventName(EVENT_FOCUSIN) const eventOut = trigger === TRIGGER_HOVER ? - this.constructor.Event.MOUSELEAVE : - this.constructor.Event.FOCUSOUT + this.constructor.eventName(EVENT_MOUSELEAVE) : + this.constructor.eventName(EVENT_FOCUSOUT) EventHandler.on(this._element, eventIn, this._config.selector, event => { const context = this._initializeOnDelegatedTarget(event) diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js index bf3a71848c..d1a4c78478 100644 --- a/js/tests/unit/popover.spec.js +++ b/js/tests/unit/popover.spec.js @@ -43,12 +43,6 @@ describe('Popover', () => { }) }) - describe('Event', () => { - it('should return plugin events', () => { - expect(Popover.Event).toEqual(jasmine.any(Object)) - }) - }) - describe('EVENT_KEY', () => { it('should return plugin event key', () => { expect(Popover.EVENT_KEY).toEqual('.bs.popover') @@ -174,7 +168,7 @@ describe('Popover', () => { popover.show() - expect(EventHandler.trigger).not.toHaveBeenCalledWith(popoverEl, Popover.Event.SHOW) + expect(EventHandler.trigger).not.toHaveBeenCalledWith(popoverEl, Popover.eventName('show')) expect(document.querySelector('.popover')).toBeNull() }) diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js index 0713dabfb6..c961744dfd 100644 --- a/js/tests/unit/tooltip.spec.js +++ b/js/tests/unit/tooltip.spec.js @@ -42,12 +42,6 @@ describe('Tooltip', () => { }) }) - describe('Event', () => { - it('should return plugin events', () => { - expect(Tooltip.Event).toEqual(jasmine.any(Object)) - }) - }) - describe('EVENT_KEY', () => { it('should return plugin event key', () => { expect(Tooltip.EVENT_KEY).toEqual('.bs.tooltip')