@travlrcom/uikit/src/js/notification.js

TRAVLR UiKit

/**
****************************************************
***                        *******    ******    ****
***                        ******    ******    *****
***********       **************    ******    ******
***********       *************    ******    *******
***********       ************    ******    ********
***********       ***********    ******    *********
***********       **********    ******    **********
***********       *********    ******    ***********
***********       ********    ******    ************
***********       *******    ******    *************
***********       ******    ******    **************
****************************************************
* --------------------------------------------------
* Travlr UiKit: notification.js
* By Travlr Team
* --------------------------------------------------
*/

import AttributeHandler from './utils/attributeHandler'
import BooleanParse from './utils/booleanParse'
import ErrorMessageHandler from './utils/errorMessageHandler'
import EventHandler from './utils/eventHandler'

// const
const NAME = 'notification'
const DATA_KEY = `trv.${NAME}`
const EVENT_KEY = `.${DATA_KEY}`

const Selector = {
  TRV_TOGGLE: `[trv-toggle="${NAME}"]`,
  TRV_DISMISS: `[trv-dismiss="${NAME}"]`,
  TRV_STATUS: `[trv-status]`
}

const ClassName = {
  ACTIVE: 'active'
}

const EventName = {
  ACTIVE: `active${EVENT_KEY}`,
  INACTIVE: `inactive${EVENT_KEY}`
}

const ErrorMessages = [
  {
    ERROR_ID: 0,
    ERROR_MESSAGE: 'Config must be an object'
  },
  {
    ERROR_ID: 1,
    ERROR_MESSAGE: 'Position must be an object'
  }
]

const ConfigErrorMessage = {
  errorId: 0,
  errorMessages: ErrorMessages
}

const ConfigPositionDefault = {
  top: true,
  bottom: false,
  right: true,
  left: false
}

class Notification {
  constructor (config) {
    if (typeof config !== 'object') {
      const ConfigError = Object.assign({}, ConfigErrorMessage, {
        errorId: 0
      })
      
      new ErrorMessageHandler(ConfigError)
    }

    this._config = config
    this._element = typeof config.element === 'undefined' ? '' : config.element
    this._elementNotificationButton = window.$TravlrSelector(Selector.TRV_TOGGLE)
    this._notificationButtonContext = null
    this._elementNotificationButtonActive = null
    this._elementNotificationButtonDismiss = window.$TravlrSelector(Selector.TRV_DISMISS)
    this._notificationButtonDismissContext = null
    this._elementNotificationTarget = null
    this._notificationTargetContext = null
    this._notificationTargetName = null
    this._elementPosition = typeof config.position !== 'object' ? this._config.position : ConfigPositionDefault
    this._elementContext = ''
    this._isShown = false
    this._autoclose = BooleanParse(this._config.autoclose) || false
    this._interval = this._config.interval && typeof this._config.interval === 'number' ? this._config.interval : 3000
    this._beforeAction = config.beforeAction
    this._afterAction = config.afterAction

    this.init()
  }

  init () {
    if (this._element !== '') {
      this._elementNotificationButton = window.$TravlrSelector(`${Selector.TRV_TOGGLE}[trv-notification-target="${this._element}"]`)
    }

    if (this._elementNotificationButton.length > 0) {
      this._elementNotificationButton.forEach(element => {
        this._notificationButtonContext = element

        const parent = this

        // trigger when click
        element.onclick = function (event) {
          parent._notificationButtonContext = this
          
          parent.prepareNotification(event.target, parent._config.status)
          parent.toggle()
        }
      })
    } else {
      this.prepareNotification(this._element, this._config.status)
      this.toggle()
    }
  }

  prepareNotification (elementTarget, status) {
    if (elementTarget instanceof Element || elementTarget instanceof HTMLDocument && status) {
      const elAttributeStatus = new AttributeHandler({
        element: elementTarget,
        attributeName: 'trv-status'
      }).getAttribute()
      const elAttributeNotificationTarget = new AttributeHandler({
        element: elementTarget,
        attributeName: 'trv-notification-target'
      }).getAttribute()
      this._isShown = BooleanParse(elAttributeStatus) || false
      this._notificationTargetName = elAttributeNotificationTarget
      this._elementNotificationButtonActive = elementTarget
    } else {
      this._isShown = status === 'show' ? false : typeof status === 'undefined' || status === 'hide' ? true : true
      this._notificationTargetName = elementTarget ? elementTarget : ''
    }

    this._elementNotificationTarget = window.$TravlrSelector(`[trv-notification-name=${this._notificationTargetName}]`)

    this.eventListener()
  }

  eventListener () {
    this._elementNotificationTarget.forEach(elementNotification => {
      // add event listener for active button
      new EventHandler({
        type: 'add',
        element: elementNotification,
        eventName: EventName.ACTIVE,
        action: (event) => {
          this._elementContext = event.target

          // before action
          if (typeof this._beforeAction === 'function') {
            new CallbackHandler({
              callback: this._beforeAction,
              params: this
            })
          }

          this.show()

          // after action
          if (typeof this._afterAction === 'function') {
            new CallbackHandler({
              callback: this._afterAction,
              params: this
            })
          }
        }
      })

      // add event listener for inactive button
      new EventHandler({
        type: 'add',
        element: elementNotification,
        eventName: EventName.INACTIVE,
        action: (event) => {
          this._elementContext = event.target

          // before action
          if (typeof this._beforeAction === 'function') {
            new CallbackHandler({
              callback: this._beforeAction,
              params: this
            })
          }

          this.hide()

          // after action
          if (typeof this._afterAction === 'function') {
            new CallbackHandler({
              callback: this._afterAction,
              params: this
            })
          }
        }
      })
    })
  }

  toggle () {
    this._isShown = !this._isShown

    if (this._isShown !== null) {
      // before action
      if (typeof this._beforeAction === 'function') {
        new CallbackHandler({
          callback: this._beforeAction,
          params: this
        })
      }

      if (!this._isShown) {
        this.hide()
      } else {
        this.show()
      }

      // after action
      if (typeof this._afterAction === 'function') {
        new CallbackHandler({
          callback: this._afterAction,
          params: this
        })
      }
    }
  }

  show () {
    this._isShown = true

    new AttributeHandler({
      element: this._elementNotificationButtonActive,
      attributeName: 'trv-status',
      attributeValue: this._isShown
    }).setAttribute()

    this._elementNotificationTarget.forEach(elementNotification => {
      new AttributeHandler({
        element: elementNotification,
        attributeName: 'trv-status',
        attributeValue: this._isShown
      }).setAttribute()
    })

    this.notificationToggle()

    if (this._autoclose) {
      setTimeout(() => {
        this.hide()
      }, this._interval)
    }

    // dismiss button
    this._elementNotificationButtonDismiss.forEach(elementDismiss => {
      this._notificationButtonDismissContext = elementDismiss
      this.dismiss(elementDismiss)
    })
  }

  hide () {
    this._isShown = false

    new AttributeHandler({
      element: this._elementNotificationButtonActive,
      attributeName: 'trv-status',
      attributeValue: this._isShown
    }).setAttribute()

    this._elementNotificationTarget.forEach(elementNotification => {
      new AttributeHandler({
        element: elementNotification,
        attributeName: 'trv-status',
        attributeValue: this._isShown
      }).setAttribute()
    })

    this.notificationToggle()
  }

  dismiss (elementTarget) {
    elementTarget.onclick = () => {
      const notificationTargetName = new AttributeHandler({
        element: elementTarget,
        attributeName: 'trv-notification-target'
      }).getAttribute()

      this._elementNotificationTarget = window.$TravlrSelector(`[trv-notification-name=${notificationTargetName}]`)

      this.hide()
    }
  }

  notificationToggle () {
    this._elementNotificationTarget.forEach((elementTarget) => {
      this._notificationTargetContext = elementTarget
      this._isShown ? elementTarget.classList.add(ClassName.ACTIVE) : elementTarget.classList.remove(ClassName.ACTIVE)
    })
  }
}

const NotificationInit = (config) => {
  new Notification(config)
}

export default NotificationInit