1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-08 22:56:46 +02:00

implement global dispose method

This commit is contained in:
fat
2015-05-13 12:48:34 -07:00
parent dafdd180cd
commit f8b2569ec8
45 changed files with 976 additions and 439 deletions

View File

@@ -20,6 +20,8 @@ const Alert = (($) => {
const NAME = 'alert'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.alert'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 150
@@ -28,9 +30,9 @@ const Alert = (($) => {
}
const Event = {
CLOSE : 'close.bs.alert',
CLOSED : 'closed.bs.alert',
CLICK : 'click.bs.alert.data-api'
CLOSE : `close${EVENT_KEY}`,
CLOSED : `closed${EVENT_KEY}`,
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
}
const ClassName = {
@@ -75,6 +77,11 @@ const Alert = (($) => {
this._removeElement(rootElement)
}
dispose() {
$.removeData(this._element, DATA_KEY)
this._element = null
}
// private
@@ -159,7 +166,7 @@ const Alert = (($) => {
*/
$(document).on(
Event.CLICK,
Event.CLICK_DATA_API,
Selector.DISMISS,
Alert._handleDismiss(new Alert())
)

View File

@@ -17,6 +17,8 @@ const Button = (($) => {
const NAME = 'button'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.button'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 150
@@ -35,8 +37,9 @@ const Button = (($) => {
}
const Event = {
CLICK : 'click.bs.button.data-api',
FOCUS_BLUR : 'focus.bs.button.data-api blur.bs.button.data-api'
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`,
FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} `
+ `blur${EVENT_KEY}${DATA_API_KEY}`
}
@@ -101,6 +104,11 @@ const Button = (($) => {
}
}
dispose() {
$.removeData(this._element, DATA_KEY)
this._element = null
}
// static
@@ -129,7 +137,7 @@ const Button = (($) => {
*/
$(document)
.on(Event.CLICK, Selector.DATA_TOGGLE_CARROT, function (event) {
.on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) {
event.preventDefault()
let button = event.target
@@ -140,7 +148,7 @@ const Button = (($) => {
Button._jQueryInterface.call($(button), 'toggle')
})
.on(Event.FOCUS_BLUR, Selector.DATA_TOGGLE_CARROT, function (event) {
.on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) {
var button = $(event.target).closest(Selector.BUTTON)[0]
$(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
})

View File

@@ -20,6 +20,8 @@ const Carousel = (($) => {
const NAME = 'carousel'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.carousel'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 600
@@ -37,10 +39,13 @@ const Carousel = (($) => {
}
const Event = {
SLIDE : 'slide.bs.carousel',
SLID : 'slid.bs.carousel',
CLICK : 'click.bs.carousel.data-api',
LOAD : 'load'
SLIDE : `slide${EVENT_KEY}`,
SLID : `slid${EVENT_KEY}`,
KEYDOWN : `keydown${EVENT_KEY}`,
MOUSEENTER : `mouseenter${EVENT_KEY}`,
MOUSELEAVE : `mouseleave${EVENT_KEY}`,
LOAD_DATA_API : `load${EVENT_KEY}${DATA_API_KEY}`,
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
}
const ClassName = {
@@ -171,20 +176,34 @@ const Carousel = (($) => {
this._slide(direction, this._items[index])
}
dispose() {
$(this._element).off(EVENT_KEY)
$.removeData(this._element, DATA_KEY)
this._items = null
this._config = null
this._element = null
this._interval = null
this._isPaused = null
this._isSliding = null
this._activeElement = null
this._indicatorsElement = null
}
// private
_addEventListeners() {
if (this._config.keyboard) {
$(this._element)
.on('keydown.bs.carousel', $.proxy(this._keydown, this))
.on(Event.KEYDOWN, $.proxy(this._keydown, this))
}
if (this._config.pause == 'hover' &&
!('ontouchstart' in document.documentElement)) {
$(this._element)
.on('mouseenter.bs.carousel', $.proxy(this.pause, this))
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
.on(Event.MOUSEENTER, $.proxy(this.pause, this))
.on(Event.MOUSELEAVE, $.proxy(this.cycle, this))
}
}
@@ -405,9 +424,9 @@ const Carousel = (($) => {
*/
$(document)
.on(Event.CLICK, Selector.DATA_SLIDE, Carousel._dataApiClickHandler)
.on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler)
$(window).on(Event.LOAD, function () {
$(window).on(Event.LOAD_DATA_API, function () {
$(Selector.DATA_RIDE).each(function () {
let $carousel = $(this)
Carousel._jQueryInterface.call($carousel, $carousel.data())

View File

@@ -20,6 +20,8 @@ const Collapse = (($) => {
const NAME = 'collapse'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.collapse'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 600
@@ -29,11 +31,11 @@ const Collapse = (($) => {
}
const Event = {
SHOW : 'show.bs.collapse',
SHOWN : 'shown.bs.collapse',
HIDE : 'hide.bs.collapse',
HIDDEN : 'hidden.bs.collapse',
CLICK : 'click.bs.collapse.data-api'
SHOW : `show${EVENT_KEY}`,
SHOWN : `shown${EVENT_KEY}`,
HIDE : `hide${EVENT_KEY}`,
HIDDEN : `hidden${EVENT_KEY}`,
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
}
const ClassName = {
@@ -110,8 +112,8 @@ const Collapse = (($) => {
return
}
let activesData
let actives
let activesData
if (this._parent) {
actives = $.makeArray($(Selector.ACTIVES))
@@ -244,6 +246,16 @@ const Collapse = (($) => {
this._isTransitioning = isTransitioning
}
dispose() {
$.removeData(this._element, DATA_KEY)
this._config = null
this._parent = null
this._element = null
this._triggerArray = null
this._isTransitioning = null
}
// private
@@ -323,7 +335,7 @@ const Collapse = (($) => {
* ------------------------------------------------------------------------
*/
$(document).on(Event.CLICK, Selector.DATA_TOGGLE, function (event) {
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
event.preventDefault()
let target = Collapse._getTargetFromElement(this)

View File

@@ -20,16 +20,18 @@ const Dropdown = (($) => {
const NAME = 'dropdown'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.dropdown'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
HIDE   : 'hide.bs.dropdown',
HIDDEN   : 'hidden.bs.dropdown',
SHOW   : 'show.bs.dropdown',
SHOWN   : 'shown.bs.dropdown',
CLICK   : 'click.bs.dropdown',
KEYDOWN   : 'keydown.bs.dropdown.data-api',
CLICK_DATA : 'click.bs.dropdown.data-api'
HIDE   : `hide${EVENT_KEY}`,
HIDDEN   : `hidden${EVENT_KEY}`,
SHOW   : `show${EVENT_KEY}`,
SHOWN   : `shown${EVENT_KEY}`,
CLICK   : `click${EVENT_KEY}`,
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`,
KEYDOWN_DATA_API : `keydown${EVENT_KEY}${DATA_API_KEY}`
}
const ClassName = {
@@ -59,7 +61,9 @@ const Dropdown = (($) => {
class Dropdown {
constructor(element) {
$(element).on(Event.CLICK, this.toggle)
this._element = element
this._addEventListeners()
}
@@ -114,6 +118,19 @@ const Dropdown = (($) => {
return false
}
dispose() {
$.removeData(this._element, DATA_KEY)
$(this._element).off(EVENT_KEY)
this._element = null
}
// private
_addEventListeners() {
$(this._element).on(Event.CLICK, this.toggle)
}
// static
@@ -239,12 +256,12 @@ const Dropdown = (($) => {
*/
$(document)
.on(Event.KEYDOWN, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler)
.on(Event.KEYDOWN, Selector.ROLE_MENU, Dropdown._dataApiKeydownHandler)
.on(Event.KEYDOWN, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler)
.on(Event.CLICK_DATA, Dropdown._clearMenus)
.on(Event.CLICK_DATA, Selector.DATA_TOGGLE, Dropdown.prototype.toggle)
.on(Event.CLICK_DATA, Selector.FORM_CHILD, function (e) {
.on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler)
.on(Event.KEYDOWN_DATA_API, Selector.ROLE_MENU, Dropdown._dataApiKeydownHandler)
.on(Event.KEYDOWN_DATA_API, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler)
.on(Event.CLICK_DATA_API, Dropdown._clearMenus)
.on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle)
.on(Event.CLICK_DATA_API, Selector.FORM_CHILD, function (e) {
e.stopPropagation()
})

View File

@@ -20,6 +20,8 @@ const Modal = (($) => {
const NAME = 'modal'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.modal'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 300
const BACKDROP_TRANSITION_DURATION = 150
@@ -31,17 +33,17 @@ const Modal = (($) => {
}
const Event = {
HIDE   : 'hide.bs.modal',
HIDDEN   : 'hidden.bs.modal',
SHOW   : 'show.bs.modal',
SHOWN   : 'shown.bs.modal',
DISMISS : 'click.dismiss.bs.modal',
KEYDOWN : 'keydown.dismiss.bs.modal',
FOCUSIN : 'focusin.bs.modal',
RESIZE : 'resize.bs.modal',
CLICK : 'click.bs.modal.data-api',
MOUSEDOWN : 'mousedown.dismiss.bs.modal',
MOUSEUP : 'mouseup.dismiss.bs.modal'
HIDE   : `hide${EVENT_KEY}`,
HIDDEN   : `hidden${EVENT_KEY}`,
SHOW   : `show${EVENT_KEY}`,
SHOWN   : `shown${EVENT_KEY}`,
FOCUSIN : `focusin${EVENT_KEY}`,
RESIZE : `resize${EVENT_KEY}`,
CLICK_DISMISS : `click.dismiss${EVENT_KEY}`,
KEYDOWN_DISMISS : `keydown.dismiss${EVENT_KEY}`,
MOUSEUP_DISMISS : `mouseup.dismiss${EVENT_KEY}`,
MOUSEDOWN_DISMISS : `mousedown.dismiss${EVENT_KEY}`,
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
}
const ClassName = {
@@ -119,13 +121,13 @@ const Modal = (($) => {
this._setResizeEvent()
$(this._element).on(
Event.DISMISS,
Event.CLICK_DISMISS,
Selector.DATA_DISMISS,
$.proxy(this.hide, this)
)
$(this._dialog).on(Event.MOUSEDOWN, () => {
$(this._element).one(Event.MOUSEUP, (event) => {
$(this._dialog).on(Event.MOUSEDOWN_DISMISS, () => {
$(this._element).one(Event.MOUSEUP_DISMISS, (event) => {
if ($(event.target).is(this._element)) {
that._ignoreBackdropClick = true
}
@@ -159,8 +161,8 @@ const Modal = (($) => {
$(this._element).removeClass(ClassName.IN)
$(this._element).off(Event.DISMISS)
$(this._dialog).off(Event.MOUSEDOWN)
$(this._element).off(Event.CLICK_DISMISS)
$(this._dialog).off(Event.MOUSEDOWN_DISMISS)
if (Util.supportsTransitionEnd() &&
($(this._element).hasClass(ClassName.FADE))) {
@@ -173,6 +175,25 @@ const Modal = (($) => {
}
}
dispose() {
$.removeData(this._element, DATA_KEY)
$(window).off(EVENT_KEY)
$(document).off(EVENT_KEY)
$(this._element).off(EVENT_KEY)
$(this._backdrop).off(EVENT_KEY)
this._config = null
this._element = null
this._dialog = null
this._backdrop = null
this._isShown = null
this._isBodyOverflowing = null
this._ignoreBackdropClick = null
this._originalBodyPadding = null
this._scrollbarWidth = null
}
// private
@@ -228,14 +249,14 @@ const Modal = (($) => {
_setEscapeEvent() {
if (this._isShown && this._config.keyboard) {
$(this._element).on(Event.KEYDOWN, (event) => {
$(this._element).on(Event.KEYDOWN_DISMISS, (event) => {
if (event.which === 27) {
this.hide()
}
})
} else if (!this._isShown) {
$(this._element).off(Event.KEYDOWN)
$(this._element).off(Event.KEYDOWN_DISMISS)
}
}
@@ -280,7 +301,7 @@ const Modal = (($) => {
$(this._backdrop).appendTo(this.$body)
$(this._element).on(Event.DISMISS, (event) => {
$(this._element).on(Event.CLICK_DISMISS, (event) => {
if (this._ignoreBackdropClick) {
this._ignoreBackdropClick = false
return
@@ -440,7 +461,7 @@ const Modal = (($) => {
* ------------------------------------------------------------------------
*/
$(document).on(Event.CLICK, Selector.DATA_TOGGLE, function (event) {
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
let target
let selector = Util.getSelectorFromElement(this)

View File

@@ -20,6 +20,7 @@ const Popover = (($) => {
const NAME = 'popover'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.popover'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Default = $.extend({}, Tooltip.Default, {
@@ -44,16 +45,16 @@ const Popover = (($) => {
}
const Event = {
HIDE : 'hide.bs.popover',
HIDDEN : 'hidden.bs.popover',
SHOW : 'show.bs.popover',
SHOWN : 'shown.bs.popover',
INSERTED : 'inserted.bs.popover',
CLICK : 'click.bs.popover',
FOCUSIN : 'focusin.bs.popover',
FOCUSOUT : 'focusout.bs.popover',
MOUSEENTER : 'mouseenter.bs.popover',
MOUSELEAVE : 'mouseleave.bs.popover'
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}`
}
@@ -88,6 +89,10 @@ const Popover = (($) => {
return Event
}
static get EVENT_KEY() {
return EVENT_KEY
}
// overrides

View File

@@ -20,6 +20,8 @@ const ScrollSpy = (($) => {
const NAME = 'scrollspy'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.scrollspy'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Default = {
@@ -27,9 +29,9 @@ const ScrollSpy = (($) => {
}
const Event = {
ACTIVATE : 'activate.bs.scrollspy',
SCROLL : 'scroll.bs.scrollspy',
LOAD : 'load.bs.scrollspy.data-api'
ACTIVATE : `activate${EVENT_KEY}`,
SCROLL : `scroll${EVENT_KEY}`,
LOAD_DATA_API : `load${EVENT_KEY}${DATA_API_KEY}`
}
const ClassName = {
@@ -54,6 +56,7 @@ const ScrollSpy = (($) => {
class ScrollSpy {
constructor(element, config) {
this._element = element
this._scrollElement = element.tagName === 'BODY' ? window : element
this._config = $.extend({}, Default, config)
this._selector = `${this._config.target || ''} .nav li > a`
@@ -123,6 +126,20 @@ const ScrollSpy = (($) => {
})
}
dispose() {
$.removeData(this._element, DATA_KEY)
$(this._scrollElement).off(EVENT_KEY)
this._element = null
this._scrollElement = null
this._config = null
this._selector = null
this._offsets = null
this._targets = null
this._activeTarget = null
this._scrollHeight = null
}
// private
@@ -244,7 +261,7 @@ const ScrollSpy = (($) => {
* ------------------------------------------------------------------------
*/
$(window).on(Event.LOAD, function () {
$(window).on(Event.LOAD_DATA_API, function () {
let scrollSpys = $.makeArray($(Selector.DATA_SPY))
for (let i = scrollSpys.length; i--;) {

View File

@@ -20,15 +20,17 @@ const Tab = (($) => {
const NAME = 'tab'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.tab'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 150
const Event = {
HIDE : 'hide.bs.tab',
HIDDEN : 'hidden.bs.tab',
SHOW : 'show.bs.tab',
SHOWN : 'shown.bs.tab',
CLICK : 'click.bs.tab.data-api'
HIDE : `hide${EVENT_KEY}`,
HIDDEN : `hidden${EVENT_KEY}`,
SHOW : `show${EVENT_KEY}`,
SHOWN : `shown${EVENT_KEY}`,
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
}
const ClassName = {
@@ -146,6 +148,11 @@ const Tab = (($) => {
}
}
dispose() {
$.removeClass(this._element, DATA_KEY)
this._element = null
}
// private
@@ -258,7 +265,7 @@ const Tab = (($) => {
*/
$(document)
.on(Event.CLICK, Selector.DATA_TOGGLE, function (event) {
.on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
event.preventDefault()
Tab._jQueryInterface.call($(this), 'show')
})

View File

@@ -20,6 +20,7 @@ const Tooltip = (($) => {
const NAME = 'tooltip'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.tooltip'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 150
const CLASS_PREFIX = 'bs-tether'
@@ -52,16 +53,16 @@ const Tooltip = (($) => {
}
const Event = {
HIDE : 'hide.bs.tooltip',
HIDDEN : 'hidden.bs.tooltip',
SHOW : 'show.bs.tooltip',
SHOWN : 'shown.bs.tooltip',
INSERTED : 'inserted.bs.tooltip',
CLICK : 'click.bs.tooltip',
FOCUSIN : 'focusin.bs.tooltip',
FOCUSOUT : 'focusout.bs.tooltip',
MOUSEENTER : 'mouseenter.bs.tooltip',
MOUSELEAVE : 'mouseleave.bs.tooltip'
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 = {
@@ -136,6 +137,9 @@ const Tooltip = (($) => {
return Event
}
static get EVENT_KEY() {
return EVENT_KEY
}
// public
@@ -182,19 +186,28 @@ const Tooltip = (($) => {
}
}
destroy() {
dispose() {
clearTimeout(this._timeout)
this.hide(() => {
$(this.element)
.off(`.${this.constructor.NAME}`)
.removeData(this.constructor.DATA_KEY)
if (this.tip) {
$(this.tip).detach()
}
this.cleanupTether()
this.tip = null
})
$.removeData(this.element, this.constructor.DATA_KEY)
$(this.element).off(this.constructor.EVENT_KEY)
if (this.tip) {
$(this.tip).remove()
}
this._isEnabled = null
this._timeout = null
this._hoverState = null
this._activeTrigger = null
this._tether = null
this.element = null
this.config = null
this.tip = null
}
show() {