@travlrcom/uikit/src/js/dropdown.js

TRAVLR UiKit

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

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

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

const Selector = {
  TRV_TOGGLE: `[trv-toggle="${NAME}"]`,
  TRV_DROPDOWN_BUTTON: `[trv-${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'
  }
]

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

class Dropdown {
  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_DROPDOWN_BUTTON)
    }

    this.init()
  }

  init () {
    if (this._element.length > 0) {
      this.eventListener()
      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()
        }

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

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

          parent.toggle(this)

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

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

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

          this.active(element)

          // 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: element,
        eventName: EventName.INACTIVE,
        action: (event) => {
          this._elementContext = event.target

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

          this.inActive(element)

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

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

    this._isActive = BooleanParse(attributeStatus) || 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 DropdownInit = (config) => {
  return new Dropdown(config)
}

export default DropdownInit