mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
alert without jquery
This commit is contained in:
parent
8d34bc136b
commit
0b16c8c6d9
@ -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
51
js/src/dom/data.js
Normal 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
|
@ -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
|
42
js/src/dom/selectorEngine.js
Normal file
42
js/src/dom/selectorEngine.js
Normal 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
|
@ -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
|
||||
|
@ -97,7 +97,9 @@
|
||||
</script>
|
||||
|
||||
<!-- Transpiled Plugins -->
|
||||
<script src="../dist/dom/event.js"></script>
|
||||
<script src="../dist/dom/eventHandler.js"></script>
|
||||
<script src="../dist/dom/selectorEngine.js"></script>
|
||||
<script src="../dist/dom/data.js"></script>
|
||||
<script src="../dist/util.js"></script>
|
||||
<script src="../dist/alert.js"></script>
|
||||
<script src="../dist/button.js"></script>
|
||||
|
@ -12,7 +12,8 @@
|
||||
"Button": false,
|
||||
"Carousel": false,
|
||||
"Simulator": false,
|
||||
"Toast": false
|
||||
"Toast": false,
|
||||
"EventHandler": false
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 5,
|
||||
|
@ -70,16 +70,19 @@ $(function () {
|
||||
QUnit.test('should not fire closed when close is prevented', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
$('<div class="alert"/>')
|
||||
.on('close.bs.alert', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'close event fired')
|
||||
done()
|
||||
})
|
||||
.on('closed.bs.alert', function () {
|
||||
assert.ok(false, 'closed event fired')
|
||||
})
|
||||
.bootstrapAlert('close')
|
||||
var $alert = $('<div class="alert"/>')
|
||||
$alert.appendTo('#qunit-fixture')
|
||||
|
||||
EventHandler.on($alert[0], 'close.bs.alert', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'close event fired')
|
||||
done()
|
||||
})
|
||||
EventHandler.on($alert[0], 'closed.bs.alert', function () {
|
||||
assert.ok(false, 'closed event fired')
|
||||
})
|
||||
|
||||
$alert.bootstrapAlert('close')
|
||||
})
|
||||
|
||||
QUnit.test('close should use internal _element if no element provided', function (assert) {
|
||||
|
@ -52,7 +52,9 @@
|
||||
</div>
|
||||
|
||||
<script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
|
||||
<script src="../../dist/dom/event.js"></script>
|
||||
<script src="../../dist/dom/eventHandler.js"></script>
|
||||
<script src="../../dist/dom/selectorEngine.js"></script>
|
||||
<script src="../../dist/dom/data.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/alert.js"></script>
|
||||
</body>
|
||||
|
@ -45,7 +45,7 @@
|
||||
</div>
|
||||
|
||||
<script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
|
||||
<script src="../../dist/dom/event.js"></script>
|
||||
<script src="../../dist/dom/eventHandler.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/button.js"></script>
|
||||
</body>
|
||||
|
@ -46,7 +46,7 @@
|
||||
</div>
|
||||
|
||||
<script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
|
||||
<script src="../../dist/dom/event.js"></script>
|
||||
<script src="../../dist/dom/eventHandler.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/carousel.js"></script>
|
||||
<script>
|
||||
|
@ -72,7 +72,7 @@
|
||||
</div>
|
||||
|
||||
<script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
|
||||
<script src="../../dist/dom/event.js"></script>
|
||||
<script src="../../dist/dom/eventHandler.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/collapse.js"></script>
|
||||
</body>
|
||||
|
@ -205,7 +205,7 @@
|
||||
|
||||
<script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
|
||||
<script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
|
||||
<script src="../../dist/dom/event.js"></script>
|
||||
<script src="../../dist/dom/eventHandler.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/dropdown.js"></script>
|
||||
<script src="../../dist/collapse.js"></script>
|
||||
|
@ -207,13 +207,12 @@
|
||||
|
||||
<script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
|
||||
<script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
|
||||
<script src="../../dist/dom/event.js"></script>
|
||||
<script src="../../dist/dom/eventHandler.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/modal.js"></script>
|
||||
<script src="../../dist/collapse.js"></script>
|
||||
<script src="../../dist/tooltip.js"></script>
|
||||
<script src="../../dist/popover.js"></script>
|
||||
|
||||
<script>
|
||||
var firefoxTestDone = false
|
||||
function reportFirefoxTestResult(result) {
|
||||
|
@ -33,11 +33,10 @@
|
||||
|
||||
<script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
|
||||
<script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
|
||||
<script src="../../dist/dom/event.js"></script>
|
||||
<script src="../../dist/dom/eventHandler.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/tooltip.js"></script>
|
||||
<script src="../../dist/popover.js"></script>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$('[data-toggle="popover"]').popover()
|
||||
|
@ -88,7 +88,7 @@
|
||||
|
||||
<script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
|
||||
<script src="../../../site/docs/4.2/assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../dist/dom/event.js"></script>
|
||||
<script src="../../dist/dom/eventHandler.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/scrollspy.js"></script>
|
||||
<script src="../../dist/dropdown.js"></script>
|
||||
|
@ -227,7 +227,7 @@
|
||||
|
||||
<script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
|
||||
<script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
|
||||
<script src="../../dist/dom/event.js"></script>
|
||||
<script src="../../dist/dom/eventHandler.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/tab.js"></script>
|
||||
<script src="../../dist/dropdown.js"></script>
|
||||
|
Loading…
x
Reference in New Issue
Block a user