script.js
2.28 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
/**
* Responsive design
*/
function learndash_course_grid_init_grid_responsive_design() {
const wrappers = document.querySelectorAll( '.learndash-course-grid[data-skin="grid"]' );
wrappers.forEach( function( wrapper ) {
const items_wrapper = wrapper.querySelector( '.items-wrapper.grid' );
if ( ! items_wrapper ) {
return;
}
const first_item = items_wrapper.firstElementChild;
if ( ! first_item ) {
return;
}
// Set columns
const min_width = wrapper.dataset.min_column_width;
let columns = wrapper.dataset.columns;
columns = parseInt( columns );
let new_columns = wrapper.dataset.new_columns || columns;
new_columns = parseInt( new_columns );
const wrapper_width = wrapper.offsetWidth;
let upper_columns = new_columns + 1;
upper_columns = upper_columns > columns ? columns : upper_columns;
const min_item_width = wrapper_width / upper_columns;
new_columns = Math.floor( wrapper_width / min_width );
let item_width = first_item.offsetWidth;
if ( item_width < min_width ) {
new_columns = new_columns > columns ? columns : new_columns;
new_columns = new_columns < 1 ? 1 : new_columns;
wrapper.dataset.new_columns = new_columns;
items_wrapper.style.gridTemplateColumns = 'repeat( ' + new_columns + ', minmax( 0, 1fr ) )';
} else if ( min_item_width > min_width ) {
new_columns = new_columns > columns ? columns : new_columns;
new_columns = new_columns < 1 ? 1 : new_columns;
wrapper.dataset.new_columns = new_columns;
items_wrapper.style.gridTemplateColumns = 'repeat( ' + new_columns + ', minmax( 0, 1fr ) )';
}
const items = items_wrapper.querySelectorAll( '.item' );
items.forEach( function( item ) {
// Display item
item.style.visibility = 'visible';
} );
} );
}
( function() {
window.addEventListener( 'resize', function() {
learndash_course_grid_init_grid_responsive_design();
} );
window.addEventListener( 'load', function() {
learndash_course_grid_init_grid_responsive_design();
} );
} )();