mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-26 13:29:06 +02:00
Code Issues Releases Wiki Activity

create a base component

Browse Source
This commit is contained in:
Johann-S
2019-09-04 17:58:29 +03:00
committed by XhmikosR
parent c63aebc86b
commit 9f6b342dc7
23 changed files with 229 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
js/src/tooltip.js
View File

@@ -26,6 +26,7 @@ import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import Popper from 'popper.js'
import SelectorEngine from './dom/selector-engine'
import BaseComponent from './base-component'
/**
* ------------------------------------------------------------------------
@@ -124,12 +125,14 @@ const TRIGGER_MANUAL = 'manual'
* ------------------------------------------------------------------------
*/
class Tooltip {
class Tooltip extends BaseComponent {
constructor(element, config) {
if (typeof Popper === 'undefined') {
throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
}
super(element)
// private
this._isEnabled = true
this._timeout = 0
@@ -138,7 +141,6 @@ class Tooltip {
this._popper = null
// Protected
this.element = element
this.config = this._getConfig(config)
this.tip = null
@@ -227,10 +229,10 @@ class Tooltip {
dispose() {
clearTimeout(this._timeout)
Data.removeData(this.element, this.constructor.DATA_KEY)
Data.removeData(this._element, this.constructor.DATA_KEY)
EventHandler.off(this.element, this.constructor.EVENT_KEY)
EventHandler.off(this.element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
EventHandler.off(this._element, this.constructor.EVENT_KEY)
EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
if (this.tip) {
this.tip.parentNode.removeChild(this.tip)
@@ -245,22 +247,22 @@ class Tooltip {
}
this._popper = null
this.element = null
this._element = null
this.config = null
this.tip = null
}
show() {
if (this.element.style.display === 'none') {
if (this._element.style.display === 'none') {
throw new Error('Please use show on visible elements')
}
if (this.isWithContent() && this._isEnabled) {
const showEvent = EventHandler.trigger(this.element, this.constructor.Event.SHOW)
const shadowRoot = findShadowRoot(this.element)
const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
const shadowRoot = findShadowRoot(this._element)
const isInTheDom = shadowRoot === null ?
this.element.ownerDocument.documentElement.contains(this.element) :
shadowRoot.contains(this.element)
this._element.ownerDocument.documentElement.contains(this._element) :
shadowRoot.contains(this._element)
if (showEvent.defaultPrevented || !isInTheDom) {
return
@@ -270,7 +272,7 @@ class Tooltip {
const tipId = getUID(this.constructor.NAME)
tip.setAttribute('id', tipId)
this.element.setAttribute('aria-describedby', tipId)
this._element.setAttribute('aria-describedby', tipId)
this.setContent()
@@ -279,7 +281,7 @@ class Tooltip {
}
const placement = typeof this.config.placement === 'function' ?
this.config.placement.call(this, tip, this.element) :
this.config.placement.call(this, tip, this._element) :
this.config.placement
const attachment = this._getAttachment(placement)
@@ -288,13 +290,13 @@ class Tooltip {
const container = this._getContainer()
Data.setData(tip, this.constructor.DATA_KEY, this)
if (!this.element.ownerDocument.documentElement.contains(this.tip)) {
if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
container.appendChild(tip)
}
EventHandler.trigger(this.element, this.constructor.Event.INSERTED)
EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
this._popper = new Popper(this.element, tip, this._getPopperConfig(attachment))
this._popper = new Popper(this._element, tip, this._getPopperConfig(attachment))
tip.classList.add(CLASS_NAME_SHOW)
@@ -321,7 +323,7 @@ class Tooltip {
const prevHoverState = this._hoverState
this._hoverState = null
EventHandler.trigger(this.element, this.constructor.Event.SHOWN)
EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
if (prevHoverState === HOVER_STATE_OUT) {
this._leave(null, this)
@@ -350,12 +352,12 @@ class Tooltip {
}
this._cleanTipClass()
this.element.removeAttribute('aria-describedby')
EventHandler.trigger(this.element, this.constructor.Event.HIDDEN)
this._element.removeAttribute('aria-describedby')
EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
this._popper.destroy()
}
const hideEvent = EventHandler.trigger(this.element, this.constructor.Event.HIDE)
const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE)
if (hideEvent.defaultPrevented) {
return
}
@@ -450,11 +452,11 @@ class Tooltip {
}
getTitle() {
let title = this.element.getAttribute('data-bs-original-title')
let title = this._element.getAttribute('data-bs-original-title')
if (!title) {
title = typeof this.config.title === 'function' ?
this.config.title.call(this.element) :
this.config.title.call(this._element) :
this.config.title
}
@@ -503,7 +505,7 @@ class Tooltip {
offset.fn = data => {
data.offsets = {
...data.offsets,
...(this.config.offset(data.offsets, this.element) || {})
...(this.config.offset(data.offsets, this._element) || {})
}
return data
@@ -536,7 +538,7 @@ class Tooltip {
triggers.forEach(trigger => {
if (trigger === 'click') {
EventHandler.on(this.element,
EventHandler.on(this._element,
this.constructor.Event.CLICK,
this.config.selector,
event => this.toggle(event)
@@ -549,12 +551,12 @@ class Tooltip {
this.constructor.Event.MOUSELEAVE :
this.constructor.Event.FOCUSOUT
EventHandler.on(this.element,
EventHandler.on(this._element,
eventIn,
this.config.selector,
event => this._enter(event)
)
EventHandler.on(this.element,
EventHandler.on(this._element,
eventOut,
this.config.selector,
event => this._leave(event)
@@ -563,12 +565,12 @@ class Tooltip {
})
this._hideModalHandler = () => {
if (this.element) {
if (this._element) {
this.hide()
}
}
EventHandler.on(this.element.closest(`.${CLASS_NAME_MODAL}`),
EventHandler.on(this._element.closest(`.${CLASS_NAME_MODAL}`),
'hide.bs.modal',
this._hideModalHandler
)
@@ -585,12 +587,12 @@ class Tooltip {
}
_fixTitle() {
const title = this.element.getAttribute('title')
const originalTitleType = typeof this.element.getAttribute('data-bs-original-title')
const title = this._element.getAttribute('title')
const originalTitleType = typeof this._element.getAttribute('data-bs-original-title')
if (title || originalTitleType !== 'string') {
this.element.setAttribute('data-bs-original-title', title || '')
this.element.setAttribute('title', '')
this._element.setAttribute('data-bs-original-title', title || '')
this._element.setAttribute('title', '')
}
}
@@ -683,7 +685,7 @@ class Tooltip {
}
_getConfig(config) {
const dataAttributes = Manipulator.getDataAttributes(this.element)
const dataAttributes = Manipulator.getDataAttributes(this._element)
Object.keys(dataAttributes).forEach(dataAttr => {
if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
@@ -792,10 +794,6 @@ class Tooltip {
}
})
}
static getInstance(element) {
return Data.getData(element, DATA_KEY)
}
}
/**