From 2630b05eb34c669d1771200b572efb09eb16c9f5 Mon Sep 17 00:00:00 2001
From: Rohit Sharma <rohit2sharma95@gmail.com>
Date: Fri, 20 Nov 2020 14:43:13 +0530
Subject: [PATCH] Make the attribute methods bs specific (#32173)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
js/src/dom/manipulator.js | 6 ++--
js/src/modal.js | 18 ++++++------
js/tests/unit/dom/manipulator.spec.js | 40 +++++++++++++++------------
3 files changed, 34 insertions(+), 30 deletions(-)
diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js
index faab54b5ef..ed74e0ce26 100644
--- a/js/src/dom/manipulator.js
+++ b/js/src/dom/manipulator.js
@@ -31,11 +31,11 @@ function normalizeDataKey(key) {
const Manipulator = {
setDataAttribute(element, key, value) {
- element.setAttribute(`data-${normalizeDataKey(key)}`, value)
+ element.setAttribute(`data-bs-${normalizeDataKey(key)}`, value)
},
removeDataAttribute(element, key) {
- element.removeAttribute(`data-${normalizeDataKey(key)}`)
+ element.removeAttribute(`data-bs-${normalizeDataKey(key)}`)
},
getDataAttributes(element) {
@@ -57,7 +57,7 @@ const Manipulator = {
},
getDataAttribute(element, key) {
- return normalizeData(element.getAttribute(`data-${normalizeDataKey(key)}`))
+ return normalizeData(element.getAttribute(`data-bs-${normalizeDataKey(key)}`))
},
offset(element) {
diff --git a/js/src/modal.js b/js/src/modal.js
index 548b1d801f..b220bfa945 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -473,7 +473,7 @@ class Modal {
.forEach(element => {
const actualPadding = element.style.paddingRight
const calculatedPadding = window.getComputedStyle(element)['padding-right']
- Manipulator.setDataAttribute(element, 'bs-padding-right', actualPadding)
+ Manipulator.setDataAttribute(element, 'padding-right', actualPadding)
element.style.paddingRight = `${Number.parseFloat(calculatedPadding) + this._scrollbarWidth}px`
})
@@ -482,7 +482,7 @@ class Modal {
.forEach(element => {
const actualMargin = element.style.marginRight
const calculatedMargin = window.getComputedStyle(element)['margin-right']
- Manipulator.setDataAttribute(element, 'bs-margin-right', actualMargin)
+ Manipulator.setDataAttribute(element, 'margin-right', actualMargin)
element.style.marginRight = `${Number.parseFloat(calculatedMargin) - this._scrollbarWidth}px`
})
@@ -490,7 +490,7 @@ class Modal {
const actualPadding = document.body.style.paddingRight
const calculatedPadding = window.getComputedStyle(document.body)['padding-right']
- Manipulator.setDataAttribute(document.body, 'bs-padding-right', actualPadding)
+ Manipulator.setDataAttribute(document.body, 'padding-right', actualPadding)
document.body.style.paddingRight = `${Number.parseFloat(calculatedPadding) + this._scrollbarWidth}px`
}
@@ -501,9 +501,9 @@ class Modal {
// Restore fixed content padding
SelectorEngine.find(SELECTOR_FIXED_CONTENT)
.forEach(element => {
- const padding = Manipulator.getDataAttribute(element, 'bs-padding-right')
+ const padding = Manipulator.getDataAttribute(element, 'padding-right')
if (typeof padding !== 'undefined') {
- Manipulator.removeDataAttribute(element, 'bs-padding-right')
+ Manipulator.removeDataAttribute(element, 'padding-right')
element.style.paddingRight = padding
}
})
@@ -511,19 +511,19 @@ class Modal {
// Restore sticky content and navbar-toggler margin
SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`)
.forEach(element => {
- const margin = Manipulator.getDataAttribute(element, 'bs-margin-right')
+ const margin = Manipulator.getDataAttribute(element, 'margin-right')
if (typeof margin !== 'undefined') {
- Manipulator.removeDataAttribute(element, 'bs-margin-right')
+ Manipulator.removeDataAttribute(element, 'margin-right')
element.style.marginRight = margin
}
})
// Restore body padding
- const padding = Manipulator.getDataAttribute(document.body, 'bs-padding-right')
+ const padding = Manipulator.getDataAttribute(document.body, 'padding-right')
if (typeof padding === 'undefined') {
document.body.style.paddingRight = ''
} else {
- Manipulator.removeDataAttribute(document.body, 'bs-padding-right')
+ Manipulator.removeDataAttribute(document.body, 'padding-right')
document.body.style.paddingRight = padding
}
}
diff --git a/js/tests/unit/dom/manipulator.spec.js b/js/tests/unit/dom/manipulator.spec.js
index 4f5ef715e8..3d91e6f744 100644
--- a/js/tests/unit/dom/manipulator.spec.js
+++ b/js/tests/unit/dom/manipulator.spec.js
@@ -15,13 +15,13 @@ describe('Manipulator', () => {
})
describe('setDataAttribute', () => {
- it('should set data attribute', () => {
+ it('should set data attribute prefixed with bs', () => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
Manipulator.setDataAttribute(div, 'key', 'value')
- expect(div.getAttribute('data-key')).toEqual('value')
+ expect(div.getAttribute('data-bs-key')).toEqual('value')
})
it('should set data attribute in kebab case', () => {
@@ -30,37 +30,39 @@ describe('Manipulator', () => {
const div = fixtureEl.querySelector('div')
Manipulator.setDataAttribute(div, 'testKey', 'value')
- expect(div.getAttribute('data-test-key')).toEqual('value')
+ expect(div.getAttribute('data-bs-test-key')).toEqual('value')
})
})
describe('removeDataAttribute', () => {
- it('should remove data attribute', () => {
- fixtureEl.innerHTML = '<div data-key="value"></div>'
+ it('should only remove bs-prefixed data attribute', () => {
+ fixtureEl.innerHTML = '<div data-bs-key="value" data-key-bs="postfixed" data-key="value"></div>'
const div = fixtureEl.querySelector('div')
Manipulator.removeDataAttribute(div, 'key')
- expect(div.getAttribute('data-key')).toBeNull()
+ expect(div.getAttribute('data-bs-key')).toBeNull()
+ expect(div.getAttribute('data-key-bs')).toEqual('postfixed')
+ expect(div.getAttribute('data-key')).toEqual('value')
})
it('should remove data attribute in kebab case', () => {
- fixtureEl.innerHTML = '<div data-test-key="value"></div>'
+ fixtureEl.innerHTML = '<div data-bs-test-key="value"></div>'
const div = fixtureEl.querySelector('div')
Manipulator.removeDataAttribute(div, 'testKey')
- expect(div.getAttribute('data-test-key')).toBeNull()
+ expect(div.getAttribute('data-bs-test-key')).toBeNull()
})
})
describe('getDataAttributes', () => {
- it('should return empty object for null', () => {
+ it('should return an empty object for null', () => {
expect(Manipulator.getDataAttributes(null)).toEqual({})
expect().nothing()
})
- it('should get only bs prefixed data attributes without bs namespace', () => {
+ it('should get only bs-prefixed data attributes without bs namespace', () => {
fixtureEl.innerHTML = '<div data-bs-toggle="tabs" data-bs-target="#element" data-another="value" data-target-bs="#element" data-in-bs-out="in-between"></div>'
const div = fixtureEl.querySelector('div')
@@ -73,16 +75,18 @@ describe('Manipulator', () => {
})
describe('getDataAttribute', () => {
- it('should get data attribute', () => {
- fixtureEl.innerHTML = '<div data-test="null" ></div>'
+ it('should only get bs-prefixed data attribute', () => {
+ fixtureEl.innerHTML = '<div data-bs-key="value" data-test-bs="postFixed" data-toggle="tab"></div>'
const div = fixtureEl.querySelector('div')
+ expect(Manipulator.getDataAttribute(div, 'key')).toEqual('value')
expect(Manipulator.getDataAttribute(div, 'test')).toBeNull()
+ expect(Manipulator.getDataAttribute(div, 'toggle')).toBeNull()
})
it('should get data attribute in kebab case', () => {
- fixtureEl.innerHTML = '<div data-test-key="value" ></div>'
+ fixtureEl.innerHTML = '<div data-bs-test-key="value" ></div>'
const div = fixtureEl.querySelector('div')
@@ -90,22 +94,22 @@ describe('Manipulator', () => {
})
it('should normalize data', () => {
- fixtureEl.innerHTML = '<div data-test="false" ></div>'
+ fixtureEl.innerHTML = '<div data-bs-test="false" ></div>'
const div = fixtureEl.querySelector('div')
expect(Manipulator.getDataAttribute(div, 'test')).toEqual(false)
- div.setAttribute('data-test', 'true')
+ div.setAttribute('data-bs-test', 'true')
expect(Manipulator.getDataAttribute(div, 'test')).toEqual(true)
- div.setAttribute('data-test', '1')
+ div.setAttribute('data-bs-test', '1')
expect(Manipulator.getDataAttribute(div, 'test')).toEqual(1)
})
})
describe('offset', () => {
- it('should return object with two properties top and left, both numbers', () => {
+ it('should return an object with two properties top and left, both numbers', () => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
@@ -118,7 +122,7 @@ describe('Manipulator', () => {
})
describe('position', () => {
- it('should return object with two properties top and left, both numbers', () => {
+ it('should return an object with two properties top and left, both numbers', () => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
--
GitLab