0
0
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:
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

View File

@ -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>

View File

@ -12,7 +12,8 @@
"Button": false,
"Carousel": false,
"Simulator": false,
"Toast": false
"Toast": false,
"EventHandler": false
},
"parserOptions": {
"ecmaVersion": 5,

View File

@ -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) {

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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) {

View File

@ -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()

View File

@ -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>

View File

@ -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>