1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | const debounce = (func, wait) => {
|
7 | let timeout = 0
|
8 |
|
9 | return (...args) => {
|
10 | const later = () => {
|
11 | timeout = 0
|
12 | func(...args)
|
13 | }
|
14 |
|
15 | clearTimeout(timeout)
|
16 | timeout = setTimeout(later, wait)
|
17 | }
|
18 | }
|
19 |
|
20 | Object.assign($.fn.bootstrapTable.defaults, {
|
21 | mobileResponsive: false,
|
22 | minWidth: 562,
|
23 | minHeight: undefined,
|
24 | heightThreshold: 100,
|
25 | checkOnInit: true,
|
26 | columnsHidden: []
|
27 | })
|
28 |
|
29 | $.BootstrapTable = class extends $.BootstrapTable {
|
30 | init (...args) {
|
31 | super.init(...args)
|
32 |
|
33 | if (!this.options.mobileResponsive || !this.options.minWidth) {
|
34 | return
|
35 | }
|
36 |
|
37 | if (this.options.minWidth < 100 && this.options.resizable) {
|
38 | console.warn('The minWidth when the resizable extension is active should be greater or equal than 100')
|
39 | this.options.minWidth = 100
|
40 | }
|
41 |
|
42 | let old = {
|
43 | width: $(window).width(),
|
44 | height: $(window).height()
|
45 | }
|
46 |
|
47 | $(window).on('resize orientationchange', debounce(() => {
|
48 |
|
49 | const width = $(window).width()
|
50 | const height = $(window).height()
|
51 | const $activeElement = $(document.activeElement)
|
52 |
|
53 | if ($activeElement.length && ['INPUT', 'SELECT', 'TEXTAREA'].includes($activeElement.prop('nodeName'))) {
|
54 | return
|
55 | }
|
56 |
|
57 | if (
|
58 | Math.abs(old.height - height) > this.options.heightThreshold ||
|
59 | old.width !== width
|
60 | ) {
|
61 | this.changeView(width, height)
|
62 | old = {
|
63 | width,
|
64 | height
|
65 | }
|
66 | }
|
67 | }, 200))
|
68 |
|
69 | if (this.options.checkOnInit) {
|
70 | const width = $(window).width()
|
71 | const height = $(window).height()
|
72 |
|
73 | this.changeView(width, height)
|
74 | old = {
|
75 | width,
|
76 | height
|
77 | }
|
78 | }
|
79 | }
|
80 |
|
81 | conditionCardView () {
|
82 | this.changeTableView(false)
|
83 | this.showHideColumns(false)
|
84 | }
|
85 |
|
86 | conditionFullView () {
|
87 | this.changeTableView(true)
|
88 | this.showHideColumns(true)
|
89 | }
|
90 |
|
91 | changeTableView (cardViewState) {
|
92 | this.options.cardView = cardViewState
|
93 | this.toggleView()
|
94 | }
|
95 |
|
96 | showHideColumns (checked) {
|
97 | if (this.options.columnsHidden.length > 0) {
|
98 | this.columns.forEach(column => {
|
99 | if (this.options.columnsHidden.includes(column.field)) {
|
100 | if (column.visible !== checked) {
|
101 | this._toggleColumn(this.fieldsColumnsIndex[column.field], checked, true)
|
102 | }
|
103 | }
|
104 | })
|
105 | }
|
106 | }
|
107 |
|
108 | changeView (width, height) {
|
109 | if (this.options.minHeight) {
|
110 | if (width <= this.options.minWidth && height <= this.options.minHeight) {
|
111 | this.conditionCardView()
|
112 | } else if (width > this.options.minWidth && height > this.options.minHeight) {
|
113 | this.conditionFullView()
|
114 | }
|
115 | } else if (width <= this.options.minWidth) {
|
116 | this.conditionCardView()
|
117 | } else if (width > this.options.minWidth) {
|
118 | this.conditionFullView()
|
119 | }
|
120 |
|
121 | this.resetView()
|
122 | }
|
123 | }
|