| 1 |
/** |
| 2 |
* Photonic Masonry Layout |
| 3 |
* The Masonry layout is primarily controlled using CSS columns. The JS component is to facilitate responsive behaviour and breakpoints. |
| 4 |
* |
| 5 |
* License: GPL v3.0 |
| 6 |
*/ |
| 7 |
import {Core} from "../Core"; |
| 8 |
import * as Util from "../Util"; |
| 9 |
|
| 10 |
export const Masonry = (resized, jsLoaded, selector) => { |
| 11 |
if (console !== undefined && Photonic_JS.debug_on !== '0' && Photonic_JS.debug_on !== '') console.time('Masonry'); |
| 12 |
|
| 13 |
let selection = document.querySelectorAll(selector); |
| 14 |
if (selector == null || selection.length === 0) { |
| 15 |
selection = document.querySelectorAll('.photonic-masonry-layout'); |
| 16 |
} |
| 17 |
|
| 18 |
if (!resized && selection.length > 0) { |
| 19 |
Core.showSpinner(); |
| 20 |
} |
| 21 |
|
| 22 |
let minWidth = (isNaN(Photonic_JS.masonry_min_width) || parseInt(Photonic_JS.masonry_min_width) <= 0) ? 200 : Photonic_JS.masonry_min_width; |
| 23 |
minWidth = parseInt(minWidth); |
| 24 |
|
| 25 |
selection.forEach((grid) => { |
| 26 |
let columns = grid.getAttribute('data-photonic-gallery-columns'); |
| 27 |
columns = (isNaN(parseInt(columns)) || parseInt(columns) <= 0) ? 3 : parseInt(columns); |
| 28 |
|
| 29 |
const buildLayout = (grid, fadeIn) => { |
| 30 |
const viewportWidth = Math.floor(grid.getBoundingClientRect().width), |
| 31 |
idealColumns = (viewportWidth / columns) > minWidth ? columns : Math.floor(viewportWidth / minWidth); |
| 32 |
|
| 33 |
if (idealColumns !== undefined && idealColumns !== null) { |
| 34 |
grid.style.columnCount = idealColumns.toString(); |
| 35 |
} |
| 36 |
|
| 37 |
if (fadeIn) { |
| 38 |
Array.from(grid.getElementsByTagName('img')).forEach(img => { |
| 39 |
Util.fadeIn(img); |
| 40 |
}); |
| 41 |
} |
| 42 |
|
| 43 |
Core.showSlideupTitle(); |
| 44 |
if (!resized && !jsLoaded) { |
| 45 |
Core.hideLoading(); |
| 46 |
} |
| 47 |
}; |
| 48 |
|
| 49 |
if (grid.classList.contains('sizes-present')) { |
| 50 |
Core.watchForImages(grid); |
| 51 |
buildLayout(grid, false); |
| 52 |
} |
| 53 |
else { |
| 54 |
Core.waitForImages(grid).then(() => { |
| 55 |
buildLayout(grid, true); |
| 56 |
}); |
| 57 |
} |
| 58 |
}); |
| 59 |
if (console !== undefined && Photonic_JS.debug_on !== '0' && Photonic_JS.debug_on !== '') console.timeEnd('Masonry'); |
| 60 |
}; |
| 61 |
|
