}
const config = {
- ...Util.getDataAttributes(target),
- ...Util.getDataAttributes(this)
+ ...Manipulator.getDataAttributes(target),
+ ...Manipulator.getDataAttributes(this)
}
const slideIndex = this.getAttribute('data-slide-to')
import Data from './dom/data'
import EventHandler from './dom/eventHandler'
+import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selectorEngine'
import Util from './util'
let data = Data.getData(element, DATA_KEY)
const _config = {
...Default,
- ...Util.getDataAttributes(element),
+ ...Manipulator.getDataAttributes(element),
...typeof config === 'object' && config ? config : {}
}
event.preventDefault()
}
- const triggerData = Util.getDataAttributes(this)
+ const triggerData = Manipulator.getDataAttributes(this)
const selector = Util.getSelectorFromElement(this)
const selectorElements = Util.makeArray(SelectorEngine.find(selector))
-import Util from '../util'
-
/**
* --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-beta): dom/manipulator.js
+ * Bootstrap (v4.1.1): dom/manipulator.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
+const regexDataKey = /[A-Z]/g
+
+function normalizeData(val) {
+ if (val === 'true') {
+ return true
+ } else if (val === 'false') {
+ return false
+ } else if (val === 'null') {
+ return null
+ } else if (val === Number(val).toString()) {
+ return Number(val)
+ } else if (val === '') {
+ return null
+ }
+
+ return val
+}
+
+function normalizeDataKey(key) {
+ return key.replace(regexDataKey, (chr) => chr.toLowerCase())
+}
+
const Manipulator = {
setChecked(input, val) {
if (input instanceof HTMLInputElement) {
},
setDataAttribute(element, key, value) {
- const $ = Util.jQuery
- if (typeof $ !== 'undefined') {
- $(element).data(key, value)
- }
-
- element.setAttribute(`data-${key.replace(/[A-Z]/g, (chr) => `-${chr.toLowerCase()}`)}`, value)
+ element.setAttribute(`data-${normalizeDataKey(key)}`, value)
},
removeDataAttribute(element, key) {
- const $ = Util.jQuery
- if (typeof $ !== 'undefined') {
- $(element).removeData(key)
+ element.removeAttribute(`data-${normalizeDataKey(key)}`)
+ },
+
+ getDataAttributes(element) {
+ if (typeof element === 'undefined' || element === null) {
+ return {}
+ }
+
+ let attributes
+ if (Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'dataset')) {
+ attributes = {
+ ...element.dataset
+ }
+ } else {
+ attributes = {}
+ for (let i = 0; i < element.attributes.length; i++) {
+ const attribute = element.attributes[i]
+
+ if (attribute.nodeName.indexOf('data-') !== -1) {
+ // remove 'data-' part of the attribute name
+ const attributeName = attribute
+ .nodeName
+ .substring('data-'.length)
+ .replace(/-./g, (str) => str.charAt(1).toUpperCase())
+
+ attributes[attributeName] = attribute.nodeValue
+ }
+ }
}
- element.removeAttribute(`data-${key.replace(/[A-Z]/g, (chr) => `-${chr.toLowerCase()}`)}`)
+ for (const key in attributes) {
+ if (!Object.prototype.hasOwnProperty.call(attributes, key)) {
+ continue
+ }
+
+ attributes[key] = normalizeData(attributes[key])
+ }
+
+ return attributes
+ },
+
+ getDataAttribute(element, key) {
+ return normalizeData(element
+ .getAttribute(`data-${normalizeDataKey(key)}`)
+ )
},
offset(element) {
_getConfig(config) {
config = {
...this.constructor.Default,
- ...Util.getDataAttributes(this._element),
+ ...Manipulator.getDataAttributes(this._element),
...config
}
// Restore fixed content padding
Util.makeArray(SelectorEngine.find(Selector.FIXED_CONTENT))
.forEach((element) => {
- const padding = Util.getDataAttribute(element, 'padding-right')
+ const padding = Manipulator.getDataAttribute(element, 'padding-right')
if (typeof padding !== 'undefined') {
Manipulator.removeDataAttribute(element, 'padding-right')
element.style.paddingRight = padding
// Restore sticky content and navbar-toggler margin
Util.makeArray(SelectorEngine.find(`${Selector.STICKY_CONTENT}`))
.forEach((element) => {
- const margin = Util.getDataAttribute(element, 'margin-right')
+ const margin = Manipulator.getDataAttribute(element, 'margin-right')
if (typeof margin !== 'undefined') {
Manipulator.removeDataAttribute(element, 'margin-right')
element.style.marginRight = margin
})
// Restore body padding
- const padding = Util.getDataAttribute(document.body, 'padding-right')
+ const padding = Manipulator.getDataAttribute(document.body, 'padding-right')
if (typeof padding !== 'undefined') {
Manipulator.removeDataAttribute(document.body, 'padding-right')
document.body.style.paddingRight = padding
} else {
document.body.style.paddingRight = ''
}
-
- static _getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
_getScrollbarWidth() { // thx d.walsh
let data = Data.getData(this, DATA_KEY)
const _config = {
...Default,
- ...Util.getDataAttributes(this),
+ ...Manipulator.getDataAttributes(this),
...typeof config === 'object' && config ? config : {}
}
}
})
}
+
+ static _getInstance(element) {
+ return Data.getData(element, DATA_KEY)
+ }
}
/**
const config = Data.getData(target, DATA_KEY)
? 'toggle' : {
- ...Util.getDataAttributes(target),
- ...Util.getDataAttributes(this)
+ ...Manipulator.getDataAttributes(target),
+ ...Manipulator.getDataAttributes(this)
}
if (this.tagName === 'A' || this.tagName === 'AREA') {
EventHandler.on(window, Event.LOAD_DATA_API, () => {
Util.makeArray(SelectorEngine.find(Selector.DATA_SPY))
- .forEach((spy) => new ScrollSpy(spy, Util.getDataAttributes(spy)))
+ .forEach((spy) => new ScrollSpy(spy, Manipulator.getDataAttributes(spy)))
})
/**
} from './tools/sanitizer'
import Data from './dom/data'
import EventHandler from './dom/eventHandler'
+import Manipulator from './dom/manipulator'
import Popper from 'popper.js'
import SelectorEngine from './dom/selectorEngine'
import Util from './util'
}
_getConfig(config) {
- const dataAttributes = Util.getDataAttributes(this.element)
+ const dataAttributes = Manipulator.getDataAttributes(this.element)
Object.keys(dataAttributes)
.forEach((dataAttr) => {
.map((token) => token.trim())
.forEach((tClass) => tip.classList.remove(tClass))
}
-
- static _getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
_handlePopperPlacementChange(popperData) {
}
})
}
+
+ static _getInstance(element) {
+ return Data.getData(element, DATA_KEY)
+ }
}
/**
return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase()
}
-function normalizeData(val) {
- if (val === 'true') {
- return true
- } else if (val === 'false') {
- return false
- } else if (val === 'null') {
- return null
- } else if (val === Number(val).toString()) {
- return Number(val)
- }
-
- return val
-}
-
const Util = {
TRANSITION_END: 'bsTransitionEnd',
return [nodeList]
},
- getDataAttributes(element) {
- if (typeof element === 'undefined' || element === null) {
- return {}
- }
-
- let attributes
- if (Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'dataset')) {
- attributes = this.extend({}, element.dataset)
- } else {
- attributes = {}
- for (let i = 0; i < element.attributes.length; i++) {
- const attribute = element.attributes[i]
- if (attribute.nodeName.indexOf('data-') !== -1) {
- // remove 'data-' part of the attribute name
- const attributeName = attribute.nodeName.substring('data-'.length).replace(/-./g, (str) => str.charAt(1).toUpperCase())
- attributes[attributeName] = attribute.nodeValue
- }
- }
- }
-
- for (const key in attributes) {
- if (!Object.prototype.hasOwnProperty.call(attributes, key)) {
- continue
- }
-
- attributes[key] = normalizeData(attributes[key])
- }
-
- return attributes
- },
-
- getDataAttribute(element, key) {
- return normalizeData(element.getAttribute(`data-${key.replace(/[A-Z]/g, (chr) => `-${chr.toLowerCase()}`)}`))
- },
-
isVisible(element) {
if (typeof element === 'undefined' || element === null) {
return false
</script>
<!-- Transpiled Plugins -->
+ <script src="../dist/dom/polyfill.js"></script>
+ <script src="../dist/dom/manipulator.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/dom/manipulator.js"></script>
<script src="../dist/util.js"></script>
<script src="../dist/alert.js"></script>
<script src="../dist/button.js"></script>
<!-- Unit Tests -->
<script src="unit/dom/eventHandler.js"></script>
+ <script src="unit/dom/manipulator.js"></script>
+ <script src="unit/dom/data.js"></script>
<script src="unit/alert.js"></script>
<script src="unit/button.js"></script>
<script src="unit/carousel.js"></script>
branches: 86,
functions: 89,
lines: 90
+ },
+ each: {
+ overrides: {
+ 'js/src/dom/polyfill.js': {
+ statements: 39,
+ lines: 37,
+ branches: 19,
+ functions: 50
+ }
+ }
}
}
}
--- /dev/null
+$(function () {
+ 'use strict'
+
+ QUnit.module('manipulator')
+
+ QUnit.test('should be defined', function (assert) {
+ assert.expect(1)
+ assert.ok(Manipulator, 'Manipulator is defined')
+ })
+
+ QUnit.test('should set checked for input', function (assert) {
+ assert.expect(2)
+
+ var $input = $('<input type="checkbox" />').appendTo('#qunit-fixture')
+ Manipulator.setChecked($input[0], true)
+
+ assert.ok($input[0].checked)
+
+ Manipulator.setChecked($input[0], false)
+
+ assert.ok(!$input[0].checked)
+ })
+
+ QUnit.test('should not set checked for non input element', function (assert) {
+ assert.expect(1)
+
+ var $div = $('<div />').appendTo('#qunit-fixture')
+ Manipulator.setChecked($div[0], true)
+
+ assert.ok(typeof $div[0].checked === 'undefined')
+ })
+
+ QUnit.test('should verify if an element is checked', function (assert) {
+ assert.expect(2)
+
+ var $input = $('<input type="checkbox" />').appendTo('#qunit-fixture')
+ Manipulator.setChecked($input[0], true)
+
+ assert.ok(Manipulator.isChecked($input[0]))
+
+ Manipulator.setChecked($input[0], false)
+
+ assert.ok(!Manipulator.isChecked($input[0]))
+ })
+
+ QUnit.test('should throw an error when the element is not an input', function (assert) {
+ assert.expect(1)
+
+ var $div = $('<div />').appendTo('#qunit-fixture')
+ try {
+ Manipulator.isChecked($div[0])
+ } catch (e) {
+ assert.strictEqual(e.message, 'INPUT parameter is not an HTMLInputElement')
+ }
+ })
+
+ QUnit.test('should set data attribute', function (assert) {
+ assert.expect(1)
+
+ var $div = $('<div />').appendTo('#qunit-fixture')
+
+ Manipulator.setDataAttribute($div[0], 'test', 'test')
+
+ assert.strictEqual($div[0].getAttribute('data-test'), 'test')
+ })
+
+ QUnit.test('should set data attribute in lower case', function (assert) {
+ assert.expect(1)
+
+ var $div = $('<div />').appendTo('#qunit-fixture')
+
+ Manipulator.setDataAttribute($div[0], 'tEsT', 'test')
+
+ assert.strictEqual($div[0].getAttribute('data-test'), 'test')
+ })
+
+ QUnit.test('should get data attribute', function (assert) {
+ assert.expect(2)
+
+ var $div = $('<div data-test="null" />').appendTo('#qunit-fixture')
+
+ assert.strictEqual(Manipulator.getDataAttribute($div[0], 'test'), null)
+
+ var $div2 = $('<div data-test2="js" />').appendTo('#qunit-fixture')
+
+ assert.strictEqual(Manipulator.getDataAttribute($div2[0], 'tEst2'), 'js')
+ })
+
+ QUnit.test('should get data attributes', function (assert) {
+ assert.expect(2)
+
+ var $div = $('<div data-test="js" data-test2="js2" />').appendTo('#qunit-fixture')
+ var $div2 = $('<div data-test3="js" data-test4="js2" />').appendTo('#qunit-fixture')
+
+ assert.propEqual(Manipulator.getDataAttributes($div[0]), {
+ test: 'js',
+ test2: 'js2'
+ })
+
+ var stub = sinon
+ .stub(Object, 'getOwnPropertyDescriptor')
+ .callsFake(function () {
+ return false
+ })
+
+ assert.propEqual(Manipulator.getDataAttributes($div2[0]), {
+ test3: 'js',
+ test4: 'js2'
+ })
+
+ stub.restore()
+ })
+
+ QUnit.test('should remove data attribute', function (assert) {
+ assert.expect(2)
+
+ var $div = $('<div />').appendTo('#qunit-fixture')
+
+ Manipulator.setDataAttribute($div[0], 'test', 'test')
+
+ assert.strictEqual($div[0].getAttribute('data-test'), 'test')
+
+ Manipulator.removeDataAttribute($div[0], 'test')
+
+ assert.strictEqual($div[0].getAttribute('data-test'), null)
+ })
+
+ QUnit.test('should remove data attribute in lower case', function (assert) {
+ assert.expect(2)
+
+ var $div = $('<div />').appendTo('#qunit-fixture')
+
+ Manipulator.setDataAttribute($div[0], 'test', 'test')
+
+ assert.strictEqual($div[0].getAttribute('data-test'), 'test')
+
+ Manipulator.removeDataAttribute($div[0], 'tESt')
+
+ assert.strictEqual($div[0].getAttribute('data-test'), null)
+ })
+
+ QUnit.test('should return element offsets', function (assert) {
+ assert.expect(2)
+
+ var $div = $('<div />').appendTo('#qunit-fixture')
+
+ var offset = Manipulator.offset($div[0])
+
+ assert.ok(typeof offset.top === 'number')
+ assert.ok(typeof offset.left === 'number')
+ })
+
+ QUnit.test('should return element position', function (assert) {
+ assert.expect(2)
+
+ var $div = $('<div />').appendTo('#qunit-fixture')
+
+ var offset = Manipulator.position($div[0])
+
+ assert.ok(typeof offset.top === 'number')
+ assert.ok(typeof offset.left === 'number')
+ })
+
+ QUnit.test('should toggle class', function (assert) {
+ assert.expect(2)
+
+ var $div = $('<div class="test" />').appendTo('#qunit-fixture')
+
+ Manipulator.toggleClass($div[0], 'test')
+
+ assert.ok(!$div.hasClass('test'))
+
+ Manipulator.toggleClass($div[0], 'test')
+
+ assert.ok($div.hasClass('test'))
+
+ Manipulator.toggleClass(null)
+ })
+})
$('<div id="modal-test"/>')
.on('hidden.bs.modal', function () {
- assert.strictEqual(typeof $body.data('padding-right'), 'undefined', 'data-padding-right should be cleared after closing')
+ assert.strictEqual(document.body.getAttribute('data-padding-right'), null, 'data-padding-right should be cleared after closing')
$body.removeAttr('style')
done()
})
$('<div id="modal-test"/>')
.on('hidden.bs.modal', function () {
- assert.strictEqual(typeof $element.data('padding-right'), 'undefined', 'data-padding-right should be cleared after closing')
+ assert.strictEqual($element[0].getAttribute('data-padding-right'), null, 'data-padding-right should be cleared after closing')
$element.remove()
done()
})
$('<div id="modal-test"/>')
.on('hidden.bs.modal', function () {
- assert.strictEqual(typeof $element.data('margin-right'), 'undefined', 'data-margin-right should be cleared after closing')
+ assert.strictEqual($element[0].getAttribute('data-margin-right'), null, 'data-margin-right should be cleared after closing')
$element.remove()
done()
})