Skip to content

GitLab

Commit 620dea96 authored by Michael Iseard's avatar Michael Iseard
Browse files

Replace MicroModal with custom modal class to prevent minimize errors

parent d0cfc228
Hide whitespace changes
Inline Side-by-side
src/common/helpers/modal.js
View file @ 620dea96
import MicroModal from "micromodal"
import KudosModal from "../../public/KudosModal"
// 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()
}
},
})
showMessage()
message.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-micromodal-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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment