modal-manager.js

import Emitter from 'wildemitter'
import { isFunction } from 'lodash'

const EVENTS = {
  register: '@modals/REGISTER',
  show: '@modals/SHOW',
  hide: '@modals/HIDE',
  destroy: '@modals/DESTROY'
}

const INITIAL_MODAL_STATE = {
  show: false,
  listeners: []
}

function ModalManager () {
  this.modals = {}
  this.current = null
}

Emitter.mixin(ModalManager)

// this is the singleton manager we use across the app
const manager = new ModalManager()

manager.on(EVENTS.register, registerModal)
manager.on(EVENTS.show, showModal)
manager.on(EVENTS.hide, hideModal)
manager.on(EVENTS.destroy, destroyModal)

function registerModal (modalId) {
  const { modals } = manager
  if (!modals[modalId]) {
    modals[modalId] = INITIAL_MODAL_STATE
  }
  manager.modals = modals
}

function showModal (modalId) {
  const { modals } = manager
  const newModals = {
    ...modals,
    [modalId]: {
      ...modals[modalId],
      show: true
    }
  }
  manager.modals = newModals
  setCurrent(modalId)
}

function hideModal (modalId) {
  const { modals } = manager
  const newModals = {
    ...modals,
    [modalId]: {
      ...modals[modalId],
      show: false      
    }
  }
  manager.modals = newModals
  unsetCurrent(modalId)
}

function destroyModal (modalId) {
  const { modals } = manager
  delete modals[modalId]
  unsetCurrent(modalId)
}

function setCurrent (modalId) {
  manager.current = modalId
}

function unsetCurrent (modalId) {
  manager.current = null
}

ModalManager.prototype.getState = function () {
  const { modals, current } = this
  return { modals, current }
}

ModalManager.prototype.shouldShow = function (modalId) {
  const hOP = this.modals.hasOwnProperty(modalId)
  return this.modals && hOP && this.modals[modalId].show
}

ModalManager.prototype.isCurrent = function (modalId) {
  return this.current === modalId
}

ModalManager.prototype.register = function (modalId, onRegister) {
  this.emit(EVENTS.register, modalId)
  isFunction(onRegister) && onRegister()
  this.publish(modalId, this.getState())
}

ModalManager.prototype.show = function (modalId, onShow) {
  this.emit(EVENTS.show, modalId)
  isFunction(onShow) && onShow()
  this.publish(modalId, this.getState())
}

ModalManager.prototype.hide = function (modalId, onHide) {
  this.emit(EVENTS.hide, modalId)
  isFunction(onHide) && onHide()
  this.publish(modalId, this.getState())
}

ModalManager.prototype.destroy = function (modalId, onDestroy) {
  this.emit(EVENTS.destroy, modalId)
  isFunction(onDestroy) && onDestroy()
  this.publish(modalId, this.getState())
}

ModalManager.prototype.subscribe = function (modalId, listener) {
  const modals = this.modals

  if(!modals.hasOwnProperty(modalId)) {
    modals[modalId] = INITIAL_MODAL_STATE
  }

  const listenerIndex = modals[modalId].listeners.push(listener) -1;

  return function() {
    delete modals[modalId].listeners[listenerIndex]
  }
}

ModalManager.prototype.publish = function (modalId, payload) {
  const modals = this.modals
  if(!modals.hasOwnProperty(modalId)) return
  modals[modalId].listeners.forEach(listener => {
    listener(payload != undefined ? payload : {})
  })
}

export default manager