1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-01 15:56:45 +02:00

alert without jquery

This commit is contained in:
Johann-S
2017-08-21 09:11:37 +02:00
committed by XhmikosR
parent 8d34bc136b
commit 0b16c8c6d9
17 changed files with 149 additions and 53 deletions

View File

@@ -5,7 +5,9 @@
* --------------------------------------------------------------------------
*/
import $ from 'jquery'
import Data from './dom/data'
import EventHandler from './dom/eventHandler'
import SelectorEngine from './dom/selectorEngine'
import Util from './util'
/**
@@ -64,7 +66,7 @@ class Alert {
const customEvent = this._triggerCloseEvent(rootElement)
if (customEvent.isDefaultPrevented()) {
if (customEvent.defaultPrevented) {
return
}
@@ -72,7 +74,7 @@ class Alert {
}
dispose() {
$.removeData(this._element, DATA_KEY)
Data.removeData(this._element, DATA_KEY)
this._element = null
}
@@ -87,52 +89,45 @@ class Alert {
}
if (!parent) {
parent = $(element).closest(`.${ClassName.ALERT}`)[0]
parent = SelectorEngine.closest(element, `.${ClassName.ALERT}`)
}
return parent
}
_triggerCloseEvent(element) {
const closeEvent = $.Event(Event.CLOSE)
$(element).trigger(closeEvent)
return closeEvent
return EventHandler.trigger(element, Event.CLOSE)
}
_removeElement(element) {
$(element).removeClass(ClassName.SHOW)
element.classList.remove(ClassName.SHOW)
if (!$(element).hasClass(ClassName.FADE)) {
if (!element.classList.contains(ClassName.FADE)) {
this._destroyElement(element)
return
}
const transitionDuration = Util.getTransitionDurationFromElement(element)
$(element)
.one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))
Util.emulateTransitionEnd(transitionDuration)
EventHandler
.one(element, Util.TRANSITION_END, (event) => this._destroyElement(element, event))
Util.emulateTransitionEnd(element, transitionDuration)
}
_destroyElement(element) {
$(element)
.detach()
.trigger(Event.CLOSED)
.remove()
EventHandler.trigger(element, Event.CLOSED)
element.parentNode.removeChild(element)
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
const $element = $(this)
let data = $element.data(DATA_KEY)
let data = Data.getData(this, DATA_KEY)
if (!data) {
data = new Alert(this)
$element.data(DATA_KEY, data)
Data.setData(this, DATA_KEY, data)
}
if (config === 'close') {

51
js/src/dom/data.js Normal file
View File

@@ -0,0 +1,51 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta): dom/data.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
const mapData = (() => {
const storeData = {}
return {
set(element, key, data) {
let id
if (element.key === undefined) {
element.key = {
key,
id
}
}
storeData[id] = data
},
get(element, key) {
if (element.key === undefined || element.key !== key) {
return null
}
const keyProperties = element.key
return storeData[keyProperties.id]
},
delete(element, key) {
if (element.key === undefined || element.key !== key) {
return
}
const keyProperties = element.key
delete storeData[keyProperties.id]
}
}
})()
const Data = {
setData(instance, key, data) {
mapData.set(instance, key, data)
},
getData(instance, key) {
mapData.get(instance, key)
},
removeData(instance, key) {
mapData.delete(instance, key)
}
}
export default Data

View File

@@ -1,13 +1,13 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta): dom/event.js
* Bootstrap (v4.0.0-beta): dom/eventHandler.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
const Event = {
const EventHandler = {
on(element, event, handler) {
if (typeof event !== 'string') {
if (typeof event !== 'string' || typeof element === 'undefined') {
return
}
element.addEventListener(event, handler, false)
@@ -19,12 +19,12 @@ const Event = {
handler()
element.removeEventListener(event, complete, false)
}
Event.on(element, event, complete)
EventHandler.on(element, event, complete)
},
trigger(element, event) {
if (typeof event !== 'string') {
return
if (typeof event !== 'string' || typeof element === 'undefined') {
return null
}
const eventToDispatch = new CustomEvent(event, {
@@ -32,7 +32,9 @@ const Event = {
cancelable: true
})
element.dispatchEvent(eventToDispatch)
return eventToDispatch
}
}
export default Event
export default EventHandler

View File

@@ -0,0 +1,42 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta): dom/selectorEngine.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
const SelectorEngine = {
matches: Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector,
find(selector) {
if (typeof selector !== 'string') {
return null
}
let selectorType = 'querySelectorAll'
if (selector.indexOf('#') === 0) {
selectorType = 'getElementById'
selector = selector.substr(1, selector.length)
}
return document[selectorType](selector)
},
closest(element, selector) {
let ancestor = element
if (!document.documentElement.contains(element)) {
return null
}
do {
if (SelectorEngine.matches.call(ancestor, selector)) {
return ancestor
}
ancestor = ancestor.parentElement
} while (ancestor !== null)
return null
}
}
export default SelectorEngine

View File

@@ -5,7 +5,7 @@
* --------------------------------------------------------------------------
*/
import Event from './dom/event'
import EventHandler from './dom/eventHandler'
/**
* ------------------------------------------------------------------------
@@ -78,7 +78,7 @@ const Util = {
},
triggerTransitionEnd(element) {
Event.trigger(element, Util.TRANSITION_END)
EventHandler.trigger(element, Util.TRANSITION_END)
},
// TODO: Remove in v5