mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-09 07:06:36 +02:00
some cleaning and changes for readability
This commit is contained in:
@@ -1,6 +1,3 @@
|
|||||||
import $ from 'jquery'
|
|
||||||
import Util from './util'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.1.3): alert.js
|
* Bootstrap (v4.1.3): alert.js
|
||||||
@@ -8,6 +5,9 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import $ from 'jquery'
|
||||||
|
import Util from './util'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
* Constants
|
* Constants
|
||||||
|
@@ -1,5 +1,3 @@
|
|||||||
import $ from 'jquery'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.1.3): button.js
|
* Bootstrap (v4.1.3): button.js
|
||||||
@@ -7,6 +5,8 @@ import $ from 'jquery'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import $ from 'jquery'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
* Constants
|
* Constants
|
||||||
|
@@ -60,10 +60,7 @@ const Event = {
|
|||||||
TOUCHMOVE : `touchmove${EVENT_KEY}`,
|
TOUCHMOVE : `touchmove${EVENT_KEY}`,
|
||||||
TOUCHEND : `touchend${EVENT_KEY}`,
|
TOUCHEND : `touchend${EVENT_KEY}`,
|
||||||
POINTERDOWN : `pointerdown${EVENT_KEY}`,
|
POINTERDOWN : `pointerdown${EVENT_KEY}`,
|
||||||
POINTERMOVE : `pointermove${EVENT_KEY}`,
|
|
||||||
POINTERUP : `pointerup${EVENT_KEY}`,
|
POINTERUP : `pointerup${EVENT_KEY}`,
|
||||||
POINTERLEAVE : `pointerleave${EVENT_KEY}`,
|
|
||||||
POINTERCANCEL : `pointercancel${EVENT_KEY}`,
|
|
||||||
DRAG_START : `dragstart${EVENT_KEY}`,
|
DRAG_START : `dragstart${EVENT_KEY}`,
|
||||||
LOAD_DATA_API : `load${EVENT_KEY}${DATA_API_KEY}`,
|
LOAD_DATA_API : `load${EVENT_KEY}${DATA_API_KEY}`,
|
||||||
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
|
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
|
||||||
@@ -280,7 +277,7 @@ class Carousel {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const start = (event) => {
|
const start = (event) => {
|
||||||
if (this._pointerEvent && (event.originalEvent.pointerType === PointerType.TOUCH || event.originalEvent.pointerType === PointerType.PEN)) {
|
if (this._pointerEvent && PointerType[event.originalEvent.pointerType.toUpperCase()]) {
|
||||||
this.touchStartX = event.originalEvent.clientX
|
this.touchStartX = event.originalEvent.clientX
|
||||||
} else if (!this._pointerEvent) {
|
} else if (!this._pointerEvent) {
|
||||||
this.touchStartX = event.originalEvent.touches[0].clientX
|
this.touchStartX = event.originalEvent.touches[0].clientX
|
||||||
@@ -297,7 +294,7 @@ class Carousel {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const end = (event) => {
|
const end = (event) => {
|
||||||
if (this._pointerEvent && (event.originalEvent.pointerType === PointerType.TOUCH || event.originalEvent.pointerType === PointerType.PEN)) {
|
if (this._pointerEvent && PointerType[event.originalEvent.pointerType.toUpperCase()]) {
|
||||||
this.touchDeltaX = event.originalEvent.clientX - this.touchStartX
|
this.touchDeltaX = event.originalEvent.clientX - this.touchStartX
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -1,6 +1,3 @@
|
|||||||
import $ from 'jquery'
|
|
||||||
import Util from './util'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.1.3): collapse.js
|
* Bootstrap (v4.1.3): collapse.js
|
||||||
@@ -8,6 +5,9 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import $ from 'jquery'
|
||||||
|
import Util from './util'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
* Constants
|
* Constants
|
||||||
@@ -67,10 +67,11 @@ class Collapse {
|
|||||||
this._isTransitioning = false
|
this._isTransitioning = false
|
||||||
this._element = element
|
this._element = element
|
||||||
this._config = this._getConfig(config)
|
this._config = this._getConfig(config)
|
||||||
this._triggerArray = $.makeArray(document.querySelectorAll(
|
this._triggerArray = [].slice.call(document.querySelectorAll(
|
||||||
`[data-toggle="collapse"][href="#${element.id}"],` +
|
`[data-toggle="collapse"][href="#${element.id}"],` +
|
||||||
`[data-toggle="collapse"][data-target="#${element.id}"]`
|
`[data-toggle="collapse"][data-target="#${element.id}"]`
|
||||||
))
|
))
|
||||||
|
|
||||||
const toggleList = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE))
|
const toggleList = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE))
|
||||||
for (let i = 0, len = toggleList.length; i < len; i++) {
|
for (let i = 0, len = toggleList.length; i < len; i++) {
|
||||||
const elem = toggleList[i]
|
const elem = toggleList[i]
|
||||||
@@ -227,6 +228,7 @@ class Collapse {
|
|||||||
for (let i = 0; i < triggerArrayLength; i++) {
|
for (let i = 0; i < triggerArrayLength; i++) {
|
||||||
const trigger = this._triggerArray[i]
|
const trigger = this._triggerArray[i]
|
||||||
const selector = Util.getSelectorFromElement(trigger)
|
const selector = Util.getSelectorFromElement(trigger)
|
||||||
|
|
||||||
if (selector !== null) {
|
if (selector !== null) {
|
||||||
const $elem = $([].slice.call(document.querySelectorAll(selector)))
|
const $elem = $([].slice.call(document.querySelectorAll(selector)))
|
||||||
if (!$elem.hasClass(ClassName.SHOW)) {
|
if (!$elem.hasClass(ClassName.SHOW)) {
|
||||||
@@ -375,6 +377,7 @@ $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
|||||||
const $trigger = $(this)
|
const $trigger = $(this)
|
||||||
const selector = Util.getSelectorFromElement(this)
|
const selector = Util.getSelectorFromElement(this)
|
||||||
const selectors = [].slice.call(document.querySelectorAll(selector))
|
const selectors = [].slice.call(document.querySelectorAll(selector))
|
||||||
|
|
||||||
$(selectors).each(function () {
|
$(selectors).each(function () {
|
||||||
const $target = $(this)
|
const $target = $(this)
|
||||||
const data = $target.data(DATA_KEY)
|
const data = $target.data(DATA_KEY)
|
||||||
|
@@ -1,7 +1,3 @@
|
|||||||
import $ from 'jquery'
|
|
||||||
import Popper from 'popper.js'
|
|
||||||
import Util from './util'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.1.3): dropdown.js
|
* Bootstrap (v4.1.3): dropdown.js
|
||||||
@@ -9,6 +5,10 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import $ from 'jquery'
|
||||||
|
import Popper from 'popper.js'
|
||||||
|
import Util from './util'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
* Constants
|
* Constants
|
||||||
@@ -41,13 +41,13 @@ const Event = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const ClassName = {
|
const ClassName = {
|
||||||
DISABLED : 'disabled',
|
DISABLED : 'disabled',
|
||||||
SHOW : 'show',
|
SHOW : 'show',
|
||||||
DROPUP : 'dropup',
|
DROPUP : 'dropup',
|
||||||
DROPRIGHT : 'dropright',
|
DROPRIGHT : 'dropright',
|
||||||
DROPLEFT : 'dropleft',
|
DROPLEFT : 'dropleft',
|
||||||
MENURIGHT : 'dropdown-menu-right',
|
MENURIGHT : 'dropdown-menu-right',
|
||||||
MENULEFT : 'dropdown-menu-left',
|
MENULEFT : 'dropdown-menu-left',
|
||||||
POSITION_STATIC : 'position-static'
|
POSITION_STATIC : 'position-static'
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -71,19 +71,19 @@ const AttachmentMap = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Default = {
|
const Default = {
|
||||||
offset : 0,
|
offset : 0,
|
||||||
flip : true,
|
flip : true,
|
||||||
boundary : 'scrollParent',
|
boundary : 'scrollParent',
|
||||||
reference : 'toggle',
|
reference : 'toggle',
|
||||||
display : 'dynamic'
|
display : 'dynamic'
|
||||||
}
|
}
|
||||||
|
|
||||||
const DefaultType = {
|
const DefaultType = {
|
||||||
offset : '(number|string|function)',
|
offset : '(number|string|function)',
|
||||||
flip : 'boolean',
|
flip : 'boolean',
|
||||||
boundary : '(string|element)',
|
boundary : '(string|element)',
|
||||||
reference : '(string|element)',
|
reference : '(string|element)',
|
||||||
display : 'string'
|
display : 'string'
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -203,8 +203,8 @@ class Dropdown {
|
|||||||
relatedTarget: this._element
|
relatedTarget: this._element
|
||||||
}
|
}
|
||||||
const showEvent = $.Event(Event.SHOW, relatedTarget)
|
const showEvent = $.Event(Event.SHOW, relatedTarget)
|
||||||
|
|
||||||
const parent = Dropdown._getParentFromElement(this._element)
|
const parent = Dropdown._getParentFromElement(this._element)
|
||||||
|
|
||||||
$(parent).trigger(showEvent)
|
$(parent).trigger(showEvent)
|
||||||
|
|
||||||
if (showEvent.isDefaultPrevented()) {
|
if (showEvent.isDefaultPrevented()) {
|
||||||
@@ -226,8 +226,8 @@ class Dropdown {
|
|||||||
relatedTarget: this._element
|
relatedTarget: this._element
|
||||||
}
|
}
|
||||||
const hideEvent = $.Event(Event.HIDE, relatedTarget)
|
const hideEvent = $.Event(Event.HIDE, relatedTarget)
|
||||||
|
|
||||||
const parent = Dropdown._getParentFromElement(this._element)
|
const parent = Dropdown._getParentFromElement(this._element)
|
||||||
|
|
||||||
$(parent).trigger(hideEvent)
|
$(parent).trigger(hideEvent)
|
||||||
|
|
||||||
if (hideEvent.isDefaultPrevented()) {
|
if (hideEvent.isDefaultPrevented()) {
|
||||||
@@ -287,6 +287,7 @@ class Dropdown {
|
|||||||
_getMenuElement() {
|
_getMenuElement() {
|
||||||
if (!this._menu) {
|
if (!this._menu) {
|
||||||
const parent = Dropdown._getParentFromElement(this._element)
|
const parent = Dropdown._getParentFromElement(this._element)
|
||||||
|
|
||||||
if (parent) {
|
if (parent) {
|
||||||
this._menu = parent.querySelector(Selector.MENU)
|
this._menu = parent.querySelector(Selector.MENU)
|
||||||
}
|
}
|
||||||
@@ -382,6 +383,7 @@ class Dropdown {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const toggles = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE))
|
const toggles = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE))
|
||||||
|
|
||||||
for (let i = 0, len = toggles.length; i < len; i++) {
|
for (let i = 0, len = toggles.length; i < len; i++) {
|
||||||
const parent = Dropdown._getParentFromElement(toggles[i])
|
const parent = Dropdown._getParentFromElement(toggles[i])
|
||||||
const context = $(toggles[i]).data(DATA_KEY)
|
const context = $(toggles[i]).data(DATA_KEY)
|
||||||
|
@@ -1,6 +1,3 @@
|
|||||||
import $ from 'jquery'
|
|
||||||
import Util from './util'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.1.3): modal.js
|
* Bootstrap (v4.1.3): modal.js
|
||||||
@@ -8,6 +5,9 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import $ from 'jquery'
|
||||||
|
import Util from './util'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
* Constants
|
* Constants
|
||||||
@@ -59,11 +59,11 @@ const ClassName = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Selector = {
|
const Selector = {
|
||||||
DIALOG : '.modal-dialog',
|
DIALOG : '.modal-dialog',
|
||||||
DATA_TOGGLE : '[data-toggle="modal"]',
|
DATA_TOGGLE : '[data-toggle="modal"]',
|
||||||
DATA_DISMISS : '[data-dismiss="modal"]',
|
DATA_DISMISS : '[data-dismiss="modal"]',
|
||||||
FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
|
FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
|
||||||
STICKY_CONTENT : '.sticky-top'
|
STICKY_CONTENT : '.sticky-top'
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@@ -1,6 +1,3 @@
|
|||||||
import $ from 'jquery'
|
|
||||||
import Tooltip from './tooltip'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.1.3): popover.js
|
* Bootstrap (v4.1.3): popover.js
|
||||||
@@ -8,6 +5,9 @@ import Tooltip from './tooltip'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import $ from 'jquery'
|
||||||
|
import Tooltip from './tooltip'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
* Constants
|
* Constants
|
||||||
|
@@ -1,6 +1,3 @@
|
|||||||
import $ from 'jquery'
|
|
||||||
import Util from './util'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.1.3): scrollspy.js
|
* Bootstrap (v4.1.3): scrollspy.js
|
||||||
@@ -8,6 +5,9 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import $ from 'jquery'
|
||||||
|
import Util from './util'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
* Constants
|
* Constants
|
||||||
@@ -242,12 +242,9 @@ class ScrollSpy {
|
|||||||
|
|
||||||
this._clear()
|
this._clear()
|
||||||
|
|
||||||
let queries = this._selector.split(',')
|
const queries = this._selector
|
||||||
// eslint-disable-next-line arrow-body-style
|
.split(',')
|
||||||
queries = queries.map((selector) => {
|
.map((selector) => `${selector}[data-target="${target}"],${selector}[href="${target}"]`)
|
||||||
return `${selector}[data-target="${target}"],` +
|
|
||||||
`${selector}[href="${target}"]`
|
|
||||||
})
|
|
||||||
|
|
||||||
const $link = $([].slice.call(document.querySelectorAll(queries.join(','))))
|
const $link = $([].slice.call(document.querySelectorAll(queries.join(','))))
|
||||||
|
|
||||||
@@ -270,8 +267,9 @@ class ScrollSpy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_clear() {
|
_clear() {
|
||||||
const nodes = [].slice.call(document.querySelectorAll(this._selector))
|
[].slice.call(document.querySelectorAll(this._selector))
|
||||||
$(nodes).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE)
|
.filter((node) => node.classList.contains(ClassName.ACTIVE))
|
||||||
|
.forEach((node) => node.classList.remove(ClassName.ACTIVE))
|
||||||
}
|
}
|
||||||
|
|
||||||
// Static
|
// Static
|
||||||
@@ -304,8 +302,8 @@ class ScrollSpy {
|
|||||||
|
|
||||||
$(window).on(Event.LOAD_DATA_API, () => {
|
$(window).on(Event.LOAD_DATA_API, () => {
|
||||||
const scrollSpys = [].slice.call(document.querySelectorAll(Selector.DATA_SPY))
|
const scrollSpys = [].slice.call(document.querySelectorAll(Selector.DATA_SPY))
|
||||||
|
|
||||||
const scrollSpysLength = scrollSpys.length
|
const scrollSpysLength = scrollSpys.length
|
||||||
|
|
||||||
for (let i = scrollSpysLength; i--;) {
|
for (let i = scrollSpysLength; i--;) {
|
||||||
const $spy = $(scrollSpys[i])
|
const $spy = $(scrollSpys[i])
|
||||||
ScrollSpy._jQueryInterface.call($spy, $spy.data())
|
ScrollSpy._jQueryInterface.call($spy, $spy.data())
|
||||||
|
@@ -1,6 +1,3 @@
|
|||||||
import $ from 'jquery'
|
|
||||||
import Util from './util'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.1.3): tab.js
|
* Bootstrap (v4.1.3): tab.js
|
||||||
@@ -8,6 +5,9 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import $ from 'jquery'
|
||||||
|
import Util from './util'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
* Constants
|
* Constants
|
||||||
@@ -141,17 +141,12 @@ class Tab {
|
|||||||
// Private
|
// Private
|
||||||
|
|
||||||
_activate(element, container, callback) {
|
_activate(element, container, callback) {
|
||||||
let activeElements
|
const activeElements = container && container.nodeName === 'UL'
|
||||||
if (container && container.nodeName === 'UL') {
|
? $(container).find(Selector.ACTIVE_UL)
|
||||||
activeElements = $(container).find(Selector.ACTIVE_UL)
|
: $(container).children(Selector.ACTIVE)
|
||||||
} else {
|
|
||||||
activeElements = $(container).children(Selector.ACTIVE)
|
|
||||||
}
|
|
||||||
|
|
||||||
const active = activeElements[0]
|
const active = activeElements[0]
|
||||||
const isTransitioning = callback &&
|
const isTransitioning = callback && (active && $(active).hasClass(ClassName.FADE))
|
||||||
(active && $(active).hasClass(ClassName.FADE))
|
|
||||||
|
|
||||||
const complete = () => this._transitionComplete(
|
const complete = () => this._transitionComplete(
|
||||||
element,
|
element,
|
||||||
active,
|
active,
|
||||||
@@ -195,11 +190,12 @@ class Tab {
|
|||||||
Util.reflow(element)
|
Util.reflow(element)
|
||||||
$(element).addClass(ClassName.SHOW)
|
$(element).addClass(ClassName.SHOW)
|
||||||
|
|
||||||
if (element.parentNode &&
|
if (element.parentNode && $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
|
||||||
$(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
|
|
||||||
const dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
|
const dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
|
||||||
|
|
||||||
if (dropdownElement) {
|
if (dropdownElement) {
|
||||||
const dropdownToggleList = [].slice.call(dropdownElement.querySelectorAll(Selector.DROPDOWN_TOGGLE))
|
const dropdownToggleList = [].slice.call(dropdownElement.querySelectorAll(Selector.DROPDOWN_TOGGLE))
|
||||||
|
|
||||||
$(dropdownToggleList).addClass(ClassName.ACTIVE)
|
$(dropdownToggleList).addClass(ClassName.ACTIVE)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
358
js/src/toast.js
358
js/src/toast.js
@@ -1,6 +1,3 @@
|
|||||||
import $ from 'jquery'
|
|
||||||
import Util from './util'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.1.3): toast.js
|
* Bootstrap (v4.1.3): toast.js
|
||||||
@@ -8,215 +5,214 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Toast = (($) => {
|
import $ from 'jquery'
|
||||||
/**
|
import Util from './util'
|
||||||
* ------------------------------------------------------------------------
|
|
||||||
* Constants
|
|
||||||
* ------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'toast'
|
/**
|
||||||
const VERSION = '4.1.3'
|
* ------------------------------------------------------------------------
|
||||||
const DATA_KEY = 'bs.toast'
|
* Constants
|
||||||
const EVENT_KEY = `.${DATA_KEY}`
|
* ------------------------------------------------------------------------
|
||||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
*/
|
||||||
|
|
||||||
const Event = {
|
const NAME = 'toast'
|
||||||
CLICK_DISMISS : `click.dismiss${EVENT_KEY}`,
|
const VERSION = '4.1.3'
|
||||||
HIDE : `hide${EVENT_KEY}`,
|
const DATA_KEY = 'bs.toast'
|
||||||
HIDDEN : `hidden${EVENT_KEY}`,
|
const EVENT_KEY = `.${DATA_KEY}`
|
||||||
SHOW : `show${EVENT_KEY}`,
|
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||||
SHOWN : `shown${EVENT_KEY}`
|
|
||||||
|
const Event = {
|
||||||
|
CLICK_DISMISS : `click.dismiss${EVENT_KEY}`,
|
||||||
|
HIDE : `hide${EVENT_KEY}`,
|
||||||
|
HIDDEN : `hidden${EVENT_KEY}`,
|
||||||
|
SHOW : `show${EVENT_KEY}`,
|
||||||
|
SHOWN : `shown${EVENT_KEY}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const ClassName = {
|
||||||
|
FADE : 'fade',
|
||||||
|
HIDE : 'hide',
|
||||||
|
SHOW : 'show'
|
||||||
|
}
|
||||||
|
|
||||||
|
const DefaultType = {
|
||||||
|
animation : 'boolean',
|
||||||
|
autohide : 'boolean',
|
||||||
|
delay : 'number'
|
||||||
|
}
|
||||||
|
|
||||||
|
const Default = {
|
||||||
|
animation : true,
|
||||||
|
autohide : true,
|
||||||
|
delay : 500
|
||||||
|
}
|
||||||
|
|
||||||
|
const Selector = {
|
||||||
|
DATA_DISMISS : '[data-dismiss="toast"]'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ------------------------------------------------------------------------
|
||||||
|
* Class Definition
|
||||||
|
* ------------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
class Toast {
|
||||||
|
constructor(element, config) {
|
||||||
|
this._element = element
|
||||||
|
this._config = this._getConfig(config)
|
||||||
|
this._timeout = null
|
||||||
|
this._setListeners()
|
||||||
}
|
}
|
||||||
|
|
||||||
const ClassName = {
|
// Getters
|
||||||
FADE : 'fade',
|
|
||||||
HIDE : 'hide',
|
static get VERSION() {
|
||||||
SHOW : 'show'
|
return VERSION
|
||||||
}
|
}
|
||||||
|
|
||||||
const DefaultType = {
|
static get DefaultType() {
|
||||||
animation : 'boolean',
|
return DefaultType
|
||||||
autohide : 'boolean',
|
|
||||||
delay : 'number'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const Default = {
|
// Public
|
||||||
animation : true,
|
|
||||||
autohide : true,
|
|
||||||
delay : 500
|
|
||||||
}
|
|
||||||
|
|
||||||
const Selector = {
|
show() {
|
||||||
DATA_DISMISS : '[data-dismiss="toast"]'
|
$(this._element).trigger(Event.SHOW)
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
if (this._config.animation) {
|
||||||
* ------------------------------------------------------------------------
|
this._element.classList.add(ClassName.FADE)
|
||||||
* Class Definition
|
|
||||||
* ------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Toast {
|
|
||||||
constructor(element, config) {
|
|
||||||
this._element = element
|
|
||||||
this._config = this._getConfig(config)
|
|
||||||
this._timeout = null
|
|
||||||
this._setListeners()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Getters
|
const complete = () => {
|
||||||
|
$(this._element).trigger(Event.SHOWN)
|
||||||
|
|
||||||
static get VERSION() {
|
if (this._config.autohide) {
|
||||||
return VERSION
|
this.hide()
|
||||||
}
|
|
||||||
|
|
||||||
static get DefaultType() {
|
|
||||||
return DefaultType
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
|
|
||||||
show() {
|
|
||||||
$(this._element).trigger(Event.SHOW)
|
|
||||||
|
|
||||||
if (this._config.animation) {
|
|
||||||
this._element.classList.add(ClassName.FADE)
|
|
||||||
}
|
|
||||||
|
|
||||||
const complete = () => {
|
|
||||||
$(this._element).trigger(Event.SHOWN)
|
|
||||||
|
|
||||||
if (this._config.autohide) {
|
|
||||||
this.hide()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element.classList.add(ClassName.SHOW)
|
|
||||||
if (this._config.animation) {
|
|
||||||
const transitionDuration = Util.getTransitionDurationFromElement(this._element)
|
|
||||||
|
|
||||||
$(this._element)
|
|
||||||
.one(Util.TRANSITION_END, complete)
|
|
||||||
.emulateTransitionEnd(transitionDuration)
|
|
||||||
} else {
|
|
||||||
complete()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hide(withoutTimeout) {
|
this._element.classList.add(ClassName.SHOW)
|
||||||
if (!this._element.classList.contains(ClassName.SHOW)) {
|
if (this._config.animation) {
|
||||||
return
|
const transitionDuration = Util.getTransitionDurationFromElement(this._element)
|
||||||
}
|
|
||||||
|
|
||||||
$(this._element).trigger(Event.HIDE)
|
$(this._element)
|
||||||
|
.one(Util.TRANSITION_END, complete)
|
||||||
|
.emulateTransitionEnd(transitionDuration)
|
||||||
|
} else {
|
||||||
|
complete()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (withoutTimeout) {
|
hide(withoutTimeout) {
|
||||||
|
if (!this._element.classList.contains(ClassName.SHOW)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
$(this._element).trigger(Event.HIDE)
|
||||||
|
|
||||||
|
if (withoutTimeout) {
|
||||||
|
this._close()
|
||||||
|
} else {
|
||||||
|
this._timeout = setTimeout(() => {
|
||||||
this._close()
|
this._close()
|
||||||
} else {
|
}, this._config.delay)
|
||||||
this._timeout = setTimeout(() => {
|
|
||||||
this._close()
|
|
||||||
}, this._config.delay)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose() {
|
||||||
clearTimeout(this._timeout)
|
clearTimeout(this._timeout)
|
||||||
this._timeout = null
|
this._timeout = null
|
||||||
|
|
||||||
if (this._element.classList.contains(ClassName.SHOW)) {
|
|
||||||
this._element.classList.remove(ClassName.SHOW)
|
|
||||||
}
|
|
||||||
|
|
||||||
$(this._element).off(Event.CLICK_DISMISS)
|
|
||||||
|
|
||||||
$.removeData(this._element, DATA_KEY)
|
|
||||||
this._element = null
|
|
||||||
this._config = null
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
|
|
||||||
_getConfig(config) {
|
|
||||||
config = {
|
|
||||||
...Default,
|
|
||||||
...$(this._element).data(),
|
|
||||||
...typeof config === 'object' && config ? config : {}
|
|
||||||
}
|
|
||||||
|
|
||||||
Util.typeCheckConfig(
|
|
||||||
NAME,
|
|
||||||
config,
|
|
||||||
this.constructor.DefaultType
|
|
||||||
)
|
|
||||||
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
|
|
||||||
_setListeners() {
|
|
||||||
$(this._element).on(
|
|
||||||
Event.CLICK_DISMISS,
|
|
||||||
Selector.DATA_DISMISS,
|
|
||||||
() => this.hide(true)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
_close() {
|
|
||||||
const complete = () => {
|
|
||||||
$(this._element).trigger(Event.HIDDEN)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
if (this._element.classList.contains(ClassName.SHOW)) {
|
||||||
this._element.classList.remove(ClassName.SHOW)
|
this._element.classList.remove(ClassName.SHOW)
|
||||||
|
}
|
||||||
|
|
||||||
if (this._config.animation) {
|
$(this._element).off(Event.CLICK_DISMISS)
|
||||||
const transitionDuration = Util.getTransitionDurationFromElement(this._element)
|
|
||||||
|
|
||||||
$(this._element)
|
$.removeData(this._element, DATA_KEY)
|
||||||
.one(Util.TRANSITION_END, complete)
|
this._element = null
|
||||||
.emulateTransitionEnd(transitionDuration)
|
this._config = null
|
||||||
} else {
|
}
|
||||||
complete()
|
|
||||||
|
// Private
|
||||||
|
|
||||||
|
_getConfig(config) {
|
||||||
|
config = {
|
||||||
|
...Default,
|
||||||
|
...$(this._element).data(),
|
||||||
|
...typeof config === 'object' && config ? config : {}
|
||||||
|
}
|
||||||
|
|
||||||
|
Util.typeCheckConfig(
|
||||||
|
NAME,
|
||||||
|
config,
|
||||||
|
this.constructor.DefaultType
|
||||||
|
)
|
||||||
|
|
||||||
|
return config
|
||||||
|
}
|
||||||
|
|
||||||
|
_setListeners() {
|
||||||
|
$(this._element).on(
|
||||||
|
Event.CLICK_DISMISS,
|
||||||
|
Selector.DATA_DISMISS,
|
||||||
|
() => this.hide(true)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
_close() {
|
||||||
|
const complete = () => {
|
||||||
|
$(this._element).trigger(Event.HIDDEN)
|
||||||
|
}
|
||||||
|
|
||||||
|
this._element.classList.remove(ClassName.SHOW)
|
||||||
|
|
||||||
|
if (this._config.animation) {
|
||||||
|
const transitionDuration = Util.getTransitionDurationFromElement(this._element)
|
||||||
|
|
||||||
|
$(this._element)
|
||||||
|
.one(Util.TRANSITION_END, complete)
|
||||||
|
.emulateTransitionEnd(transitionDuration)
|
||||||
|
} else {
|
||||||
|
complete()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Static
|
||||||
|
|
||||||
|
static _jQueryInterface(config) {
|
||||||
|
return this.each(function () {
|
||||||
|
const $element = $(this)
|
||||||
|
let data = $element.data(DATA_KEY)
|
||||||
|
const _config = typeof config === 'object' && config
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
data = new Toast(this, _config)
|
||||||
|
$element.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// Static
|
if (typeof config === 'string') {
|
||||||
|
if (typeof data[config] === 'undefined') {
|
||||||
static _jQueryInterface(config) {
|
throw new TypeError(`No method named "${config}"`)
|
||||||
return this.each(function () {
|
|
||||||
const $element = $(this)
|
|
||||||
let data = $element.data(DATA_KEY)
|
|
||||||
const _config = typeof config === 'object' && config
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
data = new Toast(this, _config)
|
|
||||||
$element.data(DATA_KEY, data)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof config === 'string') {
|
data[config](this)
|
||||||
if (typeof data[config] === 'undefined') {
|
}
|
||||||
throw new TypeError(`No method named "${config}"`)
|
})
|
||||||
}
|
|
||||||
|
|
||||||
data[config](this)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
* jQuery
|
* jQuery
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
$.fn[NAME] = Toast._jQueryInterface
|
$.fn[NAME] = Toast._jQueryInterface
|
||||||
$.fn[NAME].Constructor = Toast
|
$.fn[NAME].Constructor = Toast
|
||||||
$.fn[NAME].noConflict = () => {
|
$.fn[NAME].noConflict = () => {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return Toast._jQueryInterface
|
return Toast._jQueryInterface
|
||||||
}
|
}
|
||||||
|
|
||||||
return Toast
|
|
||||||
})($)
|
|
||||||
|
|
||||||
export default Toast
|
export default Toast
|
||||||
|
@@ -1,7 +1,3 @@
|
|||||||
import $ from 'jquery'
|
|
||||||
import Popper from 'popper.js'
|
|
||||||
import Util from './util'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.1.3): tooltip.js
|
* Bootstrap (v4.1.3): tooltip.js
|
||||||
@@ -9,6 +5,10 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import $ from 'jquery'
|
||||||
|
import Popper from 'popper.js'
|
||||||
|
import Util from './util'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
* Constants
|
* Constants
|
||||||
@@ -24,18 +24,18 @@ const CLASS_PREFIX = 'bs-tooltip'
|
|||||||
const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
|
const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
|
||||||
|
|
||||||
const DefaultType = {
|
const DefaultType = {
|
||||||
animation : 'boolean',
|
animation : 'boolean',
|
||||||
template : 'string',
|
template : 'string',
|
||||||
title : '(string|element|function)',
|
title : '(string|element|function)',
|
||||||
trigger : 'string',
|
trigger : 'string',
|
||||||
delay : '(number|object)',
|
delay : '(number|object)',
|
||||||
html : 'boolean',
|
html : 'boolean',
|
||||||
selector : '(string|boolean)',
|
selector : '(string|boolean)',
|
||||||
placement : '(string|function)',
|
placement : '(string|function)',
|
||||||
offset : '(number|string)',
|
offset : '(number|string)',
|
||||||
container : '(string|element|boolean)',
|
container : '(string|element|boolean)',
|
||||||
fallbackPlacement : '(string|array)',
|
fallbackPlacement : '(string|array)',
|
||||||
boundary : '(string|element)'
|
boundary : '(string|element)'
|
||||||
}
|
}
|
||||||
|
|
||||||
const AttachmentMap = {
|
const AttachmentMap = {
|
||||||
@@ -47,20 +47,20 @@ const AttachmentMap = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Default = {
|
const Default = {
|
||||||
animation : true,
|
animation : true,
|
||||||
template : '<div class="tooltip" role="tooltip">' +
|
template : '<div class="tooltip" role="tooltip">' +
|
||||||
'<div class="arrow"></div>' +
|
'<div class="arrow"></div>' +
|
||||||
'<div class="tooltip-inner"></div></div>',
|
'<div class="tooltip-inner"></div></div>',
|
||||||
trigger : 'hover focus',
|
trigger : 'hover focus',
|
||||||
title : '',
|
title : '',
|
||||||
delay : 0,
|
delay : 0,
|
||||||
html : false,
|
html : false,
|
||||||
selector : false,
|
selector : false,
|
||||||
placement : 'top',
|
placement : 'top',
|
||||||
offset : 0,
|
offset : 0,
|
||||||
container : false,
|
container : false,
|
||||||
fallbackPlacement : 'flip',
|
fallbackPlacement : 'flip',
|
||||||
boundary : 'scrollParent'
|
boundary : 'scrollParent'
|
||||||
}
|
}
|
||||||
|
|
||||||
const HoverState = {
|
const HoverState = {
|
||||||
@@ -303,9 +303,7 @@ class Tooltip {
|
|||||||
this._handlePopperPlacementChange(data)
|
this._handlePopperPlacementChange(data)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onUpdate: (data) => {
|
onUpdate: (data) => this._handlePopperPlacementChange(data)
|
||||||
this._handlePopperPlacementChange(data)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
$(tip).addClass(ClassName.SHOW)
|
$(tip).addClass(ClassName.SHOW)
|
||||||
@@ -510,19 +508,19 @@ class Tooltip {
|
|||||||
|
|
||||||
_fixTitle() {
|
_fixTitle() {
|
||||||
const titleType = typeof this.element.getAttribute('data-original-title')
|
const titleType = typeof this.element.getAttribute('data-original-title')
|
||||||
if (this.element.getAttribute('title') ||
|
|
||||||
titleType !== 'string') {
|
if (this.element.getAttribute('title') || titleType !== 'string') {
|
||||||
this.element.setAttribute(
|
this.element.setAttribute(
|
||||||
'data-original-title',
|
'data-original-title',
|
||||||
this.element.getAttribute('title') || ''
|
this.element.getAttribute('title') || ''
|
||||||
)
|
)
|
||||||
|
|
||||||
this.element.setAttribute('title', '')
|
this.element.setAttribute('title', '')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_enter(event, context) {
|
_enter(event, context) {
|
||||||
const dataKey = this.constructor.DATA_KEY
|
const dataKey = this.constructor.DATA_KEY
|
||||||
|
|
||||||
context = context || $(event.currentTarget).data(dataKey)
|
context = context || $(event.currentTarget).data(dataKey)
|
||||||
|
|
||||||
if (!context) {
|
if (!context) {
|
||||||
@@ -539,8 +537,7 @@ class Tooltip {
|
|||||||
] = true
|
] = true
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($(context.getTipElement()).hasClass(ClassName.SHOW) ||
|
if ($(context.getTipElement()).hasClass(ClassName.SHOW) || context._hoverState === HoverState.SHOW) {
|
||||||
context._hoverState === HoverState.SHOW) {
|
|
||||||
context._hoverState = HoverState.SHOW
|
context._hoverState = HoverState.SHOW
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -563,7 +560,6 @@ class Tooltip {
|
|||||||
|
|
||||||
_leave(event, context) {
|
_leave(event, context) {
|
||||||
const dataKey = this.constructor.DATA_KEY
|
const dataKey = this.constructor.DATA_KEY
|
||||||
|
|
||||||
context = context || $(event.currentTarget).data(dataKey)
|
context = context || $(event.currentTarget).data(dataKey)
|
||||||
|
|
||||||
if (!context) {
|
if (!context) {
|
||||||
@@ -673,9 +669,11 @@ class Tooltip {
|
|||||||
_fixTransition() {
|
_fixTransition() {
|
||||||
const tip = this.getTipElement()
|
const tip = this.getTipElement()
|
||||||
const initConfigAnimation = this.config.animation
|
const initConfigAnimation = this.config.animation
|
||||||
|
|
||||||
if (tip.getAttribute('x-placement') !== null) {
|
if (tip.getAttribute('x-placement') !== null) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
$(tip).removeClass(ClassName.FADE)
|
$(tip).removeClass(ClassName.FADE)
|
||||||
this.config.animation = false
|
this.config.animation = false
|
||||||
this.hide()
|
this.hide()
|
||||||
|
@@ -1,5 +1,3 @@
|
|||||||
import $ from 'jquery'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.1.3): util.js
|
* Bootstrap (v4.1.3): util.js
|
||||||
@@ -7,6 +5,7 @@ import $ from 'jquery'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import $ from 'jquery'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
|
Reference in New Issue
Block a user