@travlrcom/uikit/src/js/button.js

TRAVLR UiKit

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

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

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

const Selector = {
  TRV_TOGGLE: `[trv-toggle="${NAME}"]`,
  TRV_BUTTON: `[trv-${NAME}^="#"]`,
  TRV_STATUS: `[trv-status]`
}

const ClassName = {
  ACTIVE: 'active'
}

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

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

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

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

    this._config = config
    this._element = window.$TravlrSelector(this._config.element)
    this._elementContext = ''
    this._isActive = false
    this._beforeAction = config.beforeAction
    this._afterAction = config.afterAction

    if (this._element.length === 0) {
      this._element = window.$TravlrSelector(Selector.TRV_BUTTON)
    }

    this.init()
  }

  init () {
    if (this._element.length > 0) {
      this._element.forEach(element => {
        this._elementContext = element

        const elAttributeStatus = new AttributeHandler({
          element: element,
          attributeName: 'trv-status'
        }).getAttribute() || null
        let parent = this

        // check and set value of attribute if has not attribute
        if (elAttributeStatus === null) {
          new AttributeHandler({
            element: element,
            attributeName: 'trv-status',
            attributeValue: false
          }).setAttribute()
        }

        // add event listener for active button
        new EventHandler({
          type: 'add',
          element: element,
          eventName: Event.ACTIVE,
          action: (event) => {
            parent._elementContext = event.target

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

            this.active(element)

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

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

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

            this.inActive(element)

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

        // trigger when click
        element.onclick = function (event) {
          parent._elementContext = this

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

          parent.toggle(event.target)

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

  toggle (elementTarget) {
    const elAttributeStatus = new AttributeHandler({
      element: elementTarget,
      attributeName: 'trv-status'
    }).getAttribute()

    this._isActive = BooleanParse(elAttributeStatus) || false

    this._isActive ? this.inActive(elementTarget) : this.active(elementTarget)
  }

  active (elementTarget) {
    this._isActive = true

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

    elementTarget.classList.add(ClassName.ACTIVE)
  }

  inActive (elementTarget) {
    this._isActive = false

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

    elementTarget.classList.remove(ClassName.ACTIVE)
  }
}

const ButtonInit = (config) => {
  return new Button(config)
}

export default ButtonInit