Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const FOCUSABLE = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]'
- export default class Modal {
- constructor (options) {
- const focusableChildren = options.el.querySelectorAll(FOCUSABLE)
- this.el = options.el
- this.activeClass = options.activeClass
- this.firstFocusableChild = focusableChildren[0]
- this.lastFocusableChild = focusableChildren[focusableChildren.length - 1]
- this.elBeforeOpen = null
- this.scrollBeforeOpen = null
- this._onKeydown = this._onKeydown.bind(this)
- }
- show () {
- this.scrollBeforeOpen = document.documentElement.scrollTop
- this.elBeforeOpen = document.activeElement
- document.body.setAttribute('style', [
- 'position: fixed',
- 'width: 100%',
- 'top: ' + -this.scrollBeforeOpen + 'px'
- ].join(';'))
- document.addEventListener('keydown', this._onKeydown)
- this.el.classList.add(this.activeClass)
- this.firstFocusableEL.focus()
- }
- hide () {
- document.body.removeAttribute('style')
- document.documentElement.scrollTop = this.scrollBeforeOpen
- document.removeEventListener('keydown', this._onKeydown)
- this.el.classList.remove(this.activeClass)
- this.elBeforeOpen.focus()
- }
- _onKeydown (e) {
- if (e.key === 'Tab') {
- if (e.shiftKey) {
- if (document.activeElement === this.firstFocusableChild) {
- e.preventDefault()
- this.lastFocusableChild.focus()
- }
- } else {
- if (document.activeElement === this.lastFocusableChild) {
- e.preventDefault()
- this.firstFocusableChild.focus()
- }
- }
- }
- if (e.key === 'Escape') {
- e.preventDefault()
- this.hide()
- }
- }
- }
- const modal = new Modal({
- el: document.querySelector('.modal'),
- activeClass: '.modal--active'
- })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement