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