| 1 |
export default function () { |
| 2 |
let masonryGrids = document.querySelectorAll(".betterdocs-category-grid-inner-wrapper.masonry"); |
| 3 |
|
| 4 |
if ( masonryGrids?.length == 0 ) { |
| 5 |
let masonryItems = document.querySelectorAll('.betterdocs-single-category-wrapper'); |
| 6 |
(masonryItems || []).forEach((item) => { |
| 7 |
item.removeAttribute("style"); |
| 8 |
}); |
| 9 |
|
| 10 |
return; |
| 11 |
} |
| 12 |
|
| 13 |
var mobileDevice = window.matchMedia("(max-width: 767px)"); |
| 14 |
var tabDevice = window.matchMedia("(max-width: 1024px)"); |
| 15 |
|
| 16 |
masonryGrids.forEach((masonryGrid) => { |
| 17 |
let columnPerGrid = 0; |
| 18 |
let column_space = 0; |
| 19 |
|
| 20 |
switch (true) { |
| 21 |
case mobileDevice.matches: |
| 22 |
columnPerGrid = masonryGrid.getAttribute("data-column_mobile"); |
| 23 |
column_space = masonryGrid.getAttribute("data-column_space_mobile"); |
| 24 |
break; |
| 25 |
case tabDevice.matches: |
| 26 |
columnPerGrid = masonryGrid.getAttribute("data-column_tab"); |
| 27 |
column_space = masonryGrid.getAttribute("data-column_space_tab"); |
| 28 |
break; |
| 29 |
default: |
| 30 |
columnPerGrid = masonryGrid.getAttribute("data-column_desktop"); |
| 31 |
column_space = masonryGrid.getAttribute("data-column_space_desktop"); |
| 32 |
break; |
| 33 |
} |
| 34 |
|
| 35 |
column_space = parseInt(column_space); |
| 36 |
columnPerGrid = parseInt(columnPerGrid); |
| 37 |
|
| 38 |
let masonryItems = masonryGrid.querySelectorAll(".betterdocs-single-category-wrapper"); |
| 39 |
let total_margin = (columnPerGrid - 1) * column_space; |
| 40 |
|
| 41 |
if (masonryGrid) { |
| 42 |
masonryItems.forEach((item) => { |
| 43 |
item.style.width = `calc((100% - ${total_margin}px) / ${columnPerGrid})`; |
| 44 |
}); |
| 45 |
|
| 46 |
new Masonry(masonryGrid, { |
| 47 |
itemSelector: ".betterdocs-single-category-wrapper", |
| 48 |
percentPosition: true, |
| 49 |
gutter: column_space, |
| 50 |
}); |
| 51 |
} |
| 52 |
}); |
| 53 |
} |
| 54 |
|
