22

✏️ Editing: ExpandableTable.js

/**
 * --------------------------------------------
 * AdminLTE ExpandableTable.js
 * License MIT
 * --------------------------------------------
 */

import $ from 'jquery'

/**
  * Constants
  * ====================================================
  */

const NAME = 'ExpandableTable'
const DATA_KEY = 'lte.expandableTable'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]

const EVENT_EXPANDED = `expanded${EVENT_KEY}`
const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`

const SELECTOR_TABLE = '.expandable-table'
const SELECTOR_EXPANDABLE_BODY = '.expandable-body'
const SELECTOR_DATA_TOGGLE = '[data-widget="expandable-table"]'
const SELECTOR_ARIA_ATTR = 'aria-expanded'

/**
  * Class Definition
  * ====================================================
  */
class ExpandableTable {
  constructor(element, options) {
    this._options = options
    this._element = element
  }

// Public

init() {
    $(SELECTOR_DATA_TOGGLE).each((_, $header) => {
      const $type = $($header).attr(SELECTOR_ARIA_ATTR)
      const $body = $($header).next(SELECTOR_EXPANDABLE_BODY).children().first().children()
      if ($type === 'true') {
        $body.show()
      } else if ($type === 'false') {
        $body.hide()
        $body.parent().parent().addClass('d-none')
      }
    })
  }

toggleRow() {
    let $element = this._element

if ($element[0].nodeName !== 'TR') {
      $element = $element.parent()
      if ($element[0].nodeName !== 'TR') {
        $element = $element.parent()
      }
    }

const time = 500
    const $type = $element.attr(SELECTOR_ARIA_ATTR)
    const $body = $element.next(SELECTOR_EXPANDABLE_BODY).children().first().children()

$body.stop()
    if ($type === 'true') {
      $body.slideUp(time, () => {
        $element.next(SELECTOR_EXPANDABLE_BODY).addClass('d-none')
      })
      $element.attr(SELECTOR_ARIA_ATTR, 'false')
      $element.trigger($.Event(EVENT_COLLAPSED))
    } else if ($type === 'false') {
      $element.next(SELECTOR_EXPANDABLE_BODY).removeClass('d-none')
      $body.slideDown(time)
      $element.attr(SELECTOR_ARIA_ATTR, 'true')
      $element.trigger($.Event(EVENT_EXPANDED))
    }
  }

// Static

static _jQueryInterface(operation) {
    return this.each(function () {
      let data = $(this).data(DATA_KEY)

if (!data) {
        data = new ExpandableTable($(this))
        $(this).data(DATA_KEY, data)
      }

if (typeof operation === 'string' && /init|toggleRow/.test(operation)) {
        data[operation]()
      }
    })
  }
}

/**
  * Data API
  * ====================================================
  */
$(SELECTOR_TABLE).ready(function () {
  ExpandableTable._jQueryInterface.call($(this), 'init')
})

$(document).on('click', SELECTOR_DATA_TOGGLE, function () {
  ExpandableTable._jQueryInterface.call($(this), 'toggleRow')
})

/**
  * jQuery API
  * ====================================================
  */

$.fn[NAME] = ExpandableTable._jQueryInterface
$.fn[NAME].Constructor = ExpandableTable
$.fn[NAME].noConflict = function () {
  $.fn[NAME] = JQUERY_NO_CONFLICT
  return ExpandableTable._jQueryInterface
}

export default ExpandableTable

MR SKB