Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Michael Iseard
Kudos-Donations
Commits
16b20900
Commit
16b20900
authored
Oct 13, 2021
by
Michael Iseard
Browse files
Add JSDoc comments to methods
parent
8ac8c394
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/public/KudosModal.js
View file @
16b20900
class
KudosModal
{
constructor
(
modal
,
options
=
[])
{
constructor
(
modal
,
options
=
{})
{
// Get the modal element
this
.
modal
=
document
.
getElementById
(
modal
)
// Assign options and their defaults
this
.
options
=
{
timeOut
:
options
.
timeOut
??
300
,
triggerElement
:
options
.
triggerElement
,
...
...
@@ -13,9 +17,14 @@ class KudosModal {
onClose
:
options
.
onClose
,
onClosed
:
options
.
onClosed
}
// Initial state is closed
this
.
isOpen
=
false
this
.
modal
=
document
.
getElementById
(
modal
)
// Get close elements
this
.
closeModal
=
this
.
modal
.
querySelectorAll
(
'
[data-modal-close]
'
)
// Elements in modal that are focusable
this
.
focusableElements
=
[
'
a[href]
'
,
'
area[href]
'
,
...
...
@@ -53,7 +62,10 @@ class KudosModal {
}
open
()
{
/**
* Opens modal.
*/
open
=
()
=>
{
this
.
modal
.
setAttribute
(
'
aria-hidden
'
,
'
false
'
)
this
.
modal
.
classList
.
add
(
this
.
options
.
openClass
)
this
.
modal
.
querySelector
(
'
.kudos-modal-container
'
).
focus
()
...
...
@@ -62,14 +74,13 @@ class KudosModal {
this
.
addEventListeners
()
// Create and dispatch event
window
.
dispatchEvent
(
new
CustomEvent
(
'
kudos
Open
Modal
'
,
{
detail
:
this
}))
window
.
dispatchEvent
(
new
CustomEvent
(
'
kudosModal
Open
'
,
{
detail
:
this
}))
// Fire onOpen function
if
(
typeof
this
.
options
.
onOpen
===
'
function
'
)
{
this
.
options
.
onOpen
(
this
.
modal
)
}
// Timout
setTimeout
(()
=>
{
// Fire onOpened function
if
(
typeof
this
.
options
.
onOpened
===
'
function
'
)
{
...
...
@@ -78,21 +89,23 @@ class KudosModal {
},
this
.
options
.
timeOut
)
}
close
()
{
/**
* Closes modal.
*/
close
=
()
=>
{
this
.
modal
.
setAttribute
(
'
aria-hidden
'
,
'
true
'
)
// Remove event listeners
this
.
removeEventListeners
()
// Create and dispatch event
window
.
dispatchEvent
(
new
CustomEvent
(
'
kudos
Close
Modal
'
,
{
detail
:
this
}))
window
.
dispatchEvent
(
new
CustomEvent
(
'
kudosModal
Close
'
,
{
detail
:
this
}))
// Fire onClose function
if
(
typeof
this
.
options
.
onClose
===
'
function
'
)
{
this
.
options
.
onClose
(
this
.
modal
)
}
// Timout
setTimeout
(()
=>
{
this
.
modal
.
classList
.
remove
(
this
.
options
.
openClass
)
...
...
@@ -103,44 +116,75 @@ class KudosModal {
},
this
.
options
.
timeOut
)
}
addEventListeners
()
{
/**
* Registers event listeners.
*/
addEventListeners
=
()
=>
{
window
.
addEventListener
(
'
keydown
'
,
this
.
handleKeyPress
)
window
.
addEventListener
(
'
click
'
,
this
.
handleClick
)
}
removeEventListeners
()
{
/**
* Remove registered event listeners.
*/
removeEventListeners
=
()
=>
{
window
.
removeEventListener
(
'
keydown
'
,
this
.
handleKeyPress
)
window
.
removeEventListener
(
'
click
'
,
this
.
handleClick
)
}
getFocusableContent
()
{
return
Array
.
from
(
this
.
modal
.
querySelectorAll
(
this
.
focusableElements
)).
filter
((
e
)
=>
{
return
(
e
.
offsetParent
!==
null
)
})
}
handleClick
(
e
)
{
/**
* Gets all focusable content specified in this.focusableElements
* and removes non-visible elements.
*
* @returns {array}
*/
getFocusableContent
=
()
=>
Array
.
from
(
this
.
modal
.
querySelectorAll
(
this
.
focusableElements
)).
filter
((
e
)
=>
{
return
(
e
.
offsetParent
!==
null
)
})
/**
* Handles click event and calls relevant function.
*
* @param {Event} e
*/
handleClick
=
e
=>
{
if
(
e
.
target
.
classList
.
contains
(
this
.
options
.
overlayClass
))
this
.
handleOverlayClose
()
}
handleKeyPress
(
e
)
{
/**
* Handles key press event and calls relevant function.
*
* @param {KeyboardEvent} e
*/
handleKeyPress
=
e
=>
{
if
(
e
.
key
===
'
Escape
'
||
e
.
keyCode
===
27
)
this
.
handleEscapeClose
()
if
(
e
.
key
===
'
Tab
'
||
e
.
keyCode
===
9
)
this
.
handleTab
(
e
)
}
handleOverlayClose
()
{
/**
* Handles click event on overlay by closing modal.
*/
handleOverlayClose
=
()
=>
{
if
(
this
.
options
.
overlayClose
)
{
this
.
close
()
}
}
handleEscapeClose
()
{
/**
* Handles escape button press by closing modal.
*/
handleEscapeClose
=
()
=>
{
if
(
this
.
options
.
escapeClose
)
{
this
.
close
()
}
}
handleTab
(
e
)
{
/**
* Handles tab presses and contains focus within modal.
*
* @param {KeyboardEvent} e
*/
handleTab
=
e
=>
{
const
focusableContent
=
this
.
getFocusableContent
()
// Bail if no focusable content
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment