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
620dea96
Commit
620dea96
authored
Oct 12, 2021
by
Michael Iseard
Browse files
Replace MicroModal with custom modal class to prevent minimize errors
parent
d0cfc228
Changes
5
Hide whitespace changes
Inline
Side-by-side
src/common/helpers/modal.js
View file @
620dea96
import
Micro
Modal
from
"
microm
odal
"
import
Kudos
Modal
from
"
../../public/KudosM
odal
"
// Handles the messages by showing the modals in order
export
function
handleMessages
(
messages
)
{
let
showMessage
=
()
=>
{
MicroModal
.
show
(
messages
[
0
].
id
,
{
onClose
:
()
=>
{
messages
.
shift
()
if
(
messages
.
length
)
{
showMessage
()
}
},
awaitCloseAnimation
:
true
,
awaitOpenAnimation
:
true
,
})
}
let
message
=
new
KudosModal
(
messages
[
0
].
id
,
null
,{
onHide
:
()
=>
{
messages
.
shift
()
if
(
messages
.
length
)
{
message
.
open
()
}
},
})
showM
essage
()
m
essage
.
open
()
}
\ No newline at end of file
src/public/KudosModal.js
0 → 100644
View file @
620dea96
class
KudosModal
{
constructor
(
modal
,
trigger
=
null
,
options
=
[])
{
this
.
isOpen
=
false
this
.
modal
=
document
.
getElementById
(
modal
)
this
.
trigger
=
trigger
this
.
closeModal
=
this
.
modal
.
querySelectorAll
(
'
[data-modal-close]
'
)
this
.
options
=
{
timeOut
:
options
.
timeOut
??
300
,
escapeClose
:
options
.
escapeClose
??
true
,
overlayClose
:
options
.
overlayClose
??
false
,
openClass
:
options
.
openClass
??
'
is-open
'
,
overlayClass
:
options
.
overlayClass
??
'
kudos-modal-overlay
'
,
onOpen
:
options
.
onOpen
,
onOpened
:
options
.
onOpened
,
onClose
:
options
.
onClose
,
onClosed
:
options
.
onClosed
}
this
.
focusableElements
=
[
'
a[href]
'
,
'
area[href]
'
,
'
input:not([disabled]):not([type="hidden"]):not([aria-hidden])
'
,
'
select:not([disabled]):not([aria-hidden])
'
,
'
textarea:not([disabled]):not([aria-hidden])
'
,
'
button:not([disabled]):not([aria-hidden])
'
,
'
iframe
'
,
'
object
'
,
'
embed
'
,
'
[contenteditable]
'
,
'
[tabindex]:not([tabindex^="-"])
'
]
// Bind event handlers
this
.
handleKeyPress
=
this
.
handleKeyPress
.
bind
(
this
)
this
.
handleClick
=
this
.
handleClick
.
bind
(
this
)
// Click event listener for trigger element
if
(
this
.
trigger
)
{
this
.
trigger
.
addEventListener
(
"
click
"
,
()
=>
{
if
(
this
.
isOpen
)
{
return
this
.
close
()
}
return
this
.
open
()
})
}
// Close modal button click events
this
.
closeModal
.
forEach
(
item
=>
{
item
.
addEventListener
(
"
click
"
,
()
=>
{
this
.
close
()
})
})
}
open
()
{
this
.
modal
.
setAttribute
(
'
aria-hidden
'
,
'
false
'
)
this
.
modal
.
classList
.
add
(
this
.
options
.
openClass
)
this
.
modal
.
querySelector
(
'
.kudos-modal-container
'
).
focus
()
// Add event listeners
this
.
addEventListeners
()
// Create and dispatch event
window
.
dispatchEvent
(
new
CustomEvent
(
'
kudosOpenModal
'
,
{
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
'
)
{
this
.
options
.
onOpened
(
this
.
modal
)
}
},
this
.
options
.
timeOut
)
}
close
()
{
this
.
modal
.
setAttribute
(
'
aria-hidden
'
,
'
true
'
)
// Remove event listeners
this
.
removeEventListeners
()
// Create and dispatch event
window
.
dispatchEvent
(
new
CustomEvent
(
'
kudosCloseModal
'
,
{
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
)
// Fire onClose function
if
(
typeof
this
.
options
.
onClosed
===
'
function
'
)
{
this
.
options
.
onClosed
(
this
.
modal
)
}
},
this
.
options
.
timeOut
)
}
addEventListeners
()
{
window
.
addEventListener
(
'
keydown
'
,
this
.
handleKeyPress
)
window
.
addEventListener
(
'
click
'
,
this
.
handleClick
)
}
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
)
{
if
(
e
.
target
.
classList
.
contains
(
this
.
options
.
overlayClass
))
this
.
handleOverlayClose
()
}
handleKeyPress
(
e
)
{
if
(
e
.
key
===
'
Escape
'
||
e
.
keyCode
===
27
)
this
.
handleEscapeClose
()
if
(
e
.
key
===
'
Tab
'
||
e
.
keyCode
===
9
)
this
.
handleTab
(
e
)
}
handleOverlayClose
()
{
if
(
this
.
options
.
overlayClose
)
{
this
.
close
()
}
}
handleEscapeClose
()
{
if
(
this
.
options
.
escapeClose
)
{
this
.
close
()
}
}
handleTab
(
e
)
{
const
focusableContent
=
this
.
getFocusableContent
()
// Bail if no focusable content
if
(
focusableContent
.
length
===
0
)
return
const
firstFocusableElement
=
focusableContent
[
0
]
const
lastFocusableElement
=
focusableContent
[
focusableContent
.
length
-
1
]
if
(
e
.
shiftKey
)
{
if
(
document
.
activeElement
===
firstFocusableElement
)
{
lastFocusableElement
.
focus
()
e
.
preventDefault
()
}
}
else
{
if
(
document
.
activeElement
===
lastFocusableElement
)
{
firstFocusableElement
.
focus
()
e
.
preventDefault
()
}
}
}
}
export
default
KudosModal
\ No newline at end of file
src/public/kudos-public.js
View file @
620dea96
import
_
from
'
lodash
'
import
axios
from
'
axios
'
import
MicroModal
from
'
micromodal
'
import
'
jquery-validation
'
import
'
../images/logo-colour-40.png
'
// used as email attachment
import
'
../images/logo-colour.svg
'
import
{
getStyle
,
isVisible
}
from
"
../common/helpers/util
"
import
{
handleMessages
}
from
"
../common/helpers/modal
"
import
{
__
}
from
"
@wordpress/i18n
"
import
{
animateInView
,
animateProgressBar
,
...
...
@@ -17,6 +14,8 @@ import {
resetProgressBar
,
valueChange
}
from
"
../common/helpers/form
"
import
{
__
}
from
"
@wordpress/i18n
"
import
KudosModal
from
"
./KudosModal
"
jQuery
(
document
).
ready
((
$
)
=>
{
...
...
@@ -99,49 +98,21 @@ jQuery(document).ready(($) => {
if
(
kudosButtons
.
length
)
{
// Setup button action
kudosButtons
.
forEach
((
e
)
=>
{
const
target
=
e
.
dataset
.
kudosTarget
e
.
addEventListener
(
'
click
'
,
()
=>
{
if
(
target
)
{
MicroModal
.
show
(
target
,
{
onShow
(
modal
)
{
const
form
=
modal
.
querySelector
(
'
.kudos-form
'
)
// Create and dispatch event
window
.
dispatchEvent
(
new
CustomEvent
(
'
kudosShowModal
'
,
{
detail
:
modal
}))
kudosButtons
.
forEach
((
button
)
=>
{
// Animate progress bar
animateProgressBar
(
form
)
const
modal
=
button
.
dataset
.
kudosTarget
// Clear error message
form
.
querySelector
(
'
.kudos_error_message
'
).
innerHTML
=
""
// Reset and config form
if
(
form
.
length
)
{
modal
.
querySelector
(
'
.kudos-modal-container
'
).
dataset
.
currentTab
=
'
initial
'
resetForm
(
form
)
$
(
form
).
validate
().
resetForm
()
// Set first input as focus
if
(
'
xs
'
!==
screenSize
)
{
form
.
querySelector
(
'
input[name="value"]
'
).
focus
()
}
}
},
onClose
(
modal
)
{
setTimeout
(()
=>
{
resetProgressBar
(
modal
)
},
300
)
// Create and dispatch event
window
.
dispatchEvent
(
new
CustomEvent
(
'
kudosCloseModal
'
,
{
detail
:
modal
}))
},
awaitOpenAnimation
:
true
,
awaitCloseAnimation
:
true
,
})
new
KudosModal
(
modal
,
button
,
{
onOpen
:
(
modal
)
=>
{
const
form
=
modal
.
querySelector
(
'
.kudos-form
'
)
animateProgressBar
(
form
)
// Set first input as focus
if
(
'
xs
'
!==
screenSize
)
{
form
.
querySelector
(
'
input[name="value"]
'
).
focus
()
}
},
onClosed
:
(
modal
)
=>
{
resetProgressBar
(
modal
)
}
})
})
...
...
@@ -180,7 +151,7 @@ jQuery(document).ready(($) => {
// Multi step form navigation.
document
.
querySelectorAll
(
'
.kudos-form [data-direction]
'
).
forEach
((
button
)
=>
{
button
.
addEventListener
(
'
click
'
,
(
e
)
=>
{
button
.
addEventListener
(
'
click
'
,
()
=>
{
// Stop if already busy swapping tabs.
if
(
animating
)
return
false
...
...
@@ -225,7 +196,7 @@ jQuery(document).ready(($) => {
const
error
=
form
.
querySelector
(
'
.kudos_error_message
'
)
const
formData
=
new
FormData
(
e
.
target
)
const
timestamp
=
e
.
target
.
dataset
.
ts
formData
.
append
(
'
timestamp
'
,
timestamp
)
;
formData
.
append
(
'
timestamp
'
,
timestamp
)
form
.
classList
.
add
(
'
kd-is-loading
'
)
error
.
classList
.
add
(
'
kd-hidden
'
)
...
...
@@ -328,5 +299,4 @@ jQuery(document).ready(($) => {
}
)
}
})
\ No newline at end of file
templates/public/modal/_message.html.twig
View file @
620dea96
...
...
@@ -9,6 +9,6 @@
</p>
<div
class=
"kudos-modal-buttons kd-mt-8 kd-block kd-text-right"
>
{{
button
(
__
(
'Ok'
,
'kudos-donations'
),
'primary'
,
'button'
,
{
'data-
micro
modal-close'
:
''
}
)
}}
{{
button
(
__
(
'Ok'
,
'kudos-donations'
),
'primary'
,
'button'
,
{
'data-modal-close'
:
''
}
)
}}
</div>
templates/public/modal/base.html.twig
View file @
620dea96
<div
id=
"kudos-modal-
{{
id
}}
"
class=
"kudos-modal
{{
class
}}
kd-absolute kd-hidden kd-z-1050 kd-text-[16px] xl:kd-text-[18px] 2xl:kd-text-[18px]"
role=
"dialog"
aria-hidden=
"true"
aria-modal=
"true"
aria-label=
"
{{
modal_title
}}
"
>
<div
class=
"kudos-modal-overlay kd-flex kd-justify-center kd-items-center kd-fixed kd-top-0 kd-left-0 kd-w-full kd-h-full kd-bg-[#1a202ccc]"
tabindex=
"-1"
>
<div
class=
"kudos-modal-overlay kd-flex kd-justify-center kd-items-center kd-fixed kd-top-0 kd-left-0 kd-w-full kd-h-full kd-bg-[#1a202ccc]"
>
<div
data-page=
"1"
class=
"kudos-modal-container kd-bg-white kd-p-8 xs:kd-rounded-lg kd-w-full kd-h-full xs:kd-h-auto lg:kd-w-2/4 kd-max-w-lg kd-relative kd-overflow-auto xs:kd-overflow-hidden kd-origin-right
before:kd-w-full before:kd-h-full before:kd-bg-white before:kd-top-0 before:kd-left-0 before:kd-absolute before:kd--z-1 before:kd-opacity-70"
>
before:kd-w-full before:kd-h-full before:kd-bg-white before:kd-top-0 before:kd-left-0 before:kd-absolute before:kd--z-1 before:kd-opacity-70"
tabindex=
"-1"
>
<div
class=
"kudos_modal_header kd-flex kd-items-center kd-justify-between"
>
<span
class=
"kd-mr-3 kd-inline-block kd-flex"
title=
"Kudos Donations"
>
<img
alt=
"Kudos logo"
class=
"kd-h-6"
src=
"
{{
get_asset
(
'images/logo-colour.svg'
)
}}
"
>
...
...
@@ -14,7 +13,8 @@
{%
endblock
header
%}
<span
class=
"focus:kd-ring hover:kd-text-primary-dark xs:kd-inline kd-transition-shadow kd-ease-in-out kd-ring-primary kd-ring-offset-2 kd-rounded-full kd-bg-close-button kd-w-5 kd-h-5 kd-cursor-pointer kd-self-center"
data-micromodal-close
data-modal-close
tabindex=
"0 "
title=
"
{{
__
(
'Previous tab'
,
'kudos-donations'
)
}}
"
></span>
</div>
...
...
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