lavkach3

1
/*! DataTables Bootstrap 5 integration
2
 * 2020 SpryMedia Ltd - datatables.net/license
3
 */
4

5
import jQuery from 'jquery';
6
import DataTable from 'datatables.net';
7

8
// Allow reassignment of the $ variable
9
let $ = jQuery;
10

11

12
/**
13
 * DataTables integration for Bootstrap 5. This requires Bootstrap 5 and
14
 * DataTables 1.10 or newer.
15
 *
16
 * This file sets the defaults and adds options to DataTables to style its
17
 * controls using Bootstrap. See https://datatables.net/manual/styling/bootstrap
18
 * for further information.
19
 */
20

21
/* Set the defaults for DataTables initialisation */
22
$.extend( true, DataTable.defaults, {
23
	dom:
24
		"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
25
		"<'row dt-row'<'col-sm-12'tr>>" +
26
		"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
27
	renderer: 'bootstrap'
28
} );
29

30

31
/* Default class modification */
32
$.extend( DataTable.ext.classes, {
33
	sWrapper:      "dataTables_wrapper dt-bootstrap5",
34
	sFilterInput:  "form-control form-control-sm",
35
	sLengthSelect: "form-select form-select-sm",
36
	sProcessing:   "dataTables_processing card",
37
	sPageButton:   "paginate_button page-item"
38
} );
39

40

41
/* Bootstrap paging button renderer */
42
DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
43
	var api     = new DataTable.Api( settings );
44
	var classes = settings.oClasses;
45
	var lang    = settings.oLanguage.oPaginate;
46
	var aria = settings.oLanguage.oAria.paginate || {};
47
	var btnDisplay, btnClass;
48

49
	var attach = function( container, buttons ) {
50
		var i, ien, node, button;
51
		var clickHandler = function ( e ) {
52
			e.preventDefault();
53
			if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) {
54
				api.page( e.data.action ).draw( 'page' );
55
			}
56
		};
57

58
		for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
59
			button = buttons[i];
60

61
			if ( Array.isArray( button ) ) {
62
				attach( container, button );
63
			}
64
			else {
65
				btnDisplay = '';
66
				btnClass = '';
67

68
				switch ( button ) {
69
					case 'ellipsis':
70
						btnDisplay = '&#x2026;';
71
						btnClass = 'disabled';
72
						break;
73

74
					case 'first':
75
						btnDisplay = lang.sFirst;
76
						btnClass = button + (page > 0 ?
77
							'' : ' disabled');
78
						break;
79

80
					case 'previous':
81
						btnDisplay = lang.sPrevious;
82
						btnClass = button + (page > 0 ?
83
							'' : ' disabled');
84
						break;
85

86
					case 'next':
87
						btnDisplay = lang.sNext;
88
						btnClass = button + (page < pages-1 ?
89
							'' : ' disabled');
90
						break;
91

92
					case 'last':
93
						btnDisplay = lang.sLast;
94
						btnClass = button + (page < pages-1 ?
95
							'' : ' disabled');
96
						break;
97

98
					default:
99
						btnDisplay = button + 1;
100
						btnClass = page === button ?
101
							'active' : '';
102
						break;
103
				}
104

105
				if ( btnDisplay ) {
106
					var disabled = btnClass.indexOf('disabled') !== -1;
107

108
					node = $('<li>', {
109
							'class': classes.sPageButton+' '+btnClass,
110
							'id': idx === 0 && typeof button === 'string' ?
111
								settings.sTableId +'_'+ button :
112
								null
113
						} )
114
						.append( $('<a>', {
115
								'href': disabled ? null : '#',
116
								'aria-controls': settings.sTableId,
117
								'aria-disabled': disabled ? 'true' : null,
118
								'aria-label': aria[ button ],
119
								'role': 'link',
120
								'aria-current': btnClass === 'active' ? 'page' : null,
121
								'data-dt-idx': button,
122
								'tabindex': disabled ? -1 : settings.iTabIndex,
123
								'class': 'page-link'
124
							} )
125
							.html( btnDisplay )
126
						)
127
						.appendTo( container );
128

129
					settings.oApi._fnBindAction(
130
						node, {action: button}, clickHandler
131
					);
132
				}
133
			}
134
		}
135
	};
136

137
	var hostEl = $(host);
138
	// IE9 throws an 'unknown error' if document.activeElement is used
139
	// inside an iframe or frame. 
140
	var activeEl;
141

142
	try {
143
		// Because this approach is destroying and recreating the paging
144
		// elements, focus is lost on the select button which is bad for
145
		// accessibility. So we want to restore focus once the draw has
146
		// completed
147
		activeEl = hostEl.find(document.activeElement).data('dt-idx');
148
	}
149
	catch (e) {}
150

151
	var paginationEl = hostEl.children('ul.pagination');
152

153
	if (paginationEl.length) {
154
		paginationEl.empty();
155
	}
156
	else {
157
		paginationEl = hostEl.html('<ul/>').children('ul').addClass('pagination');
158
	}
159

160
	attach(
161
		paginationEl,
162
		buttons
163
	);
164

165
	if ( activeEl !== undefined ) {
166
		hostEl.find('[data-dt-idx='+activeEl+']').trigger('focus');
167
	}
168
};
169

170

171
export default DataTable;
172