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

Add support for modal toggling and tracking all active modal instances #363

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add support for modal toggling and tracking all active modal instances #363

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 18 additions & 12 deletions lib/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const MicroModal = (() => {

/**
* Loops through all openTriggers and binds click event
* @param {array} triggers [Array of node elements]
* @param {Array|HTMLElement} triggers [Array of node elements]
* @return {void}
*/
registerTriggers (...triggers) {
Expand Down Expand Up @@ -139,7 +139,7 @@ const MicroModal = (() => {
}

getFocusableNodes () {
const nodes = this.modal.querySelectorAll(FOCUSABLE_ELEMENTS)
const nodes = this.modal.querySelectorAll(FOCUSABLE_ELEMENTS.join(','))
return Array(...nodes)
}

Expand Down Expand Up @@ -204,8 +204,8 @@ const MicroModal = (() => {
* auto binding event handlers on modal triggers
*/

// Keep a reference to the opened modal
let activeModal = null
// Keep a reference to the opened modals
let activeModals = {}

/**
* Generates an associative array of modals and it's
Expand All @@ -229,7 +229,7 @@ const MicroModal = (() => {
/**
* Validates whether a modal of the given id exists
* in the DOM
* @param {number} id The id of the modal
* @param {string} id The id of the modal
* @return {boolean}
*/
const validateModalPresence = id => {
Expand Down Expand Up @@ -264,7 +264,7 @@ const MicroModal = (() => {
const validateArgs = (triggers, triggerMap) => {
validateTriggerPresence(triggers)
if (!triggerMap) return true
for (var id in triggerMap) validateModalPresence(id)
for (let id in triggerMap) validateModalPresence(id)
return true
}

Expand All @@ -287,11 +287,11 @@ const MicroModal = (() => {
if (options.debugMode === true && validateArgs(triggers, triggerMap) === false) return

// For every target modal creates a new instance
for (var key in triggerMap) {
for (let key in triggerMap) {
let value = triggerMap[key]
options.targetModal = key
options.triggers = [...value]
activeModal = new Modal(options) // eslint-disable-line no-new
activeModals[key] = new Modal(options) // eslint-disable-line no-new
}
}

Expand All @@ -309,11 +309,11 @@ const MicroModal = (() => {
if (options.debugMode === true && validateModalPresence(targetModal) === false) return

// clear events in case previous modal wasn't close
if (activeModal) activeModal.removeEventListeners()
if (activeModals[targetModal]) activeModals[targetModal].removeEventListeners()

// stores reference to active modal
activeModal = new Modal(options) // eslint-disable-line no-new
activeModal.showModal()
activeModals[targetModal] = new Modal(options) // eslint-disable-line no-new
activeModals[targetModal].showModal()
}

/**
Expand All @@ -322,7 +322,13 @@ const MicroModal = (() => {
* @return {void}
*/
const close = targetModal => {
targetModal ? activeModal.closeModalById(targetModal) : activeModal.closeModal()
if (targetModal) {
activeModals[targetModal].closeModalById(targetModal)
} else {
for (let id in activeModals) {
activeModals[id].closeModal()
}
}
}

return { init, show, close }
Expand Down