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 srollBehavior: was added padding on right side windows #520

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix srollBehavior: was added padding on right side windows #520

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7bed91a
fix srollBehavior
Oct 5, 2023
23ea555
get scrollbar width before fix scrollBehavior
Oct 5, 2023
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
53 changes: 34 additions & 19 deletions lib/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@ const MicroModal = (() => {

class Modal {
constructor ({
targetModal,
triggers = [],
onShow = () => { },
onClose = () => { },
openTrigger = 'data-micromodal-trigger',
closeTrigger = 'data-micromodal-close',
openClass = 'is-open',
disableScroll = false,
disableFocus = false,
awaitCloseAnimation = false,
awaitOpenAnimation = false,
debugMode = false
}) {
targetModal,
triggers = [],
onShow = () => { },
onClose = () => { },
openTrigger = 'data-micromodal-trigger',
closeTrigger = 'data-micromodal-close',
openClass = 'is-open',
disableScroll = false,
disableFocus = false,
awaitCloseAnimation = false,
awaitOpenAnimation = false,
debugMode = false
}) {
// Save a reference of the modal
this.modal = document.getElementById(targetModal)

Expand Down Expand Up @@ -79,19 +79,21 @@ const MicroModal = (() => {
const modal = this.modal
this.modal.setAttribute('aria-hidden', 'true')
this.removeEventListeners()
this.scrollBehaviour('enable')
if (this.activeElement && this.activeElement.focus) {
this.activeElement.focus()
}
this.config.onClose(this.modal, this.activeElement, event)

if (this.config.awaitCloseAnimation) {
const openClass = this.config.openClass // <- old school ftw
this.modal.addEventListener('animationend', function handler () {
const handler = () => {
this.scrollBehaviour('enable')
modal.classList.remove(openClass)
modal.removeEventListener('animationend', handler, false)
}, false)
}
this.modal.addEventListener('animationend', handler , false)
} else {
this.scrollBehaviour('enable')
modal.classList.remove(this.config.openClass)
}
}
Expand All @@ -104,12 +106,25 @@ const MicroModal = (() => {
scrollBehaviour (toggle) {
if (!this.config.disableScroll) return
const body = document.querySelector('body')
const style = body.currentStyle || window.getComputedStyle(body);
if (typeof body.dataset.rightPadding === 'undefined') {
body.dataset.rightPadding = parseInt(style.paddingRight);
}
if (typeof body.dataset.scrollbarWidth === 'undefined') {
body.dataset.scrollbarWidth = parseInt(window.innerWidth - document.documentElement.clientWidth);
}
switch (toggle) {
case 'enable':
Object.assign(body.style, { overflow: '' })
Object.assign(body.style, {
overflow: '',
paddingRight: body.dataset.rightPadding + 'px',
});
break
case 'disable':
Object.assign(body.style, { overflow: 'hidden' })
Object.assign(body.style, {
overflow: 'hidden',
paddingRight: body.dataset.rightPadding + body.dataset.scrollbarWidth + 'px',
})
break
default:
}
Expand Down Expand Up @@ -214,7 +229,7 @@ const MicroModal = (() => {
* auto binding event handlers on modal triggers
*/

// Keep a reference to the opened modal
// Keep a reference to the opened modal
let activeModal = null

/**
Expand Down