Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(js): removes .modal .navbar-toggler margin #25745

Merged
merged 2 commits into from
Jul 11, 2018
Merged

fix(js): removes .modal .navbar-toggler margin #25745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ce76e8
fix(modal): removes .navbar-toggler margin
zalog Mar 1, 2018
9105feb
fix(modal): fix unit test and resetting style
Johann-S Jul 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 7 additions & 22 deletions js/src/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,7 @@ const Modal = (($) => {
DATA_TOGGLE : '[data-toggle="modal"]',
DATA_DISMISS : '[data-dismiss="modal"]',
FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
STICKY_CONTENT : '.sticky-top',
NAVBAR_TOGGLER : '.navbar-toggler'
STICKY_CONTENT : '.sticky-top'
}

/**
Expand Down Expand Up @@ -432,7 +431,6 @@ const Modal = (($) => {
// while $(DOMNode).css('padding-right') returns the calculated value or 0 if not set
const fixedContent = [].slice.call(document.querySelectorAll(Selector.FIXED_CONTENT))
const stickyContent = [].slice.call(document.querySelectorAll(Selector.STICKY_CONTENT))
const navbarToggler = [].slice.call(document.querySelectorAll(Selector.NAVBAR_TOGGLER))

// Adjust fixed content padding
$(fixedContent).each((index, element) => {
Expand All @@ -452,15 +450,6 @@ const Modal = (($) => {
.css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
})

// Adjust navbar-toggler margin
$(navbarToggler).each((index, element) => {
const actualMargin = element.style.marginRight
const calculatedMargin = $(element).css('margin-right')
$(element)
.data('margin-right', actualMargin)
.css('margin-right', `${parseFloat(calculatedMargin) + this._scrollbarWidth}px`)
})

// Adjust body padding
const actualPadding = document.body.style.paddingRight
const calculatedPadding = $(document.body).css('padding-right')
Expand All @@ -475,15 +464,12 @@ const Modal = (($) => {
const fixedContent = [].slice.call(document.querySelectorAll(Selector.FIXED_CONTENT))
$(fixedContent).each((index, element) => {
const padding = $(element).data('padding-right')
if (typeof padding !== 'undefined') {
$(element)
.css('padding-right', padding)
.removeData('padding-right')
}
$(element).removeData('padding-right')
element.style.paddingRight = padding ? padding : ''
})

// Restore sticky content and navbar-toggler margin
const elements = [].slice.call(document.querySelectorAll(`${Selector.STICKY_CONTENT}, ${Selector.NAVBAR_TOGGLER}`))
// Restore sticky content
const elements = [].slice.call(document.querySelectorAll(`${Selector.STICKY_CONTENT}`))
$(elements).each((index, element) => {
const margin = $(element).data('margin-right')
if (typeof margin !== 'undefined') {
Expand All @@ -493,9 +479,8 @@ const Modal = (($) => {

// Restore body padding
const padding = $(document.body).data('padding-right')
if (typeof padding !== 'undefined') {
$(document.body).css('padding-right', padding).removeData('padding-right')
}
$(document.body).removeData('padding-right')
document.body.style.paddingRight = padding ? padding : ''
}

_getScrollbarWidth() { // thx d.walsh
Expand Down
45 changes: 2 additions & 43 deletions js/tests/unit/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ $(function () {
document.body.removeChild(scrollDiv)
return scrollbarWidth
}
// Simulate scrollbars in PhantomJS

// Simulate scrollbars
$('html').css('padding-right', '16px')
},
beforeEach: function () {
Expand Down Expand Up @@ -521,48 +522,6 @@ $(function () {
.bootstrapModal('show')
})

QUnit.test('should adjust the inline margin of the navbar-toggler when opening and restore when closing', function (assert) {
assert.expect(2)
var done = assert.async()
var $element = $('<div class="navbar-toggler"></div>').appendTo('#qunit-fixture')
var originalMargin = $element.css('margin-right')

$('<div id="modal-test"/>')
.on('hidden.bs.modal', function () {
var currentMargin = $element.css('margin-right')
assert.strictEqual(currentMargin, originalMargin, 'navbar-toggler margin should be reset after closing')
$element.remove()
done()
})
.on('shown.bs.modal', function () {
var expectedMargin = parseFloat(originalMargin) + $(this).getScrollbarWidth() + 'px'
var currentMargin = $element.css('margin-right')
assert.strictEqual(currentMargin, expectedMargin, 'navbar-toggler margin should be adjusted while opening')
$(this).bootstrapModal('hide')
})
.bootstrapModal('show')
})

QUnit.test('should store the original margin of the navbar-toggler in data-margin-right before showing', function (assert) {
assert.expect(2)
var done = assert.async()
var $element = $('<div class="navbar-toggler"></div>').appendTo('#qunit-fixture')
var originalMargin = '0px'
$element.css('margin-right', originalMargin)

$('<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')
$element.remove()
done()
})
.on('shown.bs.modal', function () {
assert.strictEqual($element.data('margin-right'), originalMargin, 'original navbar-toggler margin should be stored in data-margin-right')
$(this).bootstrapModal('hide')
})
.bootstrapModal('show')
})

QUnit.test('should ignore values set via CSS when trying to restore body padding after closing', function (assert) {
assert.expect(1)
var done = assert.async()
Expand Down