ExpandableTable.js
2.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/**
* --------------------------------------------
* 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() {
const $element = this._element
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