diff options
author | Rohit Sharma <rohit2sharma95@gmail.com> | 2020-11-20 12:13:13 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-11-20 12:13:13 +0300 |
commit | 2630b05eb34c669d1771200b572efb09eb16c9f5 (patch) | |
tree | d5e80b35df67cf1e0264d51c0e57da9119352899 | |
parent | a96b118f04ab7a048a8e02d0e988c95f1375b511 (diff) |
Make the attribute methods bs specific (#32173)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
-rw-r--r-- | js/src/dom/manipulator.js | 6 | ||||
-rw-r--r-- | js/src/modal.js | 18 | ||||
-rw-r--r-- | 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') |