diff options
| author | XhmikosR <[email protected]> | 2019-02-26 13:20:34 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-03-11 17:01:28 +0200 |
| commit | 46c037410b8c7eaab3cf50a5cf44093aa2fd41f4 (patch) | |
| tree | cb8c857562c4d3f819a5a8fcc563bc8f2c126e4e /js/src/tooltip.js | |
| parent | 44e6abcba50309df4fae56a9c7ef79145b64a356 (diff) | |
| download | bootstrap-46c037410b8c7eaab3cf50a5cf44093aa2fd41f4.tar.xz bootstrap-46c037410b8c7eaab3cf50a5cf44093aa2fd41f4.zip | |
Comply to the new rules.
Diffstat (limited to 'js/src/tooltip.js')
| -rw-r--r-- | js/src/tooltip.js | 223 |
1 files changed, 112 insertions, 111 deletions
diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 13a5c62b7..950401dea 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -33,98 +33,96 @@ import SelectorEngine from './dom/selectorEngine' * ------------------------------------------------------------------------ */ -const NAME = 'tooltip' -const VERSION = '4.3.1' -const DATA_KEY = 'bs.tooltip' -const EVENT_KEY = `.${DATA_KEY}` -const CLASS_PREFIX = 'bs-tooltip' -const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') +const NAME = 'tooltip' +const VERSION = '4.3.1' +const DATA_KEY = 'bs.tooltip' +const EVENT_KEY = `.${DATA_KEY}` +const CLASS_PREFIX = 'bs-tooltip' +const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') const DISALLOWED_ATTRIBUTES = ['sanitize', 'whiteList', 'sanitizeFn'] - const DefaultType = { - animation : 'boolean', - template : 'string', - title : '(string|element|function)', - trigger : 'string', - delay : '(number|object)', - html : 'boolean', - selector : '(string|boolean)', - placement : '(string|function)', - offset : '(number|string|function)', - container : '(string|element|boolean)', - fallbackPlacement : '(string|array)', - boundary : '(string|element)', - sanitize : 'boolean', - sanitizeFn : '(null|function)', - whiteList : 'object' + animation: 'boolean', + template: 'string', + title: '(string|element|function)', + trigger: 'string', + delay: '(number|object)', + html: 'boolean', + selector: '(string|boolean)', + placement: '(string|function)', + offset: '(number|string|function)', + container: '(string|element|boolean)', + fallbackPlacement: '(string|array)', + boundary: '(string|element)', + sanitize: 'boolean', + sanitizeFn: '(null|function)', + whiteList: 'object' } const AttachmentMap = { - AUTO : 'auto', - TOP : 'top', - RIGHT : 'right', - BOTTOM : 'bottom', - LEFT : 'left' + AUTO: 'auto', + TOP: 'top', + RIGHT: 'right', + BOTTOM: 'bottom', + LEFT: 'left' } const Default = { - animation : true, - template : '<div class="tooltip" role="tooltip">' + + animation: true, + template: '<div class="tooltip" role="tooltip">' + '<div class="tooltip-arrow"></div>' + '<div class="tooltip-inner"></div></div>', - trigger : 'hover focus', - title : '', - delay : 0, - html : false, - selector : false, - placement : 'top', - offset : 0, - container : false, - fallbackPlacement : 'flip', - boundary : 'scrollParent', - sanitize : true, - sanitizeFn : null, - whiteList : DefaultWhitelist + trigger: 'hover focus', + title: '', + delay: 0, + html: false, + selector: false, + placement: 'top', + offset: 0, + container: false, + fallbackPlacement: 'flip', + boundary: 'scrollParent', + sanitize: true, + sanitizeFn: null, + whiteList: DefaultWhitelist } const HoverState = { - SHOW : 'show', - OUT : 'out' + SHOW: 'show', + OUT: 'out' } 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}` + 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}` } const ClassName = { - FADE : 'fade', - SHOW : 'show' + FADE: 'fade', + SHOW: 'show' } const Selector = { - TOOLTIP : '.tooltip', - TOOLTIP_INNER : '.tooltip-inner', - TOOLTIP_ARROW : '.tooltip-arrow' + TOOLTIP: '.tooltip', + TOOLTIP_INNER: '.tooltip-inner', + TOOLTIP_ARROW: '.tooltip-arrow' } const Trigger = { - HOVER : 'hover', - FOCUS : 'focus', - CLICK : 'click', - MANUAL : 'manual' + HOVER: 'hover', + FOCUS: 'focus', + CLICK: 'click', + MANUAL: 'manual' } - /** * ------------------------------------------------------------------------ * Class Definition @@ -142,16 +140,16 @@ class Tooltip { } // private - this._isEnabled = true - this._timeout = 0 - this._hoverState = '' + this._isEnabled = true + this._timeout = 0 + this._hoverState = '' this._activeTrigger = {} - this._popper = null + this._popper = null // Protected this.element = element - this.config = this._getConfig(config) - this.tip = null + this.config = this._getConfig(config) + this.tip = null this._setListeners() Data.setData(element, this.constructor.DATA_KEY, this) @@ -247,9 +245,9 @@ class Tooltip { this.tip.parentNode.removeChild(this.tip) } - this._isEnabled = null - this._timeout = null - this._hoverState = null + this._isEnabled = null + this._timeout = null + this._hoverState = null this._activeTrigger = null if (this._popper !== null) { this._popper.destroy() @@ -257,8 +255,8 @@ class Tooltip { this._popper = null this.element = null - this.config = null - this.tip = null + this.config = null + this.tip = null } show() { @@ -269,15 +267,15 @@ class Tooltip { if (this.isWithContent() && this._isEnabled) { const showEvent = EventHandler.trigger(this.element, this.constructor.Event.SHOW) const shadowRoot = findShadowRoot(this.element) - const isInTheDom = shadowRoot !== null - ? shadowRoot.contains(this.element) - : this.element.ownerDocument.documentElement.contains(this.element) + const isInTheDom = shadowRoot === null ? + this.element.ownerDocument.documentElement.contains(this.element) : + shadowRoot.contains(this.element) if (showEvent.defaultPrevented || !isInTheDom) { return } - const tip = this.getTipElement() + const tip = this.getTipElement() const tipId = getUID(this.constructor.NAME) tip.setAttribute('id', tipId) @@ -289,9 +287,9 @@ class Tooltip { tip.classList.add(ClassName.FADE) } - const placement = typeof this.config.placement === 'function' - ? this.config.placement.call(this, tip, this.element) - : this.config.placement + const placement = typeof this.config.placement === 'function' ? + this.config.placement.call(this, tip, this.element) : + this.config.placement const attachment = this._getAttachment(placement) this.addAttachmentClass(attachment) @@ -319,12 +317,12 @@ class Tooltip { boundariesElement: this.config.boundary } }, - onCreate: (data) => { + onCreate: data => { if (data.originalPlacement !== data.placement) { this._handlePopperPlacementChange(data) } }, - onUpdate: (data) => this._handlePopperPlacementChange(data) + onUpdate: data => this._handlePopperPlacementChange(data) }) tip.classList.add(ClassName.SHOW) @@ -334,7 +332,7 @@ class Tooltip { // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html if ('ontouchstart' in document.documentElement) { - makeArray(document.body.children).forEach((element) => { + makeArray(document.body.children).forEach(element => { EventHandler.on(element, 'mouseover', noop()) }) } @@ -343,8 +341,9 @@ class Tooltip { if (this.config.animation) { this._fixTransition() } + const prevHoverState = this._hoverState - this._hoverState = null + this._hoverState = null EventHandler.trigger(this.element, this.constructor.Event.SHOWN) @@ -364,8 +363,8 @@ class Tooltip { } hide(callback) { - const tip = this.getTipElement() - const complete = () => { + const tip = this.getTipElement() + const complete = () => { if (this._hoverState !== HoverState.SHOW && tip.parentNode) { tip.parentNode.removeChild(tip) } @@ -393,7 +392,7 @@ class Tooltip { // empty mouseover listeners we added for iOS support if ('ontouchstart' in document.documentElement) { makeArray(document.body.children) - .forEach((element) => EventHandler.off(element, 'mouseover', noop)) + .forEach(element => EventHandler.off(element, 'mouseover', noop)) } this._activeTrigger[Trigger.CLICK] = false @@ -485,9 +484,9 @@ class Tooltip { let title = this.element.getAttribute('data-original-title') if (!title) { - title = typeof this.config.title === 'function' - ? this.config.title.call(this.element) - : this.config.title + title = typeof this.config.title === 'function' ? + this.config.title.call(this.element) : + this.config.title } return title @@ -499,7 +498,7 @@ class Tooltip { const offset = {} if (typeof this.config.offset === 'function') { - offset.fn = (data) => { + offset.fn = data => { data.offsets = { ...data.offsets, ...this.config.offset(data.offsets, this.element) || {} @@ -533,30 +532,30 @@ class Tooltip { _setListeners() { const triggers = this.config.trigger.split(' ') - triggers.forEach((trigger) => { + triggers.forEach(trigger => { if (trigger === 'click') { EventHandler.on(this.element, this.constructor.Event.CLICK, this.config.selector, - (event) => this.toggle(event) + event => this.toggle(event) ) } else if (trigger !== Trigger.MANUAL) { - const eventIn = trigger === Trigger.HOVER - ? this.constructor.Event.MOUSEENTER - : this.constructor.Event.FOCUSIN - const eventOut = trigger === Trigger.HOVER - ? this.constructor.Event.MOUSELEAVE - : this.constructor.Event.FOCUSOUT + const eventIn = trigger === Trigger.HOVER ? + this.constructor.Event.MOUSEENTER : + this.constructor.Event.FOCUSIN + const eventOut = trigger === Trigger.HOVER ? + this.constructor.Event.MOUSELEAVE : + this.constructor.Event.FOCUSOUT EventHandler.on(this.element, eventIn, this.config.selector, - (event) => this._enter(event) + event => this._enter(event) ) EventHandler.on(this.element, eventOut, this.config.selector, - (event) => this._leave(event) + event => this._leave(event) ) } }) @@ -686,7 +685,7 @@ class Tooltip { const dataAttributes = Manipulator.getDataAttributes(this.element) Object.keys(dataAttributes) - .forEach((dataAttr) => { + .forEach(dataAttr => { if (DISALLOWED_ATTRIBUTES.indexOf(dataAttr) !== -1) { delete dataAttributes[dataAttr] } @@ -749,8 +748,8 @@ class Tooltip { const tabClass = tip.getAttribute('class').match(BSCLS_PREFIX_REGEX) if (tabClass !== null && tabClass.length) { tabClass - .map((token) => token.trim()) - .forEach((tClass) => tip.classList.remove(tClass)) + .map(token => token.trim()) + .forEach(tClass => tip.classList.remove(tClass)) } } @@ -767,6 +766,7 @@ class Tooltip { if (tip.getAttribute('x-placement') !== null) { return } + tip.classList.remove(ClassName.FADE) this.config.animation = false this.hide() @@ -778,7 +778,7 @@ class Tooltip { static _jQueryInterface(config) { return this.each(function () { - let data = Data.getData(this, DATA_KEY) + let data = Data.getData(this, DATA_KEY) const _config = typeof config === 'object' && config if (!data && /dispose|hide/.test(config)) { @@ -793,6 +793,7 @@ class Tooltip { if (typeof data[config] === 'undefined') { throw new TypeError(`No method named "${config}"`) } + data[config]() } }) @@ -811,10 +812,10 @@ class Tooltip { */ if (typeof $ !== 'undefined') { - const JQUERY_NO_CONFLICT = $.fn[NAME] - $.fn[NAME] = Tooltip._jQueryInterface - $.fn[NAME].Constructor = Tooltip - $.fn[NAME].noConflict = () => { + const JQUERY_NO_CONFLICT = $.fn[NAME] + $.fn[NAME] = Tooltip._jQueryInterface + $.fn[NAME].Constructor = Tooltip + $.fn[NAME].noConflict = () => { $.fn[NAME] = JQUERY_NO_CONFLICT return Tooltip._jQueryInterface } |
